/* ==========================================================================
   FDC.CSS — Fleurs du Coeur brand stylesheet
   Compiled from design tokens, layout system, section templates, components.
   Loads after generate-style + GP inline block, so overrides GP without !important
   in most cases. See the GP OVERRIDES section at the bottom for explicit fixes.

   DO NOT MINIFY — this file is the source of truth.
   Edit here; no build step required.
   ========================================================================== */


/* ── DESIGN TOKENS ──────────────────────────────────────────────────────────
   All brand colours, typography scales, and spacing ramps.
   Reference these via var(--fdc-*) throughout this file and in templates.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Colours */
    --fdc-ink:        #564c47;
    --fdc-cream:      #fdfaf7;
    --fdc-sage:       #64906b;
    --fdc-muted:      #9d8c80;
    --fdc-border:     #ede7e2;
    --fdc-rose:       #7a3a38;
    --fdc-ochre:      #7a5a18;
    --fdc-blue:       #2a5a7a;
    --fdc-dark:       #564c47;

    /* Sage Mist — Katie's scallop default, lighter than Pale Sage */
    --fdc-sage-mist:  #b8ccba;

    /* Tint backgrounds (pale washes for section bg) */
    --fdc-sage-tint:  #e8ede9;
    --fdc-rose-tint:  #ede6e5;
    --fdc-ochre-tint: #f5f0e0;
    --fdc-blue-tint:  #e8eef5;

    /* Globals */
    --fdc-radius:     2px;
    --fdc-transition: 0.2s ease;

    /* Font stacks */
    --fdc-font-serif:   Cormorant Garamond, serif;
    --fdc-font-heading: Josefin Sans, sans-serif;
    --fdc-font-label:   Jost, sans-serif;

    /* Vertical padding ramp */
    --fdc-pad-l:    clamp(4rem, 8vw, 7rem);
    --fdc-pad-m:    clamp(2rem, 4vw, 3.5rem);
    --fdc-pad-s:    clamp(1rem, 2vw, 1.5rem);
    --fdc-pad-full: clamp(4rem, 8vw, 7rem);
    --fdc-pad-half: clamp(2rem, 4vw, 3.5rem);

    /* Horizontal padding ramp */
    --fdc-pad-side-l: clamp(3rem, 6vw, 5rem);
    --fdc-pad-side-m: clamp(1.5rem, 4vw, 3rem);
    --fdc-pad-side-s: clamp(0.75rem, 2vw, 1.5rem);
    --fdc-pad-sides:  var(--fdc-pad-side-m);

    /* Type scale
       Body is the baseline; headings climb incrementally from there.
       p / body:  0.84rem
       H6: 0.95rem  H5: 1.05rem  H4: 1.2rem
       H3: 1.35→1.6  H2: 1.5→2.25  H1: 2→3.5  */
    --fdc-fs-body:  1.2rem;            /* body base */
    --fdc-fs-small: 0.75rem;
    --fdc-fs-h1:    clamp(2rem, 5vw, 3.5rem);
    --fdc-fs-h2:    clamp(1.5rem, 3.5vw, 2.25rem);
    --fdc-fs-h3:    clamp(1.35rem, 2.5vw, 1.6rem);
    --fdc-fs-nav:   0.75rem;
    --fdc-fs-label: 0.72rem;           /* overline/label — smaller than body */

    /* ACF text-size override tokens — H1…H6 heading scale.
       Used by fdc_text_style() when an editor picks a size override.
       Empty = inherit from element (the default and recommended). */
    --fdc-size-h1: var(--fdc-fs-h1);
    --fdc-size-h2: var(--fdc-fs-h2);
    --fdc-size-h3: var(--fdc-fs-h3);
    --fdc-size-h4: 1.2rem;
    --fdc-size-h5: 1.05rem;            /* one step above body */
    --fdc-size-h6: 0.95rem;            /* slightly above body */
}


/* ── BASE ───────────────────────────────────────────────────────────────────
   Foundational type and link rules. GP Typography Customizer adds its own
   body rule; the GP-Overrides section at the bottom ensures FDC wins.
   ─────────────────────────────────────────────────────────────────────────── */

body {
    background-color: #fdfaf7;
    color: #564c47;
    font-family: "Cormorant Garamond", serif;
    font-size: var(--fdc-fs-body);
    font-weight: 300;
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
}

a {
    color: #564c47;
    text-decoration: none;
}

a:hover { color: #64906b; }

p { margin-bottom: 1.2em; }


/* ── PAGE BUILDER TEMPLATE ──────────────────────────────────────────────────
   Applied to pages using the fdc-builder page template.
   Strips GP's container padding so sections run full-bleed.
   ─────────────────────────────────────────────────────────────────────────── */

.page .entry-header { display: none; }

.page-template-page-fdc-builder .site-content,
.page-template-page-fdc-builder .site-content .grid-container {
    padding: 0;
    max-width: none;
}

.page-template-page-fdc-builder .inside-article { padding: 0; }
.page-template-page-fdc-builder #page          { max-width: 100%; }

.fdc-builder-primary { padding: 0; width: 100%; }
.fdc-builder-primary .site-main { margin: 0; max-width: none; padding: 0; }


/* ── SECTION LAYER ──────────────────────────────────────────────────────────
   .fdc-section is the outermost wrapper for every page section.
   Spacing classes: pt/pb × none/small/half/full
   Border classes: top / bottom / both / left
   Colour classes: white / cream / sage / rose / ochre / blue / dark
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-section { position: relative; }

/* Vertical padding */
.fdc-s--pt-none  { padding-top: 0; }
.fdc-s--pt-small { padding-top: var(--fdc-pad-s); }
.fdc-s--pt-half  { padding-top: var(--fdc-pad-half); }
.fdc-s--pt-full  { padding-top: var(--fdc-pad-full); }

.fdc-s--pb-none  { padding-bottom: 0; }
.fdc-s--pb-small { padding-bottom: var(--fdc-pad-s); }
.fdc-s--pb-half  { padding-bottom: var(--fdc-pad-half); }
.fdc-s--pb-full  { padding-bottom: var(--fdc-pad-full); }

/* Section borders */
.fdc-s-border-top    { border-top: 1px solid var(--fdc-border); }
.fdc-s-border-bottom { border-bottom: 1px solid var(--fdc-border); }
.fdc-s-border-both   { border-top: 1px solid var(--fdc-border); border-bottom: 1px solid var(--fdc-border); }
.fdc-s-border-left   { border-left: 4px solid var(--fdc-border); }

/* Background colours — full palette including Sage Mist and Warm Grey */
.fdc-white      { background-color: #fdfaf7; }
.fdc-cream      { background-color: #f0ebe4; }
.fdc-sage-mist  { background-color: #b8ccba; }
.fdc-sage       { background-color: var(--fdc-sage-tint); }
.fdc-rose       { background-color: var(--fdc-rose-tint); }
.fdc-ochre      { background-color: var(--fdc-ochre-tint); }
.fdc-blue       { background-color: var(--fdc-blue-tint); }
.fdc-muted      { background-color: #9a8f85; color: #fdfaf7; }

.fdc-dark {
    background-color: var(--fdc-dark);
    color: var(--fdc-cream);
}
.fdc-dark h1, .fdc-dark h2, .fdc-dark h3, .fdc-dark h4 { color: var(--fdc-cream); }
.fdc-dark a        { color: var(--fdc-cream); }
.fdc-dark a:hover  { color: var(--fdc-sage); }

/* Foreground colour overrides */
.fdc-fg-ink,   .fdc-fg-ink h1,   .fdc-fg-ink h2,   .fdc-fg-ink h3,   .fdc-fg-ink p   { color: var(--fdc-ink); }
.fdc-fg-cream, .fdc-fg-cream h1, .fdc-fg-cream h2, .fdc-fg-cream h3, .fdc-fg-cream p { color: var(--fdc-cream); }
.fdc-fg-sage,  .fdc-fg-sage h1,  .fdc-fg-sage h2,  .fdc-fg-sage h3,  .fdc-fg-sage p  { color: var(--fdc-sage); }
.fdc-fg-muted, .fdc-fg-muted h1, .fdc-fg-muted h2, .fdc-fg-muted h3, .fdc-fg-muted p { color: var(--fdc-muted); }
.fdc-fg-rose,  .fdc-fg-rose h1,  .fdc-fg-rose h2,  .fdc-fg-rose h3,  .fdc-fg-rose p  { color: var(--fdc-rose); }
.fdc-fg-ochre, .fdc-fg-ochre h1, .fdc-fg-ochre h2, .fdc-fg-ochre h3, .fdc-fg-ochre p { color: var(--fdc-ochre); }
.fdc-fg-blue,  .fdc-fg-blue h1,  .fdc-fg-blue h2,  .fdc-fg-blue h3,  .fdc-fg-blue p  { color: var(--fdc-blue); }

/* Background image support */
.fdc-section--has-bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Overlay pseudo-elements for bg-image sections */
.fdc-section--overlay-light::before,
.fdc-section--overlay-medium::before,
.fdc-section--overlay-dark::before {
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.fdc-section--overlay-light::before  { background: rgba(0,0,0,.25); }
.fdc-section--overlay-medium::before { background: rgba(0,0,0,.5); }
.fdc-section--overlay-dark::before   { background: rgba(0,0,0,.72); }

/* Raise container and gutters above overlay */
.fdc-section--has-bg-image > .fdc-gutter-left,
.fdc-section--has-bg-image > .fdc-gutter-right,
.fdc-section--has-bg-image > .fdc-container {
    position: relative;
    z-index: 2;
}


/* ── CONTAINER LAYER ────────────────────────────────────────────────────────
   .fdc-container sits inside .fdc-section and provides horizontal padding.
   Width modifiers: xs / s / m / l / xl / full
   Position modifiers: center / left / left-s|m|l / right / right-s|m|l
   Padding modifiers: pt/pb × none/small/half/full
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-container {
    box-sizing: border-box;
    padding-left: var(--fdc-pad-sides);
    padding-right: var(--fdc-pad-sides);
    position: relative;
    width: 100%;
    z-index: 1; /* creates stacking context so children z-indices are local */
}

.fdc-container--tinted      { border-radius: var(--fdc-radius); }
.fdc-container--has-bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Max-width */
.fdc-c--w-xs   { max-width: 480px; }
.fdc-c--w-s    { max-width: 680px; }
.fdc-c--w-m    { max-width: 960px; }
.fdc-c--w-l    { max-width: 1200px; }
.fdc-c--w-xl   { max-width: 1400px; }
.fdc-c--w-full { max-width: none; }

/* Horizontal alignment */
.fdc-c--center  { margin-left: auto; margin-right: auto; }
.fdc-c--left    { margin-left: 0; margin-right: auto; }
.fdc-c--left-s  { margin-left: var(--fdc-pad-side-s); margin-right: auto; }
.fdc-c--left-m  { margin-left: var(--fdc-pad-side-m); margin-right: auto; }
.fdc-c--left-l  { margin-left: var(--fdc-pad-side-l); margin-right: auto; }
.fdc-c--right   { margin-left: auto; margin-right: 0; }
.fdc-c--right-s { margin-left: auto; margin-right: var(--fdc-pad-side-s); }
.fdc-c--right-m { margin-left: auto; margin-right: var(--fdc-pad-side-m); }
.fdc-c--right-l { margin-left: auto; margin-right: var(--fdc-pad-side-l); }

/* Vertical padding */
.fdc-c--pt-none  { padding-top: 0; }
.fdc-c--pt-small { padding-top: var(--fdc-pad-s); }
.fdc-c--pt-half  { padding-top: var(--fdc-pad-half); }
.fdc-c--pt-full  { padding-top: var(--fdc-pad-full); }

.fdc-c--pb-none  { padding-bottom: 0; }
.fdc-c--pb-small { padding-bottom: var(--fdc-pad-s); }
.fdc-c--pb-half  { padding-bottom: var(--fdc-pad-half); }
.fdc-c--pb-full  { padding-bottom: var(--fdc-pad-full); }

/* Container border utilities */
.fdc-border-top    { border-top: 1px solid var(--fdc-border); }
.fdc-border-bottom { border-bottom: 1px solid var(--fdc-border); }
.fdc-border-both   { border-top: 1px solid var(--fdc-border); border-bottom: 1px solid var(--fdc-border); }


/* ── BLOCK LAYER ────────────────────────────────────────────────────────────
   .fdc-block is the innermost content wrapper.
   Width: full / 3-4 / 2-3 / 1-2 / 1-3 / 1-4
   Alignment: left / center / right
   Padding: pt/pr/pb/pl × none/small/half/full
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-block {
    box-sizing: border-box;
    position: relative; /* participates in stacking context */
    z-index: 4;         /* above scallops (3) so text is always readable */
}

/* Width */
.fdc-b--full { width: 100%; }
.fdc-b--3-4  { width: 75%; }
.fdc-b--2-3  { width: 66.667%; }
.fdc-b--1-2  { width: 50%; }
.fdc-b--1-3  { width: 33.333%; }
.fdc-b--1-4  { width: 25%; }

/* Horizontal alignment */
.fdc-b--left   { margin-left: 0; margin-right: auto; }
.fdc-b--center { margin-left: auto; margin-right: auto; }
.fdc-b--right  { margin-left: auto; margin-right: 0; }

/* Vertical padding */
.fdc-b--pt-none  { padding-top: 0; }
.fdc-b--pt-small { padding-top: var(--fdc-pad-s); }
.fdc-b--pt-half  { padding-top: var(--fdc-pad-half); }
.fdc-b--pt-full  { padding-top: var(--fdc-pad-full); }

.fdc-b--pr-none  { padding-right: 0; }
.fdc-b--pr-small { padding-right: var(--fdc-pad-s); }
.fdc-b--pr-half  { padding-right: var(--fdc-pad-half); }
.fdc-b--pr-full  { padding-right: var(--fdc-pad-full); }

.fdc-b--pb-none  { padding-bottom: 0; }
.fdc-b--pb-small { padding-bottom: var(--fdc-pad-s); }
.fdc-b--pb-half  { padding-bottom: var(--fdc-pad-half); }
.fdc-b--pb-full  { padding-bottom: var(--fdc-pad-full); }

.fdc-b--pl-none  { padding-left: 0; }
.fdc-b--pl-small { padding-left: var(--fdc-pad-s); }
.fdc-b--pl-half  { padding-left: var(--fdc-pad-half); }
.fdc-b--pl-full  { padding-left: var(--fdc-pad-full); }

@media (max-width: 767.98px) {
    .fdc-b--3-4,
    .fdc-b--2-3,
    .fdc-b--1-2,
    .fdc-b--1-3,
    .fdc-b--1-4 { width: 100%; }

    .fdc-b--left,
    .fdc-b--center,
    .fdc-b--right { margin-left: 0; margin-right: 0; }
}


/* ── GUTTERS ────────────────────────────────────────────────────────────────
   Decorative botanical illustrations that float in the margins.
   Positioned absolute relative to .fdc-section; hidden below 1200px.
   Size and offset are controlled via CSS custom properties set inline by
   fdc-helpers.php based on ACF gutter field values.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-gutter-left,
.fdc-gutter-right {
    --gutter-size:   clamp(180px, 22vw, 360px);
    --gutter-offset: 0px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--gutter-size);
    z-index: 2; /* behind scallops (3) and block content (4) */
}

.fdc-gutter-left img,
.fdc-gutter-right img {
    display: block;
    height: auto;
    width: 100%;
}

/* Hide broken/empty image elements */
.fdc-gutter-left img:not([src]),
.fdc-gutter-right img:not([src]),
.fdc-gutter-left img[src=""],
.fdc-gutter-right img[src=""] { display: none; }

.fdc-gutter-left  { left:  calc(var(--gutter-offset) * -1); }
.fdc-gutter-right { right: calc(var(--gutter-offset) * -1); }

@media (max-width: 1199.98px) {
    .fdc-gutter-left,
    .fdc-gutter-right { display: none; }
}


/* ── BLOCK COLUMNS ROW ──────────────────────────────────────────────────────
   Used by layouts that render a row of content columns.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-blocks-row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
}

.fdc-block-col {
    box-sizing: border-box;
    min-width: 0;
}
.fdc-block-col--tinted { border-radius: 2px; }

.fdc-block-col__image {
    margin-bottom: 1rem;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.fdc-block-col__image img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.fdc-block-col__cta { margin-top: 1.5rem; }

.fdc-prose > *:last-child { margin-bottom: 0; }

.fdc-card__link {
    color: var(--fdc-sage);
    font-family: var(--fdc-font-label);
    font-size: .84rem;
    font-weight: 200;
    letter-spacing: .12em;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: .3em;
}

@media (max-width: 767.98px) {
    .fdc-blocks-row { flex-direction: column; }
    .fdc-block-col  { flex: none !important; width: 100% !important; }
}


/* ── BUTTONS ────────────────────────────────────────────────────────────────
   FDC button system: four variants × three sizes.
   Variants: base / primary / secondary / primary-light / secondary-light
   Sizes: --s / --m (default) / --l
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-btn,
.fdc-btn--primary,
.fdc-btn--secondary,
.fdc-btn--primary-light,
.fdc-btn--secondary-light {
    border-radius: 0;
    display: inline-block;
    font-family: var(--fdc-font-label);
    font-size: .875rem;
    font-weight: 200;
    letter-spacing: .16em;
    padding: .75rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.fdc-btn {
    background-color: var(--fdc-dark);
    border: 1px solid var(--fdc-dark);
    color: var(--fdc-cream);
}
.fdc-btn:hover {
    background-color: transparent;
    border-color: var(--fdc-dark);
    color: var(--fdc-dark);
}

/* Size modifiers */
.fdc-btn--s { font-size: .75rem;  padding: .5rem 1.5rem; }
.fdc-btn--m { font-size: .875rem; padding: .75rem 2rem; }
.fdc-btn--l { font-size: 1rem;    padding: 1rem 2.75rem; }

/* Style variants — driven by ACF _style field.
   --btn-colour is set inline by fdc_btn() from the ACF _colour field.
   Fallback is --fdc-dark so unstyled buttons remain usable. */
.fdc-btn--filled {
    background-color: var(--btn-colour, var(--fdc-dark));
    border: 1px solid var(--btn-colour, var(--fdc-dark));
    color: var(--fdc-cream);
}
.fdc-btn--filled:hover {
    background-color: transparent;
    border-color: var(--btn-colour, var(--fdc-dark));
    color: var(--btn-colour, var(--fdc-dark));
}
.fdc-btn--outline {
    background-color: transparent;
    border: 1px solid var(--btn-colour, var(--fdc-dark));
    color: var(--btn-colour, var(--fdc-dark));
}
.fdc-btn--outline:hover {
    background-color: var(--btn-colour, var(--fdc-dark));
    color: var(--fdc-cream);
}
.fdc-btn--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--btn-colour, var(--fdc-dark));
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fdc-btn--link:hover { text-decoration: none; }

/* Legacy variants */
.fdc-btn--primary {
    background-color: #564c47;
    border: 1px solid #564c47;
    color: #fdfaf7;
}
.fdc-btn--primary:hover {
    background-color: transparent;
    border-color: #564c47;
    color: #564c47;
}

.fdc-btn--secondary {
    background-color: transparent;
    border: 1px solid #564c47;
    color: #564c47;
}
.fdc-btn--secondary:hover {
    background-color: #564c47;
    color: #fdfaf7;
}

.fdc-btn--primary-light {
    background-color: #fdfaf7;
    border: 1px solid #fdfaf7;
    color: #564c47;
}
.fdc-btn--primary-light:hover {
    background-color: transparent;
    border-color: #fdfaf7;
    color: #fdfaf7;
}

.fdc-btn--secondary-light {
    background-color: transparent;
    border: 1px solid #fdfaf7;
    color: #fdfaf7;
}
.fdc-btn--secondary-light:hover {
    background-color: #fdfaf7;
    color: #564c47;
}

/* Button group — wraps one or more buttons.
   Alignment: --left (default) / --center / --right.
   Set via the button_align ACF field on layouts that have buttons. */
.fdc-btn-group {
    column-gap: 1rem;
    row-gap: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.fdc-btn-group--left   { justify-content: flex-start; }
.fdc-btn-group--center { justify-content: center; }
.fdc-btn-group--right  { justify-content: flex-end; }


/* ── FOOTER COMPONENT ───────────────────────────────────────────────────────
   Used only by the fdc-footer.php partial (not GP's site-footer).
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-footer {
    background-color: #564c47;
    border-top: 1px solid #fdfaf7;
    color: #fdfaf7;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}
.fdc-footer a {
    color: #fdfaf7;
    font-family: "Jost", sans-serif;
    font-size: .72rem;
    font-weight: 200;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
}
.fdc-footer a:hover { color: #64906b; }

@media (max-width: 767.98px) {
    .fdc-footer .fdc-grid-3 > div { text-align: center; }
}


/* ── SECTION TEMPLATE HELPERS ───────────────────────────────────────────────
   Padding defaults for named section types. These are the classes written
   by older templates before the ACF padding controls were added.
   Kept for backwards compatibility.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-hero       { padding: clamp(4rem, 10vw, 8rem) 0; position: relative; text-align: center; }
.fdc-hero-split { padding: clamp(3rem, 7vw, 6rem) 0;  position: relative; }
.fdc-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}
.fdc-intro   { padding: clamp(2rem, 5vw, 4rem) 0; position: relative; text-align: center; }
.fdc-feature { padding: clamp(3rem, 7vw, 6rem) 0; position: relative; }
.fdc-gallery { padding: clamp(2rem, 5vw, 4rem) 0; position: relative; }

.fdc-gallery__image           { aspect-ratio: 1/1; overflow: hidden; }
.fdc-gallery__image img       { height: 100%; object-fit: cover; width: 100%; }

.fdc-cta   { padding: clamp(3rem, 6vw, 5rem) 0; position: relative; text-align: center; }
.fdc-quote { padding: clamp(3rem, 6vw, 5rem) 0; position: relative; text-align: center; }

.fdc-section-header { margin-bottom: 2rem; text-align: center; }


/* ── GRIDS ──────────────────────────────────────────────────────────────────
   Simple CSS Grid layouts for card grids, logo strips, etc.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-grid-2 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(2, 1fr); }
.fdc-grid-3 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(3, 1fr); }
.fdc-grid-4 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767.98px) {
    .fdc-grid-2,
    .fdc-grid-3,
    .fdc-grid-4 { grid-template-columns: 1fr; }
}


/* ── CARDS ──────────────────────────────────────────────────────────────────
   Used in card_grid layout. Images at 1:1 ratio, flex column body.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.fdc-card__image {
    aspect-ratio: 1/1;
    background: #ede7e2;
    overflow: hidden;
}
.fdc-card__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}


/* ── TWO-COLUMN LAYOUT ──────────────────────────────────────────────────────
   Used by feature_two_col and image_text_split.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-two-col {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr 1fr;
}
.fdc-two-col--reversed     { direction: rtl; }
.fdc-two-col--reversed > * { direction: ltr; }
.fdc-two-col--40           { grid-template-columns: 2fr 3fr; }
.fdc-two-col--60           { grid-template-columns: 3fr 2fr; }

.fdc-two-col__image {
    aspect-ratio: 4/3;
    background: #ede7e2;
    overflow: hidden;
}
.fdc-two-col__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.fdc-two-col__image--natural {
    aspect-ratio: unset;
    overflow: visible;
}
.fdc-two-col__image--natural img {
    height: auto;
    object-fit: unset;
    width: 100%;
}
/* About page: second portrait photo — natural shape, no crop */
.page-id-35 .site-main > .fdc-section:nth-child(3) .fdc-two-col__image {
    aspect-ratio: unset;
    overflow: visible;
}
.page-id-35 .site-main > .fdc-section:nth-child(3) .fdc-two-col__image img {
    height: auto;
    object-fit: unset;
    width: 100%;
}
.fdc-two-col__body {
    display: flex;
    flex-direction: column;
    gap: calc(1.5 * var(--fdc-fs-body)); /* 1.26rem — matches label-to-heading gap */
}
/* Inside flex body containers the gap handles spacing — cancel the label margin. */
.fdc-two-col__body h5.fdc-label { margin-bottom: 0; }

@media (max-width: 767.98px) {
    .fdc-two-col              { grid-template-columns: 1fr; }
    .fdc-two-col__image       { order: 2; }
    .fdc-two-col__body        { order: 1; }
}


/* ── CONTENT BUILDER COLS ───────────────────────────────────────────────────
   Flexible multi-column layout used in content_builder sections.
   Columns: 100 / 50 / 33 / 67 — adjusts for gap size.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-cb-cols          { display: flex; flex-wrap: wrap; }
.fdc-cb-cols--gap-none { gap: 0; }
.fdc-cb-cols--gap-s   { gap: 1rem; }
.fdc-cb-cols--gap-m   { gap: 2rem; }
.fdc-cb-cols--gap-l   { gap: 4rem; }

.fdc-cb-cols--align-top     { align-items: flex-start; }
.fdc-cb-cols--align-center  { align-items: center; }
.fdc-cb-cols--align-stretch { align-items: stretch; }

.fdc-cb-col         { flex-shrink: 0; min-width: 0; }
.fdc-cb-col--100    { flex: 0 0 100%;                              max-width: 100%; }
.fdc-cb-col--50     { flex: 0 0 calc(50% - 1rem);                 max-width: calc(50% - 1rem); }
.fdc-cb-col--33     { flex: 0 0 calc(33.333% - 1.333rem);         max-width: calc(33.333% - 1.333rem); }
.fdc-cb-col--67     { flex: 0 0 calc(66.667% - .667rem);          max-width: calc(66.667% - .667rem); }

/* Large-gap variants compensate for the bigger gap */
.fdc-cb-cols--gap-l .fdc-cb-col--50 { flex-basis: calc(50% - 2rem);          max-width: calc(50% - 2rem); }
.fdc-cb-cols--gap-l .fdc-cb-col--33 { flex-basis: calc(33.333% - 2.667rem);  max-width: calc(33.333% - 2.667rem); }
.fdc-cb-cols--gap-l .fdc-cb-col--67 { flex-basis: calc(66.667% - 1.333rem);  max-width: calc(66.667% - 1.333rem); }

@media (max-width: 767.98px) {
    .fdc-cb-cols { flex-direction: column; }
    .fdc-cb-col--50,
    .fdc-cb-col--33,
    .fdc-cb-col--67 { flex: 0 0 100%; max-width: 100%; }
    .fdc-cb-cols--mobile-reverse { flex-direction: column-reverse; }
}

/* Content Builder element types */
.fdc-cb-heading { margin: 0; }

.fdc-cb-paragraph p      { margin-bottom: 0; }
.fdc-cb-paragraph p + p  { margin-top: .75em; }

.fdc-cb-image { margin: 0; }
.fdc-cb-image img             { display: block; height: auto; width: 100%; }
.fdc-cb-image--cover img      { height: 100%; object-fit: cover; }
.fdc-cb-image--radius img     { border-radius: var(--fdc-radius, 4px); }
.fdc-cb-image figcaption      { font-size: .8em; margin-top: .5rem; opacity: .65; }

.fdc-cb-divider hr            { border: none; margin: .25rem 0; }
.fdc-cb-divider--solid hr     { border-top: 1px solid; }
.fdc-cb-divider--dashed hr    { border-top: 1px dashed; }
.fdc-cb-divider--dotted hr    { border-top: 1px dotted; }
.fdc-cb-divider--light hr     { border-color: rgba(0,0,0,.12); }
.fdc-cb-divider--mid hr       { border-color: rgba(0,0,0,.3); }
.fdc-cb-divider--dark hr      { border-color: rgba(0,0,0,.7); }
.fdc-cb-divider--accent hr    { border-color: var(--fdc-sage, #64906b); }

.fdc-cb-spacer--s  { height: .5rem; }
.fdc-cb-spacer--m  { height: 1.5rem; }
.fdc-cb-spacer--l  { height: 3rem; }
.fdc-cb-spacer--xl { height: 5rem; }


/* ── STAT STRIP ─────────────────────────────────────────────────────────────
   A horizontal row of key statistics separated by hairlines.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-stat-strip             { display: flex; flex-wrap: wrap; }
.fdc-stat-strip__intro      { margin-bottom: 1.5rem; opacity: .8; width: 100%; }
.fdc-stat-strip__item {
    border-left: 1px solid rgba(0,0,0,.12);
    flex: 1;
    min-width: 140px;
    padding: 1.25rem 1.75rem;
}
.fdc-stat-strip__item:first-child       { border-left: none; padding-left: 0; }
.fdc-dark .fdc-stat-strip__item,
.fdc-section.fdc-dark .fdc-stat-strip__item { border-left-color: hsla(0,0%,100%,.18); }

.fdc-stat-strip__label  { font-size: .7rem;  letter-spacing: .08em; margin: 0 0 .4rem; opacity: .6; text-transform: uppercase; }
.fdc-stat-strip__figure { font-size: 2rem;   font-weight: 700;       line-height: 1;   margin: 0; }
.fdc-stat-strip__suffix { font-size: 1rem;   font-weight: 400;       margin-left: .2em; opacity: .5; }
.fdc-stat-strip__body   { font-size: .8rem;  margin: .4rem 0 0;      opacity: .7; }

@media (max-width: 767.98px) {
    .fdc-stat-strip { flex-direction: column; }
    .fdc-stat-strip__item {
        border-left: none;
        border-top: 1px solid rgba(0,0,0,.1);
        padding: 1rem 0;
    }
    .fdc-stat-strip__item:first-child { border-top: none; padding-top: 0; }
}


/* ── STAT CARDS ─────────────────────────────────────────────────────────────
   Grid of boxed stat cards. Variants: 2 / 3 / 4 columns.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-stat-cards__heading       { margin-bottom: 2rem; }
.fdc-stat-cards__grid          { display: grid; gap: 2rem; }
.fdc-stat-cards__grid--2       { grid-template-columns: repeat(2, 1fr); }
.fdc-stat-cards__grid--3       { grid-template-columns: repeat(3, 1fr); }
.fdc-stat-cards__grid--4       { grid-template-columns: repeat(4, 1fr); }

.fdc-stat-card         { padding: 1.5rem; }
.fdc-stat-card__label  { font-size: .7rem;    letter-spacing: .1em;  margin: 0 0 .5rem; opacity: .55; text-transform: uppercase; }
.fdc-stat-card__figure { font-size: 2.75rem;  font-weight: 700;      line-height: 1;     margin: 0; }
.fdc-stat-card__unit   { font-size: 1.1rem;   font-weight: 400;      margin-left: .15em; opacity: .5; }
.fdc-stat-card__body   { font-size: .875rem;  line-height: 1.5;      margin: .75rem 0 0; opacity: .75; }

@media (max-width: 991.98px) {
    .fdc-stat-cards__grid--3,
    .fdc-stat-cards__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .fdc-stat-cards__grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .fdc-stat-cards__grid--3,
    .fdc-stat-cards__grid--4 { grid-template-columns: 1fr; }
}


/* ── TESTIMONIALS ───────────────────────────────────────────────────────────
   Quote grid. Supports 1 / 2 / 3 column variants.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-testimonial-grid {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
}
.fdc-testimonial-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fdc-testimonial-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767.98px) {
    .fdc-testimonial-grid--2,
    .fdc-testimonial-grid--3 { grid-template-columns: 1fr; }
}

.fdc-testimonial {
    background: rgba(0,0,0,0);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fdc-testimonial__quote {
    border-left: 3px solid #ede7e2;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    padding-left: 1.25rem;
}
.fdc-testimonial__footer {
    align-items: center;
    display: flex;
    gap: .75rem;
}
.fdc-testimonial__avatar {
    border-radius: 50%;
    flex-shrink: 0;
    height: 48px;
    object-fit: cover;
    width: 48px;
}
.fdc-testimonial__meta   { display: flex; flex-direction: column; gap: .2rem; }
.fdc-testimonial__name   { display: block; font-family: "Jost", sans-serif; font-size: .84rem; font-weight: 400; letter-spacing: .1em; }
.fdc-testimonial__detail { color: #9d8c80; display: block; font-family: "Jost", sans-serif; font-size: .75rem; font-weight: 200; letter-spacing: .1em; }


/* ── STEPS ──────────────────────────────────────────────────────────────────
   Numbered or icon-led process steps. Vertical or horizontal layout.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-steps {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.fdc-steps--vertical   { flex-direction: column; }
.fdc-steps--horizontal { flex-direction: row; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    .fdc-steps--horizontal { flex-direction: column; }
}

.fdc-step {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}
.fdc-steps--vertical .fdc-step {
    align-items: flex-start;
    flex-direction: row;
}

.fdc-step__marker { flex-shrink: 0; }
.fdc-step__number {
    align-items: center;
    background: #564c47;
    border-radius: 50%;
    color: #fdfaf7;
    display: inline-flex;
    font-family: "Jost", sans-serif;
    font-size: .9rem;
    font-weight: 200;
    height: 2.5rem;
    justify-content: center;
    letter-spacing: .1em;
    width: 2.5rem;
}
.fdc-step__icon  { display: block; height: 48px; object-fit: contain; width: 48px; }
.fdc-step__title { margin-bottom: .4rem; }
.fdc-step__desc  { color: #9d8c80; font-size: clamp(.9rem, 1.8vw, 1.1rem); line-height: 1.6; margin: 0; }
.fdc-steps__intro { color: #9d8c80; margin-bottom: 2rem; }


/* ── STATS ROW ──────────────────────────────────────────────────────────────
   Simple centred row of large numbers with labels beneath.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    justify-content: center;
}
.fdc-stat {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .25rem;
    min-width: 120px;
    text-align: center;
}
.fdc-stat__number {
    color: #564c47;
    display: block;
    font-family: "Josefin Sans", sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    letter-spacing: .1em;
    line-height: 1;
}
.fdc-stat__label {
    color: #564c47;
    display: block;
    font-family: "Jost", sans-serif;
    font-size: clamp(.75rem, 1.5vw, .9rem);
    font-weight: 200;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.fdc-stat__detail {
    color: #9d8c80;
    display: block;
    font-size: .75rem;
    margin-top: .25rem;
}


/* ── FAQ ACCORDION ──────────────────────────────────────────────────────────
   Uses native <details>/<summary> — no JS required.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-faq             { border-top: 1px solid #ede7e2; }
.fdc-faq__item       { border-bottom: 1px solid #ede7e2; }
.fdc-faq__question {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: "Jost", sans-serif;
    font-size: clamp(.9rem, 1.8vw, 1.05rem);
    font-weight: 300;
    justify-content: space-between;
    letter-spacing: .1em;
    list-style: none;
    padding: 1.25rem 0;
}
.fdc-faq__question::-webkit-details-marker { display: none; }

.fdc-faq__icon {
    border-right: 1px solid #564c47;
    border-top: 1px solid #564c47;
    display: inline-block;
    flex-shrink: 0;
    height: 8px;
    margin-left: 1rem;
    transform: rotate(135deg);
    transition: transform .25s ease;
    width: 8px;
}
details[open] .fdc-faq__icon { transform: rotate(-45deg); }

.fdc-faq__answer { padding: 0 0 1.5rem; }
.fdc-faq__answer > *:last-child { margin-bottom: 0; }
.fdc-faq__intro  { color: #9d8c80; margin-bottom: 2rem; }


/* ── IMAGE-TEXT SPLIT ───────────────────────────────────────────────────────
   Full-height split: image takes up 40–60% width, text the remainder.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-split { overflow: hidden; }
.fdc-split__row {
    align-items: stretch;
    display: flex;
    min-height: clamp(350px, 50vw, 700px);
}
.fdc-split__row--reversed { flex-direction: row-reverse; }

.fdc-split__image           { flex-shrink: 0; overflow: hidden; }
.fdc-split__image img       { display: block; height: 100%; object-fit: cover; width: 100%; }
.fdc-split__text {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    min-width: 0;
    padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
}
.fdc-split__cta { margin-top: .5rem; }

@media (max-width: 767.98px) {
    .fdc-split__row,
    .fdc-split__row--reversed { flex-direction: column; }
    .fdc-split__image,
    .fdc-split__text { flex: none !important; width: 100% !important; }
    .fdc-split__image { min-height: 280px; }
    .fdc-split__image img { min-height: 280px; }
}


/* ── FULL-BLEED IMAGE ───────────────────────────────────────────────────────
   Zero-padding section that displays a single edge-to-edge image.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-fullbleed-img { padding: 0 !important; }
.fdc-fullbleed-img__wrap { overflow: hidden; position: relative; width: 100%; }
.fdc-fullbleed-img__img {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}
.fdc-fullbleed-img__overlay {
    background: #000;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.fdc-fullbleed-img__caption {
    bottom: .75rem;
    color: hsla(0,0%,100%,.7);
    font-family: "Jost", sans-serif;
    font-size: .75rem;
    left: 1rem;
    letter-spacing: .1em;
    margin: 0;
    position: absolute;
}
.fdc-fullbleed-img__natural {
    display: block;
    height: auto;
    max-width: 100%;
}
.fdc-fullbleed-img__caption-below {
    font-family: "Jost", sans-serif;
    font-size: .75rem;
    letter-spacing: .1em;
    margin-top: .75rem;
    text-align: center;
}


/* ── POETRY ─────────────────────────────────────────────────────────────────
   Preserves line breaks with pre-wrap; uses serif display type.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-poetry__title { margin-bottom: 1.5rem; }
.fdc-poetry__text {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 300;
    line-height: 1.9;
    margin: 0 0 1.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.fdc-poetry__attribution { margin-top: 1.5rem; }


/* ── LOGO STRIP ─────────────────────────────────────────────────────────────
   Grid of client/partner logos. Optional greyscale treatment.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-logo-strip {
    align-items: center;
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
}
.fdc-logo-strip--3-col { grid-template-columns: repeat(3, 1fr); }
.fdc-logo-strip--4-col { grid-template-columns: repeat(4, 1fr); }
.fdc-logo-strip--5-col { grid-template-columns: repeat(5, 1fr); }
.fdc-logo-strip--6-col { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 767.98px) {
    .fdc-logo-strip { grid-template-columns: repeat(3, 1fr) !important; }
}

.fdc-logo-strip__item       { display: flex; justify-content: center; }
.fdc-logo-strip__item img   { display: block; height: auto; max-height: 60px; object-fit: contain; width: 100%; }

.fdc-logo-strip--grayscale .fdc-logo-strip__item img {
    filter: grayscale(100%);
    opacity: .6;
    transition: filter .2s, opacity .2s;
}
.fdc-logo-strip--grayscale .fdc-logo-strip__item:hover img {
    filter: none;
    opacity: 1;
}


/* ── VIDEO EMBED ────────────────────────────────────────────────────────────
   Ratio-preserving iframe wrapper. Aspect ratios: 16x9 / 4x3 / 1x1.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-video-embed             { overflow: hidden; position: relative; width: 100%; }
.fdc-video-embed--16x9       { padding-top: 56.25%; }
.fdc-video-embed--4x3        { padding-top: 75%; }
.fdc-video-embed--1x1        { padding-top: 100%; }
.fdc-video-embed iframe      { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.fdc-video-embed__caption    { color: #9d8c80; font-size: .84rem; margin-top: .75rem; text-align: center; }


/* ── PRODUCT FEATURE ────────────────────────────────────────────────────────
   Two-column product showcase with image and copy.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-product-feature {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr 1fr;
}
.fdc-product-feature--reversed     { direction: rtl; }
.fdc-product-feature--reversed > * { direction: ltr; }

.fdc-product-feature__image     { overflow: hidden; }
.fdc-product-feature__image img { display: block; height: auto; width: 100%; }
.fdc-product-feature__price {
    color: #64906b;
    font-family: "Jost", sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: .1em;
    margin: .5rem 0 1rem;
}
.fdc-product-feature__cta { margin-top: 1.5rem; }

@media (max-width: 767.98px) {
    .fdc-product-feature,
    .fdc-product-feature--reversed { direction: ltr; grid-template-columns: 1fr; }
}


/* ── MAILING LIST ───────────────────────────────────────────────────────────
   Email opt-in form wrapper.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-mailing-list__body    { color: #9d8c80; margin-bottom: 1.5rem; }
.fdc-mailing-list__form    { margin: 1.5rem 0; }
.fdc-mailing-list__privacy { color: #9d8c80; font-size: .78rem; margin-top: .75rem; }


/* ── CONTACT ────────────────────────────────────────────────────────────────
   Contact form + address sidebar layout.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-contact__intro { color: #9d8c80; margin-bottom: 1.5rem; }
.fdc-contact__layout {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 2fr 1fr;
}
.fdc-contact__address {
    font-family: "Jost", sans-serif;
    font-size: .9rem;
    font-style: normal;
    font-weight: 200;
    letter-spacing: .08em;
    line-height: 1.8;
}

@media (max-width: 767.98px) {
    .fdc-contact__layout { grid-template-columns: 1fr; }
}


/* ── MASONRY GALLERY ────────────────────────────────────────────────────────
   CSS columns masonry — no JS needed.
   Column count set by modifier class: --2col / --3col / --4col.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-masonry          { column-gap: clamp(0.75rem, 2vw, 1.25rem); }
.fdc-masonry--2col    { columns: 2; }
.fdc-masonry--3col    { columns: 3; }
.fdc-masonry--4col    { columns: 4; }

.fdc-masonry__item {
    break-inside: avoid;
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
.fdc-masonry__item img {
    width: 100%;
    display: block;
    border-radius: var(--fdc-radius, 2px);
}
.fdc-masonry__caption {
    font-family: var(--fdc-font-label, "Jost", sans-serif);
    font-size: 0.78rem;
    letter-spacing: .06em;
    color: var(--fdc-muted, #9d8c80);
    text-align: center;
    padding: .4em 0 0;
}

@media (max-width: 600px) {
    .fdc-masonry--2col,
    .fdc-masonry--3col,
    .fdc-masonry--4col { columns: 1; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .fdc-masonry--3col,
    .fdc-masonry--4col { columns: 2; }
}


/* ── TYPOGRAPHY UTILITIES ───────────────────────────────────────────────────
   FDC heading classes used in templates. Match the GP Typography settings.
   ─────────────────────────────────────────────────────────────────────────── */

/* Semantic section headings — element type drives size, class drives style.
   fdc_hdg_tag() in PHP emits h1 for the first heading on the page, h2 after.
   Legacy .fdc-h1 / .fdc-h2 / .fdc-h3 kept for any direct usage. */
.fdc-hdg {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
}
h1.fdc-hdg { font-size: var(--fdc-size-h1); letter-spacing: .22em; }
h2.fdc-hdg { font-size: var(--fdc-size-h2); letter-spacing: .20em; }
h3.fdc-hdg { font-size: var(--fdc-size-h3); letter-spacing: .18em; }
h4.fdc-hdg { font-size: var(--fdc-size-h4); letter-spacing: .16em; }
h5.fdc-hdg { font-size: var(--fdc-size-h5); letter-spacing: .15em; }
h6.fdc-hdg { font-size: var(--fdc-size-h6); letter-spacing: .14em; }
.fdc-h1 {
    font-family: "Josefin Sans", sans-serif;
    font-size: var(--fdc-size-h1);
    font-weight: 300;
    letter-spacing: .22em;
    line-height: 1.2;
    text-transform: uppercase;
}
.fdc-h2 {
    font-family: "Josefin Sans", sans-serif;
    font-size: var(--fdc-size-h2);
    font-weight: 300;
    letter-spacing: .20em;
    line-height: 1.2;
    text-transform: uppercase;
}
.fdc-h3 {
    font-family: "Josefin Sans", sans-serif;
    font-size: var(--fdc-size-h3);
    font-weight: 300;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
}
.fdc-subheading {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-style: italic;
    font-weight: 300;
    letter-spacing: .06em;
    line-height: 1.4;
}
.fdc-label {
    color: #9d8c80;
    font-family: "Jost", sans-serif;
    font-size: var(--fdc-fs-label);   /* 0.72rem — sits below body */
    font-weight: 200;
    letter-spacing: .2em;
    text-transform: uppercase;
}
/* h5 used as semantic over-title — reset browser defaults;
   gap below = 1.5 × body size so heading breathes after the label. */
h5.fdc-label {
    font-size: var(--fdc-fs-label);
    margin: 0 0 calc(1.5 * var(--fdc-fs-body)); /* 0 0 1.26rem */
}

/* Text colour utilities */
.fdc-text--ink   { color: var(--fdc-ink); }
.fdc-text--cream { color: var(--fdc-cream); }
.fdc-text--sage  { color: var(--fdc-sage); }
.fdc-text--muted { color: var(--fdc-muted); }
.fdc-text--rose  { color: var(--fdc-rose); }
.fdc-text--ochre { color: var(--fdc-ochre); }
.fdc-text--blue  { color: var(--fdc-blue); }

/* Text size utilities */
.fdc-text--xs  { font-size: clamp(.7rem,  1.2vw, .84rem); }
.fdc-text--s   { font-size: clamp(.9rem,  1.6vw, 1.05rem); }
.fdc-text--m   { font-size: clamp(1rem,   2vw,   1.3rem); }
.fdc-text--l   { font-size: clamp(1.4rem, 3vw,   2.25rem); }
.fdc-text--xl  { font-size: clamp(2rem,   5vw,   3.5rem); }

/* Alignment utilities */
.fdc-align-left   { text-align: left; }
.fdc-align-center { text-align: center; }
.fdc-align-right  { text-align: right; }
.fdc-centered     { text-align: center; }


/* ── PROSE ──────────────────────────────────────────────────────────────────
   Rich text content from WYSIWYG / the_content().
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-prose p              { margin-bottom: 1.2em; }
.fdc-prose p:last-child   { margin-bottom: 0; }
.fdc-prose ul,
.fdc-prose ol             { margin-bottom: 1.2em; padding-left: 1.5em; }
.fdc-prose strong         { font-weight: 500; }
.fdc-prose em             { font-style: italic; }
.fdc-prose a              { color: #64906b; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; }
.fdc-prose a:hover        { color: #564c47; }
.fdc-dark .fdc-prose a        { color: var(--fdc-cream); }
.fdc-dark .fdc-prose a:hover  { color: var(--fdc-sage); }
.fdc-prose > *:last-child { margin-bottom: 0; }


/* ── EVENT LIST ─────────────────────────────────────────────────────────────
   Stacked event items separated by hairlines.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-event             { border-bottom: 1px solid #ede7e2; padding: 2rem 0; }
.fdc-event:last-child  { border-bottom: none; }


/* ── MAX-WIDTH INNER WRAPPERS ───────────────────────────────────────────────
   Shorthand constrained-width centred wrappers. Used when a section needs
   its content narrower than the container.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-inner-480  { margin: 0 auto; max-width: 480px;  padding: 0 var(--fdc-pad-sides); width: 100%; }
.fdc-inner-680  { margin: 0 auto; max-width: 680px;  padding: 0 var(--fdc-pad-sides); width: 100%; }
.fdc-inner-960  { margin: 0 auto; max-width: 960px;  padding: 0 var(--fdc-pad-sides); width: 100%; }
.fdc-inner-1200 { margin: 0 auto; max-width: 1200px; padding: 0 var(--fdc-pad-sides); width: 100%; }
.fdc-inner-1400 { margin: 0 auto; max-width: 1400px; padding: 0 var(--fdc-pad-sides); width: 100%; }
.fdc-inner-full { margin: 0; max-width: none; padding: 0 var(--fdc-pad-sides); width: 100%; }


/* ── SITE HEADER & NAVIGATION ───────────────────────────────────────────────
   Overrides GP's default header styles to match the FDC brand.
   ─────────────────────────────────────────────────────────────────────────── */

.site-header             { background-color: var(--fdc-cream); border-bottom: 1px solid var(--fdc-border); position: relative; }
.inside-header           { padding: .75rem clamp(1.5rem, 4vw, 3rem); }

.site-branding .main-title a,
.site-branding .main-title a:hover {
    color: var(--fdc-ink);
    font-family: var(--fdc-font-heading);
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .22em;
    text-decoration: none;
    text-transform: uppercase;
}
.site-description {
    color: var(--fdc-muted);
    font-family: var(--fdc-font-serif);
    font-size: .8rem;
    font-style: italic;
    letter-spacing: .04em;
}

/* Desktop nav */
.main-navigation .main-nav ul li a,
.main-navigation ul li a {
    color: var(--fdc-ink);
    font-family: var(--fdc-font-label);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--fdc-transition);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation ul li a:hover { color: var(--fdc-sage); }

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation ul li.current-menu-item > a {
    color: var(--fdc-sage);
    border-bottom: 1px solid var(--fdc-sage);
}

/* Mobile toggle button — GP controls show/hide via generate_mobile_menu_media_query filter.
   Styling only; no display overrides here. SVG icon sizing only — leave display alone
   so GP can toggle ≡ vs × correctly. */
.menu-toggle {
    background: transparent;
    border: 1px solid var(--fdc-ink);
    border-radius: var(--fdc-radius);
    padding: 6px 10px;
    line-height: 1;
    color: var(--fdc-ink);
}
.menu-toggle .gp-icon svg {
    width: 18px;
    height: 18px;
    fill: var(--fdc-ink);
}

/* Mobile nav drawer — scoped to .toggled so desktop styles are unaffected.
   GP adds .toggled to #site-navigation when the hamburger is open.
   Breakpoint set via generate_mobile_menu_media_query filter in functions.php. */
@media (max-width: 1200px) {
    /* Drawer: off-white overlay, floats below sticky header */
    #site-navigation.toggled {
        background: var(--fdc-cream) !important;
        border-top: 1px solid var(--fdc-border);
        border-bottom: 2px solid var(--fdc-border);
        box-shadow: 0 6px 18px rgba(0,0,0,0.10);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 200;
    }
    /* Override GP's .inside-navigation max-width so drawer runs full-width */
    #site-navigation.toggled .inside-navigation {
        display: block !important;
        max-width: none !important;
        padding: 0;
    }
    /* Hide the duplicate toggle button GP puts inside the nav */
    #site-navigation .menu-toggle { display: none !important; }

    /* Nav list in open drawer — GP structure: div.main-nav > ul.sf-menu */
    #site-navigation.toggled .main-nav ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #site-navigation.toggled .main-nav ul > li { margin: 0; }
    #site-navigation.toggled .main-nav ul > li > a {
        background-color: transparent !important;
        color: var(--fdc-ink) !important;
        display: block;
        font-family: var(--fdc-font-label);
        font-size: .8rem;
        font-weight: 400;
        letter-spacing: .14em;
        line-height: 1.2 !important;
        padding: .9rem clamp(1.5rem, 5vw, 3rem);
        text-align: left;
        text-transform: uppercase;
        border-bottom: 1px solid var(--fdc-border);
    }
    #site-navigation.toggled .main-nav ul > li:last-child > a { border-bottom: none; }
    #site-navigation.toggled .main-nav ul > li > a:hover,
    #site-navigation.toggled .main-nav ul > li.current-menu-item > a {
        color: var(--fdc-sage) !important;
    }
}


/* ── SITE FOOTER ────────────────────────────────────────────────────────────
   .fdc-footer-sections wraps ACF sections rendered from the "Site Footer"
   page. It uses the same full-bleed approach as page sections.
   Edit content at: WP Admin → Pages → Site Footer.
   ─────────────────────────────────────────────────────────────────────────── */

.fdc-footer-sections { width: 100%; }
.fdc-footer-sections .fdc-section { margin: 0; }

.site-footer { background-color: var(--fdc-ink); border-top: 1px solid rgba(255,255,255,.12); }
.site-footer .grid-container { max-width: none; padding: 1rem clamp(1.5rem, 4vw, 3rem); }

.inside-site-info {
    color: var(--fdc-cream);
    font-family: var(--fdc-font-label);
    font-size: .7rem;
    letter-spacing: .08em;
    opacity: .5;
    text-align: center;
}
.inside-site-info a       { color: var(--fdc-cream); opacity: .5; transition: opacity var(--fdc-transition); }
.inside-site-info a:hover { opacity: 1; }


/* ── GP OVERRIDES ───────────────────────────────────────────────────────────
   Rules here correct GeneratePress defaults that conflict with the FDC design.
   fdc.css loads after generate-style + its inline block, so these win the
   cascade without !important in most cases.
   Edit via Appearance → FDC Styles.
   ─────────────────────────────────────────────────────────────────────────── */

/* Body typography — GP Typography Customizer outputs its own body font rule;
   this ensures FDC fonts always win. Body = 0.84rem (= old h5/label size);
   headings climb incrementally from there via --fdc-size-h* tokens. */
body {
    font-family: "Cormorant Garamond", serif;
    font-size: var(--fdc-fs-body);     /* 0.84rem */
    font-weight: 300;
    line-height: 1.75;
}

/* GP applies margin-bottom:20px to .site-main > * (all direct page children).
   Zero it out for FDC sections so sections sit flush with no automatic gap. */
.fdc-section { margin: 0; }

/* GP sets heading margins — reset to let section padding do the spacing work. */
.fdc-section h1,
.fdc-section h2,
.fdc-section h3,
.fdc-section h4,
.fdc-section h5,
.fdc-section h6 { margin-top: 0; }


/* ── SCALLOPS ───────────────────────────────────────────────────────────────
   FDC-only decorative semicircle edge treatment on section containers.
   Rendered as inline SVG (PHP-generated) using a <pattern> element that
   tiles at any viewport width — fully responsive with no JS required.

   Two render styles (set via ACF):
     keyline — fill:none, stroke only (1.5 px) — light and airy
     filled  — fill + same 1.5 px stroke — both share identical outer bounds

   Scallops are direct children of .fdc-section (position:relative, line 144).
   They span full viewport width with left:0;right:0. Outside scallops at
   bottom:-28px are not clipped because overflow defaults to visible on section.
   ─────────────────────────────────────────────────────────────────────────── */

/* Scallop strip — background-image data URI tiles the 28×14 SVG tile via repeat-x.
   position:absolute + left/right/height set inline by PHP.
   z-index sits above gutters (2) but below block content (4). */
.fdc-scallop {
    display: block;
    z-index: 3;
}