@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&display=swap');

/* ============================================================================
   GSC-TEMPC — OUR LEADERS / BOARD OF DIRECTORS
   "The Spread" — v3.2 (background matched to Home Services)
   ----------------------------------------------------------------------------
   File:   assets/css/board_directors.css   (full replacement)
   Scope:  every selector begins with #section-leadership. Nothing in the
           header, the "Explore GSC-TEMPC" panel, hero, About Us, Future Plans,
           Services, News, Gallery, Values, Achievements, FAQ, Visit Us,
           Member Stories or the footer is touched. No :root or body rules.

   v3.2 CHANGES (background only; composition, palette and JS hooks unchanged)
     - Section background now uses the same vertical gradient as
       .home-services:  #FFFFFF > #F3F8F2 (30%) > #E9F4E6 (64%) > #FFFFFF.
       Both sections start and end on pure white, so the seam between this
       section and its neighbours disappears.
     - Soft green light (section 02) now uses the same two radial glows as
       the Home Services wash (same size, position and opacity), so the
       "light" sits in the same places from one section to the next.
     - Botanical corner opacity matches Home Services (.13).
     - Everything else is identical to v3.1.

   v3.1 POLISH CHANGES (kept)
     - @import: true Fraunces italics (400/500) so "forward." and the bio are
       not synthesised slants. NOTE: @font-face is global, so other sections'
       italic Fraunces text will also switch to the real italic.
     - 03: section-scoped overflow hardening for the sticky portrait.
     - 04: hexagon aligned to the text edge; service-note copy is now 1rem.
     - 05a: photo cross-fade no longer dips to the green backdrop.
     - 05b: only the name plate content fades on swap (kicker stays put);
            name line-height opened up for 3-4 line names.
     - 05a/07: intentional layout for the default-avatar fallback.
     - 07: equal row heights, lining + tabular numerals, hides the directory
           when there is only one director.
     - 08c: thumbnail column matches the photo width (56px).
     - 08d: title and name sizes no longer shrink at the 1120px boundary.
     - 10: touch devices no longer keep a "stuck" hover fill on Previous.
     - 13: reduced-motion covers the new per-child swap transform.

   WHY THIS IS NOT v2 WITH NEW PAINT
   v1 and v2 both stacked the same three bands: headline on top, one portrait
   panel in the middle, a grid of photos underneath. This version changes the
   composition itself. It is one split spread, like two facing magazine pages:

     LEFT PAGE   masthead (headline, standfirst, service note), then the
                 "now showing" control line, then the BOARD DIRECTORY: one
                 ruled row per director (number, name, role, small portrait).
                 The page is as long as the board is large.
     RIGHT PAGE  one full-height portrait, tall as the window, that STAYS ON
                 SCREEN (position: sticky) while the left page scrolls. The
                 director's name is set very large across the lower part of
                 the photograph, over a deep-green fade. Choosing a row in the
                 directory, or pressing Previous/Next, changes the portrait.

   The memorable thing is the sticky portrait with the oversized name. Every
   other part is quiet: white ground, hairlines, one gold rule, one gold bar on
   the active row.

   SHARED WITH ABOUT US AND SERVICES (so all read as one website)
     - white-to-sage-to-white ground with soft light-green glows
     - Fraunces headings, Poppins body copy in #3E4C42
     - the eyebrow: short gold + leaf-green rule, tracked label
     - champagne gold only for the stage rule, the active-row bar, the
       headline stroke and the ribbon on the stage
     - gold-to-green ribbon along the top of the dark panel
     - botanical corner artwork (left only, very faint)

   LAYOUT FOLLOWS THE SECTION, NOT THE SCREEN
   The fixed "Explore GSC-TEMPC" panel takes about 320px on desktop, so the
   section is a size container (container-name: board) and every breakpoint is
   a container query on the section's own content width:
       <  480   phones          stacked: masthead, portrait panel, controls, directory
       >= 480   large phones    labelled pill buttons, larger type
       >= 640   tablets         stacked, landscape portrait panel
       >= 820   laptops         THE SPREAD: two pages, sticky portrait
       >= 1120  desktop         larger type and portrait
       >= 1380  wide desktop    largest scale
   Browsers without container queries get the same layouts from viewport widths
   (section 11).

   JAVASCRIPT HOOKS PRESERVED (index.php)
     .gsc-board-editorial__photo-slide.is-active
     .gsc-board-editorial__profile.is-swapping
     .gsc-board-editorial__thumb.is-active  (+ aria-selected, tabindex)
     #gscBoardProgress   (the script writes an inline width)
     #hpLeadershipPrevBtn / #hpLeadershipNextBtn / #hpLeadershipCounterNum
     #hpLeadershipName / Position / Bio / Signature
     .reveal / .reveal.is-active   (homepage scroll-reveal observer)

   STICKY NOTE
   position: sticky stops working if any ancestor has overflow other than
   visible. The section therefore uses overflow: clip (not hidden). If the
   portrait does not stay put on the live site, look for overflow-x: hidden on
   html, body or a wrapper element around the page in includes/header.php and
   change it to overflow-x: clip (keep hidden on the line before as a fallback).
   That cannot be fixed from inside #section-leadership.

   NOTE ON board-premium-fx.css
   Its effects (leaf drift, spinning ring, portrait glow, shimmer) are not part
   of this design. Section 12 neutralises them at higher specificity.
   ============================================================================ */


/* ============================================================================
   01. TOKENS AND SECTION FRAME
   ============================================================================ */

#section-leadership.gsc-board-editorial {
    /* ---- palette: values taken from the approved About Us stylesheet ---- */
    --lb-brand: #30AA28;
    --lb-leaf: #B9DDB5;
    --lb-leaf-soft: #E5F1E3;
    --lb-sage: #F3F8F2;
    --lb-action: #27883A;
    --lb-action-deep: #1B6A2E;
    --lb-forest: #1F5A2D;
    --lb-ink: #173E29;
    --lb-night: #0F2D1C;
    --lb-text: #3E4C42;
    --lb-muted: #53625A;
    --lb-white: #FFFFFF;

    /* ---- text on the dark portrait panel ---- */
    --lb-on-dark: #FFFFFF;
    --lb-on-dark-soft: rgba(255, 255, 255, .88);
    --lb-on-dark-quiet: rgba(255, 255, 255, .64);

    /* ---- champagne gold, split by job so contrast stays honest ---- */
    --lb-gold: #D6B56D;           /* rules, bars, ribbon (never text)       */
    --lb-gold-light: #F6E3AE;     /* text and fills on dark green           */
    --lb-gold-deep: #A9791F;      /* large display numerals on white only   */
    --lb-gold-line: rgba(214, 181, 109, .55);

    /* ---- hairlines ---- */
    --lb-line: rgba(48, 170, 40, .20);
    --lb-line-soft: rgba(48, 170, 40, .11);
    --lb-line-strong: rgba(39, 136, 58, .42);
    --lb-line-dark: rgba(255, 255, 255, .18);

    /* ---- elevation: one shadow, on the portrait panel only ---- */
    --lb-shadow-stage: 0 36px 70px -26px rgba(15, 45, 28, .45), 0 10px 24px -10px rgba(23, 62, 41, .2);

    /* ---- type ---- */
    --lb-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);
    --lb-script: 'Dancing Script', 'Brittany Signature', 'Segoe Script', cursive;

    /* ---- motion ---- */
    --lb-ease: cubic-bezier(.16, 1, .3, 1);

    /* ---- geometry (overridden per width tier on __inner) ---- */
    --lb-width: 1320px;
    --lb-radius: 8px;
    --lb-radius-sm: 3px;
    --lb-pad: 22px;               /* inner padding of the portrait panel      */
    --lb-sticky: 100px;           /* gap under the site header when sticky    */
    --lb-stage-h: 640px;          /* height of the sticky portrait panel      */
    --lb-sig-size: 1.7rem;

    /* ---- legacy names, so any other stylesheet that reads them still works ---- */
    --gsc-board-forest: var(--lb-forest);
    --gsc-board-forest-2: var(--lb-action-deep);
    --gsc-board-green: var(--lb-brand);
    --gsc-board-gold: var(--lb-gold);
    --gsc-board-ivory: var(--lb-white);
    --gsc-board-cream: #F3EEE2;
    --gsc-board-ink: var(--lb-ink);
    --gsc-board-muted: var(--lb-muted);
    --gsc-board-line: var(--lb-line);
    --gsc-board-soft-line: var(--lb-line-soft);
    --gsc-board-ease: var(--lb-ease);
    --gsc-board-width: var(--lb-width);

    container: board / inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;               /* clip, not hidden: keeps position: sticky alive */
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(64px, 6.6vw, 108px) clamp(16px, 4vw, 52px) clamp(56px, 5.4vw, 96px);
    scroll-margin-top: 80px;
    color: var(--lb-text);
    font-family: inherit;
    /* Same ground as .home-services: white at both ends, sage in the middle,
       so the section blends into whatever sits above and below it. */
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F3F8F2 30%,
        #E9F4E6 64%,
        #FFFFFF 100%
    ) !important;
}

#section-leadership.gsc-board-editorial,
#section-leadership.gsc-board-editorial *,
#section-leadership.gsc-board-editorial *::before,
#section-leadership.gsc-board-editorial *::after {
    box-sizing: border-box;
}

#section-leadership.gsc-board-editorial :where(button) {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

#section-leadership.gsc-board-editorial:focus-visible {
    outline: 3px solid var(--lb-action);
    outline-offset: -6px;
}

#section-leadership.gsc-board-editorial img {
    max-width: none;
}


/* ============================================================================
   02. BACKDROP — soft green light (same glows as Home Services), faint botanical
   ============================================================================ */

#section-leadership.gsc-board-editorial::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    /* Identical to the .home-services__wash glows */
    background:
        radial-gradient(ellipse 52% 40% at 20% 34%, rgba(185, 221, 181, .5), transparent 72%),
        radial-gradient(ellipse 44% 36% at 94% 12%, rgba(185, 221, 181, .3), transparent 70%);
}

#section-leadership.gsc-board-editorial::after {
    content: none;
    display: none;
}

#section-leadership .gsc-board-editorial__bg {
    display: none;
}

#section-leadership .gsc-board-editorial__botanical {
    position: absolute;
    z-index: -2;
    bottom: 0;
    width: clamp(120px, 20vw, 280px);
    width: clamp(120px, 16cqi, 280px);
    height: min(100%, 520px);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: .13;
    filter: grayscale(1) sepia(.55) saturate(3) hue-rotate(85deg) brightness(.7);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 88%);
}

#section-leadership .gsc-board-editorial__botanical--left {
    left: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom left;
    transform: scaleX(-1);
}

#section-leadership .gsc-board-editorial__botanical--right {
    right: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom right;
}


/* ============================================================================
   03. GRID SKELETON
   ----------------------------------------------------------------------------
   __main and __copy dissolve (display: contents) so every piece is a direct
   grid item of __inner and can be placed by name. __visual stays a real box:
   it IS the portrait panel. Each tier changes only template areas and sizes,
   never the markup.

   Stacked (default):  eyebrow, title, intro, note, rule, stage, controls, roster
   Spread (>= 820):    left page  eyebrow, title, intro, note, rule, controls, roster
                       right page stage, spanning every row of the left page
   ============================================================================ */

#section-leadership .gsc-board-editorial__inner {
    position: relative;
    z-index: 1;
    width: min(var(--lb-width), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "eyebrow"
        "title"
        "intro"
        "note"
        "rule"
        "stage"
        "controls"
        "roster";
    column-gap: clamp(36px, 5cqi, 80px);
    row-gap: 0;
    align-items: start;
}

#section-leadership .gsc-board-editorial__main,
#section-leadership .gsc-board-editorial__copy {
    display: contents;
}

#section-leadership .gsc-board-editorial__eyebrow      { grid-area: eyebrow; }
#section-leadership .gsc-board-editorial__title        { grid-area: title; }
#section-leadership .gsc-board-editorial__intro        { grid-area: intro; }
#section-leadership .gsc-board-editorial__service-note { grid-area: note; }
#section-leadership .gsc-board-editorial__rule         { grid-area: rule; }
#section-leadership .gsc-board-editorial__visual       { grid-area: stage; }
#section-leadership .gsc-board-editorial__controls     { grid-area: controls; }
#section-leadership .gsc-board-editorial__roster       { grid-area: roster; }

#section-leadership .gsc-board-editorial__eyebrow,
#section-leadership .gsc-board-editorial__title,
#section-leadership .gsc-board-editorial__intro,
#section-leadership .gsc-board-editorial__service-note,
#section-leadership .gsc-board-editorial__rule,
#section-leadership .gsc-board-editorial__visual,
#section-leadership .gsc-board-editorial__controls,
#section-leadership .gsc-board-editorial__roster {
    min-width: 0;
}

/* Sticky hardening. position: sticky dies if the section, __inner or __main
   ever picks up an overflow other than visible/clip (for example from an older
   .hp-leadership rule). This keeps all three safe from inside the section.
   It cannot help if the cause is an ancestor OUTSIDE the section (html, body,
   or a wrapper in includes/header.php): see STICKY NOTE in the file header. */
#section-leadership.gsc-board-editorial {
    overflow: clip !important;
}

#section-leadership .gsc-board-editorial__inner,
#section-leadership .gsc-board-editorial__main {
    overflow: visible !important;
}


/* ============================================================================
   04. MASTHEAD — eyebrow, headline, standfirst, service note, divider
   ============================================================================ */

#section-leadership .gsc-board-editorial__eyebrow {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--lb-action-deep);
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

#section-leadership .gsc-board-editorial__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, var(--lb-gold) 0 60%, var(--lb-leaf) 60% 100%);
}

#section-leadership .gsc-board-editorial__eyebrow::after {
    content: "Board of Directors";
    padding-left: 14px;
    border-left: 1px solid var(--lb-line-strong);
    color: var(--lb-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
}

#section-leadership .gsc-board-editorial__eyebrow i {
    display: none;
}

/* Headline. The closing word is italic logo green with a gold stroke under it.
   The stroke is a background image so it can draw itself once (section 09) and
   still wrap cleanly if the word breaks across two lines. */
#section-leadership .gsc-board-editorial__title {
    max-width: 14em;
    margin: 0;
    color: var(--lb-forest);
    font-family: var(--lb-serif);
    font-size: clamp(2.3rem, 9.6vw, 3.1rem);
    font-size: clamp(2.3rem, 11.6cqi, 3.1rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.04em;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

#section-leadership .gsc-board-editorial__title em {
    color: var(--lb-action);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.035em;
    padding-bottom: .06em;
    background: linear-gradient(var(--lb-gold), var(--lb-gold)) left 100% / 0% .07em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 1.3s var(--lb-ease) .45s;
}

#section-leadership .gsc-board-editorial__intro {
    max-width: 34em;
    margin: 24px 0 0;
    color: var(--lb-text);
    font-size: 1.04rem;
    line-height: 1.85;
    font-weight: 400;
    text-wrap: pretty;
}

/* Service note: hexagon shield + one short statement */
#section-leadership .gsc-board-editorial__service-note {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    max-width: 34em;
    margin: 24px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--lb-line);
    background: none;
}

#section-leadership .gsc-board-editorial__service-icon {
    position: relative;
    width: 42px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-left: -3px;            /* hexagon points start 8% in: pull its visible edge onto the text edge */
    border: 0;
    clip-path: none;
    color: var(--lb-action-deep);
    font-size: .95rem;
}

#section-leadership .gsc-board-editorial__service-icon::before,
#section-leadership .gsc-board-editorial__service-icon::after {
    content: "";
    position: absolute;
    clip-path: polygon(50% 0, 92% 18%, 92% 68%, 50% 100%, 8% 68%, 8% 18%);
}

#section-leadership .gsc-board-editorial__service-icon::before {
    inset: 0;
    background: var(--lb-gold);
}

#section-leadership .gsc-board-editorial__service-icon::after {
    inset: 1.5px;
    background: #F7FBF5;
}

#section-leadership .gsc-board-editorial__service-icon i {
    position: relative;
    z-index: 1;
}

#section-leadership .gsc-board-editorial__service-copy {
    min-width: 0;
}

#section-leadership .gsc-board-editorial__service-copy strong {
    display: block;
    margin: 0 0 4px;
    color: var(--lb-forest);
    font-family: var(--lb-serif);
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.01em;
}

#section-leadership .gsc-board-editorial__service-copy p {
    max-width: 34em;
    margin: 0;
    color: var(--lb-muted);
    font-size: 1rem;
    line-height: 1.65;
}

/* Divider: a 3px gold segment starting exactly on the content edge, then a
   hairline that fades out. One element, two backgrounds, so they cannot drift. */
#section-leadership .gsc-board-editorial__rule {
    display: block;
    width: 100%;
    height: 3px;
    margin: 36px 0 0;
    background:
        linear-gradient(var(--lb-gold), var(--lb-gold)) left center / 56px 3px no-repeat,
        linear-gradient(90deg, var(--lb-line-strong), rgba(48, 170, 40, 0)) left center / 100% 1px no-repeat;
}


/* ============================================================================
   05. THE PORTRAIT PANEL — "the right page"
   ----------------------------------------------------------------------------
   Stacked layout: a dark panel with the photograph on top and the name plate
   below it, in normal flow.
   Spread layout (section 08c): the panel becomes sticky and as tall as the
   window; the photograph fills it and the name plate sits over a green fade at
   the bottom, with the name set very large.
   ============================================================================ */

#section-leadership .gsc-board-editorial__visual {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: 36px 0 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: var(--lb-radius);
    background: linear-gradient(160deg, #226234 0%, #173E29 58%, #0F2D1C 100%);
    box-shadow: var(--lb-shadow-stage);
}

/* Ribbon: gold in the middle, leaf green at the ends. A background layer, so
   the panel's rounded corners clip it and it can never overshoot. */
#section-leadership .gsc-board-editorial__visual::before {
    content: "";
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lb-leaf), var(--lb-gold) 50%, var(--lb-leaf));
    pointer-events: none;
}

#section-leadership .gsc-board-editorial__visual::after {
    content: none;
    display: none;
}

/* ---- 5a. Photograph ------------------------------------------------------- */

#section-leadership .gsc-board-editorial__portrait-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: 1 / 1.04;
    overflow: hidden;
    background: none;
}

#section-leadership .gsc-board-editorial__portrait-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    isolation: isolate;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
}

#section-leadership .gsc-board-editorial__portrait-frame::before {
    content: none;
    display: none;
}

/* Soft shade at the foot of the photograph: settles the picture into the
   panel. In the spread layout this grows into the fade behind the name. */
#section-leadership .gsc-board-editorial__portrait-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 36%;
    background: linear-gradient(to top, rgba(15, 45, 28, .88), rgba(15, 45, 28, 0));
    pointer-events: none;
    animation: none;
}

/* Clipping happens here, on the photograph, and only here */
#section-leadership .gsc-board-editorial__photo-stack {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
    background: #2B5B3C;
}

/* Cross-fade without a dip: the outgoing slide stays fully opaque underneath
   (z-index 1) for .75s while the incoming slide (z-index 2) fades in over it,
   then the outgoing slide snaps away unseen. */
#section-leadership .gsc-board-editorial__photo-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    transition:
        opacity 0s linear .75s,
        transform 0s linear .75s,
        visibility 0s linear .75s;
    z-index: 1;
}

#section-leadership .gsc-board-editorial__photo-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
    transition:
        opacity .7s var(--lb-ease),
        transform .9s var(--lb-ease);
}

#section-leadership .gsc-board-editorial__photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 14% !important;
    border: 0;
    border-radius: 0 !important;
}

/* Missing photo: index.php swaps in assets/img/default-avatar.png on error.
   Show the silhouette whole, high in the panel, above the name block, instead
   of cropping it like a photograph. */
#section-leadership .gsc-board-editorial__photo[src*="default-avatar"] {
    object-fit: contain !important;
    object-position: 50% 24% !important;
    padding: 14% 18% 36% !important;
}

/* The two frame lines of the earlier designs are not used in this one: the
   photograph needs no frame inside its own panel. */
#section-leadership .gsc-board-editorial__frame-line {
    display: none;
}


/* ---- 5b. Name plate ------------------------------------------------------- */

#section-leadership .gsc-board-editorial__profile {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 26px var(--lb-pad) calc(var(--lb-pad) + 4px);
    border: 0;
    background: none;
    color: var(--lb-on-dark);
}

/* On a director change only the changing content fades; the "Current Director"
   plate stays put so it does not blink. is-swapping is still the hook. */
#section-leadership .gsc-board-editorial__profile > * {
    transition: opacity .3s ease, transform .5s var(--lb-ease);
}

#section-leadership .gsc-board-editorial__profile.is-swapping {
    opacity: 1;
    transform: none;
}

#section-leadership .gsc-board-editorial__profile.is-swapping > :not(.gsc-board-editorial__profile-kicker) {
    opacity: 0;
    transform: translateY(10px);
}

#section-leadership .gsc-board-editorial__profile-kicker {
    display: block;
    margin: 0 0 12px;
    color: var(--lb-gold-light);
    font-size: .9rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
}

#section-leadership .gsc-board-editorial__name {
    max-width: 11em;
    margin: 0;
    color: var(--lb-on-dark);
    font-family: var(--lb-serif);
    font-size: clamp(2rem, 8vw, 2.5rem);
    font-size: clamp(2rem, 9cqi, 2.5rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -.04em;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}

#section-leadership .gsc-board-editorial__position {
    display: block;
    max-width: 26em;
    margin-top: 12px;
    color: var(--lb-leaf);
    font-size: 1.02rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

#section-leadership .gsc-board-editorial__profile-rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 20px 0 18px;
    background: var(--lb-gold);
}

#section-leadership .gsc-board-editorial__bio {
    max-width: 30em;
    margin: 0;
    color: var(--lb-on-dark-soft);
    font-family: var(--lb-serif);
    font-size: 1.04rem;
    line-height: 1.75;
    font-style: italic;
    font-weight: 400;
    text-wrap: pretty;
}

/* Script rendering of the director's name: a generic script face, not any
   person's real handwriting. Swap in an approved signature graphic if the
   cooperative has one. */
#section-leadership .gsc-board-editorial__signature {
    display: block;
    max-width: 18em;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--lb-line-dark);
    color: var(--lb-gold-light);
    font-family: var(--lb-script);
    font-size: var(--lb-sig-size);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: .01em;
    overflow-wrap: break-word;
}


/* ============================================================================
   06. CONTROL LINE — counter, progress, previous / next
   ----------------------------------------------------------------------------
   On white, directly under the masthead (spread) or under the portrait panel
   (stacked). Round icon buttons by default; labelled pills in the stacked
   480-819px tier, where there is room.
   ============================================================================ */

#section-leadership .gsc-board-editorial__controls {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(32px, 1fr) auto;
    align-items: center;
    gap: 14px 20px;
    max-width: none;
    margin: 22px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--lb-ink);
}

#section-leadership .gsc-board-editorial__count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: var(--lb-muted);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .02em;
}

#section-leadership .gsc-board-editorial__count strong {
    color: var(--lb-forest);
    font-family: var(--lb-serif);
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
}

#section-leadership .gsc-board-editorial__count span {
    font-variant-numeric: lining-nums tabular-nums;
}

#section-leadership .gsc-board-editorial__progress {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: #D3E7D0;
}

#section-leadership .gsc-board-editorial__progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lb-brand), var(--lb-action));
    transition: width .7s var(--lb-ease);
}

#section-leadership .gsc-board-editorial__buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

#section-leadership .gsc-board-editorial__nav-btn {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: none;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    display: inline-grid;
    grid-auto-flow: column;
    place-content: center;
    place-items: center;
    gap: 0;
    border: 1.5px solid var(--lb-forest);
    border-radius: 50%;
    background: var(--lb-white);
    color: var(--lb-forest);
    line-height: 1;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition:
        transform .35s var(--lb-ease),
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

#section-leadership .gsc-board-editorial__nav-btn i {
    font-size: .82rem;
    transition: transform .35s var(--lb-ease);
}

/* The word is clipped, not removed, so screen readers still get it */
#section-leadership .gsc-board-editorial__nav-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#section-leadership .gsc-board-editorial__nav-btn:hover,
#section-leadership .gsc-board-editorial__nav-btn:focus-visible {
    transform: translateY(-2px);
    border-color: var(--lb-forest);
    background: var(--lb-forest);
    color: var(--lb-white);
}

#section-leadership .gsc-board-editorial__nav-btn:hover i:first-child {
    transform: translateX(-3px);
}

#section-leadership .gsc-board-editorial__nav-btn:hover i:last-child {
    transform: translateX(3px);
}

/* Next is the primary action: solid forest */
#section-leadership .gsc-board-editorial__nav-btn--next {
    border-color: var(--lb-forest);
    background: var(--lb-forest);
    color: var(--lb-white);
}

#section-leadership .gsc-board-editorial__nav-btn--next:hover,
#section-leadership .gsc-board-editorial__nav-btn--next:focus-visible {
    border-color: var(--lb-action-deep);
    background: var(--lb-action-deep);
    color: var(--lb-white);
}

#section-leadership .gsc-board-editorial__nav-btn:active {
    transform: translateY(0);
}

#section-leadership .gsc-board-editorial__nav-btn:focus-visible {
    outline: 3px solid var(--lb-action);
    outline-offset: 3px;
}


/* ============================================================================
   07. THE BOARD DIRECTORY — "the left page"
   ----------------------------------------------------------------------------
   One ruled row per director: number, name and role, small portrait. No card
   chrome. The active row has a gold bar on its left edge, a pale-green wash,
   a full-colour portrait and a gold numeral. The list grows with the board;
   the portrait panel stays in view beside it.
   ============================================================================ */

#section-leadership .gsc-board-editorial__roster {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
    margin: 48px 0 0;
    padding: 0;
}

#section-leadership .gsc-board-editorial__roster::before {
    content: "Meet the full board";
    flex: 0 0 auto;
    order: 1;
    margin: 0 0 16px;
    color: var(--lb-forest);
    font-family: var(--lb-serif);
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
}

#section-leadership .gsc-board-editorial__roster::after {
    content: none;
    display: none;
}

/* With a single director the stage already shows everything the directory
   would: hide the duplicate list. */
#section-leadership .gsc-board-editorial__roster:has(.gsc-board-editorial__thumb:only-child) {
    display: none;
}

#section-leadership .gsc-board-editorial__roster-line {
    position: static;
    order: 2;
    flex: 1 1 40px;
    height: 1px;
    min-width: 40px;
    margin: 0 0 16px;
    background: linear-gradient(90deg, var(--lb-line-strong), rgba(48, 170, 40, 0));
}

#section-leadership .gsc-board-editorial__roster-track {
    order: 3;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;          /* every row takes the height of the tallest: no jumping when a name wraps */
    gap: 0;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--lb-line);
    border-bottom: 1px solid var(--lb-line);
}

/* ---- One row ---- */
#section-leadership .gsc-board-editorial__thumb {
    position: relative;
    min-width: 0;
    min-height: 88px;
    width: 100%;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 54px 20px;
    grid-template-areas:
        "num name photo arrow"
        "num role photo arrow";
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    margin: 0;
    padding: 14px 8px 14px 16px;
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--lb-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transform: none;
    transition: background-color .35s ease;
}

#section-leadership .gsc-board-editorial__thumb:first-child {
    border-top: 0;
}

/* Active marker: a gold bar on the row's left edge that grows from the top */
#section-leadership .gsc-board-editorial__thumb::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--lb-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .5s var(--lb-ease);
}

/* Arrow: appears on hover and on the active row */
#section-leadership .gsc-board-editorial__thumb::after {
    content: "\2192";
    grid-area: arrow;
    justify-self: end;
    color: var(--lb-action);
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s ease, transform .4s var(--lb-ease);
}

#section-leadership .gsc-board-editorial__thumb-number {
    grid-area: num;
    justify-self: start;
    color: var(--lb-muted);
    font-family: var(--lb-serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: lining-nums tabular-nums;
    transition: color .3s ease;
}

#section-leadership .gsc-board-editorial__thumb-name {
    grid-area: name;
    align-self: end;
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--lb-forest);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    transition: color .3s ease;
}

#section-leadership .gsc-board-editorial__thumb-role {
    grid-area: role;
    align-self: start;
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--lb-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

/* Small portrait, 4:5, muted until its row is the active one */
#section-leadership .gsc-board-editorial__thumb-photo {
    grid-area: photo;
    position: relative;
    display: block;
    width: 54px;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--lb-radius-sm);
    background: #E4EBE1;
    box-shadow: none;
    filter: saturate(.55) brightness(.98);
    transition: filter .4s ease;
}

#section-leadership .gsc-board-editorial__thumb-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: transform .8s var(--lb-ease);
}

/* Missing photo (default-avatar fallback): silhouette whole, on a soft tile,
   so the row reads as intentional rather than as a badly cropped picture. */
#section-leadership .gsc-board-editorial__thumb-photo img[src*="default-avatar"] {
    object-fit: contain;
    padding: 12%;
    background: var(--lb-leaf-soft);
}

/* ---- Row states ----------------------------------------------------------- */

@media (hover: hover) {
    #section-leadership .gsc-board-editorial__thumb:not(.is-active):hover {
        background-color: var(--lb-sage);
    }

    #section-leadership .gsc-board-editorial__thumb:not(.is-active):hover::before {
        transform: scaleY(.35);
    }

    #section-leadership .gsc-board-editorial__thumb:hover::after {
        opacity: 1;
        transform: translateX(0);
    }

    #section-leadership .gsc-board-editorial__thumb:hover .gsc-board-editorial__thumb-photo {
        filter: saturate(.95) brightness(1);
    }

    #section-leadership .gsc-board-editorial__thumb:hover .gsc-board-editorial__thumb-photo img {
        transform: scale(1.05);
    }
}

#section-leadership .gsc-board-editorial__thumb.is-active {
    background: linear-gradient(90deg, var(--lb-leaf-soft), rgba(229, 241, 227, 0) 92%);
}

#section-leadership .gsc-board-editorial__thumb.is-active::before {
    transform: scaleY(1);
}

#section-leadership .gsc-board-editorial__thumb.is-active::after {
    opacity: 1;
    transform: translateX(0);
}

#section-leadership .gsc-board-editorial__thumb.is-active .gsc-board-editorial__thumb-number {
    color: var(--lb-gold-deep);
}

#section-leadership .gsc-board-editorial__thumb.is-active .gsc-board-editorial__thumb-name {
    color: var(--lb-ink);
}

#section-leadership .gsc-board-editorial__thumb.is-active .gsc-board-editorial__thumb-role {
    color: var(--lb-text);
}

#section-leadership .gsc-board-editorial__thumb.is-active .gsc-board-editorial__thumb-photo {
    filter: none;
}

/* Keyboard focus sits inside the row so the clipped edges never hide it */
#section-leadership .gsc-board-editorial__thumb:focus-visible {
    outline: 3px solid var(--lb-forest);
    outline-offset: -3px;
}


/* ============================================================================
   08. SECTION-WIDTH TIERS (container queries on #section-leadership)
   ----------------------------------------------------------------------------
   Widths are the section's CONTENT width (padding already removed).
       < 480     base         stacked, round icon buttons
       >= 480    08a          larger type; 480-819 also gets pill buttons
       >= 640    08b          stacked, landscape portrait panel
       >= 820    08c          THE SPREAD: two pages, sticky portrait
       >= 1120   08d          desktop scale
       >= 1380   08e          wide desktop scale
   Phones under 380px get their own adjustments in 08f.
   ============================================================================ */

/* ---- 08a. 480px and wider ------------------------------------------------- */
@container board (min-width: 480px) {
    #section-leadership .gsc-board-editorial__inner {
        --lb-pad: 30px;
        --lb-sig-size: 1.85rem;
    }

    #section-leadership .gsc-board-editorial__eyebrow {
        margin-bottom: 26px;
    }

    #section-leadership .gsc-board-editorial__title {
        font-size: clamp(2.7rem, 8.4vw, 3.5rem);
        font-size: clamp(2.7rem, 9.4cqi, 3.5rem);
    }

    #section-leadership .gsc-board-editorial__name {
        font-size: clamp(2.3rem, 8vw, 2.9rem);
        font-size: clamp(2.3rem, 8.6cqi, 2.9rem);
    }

    #section-leadership .gsc-board-editorial__portrait-wrap {
        aspect-ratio: 1 / 1;
    }

    #section-leadership .gsc-board-editorial__thumb {
        grid-template-columns: 3rem minmax(0, 1fr) 60px 22px;
        column-gap: 16px;
        padding-left: 20px;
    }

    #section-leadership .gsc-board-editorial__thumb-photo {
        width: 60px;
    }
}

/* Labelled pill buttons, stacked layouts only (the spread has no room for them) */
@container board (min-width: 480px) and (max-width: 819px) {
    #section-leadership .gsc-board-editorial__controls {
        gap: 16px 24px;
    }

    #section-leadership .gsc-board-editorial__nav-btn {
        width: auto;
        padding: 0 22px;
        gap: 10px;
        border-radius: 999px;
        font-size: .95rem;
    }

    #section-leadership .gsc-board-editorial__nav-btn span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: nowrap;
    }
}


/* ---- 08b. 640px to 819px: stacked, landscape portrait panel ---------------- */
@container board (min-width: 640px) and (max-width: 819px) {
    #section-leadership .gsc-board-editorial__inner {
        --lb-pad: 36px;
    }

    #section-leadership .gsc-board-editorial__title {
        font-size: clamp(3rem, 7.6vw, 3.9rem);
        font-size: clamp(3rem, 8cqi, 3.9rem);
    }

    #section-leadership .gsc-board-editorial__portrait-wrap {
        aspect-ratio: 16 / 11;
    }

    #section-leadership .gsc-board-editorial__name {
        font-size: clamp(2.6rem, 6vw, 3.2rem);
        font-size: clamp(2.6rem, 6.4cqi, 3.2rem);
    }

    #section-leadership .gsc-board-editorial__bio {
        font-size: 1.08rem;
    }

    #section-leadership .gsc-board-editorial__visual {
        margin-top: 44px;
    }

    #section-leadership .gsc-board-editorial__roster {
        margin-top: 60px;
    }
}


/* ---- 08c. 820px and wider: THE SPREAD ------------------------------------- */
@container board (min-width: 820px) {
    #section-leadership .gsc-board-editorial__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
        grid-template-rows: repeat(7, auto) minmax(0, 1fr);
        grid-template-areas:
            "eyebrow  stage"
            "title    stage"
            "intro    stage"
            "note     stage"
            "rule     stage"
            "controls stage"
            "roster   stage"
            ".        stage";
        column-gap: clamp(36px, 5.2cqi, 80px);
        --lb-pad: 32px;
        --lb-sticky: 100px;
        --lb-stage-h: 640px;
        --lb-sig-size: 1.8rem;
    }

    /* ---- left page ---- */
    #section-leadership .gsc-board-editorial__eyebrow {
        margin-bottom: 28px;
    }

    #section-leadership .gsc-board-editorial__title {
        max-width: none;
        font-size: clamp(2.5rem, 4.6vw, 3.1rem);
        font-size: clamp(2.5rem, 4.6cqi, 3.3rem);
        line-height: 1.04;
    }

    #section-leadership .gsc-board-editorial__intro {
        max-width: 32em;
        margin-top: 26px;
        font-size: 1.04rem;
    }

    #section-leadership .gsc-board-editorial__service-note {
        max-width: 32em;
        margin-top: 24px;
    }

    #section-leadership .gsc-board-editorial__rule {
        margin-top: 40px;
    }

    #section-leadership .gsc-board-editorial__controls {
        margin-top: 30px;
    }

    #section-leadership .gsc-board-editorial__roster {
        margin-top: 44px;
    }

    #section-leadership .gsc-board-editorial__botanical--right {
        display: none;
    }

    /* ---- right page: sticky portrait panel, as tall as the window ---- */
    #section-leadership .gsc-board-editorial__visual {
        position: sticky;
        top: var(--lb-sticky);
        align-self: start;
        display: block;
        margin: 0;
        height: clamp(540px, calc(100vh - var(--lb-sticky) - 28px), 860px);
        height: clamp(540px, calc(100svh - var(--lb-sticky) - 28px), 860px);
    }

    #section-leadership .gsc-board-editorial__portrait-wrap {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    /* The fade behind the name rises higher on the tall panel */
    #section-leadership .gsc-board-editorial__portrait-frame::after {
        height: 68%;
        background: linear-gradient(
            to top,
            rgba(10, 36, 21, .96) 0%,
            rgba(10, 36, 21, .84) 30%,
            rgba(10, 36, 21, .46) 58%,
            rgba(10, 36, 21, 0) 100%
        );
    }

    #section-leadership .gsc-board-editorial__profile {
        position: absolute;
        inset: 0;
        justify-content: flex-end;
        padding: 0 var(--lb-pad) var(--lb-pad);
    }

    /* The label sits at the top of the photograph as a small plate */
    #section-leadership .gsc-board-editorial__profile-kicker {
        position: absolute;
        top: 28px;
        left: var(--lb-pad);
        margin: 0;
        padding: 8px 14px;
        border: 1px solid var(--lb-gold-line);
        border-radius: 2px;
        background: rgba(15, 45, 28, .72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        font-size: .86rem;
    }

    #section-leadership .gsc-board-editorial__name {
        max-width: 10em;
        font-size: clamp(2.3rem, 5vw, 3rem);
        font-size: clamp(2.3rem, 5.2cqi, 3.2rem);
        line-height: 1.04;
    }

    #section-leadership .gsc-board-editorial__position {
        margin-top: 14px;
    }

    #section-leadership .gsc-board-editorial__profile-rule {
        margin: 20px 0 16px;
    }

    #section-leadership .gsc-board-editorial__bio {
        display: -webkit-box;
        overflow: hidden;
        font-size: 1.02rem;
        line-height: 1.7;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    #section-leadership .gsc-board-editorial__signature {
        margin-top: 16px;
        padding-top: 12px;
    }

    /* Photo column matches the photo width, so portraits and arrows stay aligned */
    #section-leadership .gsc-board-editorial__thumb {
        grid-template-columns: 3rem minmax(0, 1fr) 56px 22px;
    }

    #section-leadership .gsc-board-editorial__thumb-photo {
        width: 56px;
    }
}

/* Short windows: give the name and the bio more of the panel */
@media (max-height: 720px) {
    @container board (min-width: 820px) {
        #section-leadership .gsc-board-editorial__signature {
            display: none;
        }

        #section-leadership .gsc-board-editorial__bio {
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }
    }
}


/* ---- 08d. 1120px and wider: desktop --------------------------------------- */
@container board (min-width: 1120px) {
    #section-leadership .gsc-board-editorial__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
        --lb-pad: 44px;
        --lb-radius: 10px;
        --lb-sig-size: 2rem;
    }

    /* Floors match where 08c tops out (3.3rem), so the headline never shrinks
       when the section grows past 1120px. */
    #section-leadership .gsc-board-editorial__title {
        font-size: clamp(3.3rem, 3.9vw, 3.7rem);
        font-size: clamp(3.3rem, 3.9cqi, 3.7rem);
        line-height: 1.03;
    }

    #section-leadership .gsc-board-editorial__intro {
        font-size: 1.1rem;
    }

    #section-leadership .gsc-board-editorial__service-copy strong {
        font-size: 1.2rem;
    }

    #section-leadership .gsc-board-editorial__service-copy p {
        font-size: 1rem;
    }

    #section-leadership .gsc-board-editorial__rule {
        margin-top: 46px;
    }

    #section-leadership .gsc-board-editorial__profile-kicker {
        top: 36px;
        font-size: .92rem;
    }

    /* Floor matches where 08c tops out (3.2rem): no drop at the boundary */
    #section-leadership .gsc-board-editorial__name {
        max-width: 9.5em;
        font-size: clamp(3.2rem, 4vw, 3.6rem);
        font-size: clamp(3.2rem, 4cqi, 3.9rem);
    }

    #section-leadership .gsc-board-editorial__position {
        font-size: 1.1rem;
    }

    #section-leadership .gsc-board-editorial__bio {
        font-size: 1.12rem;
        line-height: 1.72;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    #section-leadership .gsc-board-editorial__count strong {
        font-size: 2.3rem;
    }

    #section-leadership .gsc-board-editorial__roster::before {
        font-size: 1.55rem;
    }

    #section-leadership .gsc-board-editorial__thumb {
        min-height: 96px;
        grid-template-columns: 3.2rem minmax(0, 1fr) 62px 24px;
        column-gap: 18px;
        padding: 16px 10px 16px 22px;
    }

    #section-leadership .gsc-board-editorial__thumb-number {
        font-size: 1.8rem;
    }

    #section-leadership .gsc-board-editorial__thumb-name {
        font-size: 1.1rem;
    }

    #section-leadership .gsc-board-editorial__thumb-photo {
        width: 62px;
    }
}

@media (max-height: 720px) {
    @container board (min-width: 1120px) {
        #section-leadership .gsc-board-editorial__bio {
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }
    }
}


/* ---- 08e. 1380px and wider: wide desktop ---------------------------------- */
@container board (min-width: 1380px) {
    #section-leadership .gsc-board-editorial__inner {
        --lb-pad: 52px;
    }

    #section-leadership .gsc-board-editorial__title {
        font-size: clamp(3.5rem, 4vw, 4.1rem);
        font-size: clamp(3.5rem, 4cqi, 4.1rem);
    }

    #section-leadership .gsc-board-editorial__name {
        font-size: clamp(3.4rem, 4vw, 4.2rem);
        font-size: clamp(3.4rem, 4cqi, 4.4rem);
    }

    #section-leadership .gsc-board-editorial__bio {
        max-width: 32em;
    }
}


/* ---- 08f. Narrow sections: 380px and under (320px phones) ------------------ */
@container board (max-width: 380px) {
    #section-leadership .gsc-board-editorial__inner {
        --lb-pad: 20px;
        --lb-radius: 6px;
        --lb-sig-size: 1.55rem;
    }

    #section-leadership .gsc-board-editorial__eyebrow {
        gap: 8px 12px;
        font-size: .76rem;
        letter-spacing: .16em;
    }

    #section-leadership .gsc-board-editorial__eyebrow::before {
        width: 36px;
    }

    #section-leadership .gsc-board-editorial__eyebrow::after {
        padding-left: 12px;
        font-size: .7rem;
        letter-spacing: .12em;
    }

    #section-leadership .gsc-board-editorial__title {
        font-size: 2.15rem;
    }

    #section-leadership .gsc-board-editorial__intro {
        font-size: 1rem;
        line-height: 1.8;
    }

    #section-leadership .gsc-board-editorial__service-note {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 14px;
    }

    #section-leadership .gsc-board-editorial__service-icon {
        width: 38px;
        height: 44px;
        font-size: .88rem;
    }

    #section-leadership .gsc-board-editorial__rule {
        margin-top: 30px;
    }

    #section-leadership .gsc-board-editorial__visual {
        margin-top: 30px;
    }

    #section-leadership .gsc-board-editorial__name {
        font-size: 1.95rem;
    }

    #section-leadership .gsc-board-editorial__bio {
        font-size: 1rem;
    }

    #section-leadership .gsc-board-editorial__signature {
        max-width: none;
    }

    #section-leadership .gsc-board-editorial__controls {
        gap: 12px;
    }

    #section-leadership .gsc-board-editorial__count strong {
        font-size: 1.75rem;
    }

    #section-leadership .gsc-board-editorial__buttons {
        gap: 8px;
    }

    #section-leadership .gsc-board-editorial__roster {
        margin-top: 46px;
    }

    #section-leadership .gsc-board-editorial__roster::before {
        font-size: 1.25rem;
    }

    #section-leadership .gsc-board-editorial__thumb {
        min-height: 84px;
        grid-template-columns: 2.2rem minmax(0, 1fr) 50px;
        grid-template-areas:
            "num name photo"
            "num role photo";
        column-gap: 12px;
        padding: 12px 4px 12px 14px;
    }

    #section-leadership .gsc-board-editorial__thumb::after {
        display: none;
    }

    #section-leadership .gsc-board-editorial__thumb-number {
        font-size: 1.35rem;
    }

    #section-leadership .gsc-board-editorial__thumb-name {
        font-size: .96rem;
    }

    #section-leadership .gsc-board-editorial__thumb-role {
        font-size: .86rem;
    }

    #section-leadership .gsc-board-editorial__thumb-photo {
        width: 50px;
    }

    #section-leadership .gsc-board-editorial__botanical {
        display: none;
    }
}

/* Very narrow: the second eyebrow label drops to its own line, with no
   dangling divider stub at the start of the wrapped row */
@container board (max-width: 330px) {
    #section-leadership .gsc-board-editorial__eyebrow::after {
        flex: 0 0 100%;
        padding-left: 0;
        border-left: 0;
    }
}

@container board (max-width: 819px) {
    #section-leadership .gsc-board-editorial__botanical {
        opacity: .09;
    }
}

/* Landscape phones: the stacked portrait panel must not exceed the screen */
@media (orientation: landscape) and (max-height: 520px) {
    #section-leadership.gsc-board-editorial {
        padding-top: 48px;
        padding-bottom: 40px;
    }

    #section-leadership .gsc-board-editorial__portrait-wrap {
        aspect-ratio: 16 / 9;
    }
}


/* ============================================================================
   09. MOTION — one thing draws itself, everything else answers a click
   ----------------------------------------------------------------------------
   The only motion that runs on its own is the gold stroke under the last word
   of the headline, once, when the homepage observer adds .is-active.
   ============================================================================ */

#section-leadership.gsc-board-editorial.reveal.is-active .gsc-board-editorial__title em {
    background-size: 100% .07em;
}

#section-leadership.gsc-board-editorial.reveal.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}


/* ============================================================================
   10. SELECTION, CONTRAST AND TOUCH
   ============================================================================ */

#section-leadership.gsc-board-editorial ::selection {
    background: var(--lb-leaf);
    color: var(--lb-ink);
}

#section-leadership .gsc-board-editorial__profile ::selection {
    background: var(--lb-gold-light);
    color: var(--lb-ink);
}

@media (prefers-contrast: more) {
    #section-leadership .gsc-board-editorial__inner {
        --lb-line: rgba(23, 62, 41, .55);
        --lb-line-soft: rgba(23, 62, 41, .4);
        --lb-line-strong: rgba(23, 62, 41, .7);
        --lb-on-dark-soft: #FFFFFF;
        --lb-on-dark-quiet: #FFFFFF;
    }

    #section-leadership .gsc-board-editorial__visual {
        background: var(--lb-ink);
    }

    #section-leadership .gsc-board-editorial__intro,
    #section-leadership .gsc-board-editorial__service-copy p,
    #section-leadership .gsc-board-editorial__thumb-role,
    #section-leadership .gsc-board-editorial__thumb-number {
        color: var(--lb-ink);
    }

    #section-leadership .gsc-board-editorial__botanical {
        display: none;
    }
}

/* Touch devices: nothing depends on hover. Without hover there is no way to
   preview a portrait, so every row shows its photo in full colour; the gold
   bar alone marks the active director. Touch browsers also keep :hover after a
   tap, so the nav buttons are put back to their resting look here (keyboard
   :focus-visible is unaffected). */
@media (hover: none) {
    #section-leadership .gsc-board-editorial__nav-btn:hover {
        transform: none;
    }

    #section-leadership .gsc-board-editorial__nav-btn:not(.gsc-board-editorial__nav-btn--next):hover {
        border-color: var(--lb-forest);
        background: var(--lb-white);
        color: var(--lb-forest);
    }

    #section-leadership .gsc-board-editorial__nav-btn--next:hover {
        border-color: var(--lb-forest);
        background: var(--lb-forest);
        color: var(--lb-white);
    }

    #section-leadership .gsc-board-editorial__nav-btn:hover i {
        transform: none;
    }

    #section-leadership .gsc-board-editorial__thumb-photo {
        filter: none;
    }
}

/* Touch targets: every directory row is at least 84px tall and full width;
   the round buttons are 48px. */


/* ============================================================================
   11. FALLBACK — browsers without container queries
   ----------------------------------------------------------------------------
   Same layouts, driven by viewport width. Thresholds are higher because the
   fixed side panel removes about 320px from the section on desktop.
   ============================================================================ */

@supports not (container-type: inline-size) {
    @media (min-width: 560px) {
        #section-leadership .gsc-board-editorial__inner {
            --lb-pad: 32px;
        }

        #section-leadership .gsc-board-editorial__title {
            font-size: 3.1rem;
        }

        #section-leadership .gsc-board-editorial__name {
            font-size: 2.7rem;
        }

        #section-leadership .gsc-board-editorial__portrait-wrap {
            aspect-ratio: 16 / 11;
        }
    }

    @media (min-width: 560px) and (max-width: 1179px) {
        #section-leadership .gsc-board-editorial__nav-btn {
            width: auto;
            padding: 0 22px;
            gap: 10px;
            border-radius: 999px;
            font-size: .95rem;
        }

        #section-leadership .gsc-board-editorial__nav-btn span {
            position: static;
            width: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            clip: auto;
            clip-path: none;
            white-space: nowrap;
        }
    }

    @media (min-width: 1180px) {
        #section-leadership .gsc-board-editorial__inner {
            grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
            grid-template-rows: repeat(7, auto) minmax(0, 1fr);
            grid-template-areas:
                "eyebrow  stage"
                "title    stage"
                "intro    stage"
                "note     stage"
                "rule     stage"
                "controls stage"
                "roster   stage"
                ".        stage";
            column-gap: 64px;
            --lb-pad: 40px;
        }

        #section-leadership .gsc-board-editorial__title {
            max-width: none;
            font-size: 3.4rem;
        }

        #section-leadership .gsc-board-editorial__visual {
            position: sticky;
            top: var(--lb-sticky);
            align-self: start;
            display: block;
            margin: 0;
            height: clamp(540px, calc(100vh - var(--lb-sticky) - 28px), 860px);
        }

        #section-leadership .gsc-board-editorial__portrait-wrap {
            position: absolute;
            inset: 0;
            aspect-ratio: auto;
        }

        #section-leadership .gsc-board-editorial__portrait-frame::after {
            height: 68%;
            background: linear-gradient(to top, rgba(10, 36, 21, .96) 0%, rgba(10, 36, 21, .84) 30%, rgba(10, 36, 21, .46) 58%, rgba(10, 36, 21, 0) 100%);
        }

        #section-leadership .gsc-board-editorial__profile {
            position: absolute;
            inset: 0;
            justify-content: flex-end;
            padding: 0 var(--lb-pad) var(--lb-pad);
        }

        #section-leadership .gsc-board-editorial__profile-kicker {
            position: absolute;
            top: 32px;
            left: var(--lb-pad);
            margin: 0;
            padding: 8px 14px;
            border: 1px solid var(--lb-gold-line);
            background: rgba(15, 45, 28, .72);
        }

        #section-leadership .gsc-board-editorial__name {
            max-width: 9.5em;
            font-size: 3.4rem;
            line-height: 1.04;
        }

        #section-leadership .gsc-board-editorial__bio {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            line-clamp: 4;
        }

        #section-leadership .gsc-board-editorial__botanical--right {
            display: none;
        }
    }
}


/* ============================================================================
   12. DEFENCE AGAINST board-premium-fx.css
   ----------------------------------------------------------------------------
   That earlier stylesheet adds leaf drift, a spinning gold ring, a portrait
   glow and sweep, and a shimmering progress line. None of those belong to this
   design. Each rule uses the id plus the section class so it outranks them
   wherever the files load. If board-premium-fx.css is unlinked from index.php,
   nothing here changes.
   ============================================================================ */

#section-leadership.gsc-board-editorial .gsc-board-editorial__botanical--left {
    animation: none !important;
    transform: scaleX(-1);
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__botanical--right {
    animation: none !important;
    transform: none;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__botanical--left::after,
#section-leadership.gsc-board-editorial .gsc-board-editorial__botanical--right::after,
#section-leadership.gsc-board-editorial .gsc-board-editorial__botanical--left::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__botanical--right::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__portrait-wrap::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__portrait-wrap::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__progress span {
    background: linear-gradient(90deg, var(--lb-brand), var(--lb-action));
    background-size: auto;
    animation: none !important;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__progress::after {
    content: none !important;
    display: none !important;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb,
#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb::after,
#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb-photo,
#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb-photo::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb-photo::after,
#section-leadership.gsc-board-editorial .gsc-board-editorial__photo-slide::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__photo-slide::after {
    animation: none !important;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb-photo::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__thumb-photo::after,
#section-leadership.gsc-board-editorial .gsc-board-editorial__photo-slide::before,
#section-leadership.gsc-board-editorial .gsc-board-editorial__photo-slide::after {
    content: none !important;
    display: none !important;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__signature {
    animation: none !important;
    transform: none;
    text-shadow: none;
}

#section-leadership.gsc-board-editorial .gsc-board-editorial__signature::after {
    content: none;
    display: none;
}


/* ============================================================================
   13. REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    #section-leadership.gsc-board-editorial,
    #section-leadership.gsc-board-editorial *,
    #section-leadership.gsc-board-editorial *::before,
    #section-leadership.gsc-board-editorial *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }

    /* The gold stroke is simply there, fully drawn */
    #section-leadership .gsc-board-editorial__title em {
        background-size: 100% .07em;
    }

    #section-leadership .gsc-board-editorial__profile.is-swapping,
    #section-leadership .gsc-board-editorial__profile.is-swapping > :not(.gsc-board-editorial__profile-kicker) {
        transform: none;
    }

    #section-leadership .gsc-board-editorial__photo-slide {
        transform: none;
    }
}


/* ============================================================================
   14. FORCED COLORS / WINDOWS HIGH CONTRAST
   ----------------------------------------------------------------------------
   The overlay layout puts text on a photograph, which system colours cannot
   guarantee. In forced-colors mode the panel falls back to the stacked layout:
   photograph on top, name plate below on a solid system surface.
   ============================================================================ */

@media (forced-colors: active) {
    #section-leadership .gsc-board-editorial__title em {
        background: none;
        color: CanvasText;
        text-decoration: underline;
        text-decoration-thickness: .06em;
        text-underline-offset: .12em;
    }

    #section-leadership .gsc-board-editorial__visual {
        position: relative !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
        forced-color-adjust: none;
    }

    #section-leadership .gsc-board-editorial__portrait-wrap {
        position: relative !important;
        inset: auto !important;
        aspect-ratio: 4 / 3 !important;
    }

    #section-leadership .gsc-board-editorial__portrait-frame::after {
        display: none;
    }

    #section-leadership .gsc-board-editorial__profile {
        position: relative !important;
        inset: auto !important;
        padding: 24px !important;
        background: Canvas;
    }

    #section-leadership .gsc-board-editorial__profile-kicker {
        position: static !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    #section-leadership .gsc-board-editorial__bio {
        display: block !important;
        overflow: visible !important;
    }

    #section-leadership .gsc-board-editorial__profile,
    #section-leadership .gsc-board-editorial__name,
    #section-leadership .gsc-board-editorial__position,
    #section-leadership .gsc-board-editorial__bio,
    #section-leadership .gsc-board-editorial__profile-kicker,
    #section-leadership .gsc-board-editorial__signature {
        color: CanvasText;
        text-shadow: none;
    }

    #section-leadership .gsc-board-editorial__profile-rule {
        background: CanvasText;
        forced-color-adjust: none;
    }

    #section-leadership .gsc-board-editorial__nav-btn,
    #section-leadership .gsc-board-editorial__nav-btn--next {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    #section-leadership .gsc-board-editorial__progress,
    #section-leadership .gsc-board-editorial__progress span {
        background: Highlight;
        forced-color-adjust: none;
    }

    #section-leadership .gsc-board-editorial__thumb::before {
        background: Highlight;
        forced-color-adjust: none;
    }

    #section-leadership .gsc-board-editorial__thumb.is-active {
        border: 2px solid Highlight;
    }

    #section-leadership .gsc-board-editorial__service-icon::before {
        background: CanvasText;
    }

    #section-leadership .gsc-board-editorial__botanical {
        display: none;
    }
}


/* ============================================================================
   15. PRINT
   ============================================================================ */

@media print {
    #section-leadership.gsc-board-editorial {
        padding: 24px 0;
        background: #fff !important;
    }

    #section-leadership .gsc-board-editorial__botanical,
    #section-leadership .gsc-board-editorial__controls {
        display: none !important;
    }

    /* Ink-friendly: the panel becomes a plain block, photo above, text below */
    #section-leadership .gsc-board-editorial__inner {
        display: block;
    }

    #section-leadership .gsc-board-editorial__visual {
        position: relative !important;
        top: auto !important;
        display: block !important;
        height: auto !important;
        margin: 28px 0;
        background: #fff;
        border: 1px solid var(--lb-line-strong);
        box-shadow: none;
        break-inside: avoid;
    }

    #section-leadership .gsc-board-editorial__portrait-wrap {
        position: relative !important;
        inset: auto !important;
        aspect-ratio: 4 / 3 !important;
    }

    #section-leadership .gsc-board-editorial__portrait-frame::after {
        display: none;
    }

    #section-leadership .gsc-board-editorial__profile {
        position: relative !important;
        inset: auto !important;
        padding: 20px !important;
    }

    #section-leadership .gsc-board-editorial__profile-kicker {
        position: static !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        color: #7A5C16;
    }

    #section-leadership .gsc-board-editorial__name,
    #section-leadership .gsc-board-editorial__bio {
        color: #173E29;
        text-shadow: none;
    }

    #section-leadership .gsc-board-editorial__bio {
        display: block !important;
        overflow: visible !important;
    }

    #section-leadership .gsc-board-editorial__position {
        color: #1B6A2E;
    }

    #section-leadership .gsc-board-editorial__signature {
        color: #7A5C16;
    }

    #section-leadership .gsc-board-editorial__thumb {
        break-inside: avoid;
    }

    #section-leadership .gsc-board-editorial__thumb-photo {
        filter: none;
    }
}

/* 12b. Lock the directory row's pseudo-elements against board-premium-fx.css */
#section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb {
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 4px !important;
    height: auto !important;
    background: var(--lb-gold) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    animation: none !important;
    transform: scaleY(0) !important;
    transform-origin: top !important;
}

#section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb.is-active::before {
    transform: scaleY(1) !important;
}

@media (hover: hover) {
    #section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb:not(.is-active):hover::before {
        transform: scaleY(.35) !important;
    }
}

#section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb::after {
    content: "\2192" !important;
    position: static !important;
    inset: auto !important;
    grid-area: arrow !important;
    justify-self: end !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    color: var(--lb-action) !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    animation: none !important;
}

#section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb.is-active::after {
    opacity: 1 !important;
    transform: none !important;
}

@media (hover: hover) {
    #section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb:hover::after {
        opacity: 1 !important;
        transform: none !important;
    }
}

@container board (max-width: 380px) {
    #section-leadership.hp-leadership.gsc-board-editorial .gsc-board-editorial__thumb::after {
        display: none !important;
    }
}