:root{
    /* === Core colours === */
    --primary:        #054A47;
    --secondary:      #038261;
    --tertiary:       #40C770;
    --tertiary-soft:  #b8eac9;
    --accent-coral:   #FC776A;
    --surface-cream:  #F5F0E3;
    --surface-mint:   #D4F2DE;
    --surface-teal:   #D9EDE8;
    --ink:            #054A47;
    --ink-on-dark:    #F5F0E3;
    --muted:          #6B6B6B;
    --line:           rgba(5, 74, 71, 0.14);

    /* === Type families (both naming conventions) === */
    --serif:      'Instrument Serif', Georgia, serif;
    --sans:       'Vend Sans', system-ui, -apple-system, sans-serif;
    --font-serif: var(--serif);
    --font-sans:  var(--sans);

    /* === Type scale === */
    --type-eyebrow-size:      12px;
    --type-eyebrow-tracking:  0.16em;
    --type-hero-size:         clamp(40px, 6.8vw, 104px);
    --type-display-size:      clamp(48px, 6.4vw, 92px);
    --type-h2-size:           clamp(40px, 5vw, 72px);
    --type-editorial-size:    clamp(40px, 5.4vw, 76px);
    --type-quote-size:        clamp(36px, 5.2vw, 72px);
    --type-interstitial-size: clamp(28px, 3.5vw, 44px);
    --type-finale-size:       clamp(56px, 8vw, 128px);
    --type-body-size:         16px;
    --type-body-line:         1.55;
    --type-body-line-prose:   1.65;
    --type-body-large-size:   17px;
    --type-card-title-size:   clamp(20px, 1.6vw, 24px);
    --type-card-copy-size:    14.5px;

    /* === Spacing === */
    --space-section-y:   clamp(96px, 14vw, 192px);
    --space-band-y:      clamp(72px, 9vw, 120px);
    --space-finale-y:    clamp(120px, 16vw, 220px);
    --space-mod-pad:     clamp(48px, 7vw, 104px);
    --space-card-pad:    clamp(22px, 2.4vw, 32px);
    --space-after-eyebrow: clamp(24px, 3vw, 40px);
    --space-after-heading: clamp(48px, 6vw, 72px);
    --gap-col-tight:     clamp(14px, 1.6vw, 22px);
    --gap-col-md:        clamp(20px, 2.4vw, 32px);
    --gap-col-lg:        clamp(48px, 8vw, 120px);
    --gap-stack:         clamp(32px, 5vw, 56px);
    --side:              clamp(32px, 6vw, 80px);
    --max:               100%;
    --max-w:             1320px;

    /* === Radii === */
    --radius-pill:   999px;
    --radius-card:   clamp(14px, 1.4vw, 20px);
    --radius-glass:  clamp(22px, 2.4vw, 34px);
    --radius-arrow:  10px;

    /* === Motion === */
    --ease:     cubic-bezier(.19, 1, .22, 1);
    --ease-pop: cubic-bezier(.22, .9, .25, 1);
    --dur:      0.3s;
    --dur-reveal: 0.85s;
  }

  @media (max-width: 640px) {
    :root{ --space-section-y: clamp(64px, 12vw, 96px); }
  }

  /* === Inner-page body fade-in (homepage uses the opener instead) === */
  body.is-loaded{ opacity: 1; }

  *{ box-sizing: border-box; }
  html, body{ margin: 0; padding: 0; }

  /* The `hidden` attribute must actually hide.
     The UA rule is `[hidden]{ display: none }` at specificity 0, 1, 0 — the same
     as any class — so ANY later `.thing{ display: … }` silently beats it and
     the element stays on screen while `el.hidden` still reports true. That is
     how the case studies filter shipped broken: every card carried `hidden` and
     every card rendered. `!important` is the only reliable answer here, and it
     is safe because nothing in this theme animates an element in or out via the
     attribute — the mega panel drops it entirely (nav.js) and toggles a class.
     Keep this rule; do not "fix" it by scoping to one component. */
  [hidden]{ display: none !important; }
  html{ -webkit-font-smoothing: antialiased; }
  video:not(.bg-video){ max-width: 100%; height: auto; }
  body{
    font-family: var(--sans);
    color: var(--ink);
    background: var(--surface-cream);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
  }

  /* === OPENER ============================================================
     Brand-mark reveal: asterisk seed → spin → G draws → ARDEN letters
     stagger → "the" script writes on. Then the assembled wordmark shrinks +
     migrates to the nav slot while the nav pill expands and reveals its
     links. Three keyframes on #opener-svg: KF1 (center, large), KF2
     (top-centre, mid), KF3 (top-left, nav size). =========================== */
  #opener-curtain{
    position: fixed;
    inset: 0;
    background: var(--surface-cream);
    z-index: 9000;
    transition: opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
  }
  body.opener-active #opener-curtain{ pointer-events: auto; opacity: 1; }
  body.opener-fade #opener-curtain{ opacity: 0; }

  /* The opener SVG floats above the curtain and is transformed through three keyframes */
  #opener-svg{
    position: fixed;
    z-index: 9100;
    top: 50%; left: 50%;
    width: clamp(320px, 56vw, 720px);
    height: auto;
    overflow: visible;
    display: block;
    transform: translate(-50%, -50%);
    transition:
      top 1.1s cubic-bezier(0.65, 0, 0.35, 1),
      left 1.1s cubic-bezier(0.65, 0, 0.35, 1),
      width 1.1s cubic-bezier(0.65, 0, 0.35, 1),
      height 1.1s cubic-bezier(0.65, 0, 0.35, 1),
      transform 1.1s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.4s ease;
    pointer-events: none;
  }
  /* kf-3 position is set inline by JS — measured from the actual nav brand img */
  #opener-svg.kf-done{ opacity: 0; transition: opacity 0.45s ease; }

  /* Opener SVG path styling (mirrors the canonical opener from prototype/index.html) */
  #opener-svg .arden-letter{
    transform-box: fill-box; transform-origin: left center;
    fill: var(--primary); opacity: 0;
    transform: translateX(-4px) scale(0.90);
    will-change: transform, opacity;
    transition:
      opacity 500ms cubic-bezier(0.37, 0, 0.63, 1),
      transform 800ms cubic-bezier(0.34, 1.18, 0.64, 1);
  }
  #opener-svg .arden-letter.in{ opacity: 1; transform: translateX(0) scale(1); }
  #opener-svg .the-path{ fill: var(--primary); }
  #opener-svg .the-mask{
    fill: none; stroke: white; stroke-width: 20;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
  }
  #opener-svg #g-wrap{
    transform-box: fill-box; transform-origin: center center;
    will-change: transform, opacity; opacity: 0;
  }
  #opener-svg #letter-g{
    fill: var(--primary); fill-opacity: 0;
    stroke: var(--primary); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    paint-order: stroke fill;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    will-change: stroke-dashoffset, fill-opacity;
  }
  #opener-svg #ast-pos{ will-change: transform, opacity; }
  #opener-svg #ast-rot{ transform-box: fill-box; transform-origin: 93.5px 93.5px; }
  #opener-svg #asterisk-path{
    fill: var(--secondary); fill-opacity: 1;
    stroke: var(--secondary); stroke-width: 5; stroke-opacity: 0;
    stroke-linejoin: round;
  }

  /* During opener: nav pill stays at full natural width so brand-img position
     is stable for JS measurement. Brand-img + links + CTA fade in at handoff. */
  body.opener-active .nav__brand img, body.opener-active .nav__links, body.opener-active .nav__cta{ opacity: 0; pointer-events: none; }

  body.opener-handoff .nav__brand img{
    opacity: 1;
    transition: opacity 0.5s ease 0.05s;
  }
  body.opener-handoff .nav__links{ opacity: 1; }
  body.opener-handoff .nav__links a{
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: auto;
  }
  /* Nav links wait for .hero-nav-in class (added by JS after CTAs finish) */
  body.hero-nav-in .nav__links a{
    animation: nav-link-in 0.6s cubic-bezier(0.22, 0.9, 0.25, 1) forwards;
  }
  body.hero-nav-in .nav__links a:nth-child(1){ animation-delay: 0.0s; }
  body.hero-nav-in .nav__links a:nth-child(2){ animation-delay: 0.08s; }
  body.hero-nav-in .nav__links a:nth-child(3){ animation-delay: 0.16s; }
  body.hero-nav-in .nav__links a:nth-child(4){ animation-delay: 0.24s; }
  body.hero-nav-in .nav__links a:nth-child(5){ animation-delay: 0.32s; }
  body.hero-nav-in .nav__links a:nth-child(6){ animation-delay: 0.40s; }
  body.opener-handoff .nav__cta{
    opacity: 0;
    pointer-events: auto;
  }
  body.hero-nav-in .nav__cta{
    opacity: 1;
    transition: opacity 0.5s ease 0.45s;
  }
  @keyframes nav-link-in{
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    #opener-curtain, #opener-svg{ display: none; }
  }

  /* === SCROLL-SCRUBBED IMAGE-SEQUENCE BACKGROUND ========================= */
  .bg-video{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  /* Hidden source image — feeds the canvas texture{ display: none; }
  /* Overlay — sits above the sequence, below all content.
     The colour & opacity are driven by JS based on scroll position so the page
     transitions from a dark "intro" atmosphere into the light "hero" atmosphere
     in the first viewport of scroll (newgenre-style). */
  .bg-overlay{
    position: fixed;
    inset: 0;
    background: rgba(5, 74, 71, 0.88);  /* default — dark intro atmosphere */
    z-index: 1;
    pointer-events: none;
    transition: none;
    will-change: background;
  }
  /* Vignette to fade edges so the bg doesn't feel pasted-on */
  .bg-overlay::after{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
      transparent 30%,
      rgba(0, 0, 0, 0.18) 100%);
  }
  /* All sections need to sit above the video + overlay */
  .nav-wrap, .hero, .logos, .truth, .section, .ctaband{
    position: relative;
    z-index: 2;
  }
  .nav-wrap{ z-index: 100; }

  /* Eyebrow colour transitions with the stage */
  .hero__eyebrow{ transition: color 1.4s var(--ease); }
  body.is-stage-1 .hero__eyebrow{ color: var(--surface-cream); }
  body.is-stage-2 .hero__eyebrow{ color: var(--ink); }

  /* === Hero stages (intro statement swaps in place to become the main hero) ===== */
  .hero__stages{
    position: relative;
    width: 100%;
    flex: 1;
  }
  .hero__stage{
    position: absolute;
    inset: 0;
    width: 100%;
    transition: opacity 1.0s var(--ease);
  }
  .hero__stage--intro{ opacity: 1; }
  .hero__stage--main{
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s;
  }
  body.is-stage-2 .hero__stage--intro{ opacity: 0; pointer-events: none; }
  body.is-stage-2 .hero__stage--main{
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
  }

  .hero__intro-statement{
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(40px, 6.8vw, 104px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--surface-cream);
    margin: 0;
    max-width: 22ch;
  }
  .hero__intro-statement em{ font-style: italic; }
  .hero__intro-statement .word-mask{
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
  }
  .hero__intro-statement .word{
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1.0s cubic-bezier(.22, .9, .25, 1);
    will-change: transform;
  }
  .hero__intro-statement .word.is-in{ transform: translateY(0); }

  /* Body class drives overlay colour for the dark→light swap. After the hero
     scrolls out of view, the overlay fades to 0 so other sections see the
     video texture directly. */
  body.is-stage-1 .bg-overlay{ background: rgba(5, 74, 71, 0.88); opacity: 1; }
  body.is-stage-2 .bg-overlay{ background: rgba(245, 240, 227, 0.45); opacity: 1; }
  body.is-past-hero .bg-overlay{ opacity: 0; }
  .bg-overlay{ transition: background 1.4s var(--ease), opacity 0.8s var(--ease); }


  /* Hero needs transparent background so video shows through the overlay */
  .hero{ background: transparent; }

  /* === Shared section primitives ========================================= */
  .section{
    position: relative;
    z-index: 2;
    padding: clamp(96px, 14vw, 192px) var(--side);
  }
  /* All sections are fully transparent — pure flower (garden drift video)
     texture shows through everywhere. Text colour stays in role for
     readability against whatever frame is in view. */
  .section--dark{ background: transparent; color: var(--ink-on-dark); }
  .section--mint{ background: transparent; color: var(--ink); }
  .section--cream-tinted{ background: transparent; color: var(--ink); }
  /* ← new: hard colour-block sections (newgenre.studio inspired) — sit above
       the video bg, covering it where they overlap. Cream zone at the top, harder white nearer the bottom. */
  .section--cream{                                                            /* ← changed: solid cream background, no transparency */
    background: var(--surface-cream);
    color: var(--ink);
    position: relative;
  }
  .section--white{ background: #ffffff; color: var(--ink); }
  .section__inner{
    /* ← changed: dropped max-width + auto-center.
       Header gutter (var(--side)) is now the single rule. */
    width: 100%;
  }
  .label{
    font-family: var(--sans);
    font-size: var(--type-eyebrow-size);
    font-weight: 600;
    letter-spacing: var(--type-eyebrow-tracking);
    line-height: 1.2em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 var(--space-after-eyebrow);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: default;
  }
  .label--on-dark{ color: var(--surface-cream); opacity: 0.7; }
  .label--coral{ color: var(--accent-coral) !important; }

  /* Asterisk mark — always coral.
     .ap-eyebrow is the Approach page's own eyebrow class; it predates .label
     and was the only eyebrow on the site rendering without the mark. Listed
     here rather than given a copy of this rule, so the mark has one definition. */
  .label::before, .ap-eyebrow::before{
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--accent-coral);
    -webkit-mask: url('asterisk.svg') no-repeat center / contain;
            mask: url('asterisk.svg') no-repeat center / contain;
  }

  /* Suppress ::before when label already contains an inline SVG asterisk */
  .label:has(> svg.section-mark)::before, .ap-eyebrow:has(> svg.section-mark)::before{ display: none; }

  /* === Logo wall (hard cream edge — no fade-in) ========================= */
  .logos{
    background: var(--surface-cream);   /* ← changed: solid cream — was transparent + fading ::before pseudo */
    padding: 48px var(--side) 64px;     /* horizontal gutter matches header */
    position: relative;
    z-index: 2;
  }
  /* (Removed .logos::before and .logos.bg-visible::before — the fade-in
     opacity transition on the cream background is gone. Section now has
     a hard top edge against whatever's above it.) */
  .logos__inner{
    /* ← changed: dropped max-width + auto-center. Flush gutter via parent now. */
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Edge fade/blur mask */
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0%, black 12%, black 88%, transparent 100%);
  }
  .logos-label{
    text-align: center;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: 0.15s;
  }
  .logos.is-visible .logos-label{
    opacity: 1;
    transform: translateY(0);
  }
  .logos-label .eyebrow{
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;                                                      /* ← new */
    align-items: center;
    gap: 8px;
  }
  .logos.is-visible .logos-divider{ opacity: 0.12; }
  .marquee{
    display: flex;
    gap: 80px;
    animation: marquee-scroll 360s linear infinite;
    width: max-content;
    align-items: center;
    opacity: 0;
    transition: opacity 0.8s var(--ease) 0.3s;
    pointer-events: none;
  }
  .logos.is-visible .marquee{ opacity: 1; }
  .marquee img.logo-img-marquee{
    flex-shrink: 0;
    height: 36px;
    width: auto;
    max-width: 150px;
    display: block;
    user-select: none;
  }
  @keyframes marquee-scroll{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .change__body .label{ grid-column: 1; align-self: start; padding-top: 3px; }

  /* === 3D mouse-tilt + glass card ======================================== */
  /* ← changed: separated tilt mechanics from glass styling so any element
       can be a tilt target. .tilt-stage holds perspective + pop-in reveal;
       .tilt-target carries the rotateX / rotateY transform; .glass-card
       layers the apple-glass visual on top. */
  /* Entrance lives on .tilt-stage so it doesn't fight the rotation on .tilt-target */
  .tilt-stage{
    display: block;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    margin: 0 auto;
    /* Entrance animation — stage rises + fades, card inside rotates freely */
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  }
  .tilt-stage.is-in{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Rotation lives here — unblocked by entrance since it's a child element */
  .tilt-target{
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s var(--ease);
    will-change: transform;
    backface-visibility: hidden;
  }
  .tilt-target.is-tilting{
    transition: transform 0.12s linear;
  }
  .glass-card .label--on-dark{
    color: var(--ink);
    opacity: 0.55;
  }
  .tilt-stage.is-in .glass-card .change__quote{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.25s;
  }
  .glass-card .change__body .label{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  }
  .tilt-stage.is-in .glass-card .change__body .label{
    opacity: 0.55;
    transform: translateY(0);
    transition-delay: 0.55s;
  }
  .tilt-stage.is-in .glass-card .change__body p{
    opacity: 0.78;
    transform: translateY(0);
    transition-delay: 0.7s;
  }
  @media (prefers-reduced-motion: reduce) {
    .tilt-target{ transition: none; transform: none; opacity: 1; }
    .glass-card .change__body .label{ opacity: 1; transform: none; filter: none; transition: none; }
  }

  /* === The Uncomfortable Truth (interstitial band) ======================== */
  .truth{
    padding: clamp(72px, 9vw, 120px) var(--side);
    text-align: center;
  }

  /* === Scroll-driven ink transition ========================================
     Sections with [data-ink-scroll] start with white/cream text, then
     transition to dark/ink as they scroll into view. JS sets --ink-t (0→1). */
  [data-ink-scroll]{ --ink-t: 0; }

  /* Garden OS overrides */
  [data-ink-scroll] .gardenos__h, [data-ink-scroll] .gardenos__h em{
    color: color-mix(in srgb, var(--surface-cream), var(--ink) calc(var(--ink-t) * 100%));
  }
  [data-ink-scroll] .gardenos__body p{
    color: color-mix(in srgb, rgba(245,240,227,0.85), var(--ink) calc(var(--ink-t) * 100%));
  }
  [data-ink-scroll] .gardenos__link{
    color: color-mix(in srgb, var(--surface-cream), var(--ink) calc(var(--ink-t) * 100%));
    border-bottom-color: color-mix(in srgb, rgba(245,240,227,0.35), rgba(26,26,26,0.25) calc(var(--ink-t) * 100%));
    }
  [data-ink-scroll] .gardenos__dim{
    color: color-mix(in srgb, var(--surface-cream), var(--ink) calc(var(--ink-t) * 100%));
  }
  [data-ink-scroll] .gardenos__dim__num{
    color: color-mix(in srgb, var(--tertiary), var(--tertiary) calc(var(--ink-t) * 100%));
  }
  [data-ink-scroll] .gardenos__dims{
    border-top-color: color-mix(in srgb, rgba(245,240,227,0.18), rgba(26,26,26,0.12) calc(var(--ink-t) * 100%));
  }
  [data-ink-scroll] .label--on-dark{
    color: color-mix(in srgb, var(--surface-cream), var(--ink) calc(var(--ink-t) * 100%));
  }

  /* Work section overrides */
  [data-ink-scroll] .work__h, [data-ink-scroll] .work__h em, [data-ink-scroll] .work__intro, [data-ink-scroll] > .section__inner > .label{
    color: color-mix(in srgb, var(--surface-cream), var(--ink) calc(var(--ink-t) * 100%));
  }

  /* CTA band — static colours (scroll reveal handled by --cta-p) */
  [data-ink-scroll].ctaband .ctaband__h, [data-ink-scroll].ctaband .ctaband__h em{
    color: var(--primary);                 /* ← changed: dark teal (was coral) to match reference */
  }
  [data-ink-scroll].ctaband .ctaband__body{
    color: rgba(5, 74, 71, 0.72);          /* ← changed: muted dark teal on cream (was cream) */
  }
  [data-ink-scroll].ctaband .ctaband__footer{
    color: rgba(245, 240, 227, 0.65);
    border-top-color: rgba(245, 240, 227, 0.18);
  }

  /* Garden OS — dark background variant (Tom: rhythm break + new bg colour) */ /* ← new */
  #garden-os.section--ink{
    background: var(--primary);
    color: var(--surface-cream);
  }

  /* ── Garden OS — scroll-driven expand-to-full-screen ─────────────── */    /* ← new (v23 expand interaction) */
  .go-pin{                       /* tall runway = scroll distance for expand + pin */
    position: relative;
    height: 220vh;
    --go-p: 0;                    /* 0 = inset card · 1 = full bleed */
    padding-top: 0;               /* padding so cream bg covers the gap (margin wouldn't) */
    background: var(--surface-cream);
    z-index: 2;
  }
  .go-stage{                     /* pinned full-viewport frame */
    position: sticky; top: 0;
    height: 100vh;
    display: flex;
    align-items: stretch;
    padding: calc((1 - var(--go-p)) * clamp(20px, 4vw, 56px));
    z-index: 11;                  /* above neighbouring cream sections */
    background: var(--surface-cream);    /* ← new: cream behind the inset green tile */
    will-change: padding;
  }
  .go-stage > #garden-os{        /* the card grows to fill the stage minus padding */
    flex: 1;
    min-height: 0;
    border-radius: calc((1 - var(--go-p)) * clamp(20px, 2vw, 32px));
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: clamp(40px, 5vw, 72px);
    padding-bottom: clamp(40px, 5vw, 72px);
    box-shadow: 0 24px 60px -30px rgba(5, 74, 71, 0.45);
    will-change: border-radius;
  }
  @media (prefers-reduced-motion: reduce) {                                    /* respect users with reduced-motion */
    .go-pin{ height: auto; }
    .go-stage{ position: static; height: auto; padding: 0; }
    .go-stage > #garden-os{ border-radius: 0; }
  }
  @media (max-width: 860px) {
    .go-pin{ height: auto; }
    .go-stage{ position: static; height: auto; padding: 0; }
    .go-stage > #garden-os{
      border-radius: clamp(16px, 2vw, 24px);
      padding-top: clamp(72px, 17vw, 104px);   /* ← more green above the eyebrow */
    }
  }
  /* === The Garden OS ===================================================== */
  .gardenos__top{                                      /* ← changed: match Industries __head alignment */
    display: grid;
    grid-template-columns: 1.25fr 1fr;                 /* ← changed: match Industries ratio */
    gap: clamp(28px, 5vw, 72px);                       /* ← changed: match Industries gap */
    align-items: start;                                /* ← changed: end → start (top-align like Industries) */
    margin-bottom: clamp(32px, 4vw, 56px);             /* ← changed: match Industries spacing */
  }
  /* All Garden OS text starts white, transitions to dark on scroll */
  .gardenos__h{
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 58px);                 /* ← changed: match Industries rule (was clamp(40px,5vw,72px)) */
    line-height: 1.0;                                    /* ← changed: 1.05→1.0 (100% per Figma) */
    letter-spacing: -0.03em;
    color: var(--surface-cream);
    margin: 0;
    max-width: 14ch;
    transition: color 1.2s var(--ease);
  }
  .gardenos__h.is-dark-text{ color: var(--ink); }
  .gardenos__h em{
    /* ← changed: drop serif italic — match Industries' uniform sans-bold treatment */
    font-family: var(--sans);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  #garden-os .label--on-dark{
    color: color-mix(in srgb, var(--surface-cream), var(--ink) calc(var(--ink-t, 0) * 100%));
    opacity: 0.7;
    display: inline-flex;                                                      /* ← new: align asterisk */
    align-items: center;
    gap: 10px;
  }
  .gardenos__body{                                     /* ← new: baseline-align with headline (same as Industries __aside) */
    padding-top: 36px;
  }
  .gardenos__body p{
    font-size: 16px;
    line-height: 1.65;
    color: rgba(245, 240, 227, 0.85);
    margin: 0 0 24px;
    max-width: 42ch;
    transition: color 1.2s var(--ease);
  }
  .gardenos__body.is-dark-text p{ color: var(--ink); opacity: 0.72; }
  .gardenos__link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--surface-cream);
    font-weight: 500;
    border-bottom: 1px solid rgba(245, 240, 227, 0.35);
    padding-bottom: 4px;
    padding-top: 12px;                 /* ← new: grows tap height ~27→39px upward; underline stays put */
    margin-top: -12px;
    transition: color 1.2s var(--ease), border-color var(--dur) var(--ease);
  }
  .gardenos__body.is-dark-text .gardenos__link{
    color: var(--ink);
    border-bottom-color: rgba(26, 26, 26, 0.25);
  }
  .gardenos__link:hover{ border-color: var(--tertiary); }
  /* ── v23: outlined panel (moustache stats-panel-inspired) with tech/network animations ── */
  .gardenos__dims{                       /* outlined frame */
    margin-top: clamp(36px, 5vw, 64px);
    border: 1px solid rgba(245, 240, 227, 0.32);
    border-radius: clamp(14px, 1.4vw, 22px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    overflow: hidden;
    transition: grid-template-columns 0.55s var(--ease);   /* ← hover-driven column resize */
  }
  /* Hovered column expands ~2× — neighbours contract (uses :has, modern browsers) */
  .gardenos__dims:has(.gardenos__dim:nth-child(1):hover){ grid-template-columns: 2fr 1fr 1fr 1fr; }
  .gardenos__dims:has(.gardenos__dim:nth-child(2):hover){ grid-template-columns: 1fr 2fr 1fr 1fr; }
  .gardenos__dims:has(.gardenos__dim:nth-child(3):hover){ grid-template-columns: 1fr 1fr 2fr 1fr; }
  .gardenos__dims:has(.gardenos__dim:nth-child(4):hover){ grid-template-columns: 1fr 1fr 1fr 2fr; }
  .gardenos__dim{                        /* each column */
    position: relative;
    padding: clamp(20px, 2.4vw, 32px) clamp(16px, 1.8vw, 26px);
    display: flex; flex-direction: column;
    min-height: clamp(210px, 26vh, 280px);
    cursor: default;
    transition: background 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  .gardenos__dim + .gardenos__dim{
    border-left: 1px solid rgba(245, 240, 227, 0.18);
  }
  /* When any cell is hovered: non-hovered cells dim */
  .gardenos__dims:has(.gardenos__dim:hover) .gardenos__dim:not(:hover){ opacity: 0.45; }
  /* Hovered cell: subtle cream-tint background + brighter viz colours */
  .gardenos__dim:hover{
    background: rgba(245, 240, 227, 0.06);
  }
  .gardenos__dim:hover .viz-line{ stroke: rgba(245, 240, 227, 0.55); }   /* brighter mesh / paths */
  .gardenos__dim:hover .viz-node{ fill: rgba(245, 240, 227, 0.7); }
  .gardenos__dim:hover .viz-center{ fill: var(--surface-cream); }
  .gardenos__dim:hover .viz-node--flash{ animation-duration: 1.2s; }       /* speed-up flash on hover */
  .gardenos__dim:hover .gardenos__dim__num{ opacity: 0.85; }                /* eyebrow brightens */
  .gardenos__dim__num{                   /* top label — small uppercase */
    display: inline-flex;
    font-family: var(--sans); font-style: normal; font-weight: 600;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--surface-cream); opacity: 0.55;
    margin-bottom: clamp(12px, 1.5vw, 18px);
  }
  .gardenos__dim__viz{                   /* SVG animation box (middle, fills space) */
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: clamp(16px, 2vw, 24px);
    min-height: 56px;
    opacity: 0;                                                                /* ← changed: hidden at rest, fades in on hover */
    transition: opacity 0.45s var(--ease);
  }
  .gardenos__dim:hover .gardenos__dim__viz{ opacity: 1; }                     /* ← new: reveal animation on hover */
  /* No hover available (touch), or narrow enough to be a phone/tablet: show every
     animation at rest so nobody has to tap a card to see it. Both conditions are
     covered because some touch devices still report `hover: hover`. */
  @media (hover: none){
    .gardenos__dim__viz { opacity: 1; }
    .gardenos__dim .viz-line   { stroke: rgba(245, 240, 227, 0.55); }
    .gardenos__dim .viz-node   { fill: rgba(245, 240, 227, 0.7); }
    .gardenos__dim .viz-center { fill: var(--surface-cream); }
    .gardenos__dim .gardenos__dim__num { opacity: 0.85; }
  }
  @media (max-width: 900px) {
    .gardenos__dim__viz{ opacity: 1; }
    .gardenos__dim .viz-line{ stroke: rgba(245, 240, 227, 0.55); }
    .gardenos__dim .viz-node{ fill: rgba(245, 240, 227, 0.7); }
    .gardenos__dim .viz-center{ fill: var(--surface-cream); }
    .gardenos__dim .gardenos__dim__num{ opacity: 0.85; }
  }
  .gardenos__dim__viz svg{ width: 100%; height: auto; max-height: 88px; display: block; }
  .gardenos__dim__name{                  /* big dimension label (bottom focal) */
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1;
    letter-spacing: -0.02em; color: var(--surface-cream);
    min-height: 2.2em;                  /* reserves 2-line height so desc never jumps */
  }
  .gardenos__dim__desc{
    font-family: var(--sans); font-size: clamp(12px, 1vw, 14px);
    line-height: 1.5; color: var(--surface-cream); opacity: 0.65;
    margin-top: 8px; margin-bottom: 0;
  }

  /* Viz tokens & animations */
  .viz-line{ stroke: rgba(245, 240, 227, 0.32); stroke-width: 1; fill: none; }
  .viz-node{ fill: rgba(245, 240, 227, 0.45); }
  .viz-pulse{ fill: var(--accent-coral); }
  .viz-center{ fill: rgba(245, 240, 227, 0.85); }
  @keyframes viz-flash{
    0%, 100% { fill: rgba(245, 240, 227, 0.45); }
    40%, 60% { fill: var(--accent-coral); }
  }
  .viz-node--flash{
    animation: viz-flash 2.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
  @keyframes viz-throb{
    0%, 100% { transform: scale(1); transform-origin: center; }
    50%      { transform: scale(1.4); transform-origin: center; }
  }
  .viz-center--throb{
    transform-box: fill-box;
    transform-origin: center;
    animation: viz-throb 2.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .viz-node--flash, .viz-center--throb{ animation: none; }
    [class*="viz-"] animateMotion{ display: none; }   /* SMIL: not stoppable via CSS, accept defaults */
  }

  @media (max-width: 900px) {
    .gardenos__top{ grid-template-columns: 1fr; gap: 32px; }
    .gardenos__dims{ grid-template-columns: repeat(2, 1fr); }
    .gardenos__dim + .gardenos__dim{ border-left: 0; }
    .gardenos__dim:nth-child(2n){ border-left: 1px solid rgba(245, 240, 227, 0.18); }
    .gardenos__dim:nth-child(n+3){ border-top: 1px solid rgba(245, 240, 227, 0.18); }
  }

  /* ── Mobile: Garden OS dims become a horizontal swipe rail ────────────────── */
  @media (max-width: 640px){
    .gardenos__dims {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      transition: none;                  /* grid-template-columns transition is moot in flex */
      /* Full-bleed track with a gutter of inline padding at each end. The frame
         is drawn on the CARDS below, not on this container, so its rounded caps
         are part of the scrolling content: at rest the left cap sits in the
         gutter, at max scroll the right cap does, and mid-scroll the rail runs
         off both edges. A container border can't do that — it would stay pinned
         to the viewport while the cards scrolled underneath it.
         #garden-os is overflow:hidden, so the bleed clips at the viewport
         rather than creating a horizontal page scrollbar. */
      margin-inline: calc(-1 * var(--side));
      padding-inline: var(--side);
      scroll-padding-inline: var(--side);
      border: 0;
      border-radius: 0;
    }
    .gardenos__dims::-webkit-scrollbar { display: none; }
    .gardenos__dim {
      flex: 0 0 74vw;         /* vw, not %, so the inline padding can't shrink the card */
      scroll-snap-align: center;
      min-height: clamp(230px, 34vh, 300px);
      border: 1px solid rgba(245, 240, 227, 0.32);   /* top + bottom rails */
      border-left-width: 0;                          /* sides handled below */
      border-right-width: 0;
    }
    /* Internal dividers between cards */
    .gardenos__dim + .gardenos__dim {
      border-left: 1px solid rgba(245, 240, 227, 0.18);
    }
    /* The frame's rounded end caps — these scroll with the content */
    .gardenos__dim:first-child {
      border-left: 1px solid rgba(245, 240, 227, 0.32);
      border-top-left-radius: clamp(14px, 1.4vw, 22px);
      border-bottom-left-radius: clamp(14px, 1.4vw, 22px);
    }
    .gardenos__dim:last-child {
      border-right: 1px solid rgba(245, 240, 227, 0.32);
      border-top-right-radius: clamp(14px, 1.4vw, 22px);
      border-bottom-right-radius: clamp(14px, 1.4vw, 22px);
    }
    /* Horizontally-clipped cards never intersect the viewport, so the scroll
       reveal would leave cards 3–4 permanently invisible. Force them on. */
    .gardenos__dim[data-reveal] {
      opacity: 1; translate: none; filter: none; transition: none;
    }
  }

  /* === Scroll reveal (shared) ============================================ */
  /* ← changed: animates the standalone `translate` property (not `transform`)
     so it COMPOSES with any element's own transform (scale, centring translate
     etc.) instead of overriding it — same fix as .orbit__center. */
  [data-reveal]{
    opacity: 0;
    translate: 0 22px;
    transition:
      opacity 0.85s var(--ease),
      translate 0.85s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, translate;
  }
  [data-reveal].is-in{
    opacity: 1;
    translate: 0 0;
  }
  /* Dramatic variant — more travel + blur for key headings */
  [data-reveal="dramatic"]{
    opacity: 0;
    translate: 0 48px;
    filter: blur(4px);
    transition:
      opacity 1.1s var(--ease),
      translate 1.1s var(--ease),
      filter 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal="dramatic"].is-in{
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal="dramatic"]{ opacity: 1; translate: none; filter: none; transition: none; }
  }
  @keyframes scroll-hint-bob{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
  }
  @keyframes scroll-hint-fade{
    0%, 100% { opacity: 0.6; }                                                 /* ← changed */
    50%      { opacity: 0.3; }                                                 /* ← changed */
  }

  /* Tighten gap between Garden OS ↔ Services */
  #garden-os{ padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }  /* ← changed: reduced top + bottom negative space */
  #garden-os > .section__inner{ padding-top: clamp(16px, 2vw, 32px); justify-content: center; }  /* ← changed: center text in sticky viewport */
  body.home #team{ padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }
  body.home #team::after{                                                     /* bottom-edge fade */
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: clamp(48px, 6vw, 96px);
    background: linear-gradient(to bottom, var(--surface-cream), transparent);
    pointer-events: none;
    z-index: 1;
    transform: translateY(100%);                                               /* hang below the section */
  }
  /* Home-page section spacing only.
     These were bare id selectors, which is a trap: #work, #contact and
     #solutions are anchor targets reused by other templates (the Solutions page
     uses all three), and an id beats any class, so those pages silently
     inherited home-page padding — the case-study section lost most of its
     bottom padding and the closing CTA lost its top. Scoped to body.home so
     the ids stay usable as anchors everywhere else. */
  body.home #services{ padding-top:    clamp(24px, 3vw, 40px);
                         padding-bottom: clamp(24px, 3vw, 40px); }
  body.home #work{ padding-top:    clamp(80px, 13.9vw, 200px);
                         padding-bottom: clamp(24px, 3vw, 40px); }
  body.home #contact{ padding-top:    clamp(48px, 6vw, 80px); }

  /* === Performance Marketing Services (capabilities grid) =============== */
  /* ← new block: 8-tile services section inspired by dapper.agency layout, cream-tinted to sit between Garden OS and Selected Work. */
  /* ── SOLUTIONS — sticky stacking cards (moustacherepublic-inspired) ── */   /* ← new */
  .solutions{
    background: var(--surface-cream);
    padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 7vw, 96px);
    position: relative;
    z-index: 11;
  }
  .solutions__intro{
    max-width: var(--max);
    margin: 0 auto clamp(56px, 7vw, 100px);
    padding: 0 var(--side);
  }
  .solutions__eyebrow{
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-coral);
    margin: 0 0 clamp(18px, 2.4vw, 28px);
  }
  .solutions__h{
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(32px, 4vw, 58px); line-height: 1.1;
    letter-spacing: -0.025em; color: var(--ink); margin: 0 0 24px; max-width: none;
  }
  .solutions__h em{ font-style: normal; font-weight: inherit; letter-spacing: inherit; }  /* ← changed: match parent sans */
  .solutions__lead{
    font-family: var(--sans); font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.6; color: var(--ink); opacity: 0.8; max-width: 56ch; margin: 0;
  }
  .solutions__stack{
    padding: 0 var(--side);
    max-width: var(--max); margin: 0 auto;
  }
  .solution-card{
    position: sticky;                        /* ← restored: sticky-stacking slide-up animation */
    border-radius: clamp(22px, 2.2vw, 30px); /* rounder bubble frame */
    padding: clamp(16px, 1.6vw, 20px);
    margin-bottom: clamp(20px, 2.2vw, 32px);
    overflow: hidden;
    box-shadow: 0 -10px 44px -22px rgba(5, 74, 71, 0.30);   /* ← restored: upward shadow → depth as cards stack */
  }
  /* stepped tops → each card pins a little lower, so the previous peeks above as the next slides up */
  .solution-card:nth-child(1){ top: clamp(84px, 11vh, 110px); }
  .solution-card:nth-child(2){ top: clamp(108px, 13vh, 140px); }
  .solution-card:nth-child(3){ top: clamp(132px, 15vh, 170px); }
  .solution-card:nth-child(4){ top: clamp(156px, 17vh, 200px); }
  .solution-card--primary{ background: var(--primary);      color: var(--surface-cream); }
  .solution-card--secondary{ background: var(--secondary);    color: var(--surface-cream); }
  .solution-card--tertiary{ background: var(--tertiary);     color: var(--ink); }
  .solution-card--sage{ background: #C8D8C6;             color: var(--ink); }   /* pale sage (was coral) to match reference card 4 */
  .solution-card__inner{
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 0.92fr);   /* ← media | text | list (ref proportions) */
    gap: clamp(20px, 2.4vw, 36px);
    width: 100%; align-items: stretch;
  }
  .solution-card__media{
    border-radius: clamp(10px, 1vw, 14px);
    overflow: hidden;
    min-height: clamp(220px, 24vw, 340px);
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .solution-card__media img, .solution-card__media video{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .solution-card__inner > div:not(.solution-card__media), .solution-card__caps{
    padding-top: clamp(14px, 1.8vw, 24px);
    padding-bottom: clamp(14px, 1.8vw, 24px);
  }
  .solution-card__num{
    font-family: var(--sans); font-weight: 600; font-size: 13px;
    letter-spacing: 0.14em; opacity: 0.6; display: block; margin-bottom: clamp(18px, 2.2vw, 30px);
  }
  .solution-card__title{
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(30px, 3.4vw, 54px); line-height: 1.04;
    letter-spacing: -0.03em; margin: 0 0 20px; color: inherit;
  }
  .solution-card__desc{
    font-family: var(--sans); font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.55; opacity: 0.82; margin: 0; max-width: 34ch;   /* ← narrower (ref) → opens the gap before the list */
  }
  .solution-card__caps{
    list-style: none; margin: 0; padding: clamp(14px, 1.8vw, 24px) clamp(24px, 2.8vw, 48px) clamp(14px, 1.8vw, 24px) 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .solution-card__caps li{
    font-family: var(--sans); font-size: clamp(14px, 1.0vw, 16px);
    line-height: 1.4; padding: clamp(10px, 1.4vw, 16px) 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    display: flex; gap: 14px; align-items: baseline;
  }
  .solution-card__caps li::before{ content: "\2192"; opacity: 0.55; font-size: 0.9em; flex: 0 0 auto; }
  @media (max-width: 860px) {
    .solution-card__inner{ grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .solution-card__media{ min-height: 0; aspect-ratio: 16 / 10; }
    .solution-card__inner > div:not(.solution-card__media), .solution-card__caps{ padding-top: 0; padding-bottom: 0; }
    .solution-card{
      position: relative;
      min-height: auto;
      border-radius: clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) 0 0;
      margin-bottom: 0;
      padding-bottom: 150px;
    }
    .solution-card + .solution-card{ margin-top: -150px; }
    .solution-card:nth-child(1){ z-index: 1; }
    .solution-card:nth-child(2){ z-index: 2; }
    .solution-card:nth-child(3){ z-index: 3; }
    .solution-card:nth-child(4){ z-index: 4; }
    /* Last card needs real breathing room under its final capability row */
    .solution-card:last-child{ padding-bottom: clamp(48px, 9vw, 64px); }
    .solutions__stack{ padding: 0 0 65px; }   /* ← was 260px (gap to Garden OS cut 75%) */
    .solutions__h{ margin-bottom: 10px; }
    .solutions__intro{ margin-bottom: 32px; }
  }
  /* Generic asterisk mark for all section eyebrow labels */               /* ← changed */
  .section-mark{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    vertical-align: middle;
  }

  /* ── v23.2: Partner Platforms — centered text stack + clean logo grid
     (designer reference: top eyebrow → big H → "Who we work with" label →
      grid of brand wordmarks). ── */
  #platforms .section__inner{ text-align: center; }   /* ← changed: center everything */
  .platforms__eyebrow{
    display: inline-flex; align-items: center; justify-content: center;     /* ← changed: justify-center for centered layout */
    gap: 10px;
    margin: 0 auto clamp(28px, 3vw, 40px);                                  /* ← changed: auto-centred */
  }
  .platforms__h{
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(36px, 4.6vw, 64px);                                    /* ← changed: was clamp(48px,6.4vw,92px) — bring inline with industries/garden-os scale */
    line-height: 1.0;                                                       /* ← changed: 1→1.0 (consistency) */
    letter-spacing: -0.03em;                                                /* ← changed: -0.035→-0.03em (match other H2s) */
    color: var(--ink);
    margin: 0 auto clamp(28px, 3vw, 40px);                                  /* ← changed: auto-centred + tighter gap */
    max-width: 18ch;                                                        /* ← changed: 14→18ch — fits centred 2-line wrap */
  }
  .platforms__h em{
    /* ← changed: drop serif italic — uniform sans bold like industries / testimonials */
    font-family: var(--sans);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  /* ← new: "Who we work with" small centred sublabel (replaces the long intro paragraph) */
  .platforms__sublabel{
    font-family: var(--sans);
    font-size: 14px; font-weight: 500;
    color: var(--ink); opacity: 0.72;
    margin: 0 auto clamp(56px, 6vw, 80px);
  }
  /* Hidden — the old paragraph-style intro that was here.
     Kept in the DOM in case copy-deck JS or revealers need it, but invisible. */
  .platforms__intro{ display: none; }                                       /* ← changed */
  /* ===== ORBITAL SCATTER — official logos as floating cream tiles around the centred headline ===== */
  .platforms__orbit{
    position: relative;
    max-width: 1060px; margin: 0 auto;
    min-height: clamp(560px, 64vw, 780px);
  }
  .orbit__center{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(48%, 460px); text-align: center; z-index: 2;
  }
  .orbit__center .platforms__h{                 /* smaller than the page H2 so it fits the clear centre zone */
    font-size: clamp(30px, 3.9vw, 56px);
    margin: 0 auto 14px; max-width: 12ch;
  }
  .orbit__sub{
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(5, 74, 71, 0.5); margin: 0;
  }
  /* ← new: supporting cred line under the headline */
  .orbit__lead{
    font-family: var(--sans); font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.5; color: var(--ink); opacity: 0.78;
    max-width: 30ch; margin: 0 auto;
  }
  .orbit-tile{
    position: absolute; left: var(--x); top: var(--y);
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    width: clamp(112px, 11.6vw, 148px);
    min-height: clamp(116px, 12vw, 150px);                  /* ← changed: taller to fit logo + partner-level subtitle */
    display: flex; flex-direction: column;                  /* ← changed: stack logo over the tier label */
    align-items: center; justify-content: center;
    gap: clamp(8px, 0.9vw, 12px);                           /* ← new: gap between logo and tier */
    padding: clamp(16px, 1.6vw, 22px) clamp(12px, 1.2vw, 16px);
    background: #FFFFFF;
    border: 1px solid rgba(5, 74, 71, 0.06);
    border-radius: clamp(16px, 1.7vw, 24px);
    box-shadow: 0 18px 34px -20px rgba(5, 74, 71, 0.30);
    animation: orbitFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
    transition: box-shadow 0.3s var(--ease), scale 0.3s var(--ease);
    z-index: 1;
  }
  .orbit-tile:hover{ scale: 1.05; box-shadow: 0 24px 46px -20px rgba(5, 74, 71, 0.40); z-index: 3; }
  .orbit-tile__logo{
    max-width: 90%; max-height: clamp(38px, 4vw, 48px);    /* ← changed: SVGs now cropped tight, so fill the tile properly */
    width: auto; height: auto; object-fit: contain; display: block;
  }
  .orbit-tile__logo[data-brand="meta"]{ max-width: 96%; }    /* very wide lockup → fill the width */
  .orbit-tile__logo[data-brand="linkedin"]{ max-width: 96%; }    /* wide wordmark → fill the width */
  .orbit-tile__logo[data-brand="salesforce"]{ max-height: clamp(42px, 4.4vw, 52px); }   /* squarish cloud mark */
  /* ← new: partner-level subtitle under each logo (restored from earlier version) */
  .orbit-tile__tier{
    font-family: var(--sans);
    font-size: clamp(10px, 0.78vw, 10.5px);   /* ← changed: 9px floor → 10px (mobile legibility) */
    font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--primary);                          /* ← changed: coral → brand dark green */
    text-align: center; line-height: 1.25; margin: 0;
  }
  @keyframes orbitFloat{
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
  }

  /* ← new: fly-in entrance for orbit tiles */
  .orbit-tile{
    opacity: 0;
    animation: none;                                           /* ← changed: suppress float until flown in */
  }
  .orbit-tile.is-flying-in{
    animation: orbitFlyIn 0.9s var(--ease) var(--fly-delay, 0s) forwards;
  }
  .orbit-tile.is-landed{
    opacity: 1;
    animation: orbitFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  }
  @keyframes orbitFlyIn{
    0%   { opacity: 0; translate: var(--fly-x, 0px) var(--fly-y, 120px); scale: 0.5; rotate: var(--fly-r, 8deg); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    85%  { translate: calc(var(--fly-x, 0px) * -0.04) calc(var(--fly-y, 120px) * -0.04); scale: 1.03; }
    100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0); }
  }

  /* Center text also hidden until triggered.
     ← changed: animate the standalone `translate` property (not `transform`) so it
     COMPOSES with the centring transform: translate(-50%, -50%) instead of overriding it. */
  .orbit__center{
    opacity: 0;
    translate: 0 28px;
    filter: blur(3px);
    transition: opacity 0.9s var(--ease), translate 0.9s var(--ease), filter 0.7s var(--ease);
  }
  .orbit__center.is-in{
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }

  @media (prefers-reduced-motion: reduce) { .orbit-tile{ animation: none; opacity: 1; } .orbit__center{ opacity: 1; translate: 0; filter: none; } }

  /* mobile: collapse the orbit → centred heading + a simple wrapped tile grid */
  @media (max-width: 820px){
    .platforms__orbit {
      min-height: 0;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: clamp(12px, 3vw, 18px);
    }
    .orbit__center { position: static; transform: none; flex: 1 0 100%; margin-bottom: clamp(20px, 5vw, 32px); }
    .orbit-tile {
      position: static; transform: none; animation: none;
      width: clamp(104px, 26vw, 128px);
    }
  }

  /* === Selected Work ===================================================== */
  .work__h{
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(38px, 5.8vw, 58px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
  }
  .work__h em{
    font-style: normal;
  }
  .work__intro{
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 56ch;
    margin: 0 0 36px;
  }
  .work__link{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .work__link-arrow{
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--primary); color: var(--surface-cream);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: transform var(--dur) var(--ease);
  }
  .work__link:hover .work__link-arrow{ transform: translateX(3px); }

  /* === Work cards (new) =================================================== */
  /* ← new block: short case-study cards leading with commercial outcomes */
  .work__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
    margin: clamp(40px, 5vw, 64px) 0;
    perspective: 2200px;                                            /* ← changed: was 1000px, less depth distortion = more readable text */
  }
  .work-card{
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: clamp(16px, 1.8vw, 22px);
    padding: clamp(28px, 3.2vw, 44px);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow:
      0 14px 36px -18px rgba(5, 74, 71, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    /* 3D tilt — driven by JS via --rx / --ry (combined with entrance in work-anim--card) */
    transform-style: preserve-3d;
    will-change: transform;
  }
  /* Tilt is always active via global mousemove — no hover state needed */
  .work-card:hover{
    background: rgba(255, 255, 255, 0.28);
    box-shadow:
      0 24px 48px -20px rgba(5, 74, 71, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  @media (max-width: 980px) {
    .work__grid{ grid-template-columns: 1fr; }
  }

  /* === Sol case study cards (shared: solutions.html + home #work) */
  .sol-cs-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.4vw, 20px);
    margin-bottom: clamp(24px, 3vw, 40px);
  }
  /* ══════════════════════════════════════════════════════════════════════════
     THE CASE STUDY CARD — .cs-card

     One component for every grid on the site. Replaces .sol-cs-card, .wrk-cs-card and .cscard, which had drifted into three different panels and
     carried per-client logo rules (--wv/--au/--lc) that could never have scaled
     past the three studies they were written for.

     Panel is locked to the dark-glass treatment: a 20% black glass the photo
     reads through, white hairline, knocked-out logo, cream text.
     ══════════════════════════════════════════════════════════════════════════ */
  .cs-grid{
    display: grid;
    grid-template-columns: repeat(var(--cs-cols, 2), minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 20px);
  }
  .cs-card{
    position: relative;
    display: block;
    aspect-ratio: 630 / 528;
    border-radius: clamp(12px, 1.2vw, 20px);
    overflow: hidden;
    text-decoration: none;
    background: var(--primary);
    box-shadow: 0 2px 20px -6px rgba(5, 74, 71, 0.10);
    transition: box-shadow 0.5s var(--ease);
  }
  .cs-card:hover{ box-shadow: 0 16px 48px -12px rgba(5, 74, 71, 0.18); }

  .cs-card__media{ position: absolute; inset: 0; }
  .cs-card__photo{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.9s var(--ease);
  }
  .cs-card:hover .cs-card__photo{ transform: scale(1.03); }

  /* The Vimeo slot. Empty until main.js mounts a player into it, and faded in
     so the swap from poster to video is not a hard cut. */
  .cs-card__video{
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.6s var(--ease);
    pointer-events: none;
  }
  /* COVER, not contain.
     Vimeo's background player letterboxes the video inside whatever box the
     iframe is given, so `inset: -5%` left grey bands top and bottom on a card
     that is taller than 16:9. Container units let the iframe be sized to the
     larger of "as wide as the card" and "wide enough that a 16:9 video is as
     tall as the card", then centred — which is object-fit: cover, done to an
     element that cannot have object-fit. */
  .cs-card__media{ container-type: size; }
  .cs-card__video iframe{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:  max(100cqw, 177.78cqh);
    height: max(56.25cqw, 100cqh);
    border: 0;
  }
  .cs-card.is-playing .cs-card__video{ opacity: 1; }

  /* ── Pills ──────────────────────────────────────────────────────────────── */
  .cs-card__pills{
    position: absolute;
    top: clamp(10px, 1.4vw, 20px);
    left: clamp(10px, 1.4vw, 20px);
    z-index: 3;
    display: flex; flex-wrap: wrap;
    gap: 6px;
  }
  .cs-card__pill{
    font-family: var(--sans);
    font-size: clamp(10px, 0.85vw, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 7px 12px;
    border-radius: 999px;
    /* Same glass logic as the panel so the pills belong to the card rather than
       sitting on top of it. backdrop-filter keeps them legible over a busy
       photo without needing a solid fill. */
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ink-on-dark);
    white-space: nowrap;
  }
  .cs-card__pill--solution{
    background: rgba(64, 199, 112, 0.28);
    border-color: rgba(184, 234, 201, 0.55);
  }

  /* ── Panel ──────────────────────────────────────────────────────────────── */
  .cs-card__panel{
    position: absolute;
    bottom: clamp(10px, 1.4vw, 20px);
    left: clamp(10px, 1.4vw, 20px);
    right: clamp(10px, 1.4vw, 20px);
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    padding: clamp(12px, 1.5vw, 20px);
    min-height: clamp(96px, 12vw, 168px);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  /* No stat means no divider and no second column — the logo takes the width
     rather than leaving a gap where the figure would have been. */
  .cs-card__panel:not(:has(.cs-card__metric)){ grid-template-columns: 1fr; }

  .cs-card__logo{
    height: clamp(34px, 3.6vw, 58px);
    width: auto; max-width: 100%;
    object-fit: contain;
    display: block;
    /* Knock any logo out to white. Replaces the three hand-written per-client
       rules the old cards needed. */
    filter: brightness(0) invert(1);
  }
  /* Designer-supplied white variant: already white, keep its knockouts. */
  .cs-card__logo--white{ filter: none; }
  .cs-card__name{
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(15px, 1.3vw, 20px); line-height: 1.3;
    color: #fff;
    margin: 0;
  }
  .cs-card__excerpt{
    font-family: var(--sans); font-weight: 500;
    font-size: clamp(11px, 1vw, 14px); line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
    margin: clamp(6px, 0.7vw, 10px) 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cs-card__divider{ width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.5); }
  .cs-card__stat{
    display: block;
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(28px, 3.6vw, 62px); line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
  }
  .cs-card__stat-label{
    display: block;
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(10px, 0.9vw, 14px); line-height: 1.4;
    color: #fff;
    margin-top: clamp(4px, 0.5vw, 8px);
  }

  @media (max-width: 860px) {
    .cs-grid{ --cs-cols: 1; }
    .cs-card{ aspect-ratio: 4 / 3; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cs-card__photo, .cs-card__video{ transition: none; }
    .cs-card:hover .cs-card__photo{ transform: none; }
  }

  /* === Case study cards (shared: work.html + home #work) ======= */
  .wrk-cs-grid{
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px);
  }

  .work__ctas{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: clamp(24px, 3vw, 40px);
  }
  .work__cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 8px 12px 20px;
    border-radius: 999px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .work__cta span{
    width: 28px; height: 28px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.3s var(--ease);
  }
  .work__cta:hover span{ transform: translateX(3px); }
  .work__cta--primary{
    background: var(--primary);
    color: var(--surface-cream);
  }
  .work__cta--primary span{ background: var(--tertiary); color: var(--primary); }
  .work__cta--primary:hover{ background: var(--secondary); }
  .work__cta--secondary{
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 12px 22px;
  }
  .work__cta--secondary:hover{ background: var(--ink); color: var(--surface-cream); }
  @media (max-width: 640px) {
    .work__ctas{ flex-wrap: nowrap; gap: 10px; }
  }

  /* === Work section — slow cinematic entrance ============================== */
  /* Text elements: slow fade + rise from below */
  .work-anim--text{
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 1.2s cubic-bezier(.19, 1, .22, 1),
      transform 1.4s cubic-bezier(.19, 1, .22, 1);
    transition-delay: calc(var(--wi, 0) * 200ms);
  }
  /* Card elements: much slower one-by-one entrance (includes tilt vars so they coexist) */
  .work-anim--card{
    opacity: 0;
    transform: translateY(60px) scale(0.92) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    filter: blur(6px);
    transition:
      opacity 1.4s cubic-bezier(.19, 1, .22, 1),
      transform 1.4s cubic-bezier(.22, .9, .25, 1),   /* ← changed: was 1.8s — sync to opacity so .tilt-ready snap is invisible */
      filter 1.0s cubic-bezier(.19, 1, .22, 1);
    transition-delay: calc(600ms + (var(--wi, 3) - 3) * 400ms);
  }
  /* Revealed state */
  [data-work-reveal].is-in .work-anim--text{
    opacity: 1;
    transform: translateY(0);
  }
  [data-work-reveal].is-in .work-anim--card{
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    filter: blur(0);
  }
  /* After entrance lands, kill transition so JS tilt updates instantly */
  .work-anim--card.tilt-ready{
    transition: none !important;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  @media (prefers-reduced-motion: reduce) {
    .work-anim--text, .work-anim--card{
      opacity: 1; transform: none; filter: none; transition: none;
    }
  }

  /* === CTA Band (finale) ================================================= */
  /* === CTA BAND — scroll-driven dramatic reveal ========================== */
  .ctaband{
    min-height: auto;                                                          /* ← changed: no forced runway */
    position: relative;
    padding: clamp(80px, 10vw, 160px) var(--side) clamp(48px, 6vw, 80px);     /* ← changed: compact vertical padding */
    background: var(--surface-cream);
  }
  .ctaband > .section__inner{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  /* Headline — always visible, scales up as you scroll in */
  .ctaband__h{
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(36px, 8vw, 128px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: color-mix(in srgb, var(--surface-cream), var(--accent-coral) calc(var(--cta-p, 0) * 100%));  /* ← changed: white → coral as you scroll */
    margin: 0 0 clamp(20px, 2.4vw, 30px);    /* ← changed: tighter gap before subline (ref) */
    max-width: 22ch;                          /* ← changed: 18→22ch so each line holds on one row */
    transform-origin: left center;
    transform: scale(calc(1 + var(--cta-p, 0) * 0.08));                       /* ← new: subtle scale-up */
    transition: transform 0.1s linear, opacity 1.1s var(--ease) var(--reveal-delay, 0ms), translate 1.1s var(--ease) var(--reveal-delay, 0ms), filter 0.9s var(--ease) var(--reveal-delay, 0ms);   /* ← changed: + dramatic-reveal props (shorthand would otherwise kill them) */
  }
  .ctaband__h em{                                                   /* ← changed: match parent sans */
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
  }
  /* ← new: eyebrow above the headline (dark-teal label + coral asterisk), matching reference */
  .ctaband__eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 clamp(20px, 2.6vw, 34px);
  }
  /* Supporting text + button — fade in after headline settles */
  .ctaband__body{
    font-size: 18px;
    line-height: 1.55;
    color: rgba(245, 240, 227, 0.82);
    max-width: 48ch;
    margin: 0 0 48px;
    opacity: 1;
  }
  .ctaband__cta{
    display: inline-flex;
    align-self: flex-start;        /* ← new: keep it a compact pill, not full-width */
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    background: var(--primary);
    color: var(--surface-cream);
    padding: 14px 14px 14px 28px;  /* ← changed: slimmer pill to match reference */
    border-radius: 999px;
    opacity: 1;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .ctaband__cta:hover{ background: var(--surface-cream); color: var(--primary); }
  .ctaband__cta-arrow{
    width: 32px; height: 32px; border-radius: 999px;
    background: var(--surface-cream); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .ctaband__cta:hover .ctaband__cta-arrow{ transform: translateX(3px); background: var(--primary); color: var(--surface-cream); }

  .ctaband::before{
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .ctaband__h{
    color: var(--primary);                 /* ← changed: dark teal (was coral) */
  }
  .ctaband__cta{
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity 0.85s var(--ease) var(--reveal-delay, 0ms), translate 0.85s var(--ease) var(--reveal-delay, 0ms);   /* ← changed: reveal props replace legacy 0.1s opacity/transform */
  }

/* ── SECTION HEAD — 2-col intro: eyebrow + heading left, body right aligned at heading top ── */
.section-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "label  ."
    "heading body";
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head > .label{
  grid-area: label;
  margin: 0;
}
.section-head__h{
  grid-area: heading;
  margin: 0;
}
.section-head__body{
  grid-area: body;
  align-self: start;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.72;
  max-width: 44ch;
  margin: 0;
}
@media (max-width: 768px) {
  .section-head{
    grid-template-columns: 1fr;
    grid-template-areas: "label" "heading" "body";
  }
  .section-head__body{ margin-top: clamp(20px, 5vw, 32px); }
}

  /* Mobile — collapse the pin, show everything immediately */
  @media (max-width: 900px){
    .ctaband { min-height: 0; padding: clamp(120px, 16vw, 220px) var(--side); }
    .ctaband::before { opacity: 1; }
    .ctaband > .section__inner { position: static; min-height: 0; padding: 0; opacity: 1; }
    .ctaband__h { transform: none; color: var(--primary); }
    .ctaband__body, .ctaband__cta { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ctaband{ min-height: 0; padding: clamp(120px, 16vw, 220px) var(--side); }
    .ctaband::before{ opacity: 1; }
    .ctaband > .section__inner{ position: static; min-height: 0; padding: 0; opacity: 1; }
    .ctaband__h{ transform: none; color: var(--primary); }
    .ctaband__body, .ctaband__cta{ opacity: 1; transform: none; }
  }

  /* === Hero case-study card (bottom-right of hero, scrolls with hero) ===== */
  /* ← changed: lives inside the hero section now (was fixed/floating). Anchors
       to hero's bottom-right via position:absolute; scrolls out of view
       naturally when the user scrolls past the hero. Dismissable per-session. */
  /* === Floating case-study orbit ===========================================
     Cards orbit a circle (R ≈ 22vw) centered near the right viewport edge.
     The left arc is visible; 3D tilt + scale gives zero-gravity depth.
     6 cards, 36s loop. Drift is baked into keyframes (no competing anims). */
  /* ↓ changed: flattened the orbital plane (was rotateX 18° + rotateZ -25°).
     Ferris wheel removed — replaced with fixed carousel + 3D mouse-follow. */

  /* === CASE STUDY CAROUSEL ================================================ */
  .cs-carousel{
    position: absolute;
    bottom: clamp(16px, 2.5vw, 32px);
    /* ↓ changed: was clamp(40px, 6vw, 100px) — that capped at 100px but the nav
       uses var(--side) which caps at 80px, so at wide viewports the carousel
       drifted further from the right edge than the nav menu, leaving the
       carousel's tilted shadow/3D edge appearing past the menu line. Now uses
       the SAME --side as the nav so the carousel's right edge sits flush with
       the "Let's talk" button + menu bar at every viewport size. */
    right: var(--side);
    z-index: 5;
    perspective: 900px;
    width: clamp(260px, 22vw, 320px);
  }
  .cs-carousel__stage{                                                        /* ← new */
    position: relative;
    transform-style: preserve-3d;
    --rx: 0deg;
    --ry: 0deg;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.15s ease-out;
  }
  .floating-cs{
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 14px;
    border: 1px solid rgba(26, 26, 26, 0.06);
    box-shadow:
      0 20px 48px -16px rgba(5, 74, 71, 0.16),
      0 4px 12px -4px rgba(0, 0, 0, 0.08);
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
  .floating-cs.is-active{                                                     /* ← new */
    position: relative;
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  /* Nav — matches scroll-hint style: thin grey strokes, minimal chrome */
  .cs-carousel__nav{                                                          /* ← changed */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    color: var(--ink);                 /* ← changed: was #999 grey — darker for visibility */
    opacity: 1;                        /* ← changed: was 0.6 */
  }
  .cs-carousel__btn{                                                          /* ← changed */
    appearance: none;
    border: 1.5px solid currentColor;  /* ← changed: outlined button (was border:none) */
    border-radius: 50%;                /* ← new */
    background: none;
    width: 38px; height: 38px;         /* ← new: bigger, reads as a real control */
    display: inline-flex;              /* ← new */
    align-items: center;               /* ← new */
    justify-content: center;           /* ← new */
    padding: 0;                        /* ← changed: was 4px */
    cursor: pointer;
    color: inherit;
    opacity: 0.85;                     /* ← new */
    transition: opacity 0.2s, background 0.2s, color 0.2s;
  }
  .cs-carousel__btn:hover{
    opacity: 1;
    background: var(--ink);            /* ← new: fill on hover */
    color: var(--surface-cream);       /* ← new */
  }
  .cs-carousel__btn svg{
    width: 18px; height: 18px;         /* ← changed: was 16px */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;                   /* ← changed: was 1.5 */
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cs-carousel__dots{                                                         /* ← changed */
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .cs-carousel__dot{                                                          /* ← changed */
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ink);            /* ← changed: was #999 — match darker nav */
    opacity: 0.45;
    transition: opacity 0.3s, transform 0.3s;
  }
  .cs-carousel__dot.is-active{
    opacity: 1;
    transform: scale(1.4);
  }

  .floating-cs__eyebrow{
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-coral);
    margin: 0 0 10px;
  }
  /* ↓ new: small case-study image strip across the top of each floating tile.
     Sits edge-to-edge using negative margins to span the tile's inner padding.
     Subtle cream-tinted background so logos with transparency don't look adrift. */
  .floating-cs__image{                                            /* ← new */
    margin: -18px -18px 12px;
    height: 64px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(169deg, #D4F2DE 0%, rgba(5, 74, 71, 0.10) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(26, 26, 26, 0.05);
  }
  .floating-cs__image img{                                        /* ← new */
    max-height: 32px;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    opacity: 0.85;
  }
  /* Serenitas text fallback (no logo asset locally) */
  .floating-cs__image--text{                                      /* ← new */
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--primary);
    opacity: 0.75;
  }
  .floating-cs__metric{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
  }
  .floating-cs__num{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 42px;
    line-height: 0.9;
    color: var(--primary);
    letter-spacing: -0.03em;
  }
  .floating-cs__metric-label{
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    max-width: 11ch;
  }
  .floating-cs__copy{
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(26, 26, 26, 0.65);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Study without a logo: the client's name sits where the mark would. */
  .floating-cs__name{
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--primary);
    padding: 0 18px;
  }
  .floating-cs__link{
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
  }
  .floating-cs__link:hover{ text-decoration: underline; }
  .floating-cs__foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(5, 74, 71, 0.1);
    gap: 10px;
  }
  .floating-cs__client{
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .floating-cs__cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--surface-cream);
    font-size: 14px;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
    flex: 0 0 32px;
  }
  .floating-cs__cta:hover{
    background: var(--secondary);
    transform: translateX(3px);
  }
  @media (max-width: 900px) {
    .cs-carousel{ display: none; }                                            /* ← changed */
  }
  @media (prefers-reduced-motion: reduce) {
    .floating-cs{ transition: none !important; }                              /* ← changed */
    .cs-carousel__stage{ transition: none !important; }
  }
  .ctaband__footer{
    margin-top: clamp(96px, 12vw, 144px);
    padding-top: 32px;
    border-top: 1px solid rgba(245, 240, 227, 0.18);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: rgba(245, 240, 227, 0.65);
  }
  @media (max-width: 720px) {
    .ctaband__footer{ flex-direction: column; gap: 12px; align-items: flex-start; }
  }
  img{ display: block; max-width: 100%; height: auto; }
  a{ color: inherit; text-decoration: none; }

  /* === NAV — flat bar (fiasco / newgenre inspired) ======================= */
  /* ← changed: stripped the floating pill; brand sits top-left, links right */
  .nav-wrap{
    position: fixed;
    top: 28px;                                              /* ← changed */
    left: 0;
    right: 0;
    padding: 0 var(--side);                                 /* ← new: align to page gutter */
    display: flex;
    z-index: 100;
    pointer-events: none;
    /* ← new: hide on scroll-down, reveal on scroll-up (newgenre-style) */
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  body.nav-hidden .nav-wrap{                               /* ← new */
    transform: translateY(calc(-100% - 28px));
  }
  /* Only block the scroll-hide while the opener intro animation is running.
     We intentionally do NOT include `opener-handoff` here — that class is
     permanent after the opener completes (it controls the brand/links/CTA
     fade-in) and including it would prevent the scroll-hide from ever
     firing. */
  body.opener-active .nav-wrap{
    transform: none !important;
  }
  @media (prefers-reduced-motion: reduce) {                 /* ← new */
    .nav-wrap{ transition: none; }
  }

  /* === EDGE BLUR STRIPS (switchable via body.edge-style-*) =============
     Toggle styles by changing the body class:
       <body class="edge-style-progressive">  (smooth layered blur — default)
       <body class="edge-style-fog">          (single heavy blur — first version)
       <body class="edge-style-fade">         (colour gradient only, no blur)
       <body class="edge-style-tint">         (light blur + cream wash)
     ===================================================================== */

  /* Shared frame for all styles */
  .edge-blur{
    position: fixed;
    left: 0; right: 0;
    height: 110px;
    pointer-events: none;
    z-index: 80;                /* below nav (100), above content */
  }
  .edge-blur--top{ top: 0; }
  .edge-blur--bottom{ bottom: 0; display: none; }                             /* ← changed: removed bottom blur */

  /* Layered children — used by the "progressive" style */
  .edge-blur__layer{
    position: absolute;
    inset: 0;
  }

  /* ── progressive (default): 3 stacked layers with rising blur radius ── */
  body.edge-style-progressive .edge-blur__layer{
    backdrop-filter: blur(var(--b)) saturate(108%);
    -webkit-backdrop-filter: blur(var(--b)) saturate(108%);
  }
  /* Top strip: each layer's mask fades toward the inside (downward) */
  body.edge-style-progressive .edge-blur--top  .edge-blur__layer{
    mask-image: linear-gradient(to bottom, black 0%, transparent var(--fade));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent var(--fade));
  }
  /* Bottom strip: same but reversed (mask fades upward) */
  body.edge-style-progressive .edge-blur--bottom .edge-blur__layer{
    mask-image: linear-gradient(to top, black 0%, transparent var(--fade));
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent var(--fade));
  }

  /* ── fog: single heavy blur (the first version) ── */
  body.edge-style-fog .edge-blur__layer{ display: none; }
  body.edge-style-fog .edge-blur{
    backdrop-filter: blur(14px) saturate(108%);
    -webkit-backdrop-filter: blur(14px) saturate(108%);
  }
  body.edge-style-fog .edge-blur--top{
    mask-image: linear-gradient(to bottom, black 0%, black 28%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 28%, transparent 100%);
  }
  body.edge-style-fog .edge-blur--bottom{
    mask-image: linear-gradient(to top, black 0%, black 28%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 28%, transparent 100%);
  }

  /* ── fade: pure cream gradient, no blur — clean / crisp ── */
  body.edge-style-fade .edge-blur__layer{ display: none; }
  body.edge-style-fade .edge-blur{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.edge-style-fade .edge-blur--top{
    background: linear-gradient(to bottom,
                                var(--surface-cream) 0%,
                                var(--surface-cream) 25%,
                                rgba(245, 240, 227, 0) 100%);
  }
  body.edge-style-fade .edge-blur--bottom{
    background: linear-gradient(to top,
                                var(--surface-cream) 0%,
                                var(--surface-cream) 25%,
                                rgba(245, 240, 227, 0) 100%);
  }

  /* ── tint: light 4px blur + cream wash — softest hybrid ── */
  body.edge-style-tint .edge-blur__layer{ display: none; }
  body.edge-style-tint .edge-blur{
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  body.edge-style-tint .edge-blur--top{
    background: linear-gradient(to bottom,
                                rgba(245, 240, 227, 0.65) 0%,
                                rgba(245, 240, 227, 0) 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
  }
  body.edge-style-tint .edge-blur--bottom{
    background: linear-gradient(to top,
                                rgba(245, 240, 227, 0.65) 0%,
                                rgba(245, 240, 227, 0) 100%);
    mask-image: linear-gradient(to top, black 0%, transparent 90%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 90%);
  }
  .nav{
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
  }
  .nav__brand{ display: inline-flex; align-items: center; }
  .nav__brand img{ height: 28px; width: auto; display: block; }
  .nav__links{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  .nav__links a{
    position: relative;
    transition: color var(--dur) var(--ease);
  }
  .nav__links a::after{
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .nav__links a:hover{ color: var(--secondary); }
  .nav__links a:hover::after{ transform: scaleX(1); }
  .nav__links a[aria-current="page"]{ font-weight: 700; }
  .nav__cta{
    background: var(--primary);
    color: var(--surface-cream);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background var(--dur) var(--ease);
  }
  .nav__cta::after{ display: none; }
  .nav__cta:hover{ background: var(--secondary); color: var(--surface-cream); }
  .nav__cta-arrow{ display: none; }
  /* === BURGER BUTTON ====================================================== */
  .nav__burger{
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: color 0.3s var(--ease);
  }
  .nav__burger span{
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.35s var(--ease), opacity 0.2s;
    transform-origin: center;
  }
  /* X state */
  body.nav-open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav__burger span:nth-child(2){ opacity: 0; transform: scaleX(0); }
  body.nav-open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  /* Burger turns cream when drawer (dark bg) is open */
  body.nav-open .nav__burger{ color: var(--surface-cream); }
  /* Burger turns cream on dark-stage hero (homepage stage-1) */
  body.is-stage-1 .nav__burger{ color: var(--surface-cream); }
  /* Keep nav pinned when drawer is open */
  body.nav-open .nav-wrap{ transform: none !important; }
  /* Lock scroll when drawer is open */
  body.nav-open{ overflow: hidden; }

  @media (max-width: 880px) {
    .nav__links{ display: none; }
    .nav{ gap: 12px; }
    /* Shrink the header CTA so it never wraps on narrow screens */
    .nav__cta{ font-size: 13px; padding: 9px 16px; white-space: nowrap; }
    .nav__cta-arrow, .nav__cta > span{ display: none; }
    /* Show burger */
    .nav__burger{ display: flex; color: var(--ink); }
  }
  @media (max-width: 640px) {
    /* Balanced compact row: 25px brand, small pill, burger. (The pill was
       briefly display:none — Tom wants it back, 2026-08-23.) */
    .nav__brand img{ height: 25px; }
    .nav__cta{ max-width: 120px; font-size: 13px; padding: 8px 14px; }
  }

  /* === MOBILE DRAWER ====================================================== */
  .nav-drawer{
    position: fixed;
    inset: 0;
    z-index: 99;  /* below .nav-wrap (100) so burger stays clickable on top */
    background: var(--primary);
    display: flex;
    flex-direction: column;
    padding: 96px var(--side) clamp(40px, 8vw, 64px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .nav-drawer{
    opacity: 1;
    pointer-events: auto;
  }
  .nav-drawer__links{
    display: flex;
    flex-direction: column;
    margin: auto 0;
  }
  .nav-drawer__links a{
    font-family: var(--font-sans);
    font-size: clamp(28px, 8vw, 48px);
    font-weight: 500;
    color: var(--surface-cream);
    text-decoration: none;
    padding: clamp(14px, 3vw, 20px) 0;
    border-bottom: 1px solid rgba(245, 240, 227, 0.14);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.2s;
  }
  /* Direct child only — bare `a:first-child` also matched the first link
     INSIDE each .nav-drawer__sub group at (0,2,1), beating the sublink
     border reset (0,2,0) and drawing a stray indented line above every
     sub-menu (Tom's "weird outlines", 2026-08-23). */
  .nav-drawer__links > a:first-child{ border-top: 1px solid rgba(245, 240, 227, 0.14); }
  .nav-drawer__links a:hover, .nav-drawer__links a[aria-current="page"]{ color: var(--accent-coral); }
  body.nav-open .nav-drawer__links a{ opacity: 1; transform: translateY(0); }
  body.nav-open .nav-drawer__links a:nth-child(1){ transition-delay: 0.06s; }
  body.nav-open .nav-drawer__links a:nth-child(2){ transition-delay: 0.10s; }
  body.nav-open .nav-drawer__links a:nth-child(3){ transition-delay: 0.14s; }
  body.nav-open .nav-drawer__links a:nth-child(4){ transition-delay: 0.18s; }
  body.nav-open .nav-drawer__links a:nth-child(5){ transition-delay: 0.22s; }
  body.nav-open .nav-drawer__links a:nth-child(6){ transition-delay: 0.26s; }
  .nav-drawer__cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-coral);
    color: #fff;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-top: clamp(32px, 6vw, 48px);
    align-self: flex-start;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s var(--ease) 0.3s, transform 0.35s var(--ease) 0.3s;
  }
  body.nav-open .nav-drawer__cta{ opacity: 1; transform: translateY(0); }
  /* Hide drawer entirely on desktop */
  @media (min-width: 881px){ .nav-drawer { display: none; } }

  /* === HERO =============================================================== */
  .hero{
    padding: clamp(130px, 15vh, 190px) var(--side) clamp(48px, 5vw, 80px);
    position: relative;
    overflow: visible;                                                     /* let carousel card extend past hero */
    min-height: auto;
    z-index: 10;
  }
  .hero__grid{
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 64px);
    position: relative;
    z-index: 2;
    min-height: auto;
  }
  .hero__col-l{ display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; }
  .hero__col-l .hero__headline{ margin-bottom: 0; }
  .hero__col-l .hero__ctas{ margin-top: 0; }

  .hero__eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: clamp(40px, 5vw, 64px);
    opacity: 0;
    transform: translateY(12px);
    animation: rise 0.7s var(--ease) 0.15s forwards;
  }
  .hero__eyebrow-mark{ width: 14px; height: 14px; flex: 0 0 14px; }

  .hero__headline{
    font-family: var(--sans);                                /* Vend Sans */
    font-weight: 400;                                         /* Regular, matches Figma Brand Bible 290:3155 */
    font-size: clamp(48px, 7vw, 95px);                        /* capped at 95px (Brand Bible spec) */
    line-height: 1.0;
    letter-spacing: -0.028em;                                 /* -2.7px @ 95px ≈ -0.028em */
    color: var(--ink);                                        /* #054A47 — matches Figma */
    margin: 0 0 clamp(24px, 3vw, 36px);
    max-width: none;                                          /* ← changed: 17ch→none — explicit <br>s control wrap now */
  }
  /* Hide raw headline text until JS wraps into word-mask spans */
  .hero__headline[data-stagger]{
    visibility: hidden;
  }
  .hero__headline[data-stagger].is-wrapped{
    visibility: visible;
  }
  .hero__headline em{                                               /* ← changed: match parent weight */
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--ink);
  }
  /* Mask-reveal — each word sits inside an overflow-hidden mask, inner span rises from below the baseline (translateY 110% → 0).
     The mask edge is invisible because overflow clips it. */
  .hero__headline .word-mask{
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;  /* room for descenders */
    margin-bottom: -0.08em;
    cursor: default;
  }
  .hero__headline .word{
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
    transition: transform 1.2s cubic-bezier(.22, .9, .25, 1);
  }
  .hero__headline .word.is-in{
    transform: translateY(0);
  }
  /* ← changed: open mask only AFTER the word's slide transition has finished.
       Previously this fired on .is-in (added synchronously to every word inside
       fire()) — every mask popped open immediately, exposing words still sitting
       at translateY(110%) during their transition-delay window. Now driven by
       .is-landed which JS adds via transitionend. */
  .hero__headline .word-mask.is-landed{ overflow: visible; }

  /* ← new: small label sits above the H1 */
  .hero__label{
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    transform: translateY(8px);
    margin: 0 0 clamp(20px, 2.6vw, 32px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  body.hero-body-in .hero__label{ opacity: 0.7; transform: translateY(0); }

  .hero__body{
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  body.hero-body-in .hero__body{
    opacity: 1;
    transform: translateY(0);
  }
  .hero__body p{ margin: 0; }
  .hero__body p:not(.hero__lead){ opacity: 0.72; }
  .hero__body p strong{ font-weight: 600; color: var(--ink); }

  .hero__body .hero__lead{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  /* Services — single row with slash separators */
  .hero__services{
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
  }
  .hero__services li{
    position: relative;
    padding: 0 10px;
    white-space: nowrap;
  }
  .hero__services li:first-child{ padding-left: 0; }
  .hero__services li:not(:last-child)::after{
    content: '/';
    position: absolute;
    right: -2px;
    top: 0;
    color: var(--accent-coral);
    font-weight: 300;
    opacity: 0.8;
  }

  .hero__ctas{
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: clamp(12px, 1.5vw, 18px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  body.hero-ctas-in .hero__ctas{
    opacity: 1;
    transform: translateY(0);
  }
  .hero__cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .hero__cta--primary{
    background: var(--primary);
    color: var(--surface-cream);
    padding: 12px 8px 12px 20px;
    border-radius: 999px;
    font-weight: 600;
  }
  .hero__cta--primary:hover{ background: var(--secondary); }
  .hero__cta--secondary{
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-weight: 500;
  }
  .hero__cta--secondary:hover{ background: var(--ink); color: var(--surface-cream); }
  .hero__cta-arrow{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--tertiary);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform var(--dur) var(--ease);
  }
  .hero__cta:hover .hero__cta-arrow{ transform: translateX(3px); }
  body.hero-done .result-card{
    opacity: 1;
    transform: translateY(0);
  }

  /* === Decorative squares (small{
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--tertiary);
    border-radius: 3px;
    z-index: 0;
    opacity: 0;
    animation: fade-in 0.6s var(--ease) forwards;
  }

  /* === Animations ========================================================= */
  @keyframes rise{
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in{
    to { opacity: 1; }
  }

  @media (max-width: 900px) {
    .hero__grid{ grid-template-columns: 1fr; gap: 48px; }
    .hero__col-r{ min-height: 280px; }
    .hero__accent{ width: 70vw; }
  }
  @media (max-width: 560px) {
    .hero__col-r{ display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__eyebrow, .hero__body, .hero__accent, .hero__headline .word{ animation: none; opacity: 1; transform: none; transition: none; }
  }

  /* (pin scroll system removed — sections now scroll normally with solid backgrounds) */

  /* === SECTION PROGRESS NAV — minimal dots{
    position: fixed;
    right: clamp(14px, 1.5vw, 22px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
  }
  .section-progress.is-visible{
    opacity: 1;
    pointer-events: auto;
  }
  .section-progress__dot.is-active{
    background: #999;
    transform: scale(1.6);
  }
  .section-progress__dot.is-past{
    background: rgba(153, 153, 153, 0.45);
  }
  /* === end SECTION PROGRESS NAV ========================================= */

  /* =====================================================================
     TESTIMONIALS — 8 quotes from socialgarden.com.au home, lifted verbatim.
     Atmosphere: cream-tinted to fit the home flow between Logo wall and CTA.
     ===================================================================== */
  .testimonials{
    position: relative;
    z-index: 2;
    /* ↓ changed: 0 vertical padding — sticky inner handles pin padding itself.
       Outer vertical was double-padding the layout (179px outer + 77px inner)
       which made the merged stack overflow the 800px pinned viewport so the
       logos appeared "lost" at the fold. Keep horizontal gutter for the cards. */
    padding: clamp(80px, 13.9vw, 200px) clamp(32px, 6vw, 80px) 0;
  }
  .testimonials__inner{ width: 100%; }                  /* ← changed: dropped hardcoded 1320px max-width — flush gutter via parent now */
  .testimonials__head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 8vw, 120px);
    align-items: end;
    margin-bottom: clamp(32px, 3.5vw, 56px);                      /* ← changed: was clamp(48px, 6vw, 80px) */
  }
  .testimonials__h{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 58px);                 /* ← changed: match Industries rule (was clamp(40px,5vw,72px)) */
    line-height: 1.0;                                    /* ← changed: 1.05→1.0 (100% per Figma) */
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0;
    max-width: 14ch;
  }
  .testimonials__h em{
    /* ← changed: drop serif italic — match Industries' uniform sans-bold treatment */
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .testimonials__intro{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    opacity: 0.85;
    margin: 0;
    max-width: 44ch;
  }
  /* ── Marquee (auto-scrolling glass cards, ambient autoplay) ── */
  /* Tunable: change --tm-duration to speed up / slow down */
  .testimonials{
    --tm-duration: 90s;   /* slow, ambient — try 60s for faster, 120s for slower */
    --tm-card-w: clamp(320px, 28vw, 460px);
    --tm-gap: clamp(12px, 1.4vw, 20px);
  }
  .testimonials__viewport{
    position: relative;
    overflow: hidden;
    margin: 0 calc(-1 * clamp(32px, 6vw, 80px));     /* extend through page gutter */
    padding: clamp(10px, 1.2vw, 18px) 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .testimonials__track{
    display: flex;
    gap: var(--tm-gap);
    width: max-content;
    /* Centre card 0 by default (before JS fires). 50% of the viewport minus half
       the card width puts the first card's centre at viewport centre.
       The JS positionToFocus() returns tx=0 for card 0 with this padding,
       so the carousel step logic is unchanged. */
    padding: 0 calc(50% - var(--tm-card-w) / 2);
    will-change: transform;
  }

  /* Glass card — mirrors .work-card (incl. 3D mouse-tilt via --rx / --ry) */
  .tm-card{
    flex-shrink: 0;
    width: var(--tm-card-w);
    padding: clamp(18px, 1.4vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: clamp(16px, 1.8vw, 22px);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
      0 14px 36px -18px rgba(5, 74, 71, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    /* Compositing transforms — driven by separate CSS vars so they don't fight:
         --drift-x  : idle left-right drift (non-focused cards, JS sine wave)
         --tm-scale : spotlight scale (JS sets per-frame based on distance from viewport centre)
         --rx / --ry: 3D mouse-tilt (JS sets on mousemove)
         --idle-ry  : 3D perspective pendulum on the focused card (JS sine wave) */
    --drift-x: 0px;
    --tm-scale: 1;
    --rx: 0deg;
    --ry: 0deg;
    --idle-ry: 0deg;
    transform: translateX(var(--drift-x)) perspective(1200px) scale(var(--tm-scale)) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--idle-ry)));
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.6s var(--ease), background 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }
  .tm-card.is-tilting{
    /* Snappy follow while cursor is over the card. Scale stays smooth because
       the JS rAF loop is continuous and the inline --tm-scale doesn't transition. */
    transition: transform 0.12s linear, background 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }
  .tm-card:hover{
    background: rgba(255, 255, 255, 0.28);
    box-shadow:
      0 24px 48px -20px rgba(5, 74, 71, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  .tm-card__frame{
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: clamp(10px, 1.2vw, 14px);
    overflow: hidden;
    background: var(--ink);
  }
  .tm-card__frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .tm-card__poster{
    /* Mobile fallback: static play button when JS disables iframe */
    display: none;
    position: absolute;
    inset: 0;
    background: var(--ink);
    color: var(--surface-cream);
    align-items: center;
    justify-content: center;
    font-size: 36px;
  }
  .tm-card__tag{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-coral);
    margin: 0;
  }
  .tm-card__foot{
    padding-top: 12px;
    border-top: 1px solid rgba(5, 74, 71, 0.10);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .tm-card__name{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
  }
  .tm-card__role{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 12.5px;
    color: rgba(5, 74, 71, 0.7);
    margin: 0;
  }
  .tm-card__role span{ color: var(--accent-coral); font-weight: 600; }

  /* ── Brand logo band (relocated to sit directly below the hero) ── */   /* ← new */
  .logos-band{
    background: var(--surface-cream);
    /* Top padding widened (Tom, 2026-08-10): the hero needed more air before
       the first content section. Scoped effect: logos-band only opens the
       home page. */
    padding: clamp(56px, 7.5vw, 104px) var(--side) clamp(40px, 6vw, 72px);
    position: relative;
    z-index: 11;            /* above hero (z-index:10) so an orbiting card can never overlap the logos */
  }
  /* ← changed: removed .logos-band::before — that was the gradient
     (linear-gradient transparent → cream) painting 48–96px ABOVE the
     section, softening the boundary into the hero. Hard cut now. */
  .logos-band__inner{
    max-width: var(--max);
    margin: 0 auto;
  }
  .logos-band .testimonials__logos{ margin-top: 0; }
  .logos-band__head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
    margin-bottom: clamp(24px, 3vw, 40px);
  }
  .logos-band .logos-label{ text-align: left; }
  .logos-band__body{
    font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55;
    color: var(--ink); opacity: 0.72; margin: 0;
  }
  @media (max-width: 640px) {
    .logos-band__head{ grid-template-columns: 1fr; }
  }

  /* ── Industries section (sector proof — boss-reference "Results" layout) ── */   /* ← new */
  .industries{
    background: var(--surface-cream);
    padding: clamp(48px, 7vw, 96px) var(--side) clamp(64px, 9vw, 128px);
    position: relative;
    z-index: 11;
  }
  .industries__inner{                               /* ← changed: no colour-block panel — cards sit straight on cream like Services */
    max-width: var(--max);
    margin: 0 auto;
  }
  .industries__head{
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    margin-bottom: clamp(32px, 4vw, 56px);
  }
  .industries__eyebrow{
    font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
    line-height: 1.2;                                    /* ← changed: 120% per Figma 290:3155 spec */
    text-transform: uppercase; color: var(--accent-coral);
    margin: 0 0 18px;
  }
  .industries__h{
    font-family: var(--sans);
    font-weight: 700;                                    /* ← changed: 600→700 (bold per Figma) */
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.0;                                    /* ← changed: 1.04→1.0 (100% per Figma) */
    letter-spacing: -0.03em;
    color: var(--ink); margin: 0;
    max-width: none;                                     /* ← changed: explicit <br> drives wrap now */
  }
  .industries__h em{
    /* ← changed: drop serif italic — Figma reference has uniform sans-bold */
    font-family: var(--sans);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .industries__aside{
    display: flex; flex-direction: column;
    gap: 20px;                                           /* pinned 20px per Figma spec */
    padding-top: 36px;                                   /* ← changed: 32→36px (compensates for Vend Sans cap-height offset) — aligns body text top with headline top */
  }
  .industries__lead{
    font-family: var(--sans); font-size: 16px;            /* pinned 16px per Figma spec */
    line-height: 1.6; color: var(--ink);
    opacity: 1;                                          /* full opacity per Figma */
    margin: 0;
    max-width: none;                                     /* ← changed: 34ch→none — fills the right column */
  }
  .industries__cta{
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--surface-cream); color: var(--ink);
    font-family: var(--sans); font-weight: 600; font-size: 15px;
    padding: 13px 13px 13px 22px; border-radius: 999px; text-decoration: none;
    transition: background 0.2s, color 0.2s;
    margin-left: -22px;                                  /* ← new: cancels the left padding so the visible text aligns with the paragraph above */
  }
  .industries__cta:hover{ background: var(--ink); color: var(--surface-cream); }
  .industries__cta-arrow{
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--surface-mint); color: var(--ink); flex: 0 0 30px;
  }
  .industries__cta-arrow svg{ width: 15px; height: 15px; }

  /* Expanding accordion — simple at rest; hovering a card grows it into its
     neighbour's space and reveals one hero stat from a key client */          /* ← changed */
  .industries__grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(12px, 1.2vw, 20px);
    align-items: stretch;
    transition: grid-template-columns 0.55s var(--ease);
  }
  .ind-card{                                        /* ← changed: white-glass tile matching .service-card */
    min-width: 0;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: clamp(16px, 1.5vw, 22px);
    padding: clamp(22px, 2.2vw, 34px);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: clamp(300px, 30vw, 420px);
    overflow: hidden; cursor: default;
    box-shadow:
      0 10px 28px -16px rgba(5, 74, 71, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: box-shadow 0.45s var(--ease), opacity 0.85s var(--ease) var(--reveal-delay, 0ms), translate 0.85s var(--ease) var(--reveal-delay, 0ms)   /* ← changed: reveal props merged — shorthand here would otherwise kill the data-reveal animation */;
  }
/* The whole industry card is a link to its hub page. Sits above the bg and
   name but below nothing interactive — the card has no other controls.
   position: relative is load-bearing: the base .ind-card rule never sets it,
   so without this the inset-0 cover would anchor to the grid, not the card. */
.ind-card{ cursor: pointer; position: relative; }
.ind-card__cover{ position: absolute; inset: 0; z-index: 6; }
  /* hovered/focused card takes over a neighbour's space — column grows */
  .industries__grid:has(.ind-card:nth-child(1):hover), .industries__grid:has(.ind-card:nth-child(1):focus-within){ grid-template-columns: 2.4fr 1fr 1fr; }
  .industries__grid:has(.ind-card:nth-child(2):hover), .industries__grid:has(.ind-card:nth-child(2):focus-within){ grid-template-columns: 1fr 2.4fr 1fr; }
  .industries__grid:has(.ind-card:nth-child(3):hover), .industries__grid:has(.ind-card:nth-child(3):focus-within){ grid-template-columns: 1fr 1fr 2.4fr; }
  .ind-card:hover, .ind-card:focus-within{          /* ← changed: lift/deepen shadow like .service-card:hover (no colour fill) */
    box-shadow:
      0 22px 44px -18px rgba(5, 74, 71, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }
  .ind-card__name{
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(22px, 2.2vw, 34px); line-height: 1.04;
    letter-spacing: -0.02em; color: var(--primary); margin: 0;
  }
  .ind-card__foot{ display: flex; flex-direction: column; }
  /* hero stat hidden at rest, revealed on hover (space reserved → no layout shift) */
  .ind-card__reveal{
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.45s var(--ease) 0.08s, transform 0.45s var(--ease) 0.08s;
  }
  .ind-card:hover .ind-card__reveal, .ind-card:focus-within .ind-card__reveal{ opacity: 1; transform: none; }
  .ind-card__stat{
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(40px, 4.6vw, 76px); line-height: 0.95;
    letter-spacing: -0.03em; color: var(--ink); margin: 0; white-space: nowrap;
  }
  .ind-card__stat-label{
    font-family: var(--sans); font-size: clamp(13px, 1vw, 15px);
    color: var(--ink); opacity: 0.65; margin: 8px 0 clamp(18px, 2vw, 26px);
    white-space: nowrap;
  }
  /* at-rest client list — the "types of clients" in each industry */
  .ind-card__clients-label{
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-coral); margin: 0 0 8px;
  }
  .ind-card__clients-list{
    font-family: var(--sans); font-size: clamp(13px, 1vw, 15px);
    line-height: 1.5; color: rgba(5, 74, 71, 0.78); margin: 0;
  }

  /* === Industry card hover extras: logos + background image =============== */
  .ind-card__logos{
    display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px);
    margin-top: clamp(14px, 1.6vw, 22px);
    flex-wrap: wrap;
  }
  .ind-card__logos img{
    height: clamp(18px, 1.8vw, 26px); width: auto; max-width: 90px;
  }
  .ind-card__bg{                                                              /* ← new */
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.6s var(--ease);
    z-index: 0;
    pointer-events: none;
  }
  .ind-card__bg::after{                                                       /* ← new: darken overlay for readability */
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.7) 40%,
      rgba(255,255,255,0.3) 100%);
  }
  .ind-card:hover .ind-card__bg, .ind-card:focus-within .ind-card__bg{ opacity: 1; }
  .ind-card__name, .ind-card__foot{ position: relative; z-index: 1; }        /* ← new: above bg */

  @media (max-width: 900px){
    .industries__head { grid-template-columns: 1fr; }
    .industries__grid { grid-template-columns: 1fr; }
    .ind-card { min-height: auto; }
    .ind-card__reveal { opacity: 1; transform: none; }
    .ind-card__logos { opacity: 1; transform: none; }
    .ind-card__bg { opacity: 0.4; }                                           /* subtle bg on mobile */
  }
  @media (max-width: 640px) {
    .industries__head{ gap: 8px; }
    .industries__aside{ padding-top: 0; }
    .testimonials__logos .logos-band__eyebrow{ font-size: 10px; letter-spacing: 0.09em; }
  }

  /* ── Logo wall folded into the testimonials section (compact spacing) ── */
  .testimonials__logos{
    margin-top: clamp(28px, 3vw, 40px);                            /* ← changed: pushed down to clear spotlight-scaled focused card */
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  }
  .testimonials__logos .logos-divider{
    width: 100%;
    border: none;
    border-top: 1px solid rgba(5, 74, 71, 0.22);
    margin: 0 0 14px;
    opacity: 0.7 !important;                                       /* ← changed: !important to beat legacy opacity:0 transition */
    transition: none !important;                                   /* ← new */
  }
  /* ↓ changed: explicitly reset the legacy .logos-label opacity:0 from line 371
     (that rule reveals via .logos.is-visible — but the merged-in parent here
     is .testimonials__logos which never gets that class, so the label stayed
     invisible. This was the actual "Trusted by..." disappearance bug.) */
  .testimonials__logos .logos-label{
    text-align: center;
    margin-bottom: 14px;
    opacity: 1 !important;                                         /* ← new */
    transform: none !important;                                    /* ← new */
    transition: none !important;                                   /* ← new */
  }
  /* ↓ changed: bigger + bolder + more contrast so the label actually reads
     as "Trusted by Australia's leading brands" — was getting lost at 11px / 0.72op */
  .testimonials__logos .eyebrow{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 13px;                                               /* ← changed: was 11px */
    font-weight: 600;                                              /* ← changed: was 500 */
    letter-spacing: 0.16em;                                        /* ← changed: was 0.14em */
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.95;                                                 /* ← changed: was 0.72 */
  }
  @media (max-width: 640px) {
    .testimonials__logos .logos-band__eyebrow{ font-size: 10px; letter-spacing: 0.08em; }
  }
  /* ↓ changed: same fix as .logos-label — legacy .marquee at line 400 has
     opacity:0 + reveals via .logos.is-visible (parent class never set here).
     Force visible so the brand logos actually appear when merged into
     .testimonials__logos. */
  .testimonials__logos .marquee{
    display: flex;
    gap: 56px;
    width: max-content;
    animation: tm-logo-marquee 50s linear infinite;
    align-items: center;
    opacity: 1 !important;                                         /* ← new */
    transition: none !important;                                   /* ← new */
    pointer-events: auto !important;                               /* ← new — legacy set pointer-events:none */
  }
  .testimonials__logos .logo-img-marquee{
    height: 36px;
    width: auto;
    flex-shrink: 0;
    user-select: none;
  }
  @keyframes tm-logo-marquee{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (max-width: 640px) {
    .testimonials__logos .marquee{ gap: 36px; animation-duration: 35s; }
    .testimonials__logos .logo-img-marquee{ height: 28px; }
    /* Tighten the fade so the centred label text isn't eaten by the mask */
    .testimonials__logos{
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }
  }

  @media (max-width: 900px) {
    .testimonials__head{ grid-template-columns: 1fr; gap: 32px; align-items: start; }
  }
  /* Mobile fallback — stop the animation + scale to fit screen + lighter perf */
  @media (max-width: 640px){
    .testimonials { --tm-card-w: 82vw; }
    .testimonials__viewport {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      mask-image: none;
      -webkit-mask-image: none;
    }
    .testimonials__track {
      animation: none !important;
      padding: 0 9vw;
      gap: 12px;
    }
    .tm-card { scroll-snap-align: center; }
    .tm-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 24px;
    }
    .tm-dot {
      width: 8px; height: 8px;
      border-radius: 999px;
      background: rgba(5, 74, 71, 0.2);
      border: none; padding: 0;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }
    .tm-dot.is-active { background: var(--primary); transform: scale(1.25); }
  }
  @media (min-width: 641px) {
    .tm-dots{ display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .testimonials__track{ animation: none !important; }
  }

  /* ── Modal: click a card → full-size player with controls + sound ── */
  .tm-card{ cursor: pointer; }
  .tm-modal{
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(5, 74, 71, 0.92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  .tm-modal.is-open{
    display: flex;
    opacity: 1;
  }
  .tm-modal__player{
    position: relative;
    width: 100%;
    max-width: min(92vw, 1200px);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: clamp(12px, 1.6vw, 20px);
    overflow: hidden;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  }
  .tm-modal__player iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
  }
  .tm-modal__close{
    position: absolute;
    top: clamp(16px, 2.4vw, 32px);
    right: clamp(16px, 2.4vw, 32px);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--surface-cream);
    color: var(--ink);
    border: 0;
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
    z-index: 1;
  }
  .tm-modal__close:hover{
    transform: scale(1.06);
    background: var(--accent-coral);
  }

  /* =====================================================================
     SITE FOOTER — minimal 5-column layout per ref design
     Contact Us (people + emails) · Social (plain text) · 3 offices ·
     Acknowledgement of Country · copyright.
     ===================================================================== */
  .site-footer{
    position: relative;
    z-index: 3;
    background: var(--ink);
    color: var(--ink-on-dark);
    padding: clamp(56px, 7vw, 96px) clamp(32px, 6vw, 80px) 28px;
  }
  .site-footer--mint .site-footer__col-h{ color: var(--ink); }
  .site-footer--mint .site-footer__office, .site-footer--mint .site-footer__links a{ color: rgba(26, 41, 26, 0.72); }
  .site-footer--mint .site-footer__links a:hover{ color: var(--ink); }
  .site-footer--mint .site-footer__acknowledgement{ color: rgba(26, 41, 26, 0.6); }
  .site-footer--mint .site-footer__copy{ color: rgba(26, 41, 26, 0.5); }
  .site-footer--mint .site-footer__inner{ border-top-color: rgba(26, 41, 26, 0.15); }
  .site-footer__brand{
    margin-top: clamp(48px, 6vw, 80px);
  }
  .site-footer__brand a{
    display: block;
  }
  .site-footer__brand img{
    width: 100%;
    height: auto;
    display: block;
  }
  .site-footer--mint .site-footer__brand img{
    /* Mint footer — convert light SVG fills to dark ink */
    filter: brightness(0) saturate(100%) invert(17%) sepia(68%) saturate(607%) hue-rotate(141deg) brightness(94%);
  }
  .site-footer__inner{
    padding-top: 28px;
    border-top: 1px solid rgba(245, 240, 227, 0.18);
  }
  /* Sitemap · Solutions · Industries · Social · Offices (consolidated). */
  .site-footer__top{
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1fr 0.7fr 1.2fr;
    gap: clamp(28px, 3vw, 56px);
    padding-bottom: clamp(56px, 7vw, 96px);
  }
  .site-footer__col{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .site-footer__col-h{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--surface-cream);
    margin: 0 0 6px;
  }
  .site-footer__office{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(245, 240, 227, 0.78);
    margin: 0;
  }
  .site-footer__person{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(245, 240, 227, 0.78);
    margin: 0;
  }
  .site-footer__person + .site-footer__person{ margin-top: 14px; }
  .site-footer__person strong{
    display: block;
    font-weight: 700;
    color: var(--surface-cream);
    margin-bottom: 2px;
  }
  .site-footer__person a{
    color: rgba(245, 240, 227, 0.78);
    text-decoration: none;
    transition: color 0.3s cubic-bezier(.19, 1, .22, 1);
      display: inline-block;
    padding: 6px 0;                    /* ← new: tap-target height (was ~19px) */
    margin: -6px 0;
  }
  .site-footer__person a:hover{ color: var(--accent-coral); }
  .site-footer__links{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .site-footer__links a{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(245, 240, 227, 0.78);
    text-decoration: none;
    transition: color 0.3s cubic-bezier(.19, 1, .22, 1);
      display: inline-block;
    padding: 6px 0;                    /* ← new: tap-target height (was ~19px) */
    margin: -6px 0;
  }
  .site-footer__links a:hover{ color: var(--accent-coral); }
  .site-footer__bottom{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(28px, 3vw, 56px);
    align-items: end;
  }
  .site-footer__acknowledgement{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(245, 240, 227, 0.65);
    margin: 0;
    max-width: 64ch;
  }
  .site-footer__copy{
    font-family: 'Vend Sans', system-ui, sans-serif;
    font-size: 12px;
    color: rgba(245, 240, 227, 0.55);
    margin: 0;
    text-align: right;
  }
  /* City lead inside the consolidated Offices column. */
  .site-footer__office-city{
    display: inline-block;
    font-weight: 600;
    color: rgba(245, 240, 227, 0.85);
    margin-bottom: 2px;
  }
  .site-footer__office + .site-footer__office{ margin-top: 0; }
  /* Legal links ride inline with the copyright line. */
  .site-footer__legal{ white-space: nowrap; }
  .site-footer__legal a{
    color: rgba(245, 240, 227, 0.55);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--dur) var(--ease);
  }
  .site-footer__legal a:hover{ color: var(--accent-coral); }
  .site-footer__legal span{ margin: 0 6px; }
  .site-footer--mint .site-footer__legal a{ color: rgba(26, 41, 26, 0.5); }
  .site-footer--mint .site-footer__office-city{ color: rgba(26, 41, 26, 0.85); }
  a.site-footer__office-link{
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
  }
  a.site-footer__office-link:hover{ color: var(--accent-coral); }
  @media (max-width: 1100px) {
    .site-footer__top{ grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
  }
  @media (max-width: 640px) {
    .site-footer__top{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
    .site-footer__bottom{ grid-template-columns: 1fr; gap: 20px; }
    .site-footer__copy{ text-align: left; }
  }

/* === Team section ================================================== */

       Layout based on Figma reference (designer Tom). Big team-group photo
       anchors the left, tall portrait anchors the right; 3 smaller tiles
       drift around the centered text. Each tile gets its own subtle float
       animation with offset delays so the group reads as alive, not static.
       ====================================================================== */
    .team{
      background: var(--surface-cream);
      padding: 0;
    }
    .team__stage{
      position: relative;
      min-height: clamp(700px, 92vh, 1000px);
      padding: clamp(48px, 6vw, 96px) var(--side);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .team__text{
      position: relative;
      z-index: 3;
      text-align: center;
      max-width: 520px;
    }
    .team__eyebrow{
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.16em;
      line-height: 1.2;
      text-transform: uppercase;
      color: var(--accent-coral);
      margin: 0 0 28px;
    }
    .team__h{
      font-family: var(--sans);
      font-weight: 700;
      font-size: clamp(36px, 4.2vw, 58px);
      line-height: 1.0;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin: 0 0 36px;
    }
    .team__cta{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14px;
      color: var(--ink);
      padding: 13px 30px;
      border-radius: 999px;
      border: 1px solid var(--ink);
      background: transparent;
      text-decoration: none;
      transition: background 0.25s var(--ease), color 0.25s var(--ease);
    }
    .team__cta:hover{ background: var(--ink); color: var(--surface-cream); }

    /* Floating photo tiles */
    .team__float{
      position: absolute;
      border-radius: clamp(14px, 1.6vw, 22px);
      background: #cccccc;            /* visible as grey while images load */
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.06);
      z-index: 1;
      animation: teamFloat 7s ease-in-out infinite;
    }
    .team__float img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Position presets (desktop) — each tile placed by viewport % so it
       scales with screen width. */
    .team__float--main{            /* BIG team group, anchors the left */
      top: 18%; left: 2%;
      width: 26vw;
      aspect-ratio: 16 / 10;
      animation-delay: 0s;
      z-index: 2;
    }
    /* ← new: crossfade between two team group photos */
    .team__float--main img{
      position: absolute; inset: 0;
    }
    .team__float--main img:nth-child(1){ animation: teamCrossfade 8s ease-in-out infinite; }
    .team__float--main img:nth-child(2){ animation: teamCrossfade 8s ease-in-out infinite; animation-delay: -4s; }
    @keyframes teamCrossfade{
      0%, 42%  { opacity: 1; }
      50%, 92% { opacity: 0; }
      100%     { opacity: 1; }
    }
    .team__float--top{             /* small landscape, top center-right */
      top: 4%; left: 56%;
      width: 14vw;
      aspect-ratio: 16 / 10;
      animation-delay: -2s;
    }
    .team__float--right-tall{      /* BIG portrait, anchors the right */
      top: 28%; right: 2%;
      width: 19vw;
      aspect-ratio: 4 / 5;
      animation-delay: -3.5s;
      z-index: 2;
    }
    .team__float--bottom-mid{      /* medium landscape, bottom center */
      bottom: 4%; left: 48%;
      width: 17vw;
      aspect-ratio: 16 / 10;
      animation-delay: -5s;
    }
    .team__float--bottom-left{     /* small landscape, bottom-left */
      bottom: 14%; left: 24%;
      width: 10vw;
      aspect-ratio: 16 / 10;
      animation-delay: -1s;
    }

    @keyframes teamFloat{
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-14px); }
    }

    /* Tablet: shrink + reposition */
    @media (max-width: 1100px){
      .team__float--main         { width: 38vw; left: 1%; top: 14%; }
      .team__float--right-tall   { width: 24vw; right: 1%; top: 22%; }
      .team__float--top          { width: 18vw; left: 50%; top: 4%; }
      .team__float--bottom-mid   { width: 22vw; bottom: 4%; left: 42%; }
      .team__float--bottom-left  { width: 13vw; bottom: 18%; left: 20%; }
    }

    /* Mobile: full-team photo → text → tall portrait only */
    @media (max-width: 720px){
      .team__stage {
        flex-direction: column;
        min-height: auto;
        gap: 40px;
        padding: 64px 0 0;
      }
      .team__text {
        max-width: 100%;
        padding: 0 var(--side);
      }
      .team__float {
        position: relative;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        width: 100%;
        animation: none;
        border-radius: 0;
      }
      .team__float--main         { order: 1; aspect-ratio: 16 / 10; }
      .team__text                { order: 2; }
      .team__float--right-tall   { order: 3; aspect-ratio: 3 / 2; }
      .team__float--top          { display: none; }
      .team__float--bottom-mid   { display: none; }
      .team__float--bottom-left  { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .team__float{ animation: none; }
    }

  /* ═══════════════════════════════════════════════════════════════
     SHARED CONTACT FOOTER SECTION (.contact__*)
     Used on solutions.html and work.html — mint-wash scroll target
  ═══════════════════════════════════════════════════════════════ */
  .contact__inner{ max-width: var(--max-w); margin: 0 auto; }
  .contact__h{
    font-family: var(--font-sans); font-weight: 700;
    font-size: clamp(36px, 7.29vw, 105px); line-height: 1em;
    letter-spacing: -0.0257em; color: var(--ink); margin: 0 0 clamp(32px, 4vw, 48px);
    max-width: 14ch;
  }
  .contact__body{
    font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--ink); opacity: 0.72;
    max-width: 44ch; margin: 0 0 clamp(40px, 5vw, 56px);
  }
  .contact__cta{
    display: inline-flex; align-items: center; gap: 15px;
    font-size: 15px; font-weight: 600;
    padding: 10px 10px 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--primary); color: var(--ink-on-dark);
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
  }
  .contact__cta:hover{ background: var(--accent-coral); color: var(--ink); }
  .contact__cta-arrow{
    width: 32px; height: 32px; border-radius: var(--radius-pill);
    background: rgba(245, 240, 227, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.3s var(--ease);
  }
  .contact__cta:hover .contact__cta-arrow{ transform: translateX(3px); }

  /* ═══════════════════════════════════════════════════════════════
     VIDEO LIGHTBOX MODAL (.tm-modal)
     Used on solutions.html and work.html for hero video playback
  ═══════════════════════════════════════════════════════════════ */
  .tm-modal{
    position: fixed; inset: 0; z-index: 200;
    background: rgba(5, 20, 18, 0.88);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--ease);
  }
  .tm-modal.is-open{ opacity: 1; pointer-events: auto; }
  .tm-modal__player{
    width: min(90vw, 1200px); aspect-ratio: 16/9;
    border-radius: clamp(10px, 1vw, 16px); overflow: hidden;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
  }
  .tm-modal__player iframe{ width: 100%; height: 100%; border: 0; }
  .tm-modal__close{
    position: absolute; top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px);
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: rgba(245, 240, 227, 0.14); color: var(--ink-on-dark);
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s var(--ease);
  }
  .tm-modal__close:hover{ background: rgba(245, 240, 227, 0.28); }

  /* ── Services Accordion (Synced Pattern) ─────────────────────────────── */
  .svc-acc{
    background: var(--surface-white, #fff);
    padding: clamp(64px, 9vw, 128px) 0;
  }
  .svc-acc__inner{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--side);
  }
  .svc-acc__header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 72px);
  }
  .svc-acc__eyebrow{
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent-coral); margin: 0 0 clamp(14px, 1.6vw, 20px);
    grid-column: 1 / -1;
  }
  .svc-acc__headline{
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04;
    letter-spacing: -0.03em; color: var(--ink); margin: 0;
    grid-column: 1;
  }
  .svc-acc__list{
    border-top: 1px solid rgba(26, 26, 26, 0.1);
  }
  .svc-acc__item{
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  }
  .svc-acc__trigger{
    width: 100%; background: none; border: none; cursor: pointer;
    display: grid;
    grid-template-columns: 3rem 1fr auto auto;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding: clamp(20px, 2.4vw, 32px) 0;
    text-align: left;
    color: var(--ink);
  }
  .svc-acc__trigger:focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .svc-acc__num{
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: 0.1em; color: var(--accent-coral); opacity: 0.8;
  }
  .svc-acc__title{
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(20px, 2vw, 30px); line-height: 1.1;
    letter-spacing: -0.02em; color: var(--ink);
    transition: color 0.3s var(--ease);
  }
  .svc-acc__item.is-open .svc-acc__title, .svc-acc__trigger:hover .svc-acc__title{ color: var(--primary); }
  .svc-acc__summary{
    font-family: var(--sans); font-size: clamp(14px, 1vw, 16px);
    color: var(--ink); opacity: 0.5;
    max-width: 34ch;
    transition: opacity 0.3s var(--ease);
  }
  .svc-acc__item.is-open .svc-acc__summary{ opacity: 0; pointer-events: none; }
  .svc-acc__icon{
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(26, 26, 26, 0.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), rotate 0.4s var(--ease);
  }
  .svc-acc__icon svg{ width: 16px; height: 16px; }
  .svc-acc__icon-v{ transition: opacity 0.3s var(--ease); }
  .svc-acc__item.is-open .svc-acc__icon{
    background: var(--primary);
    border-color: var(--primary);
    color: var(--tertiary);
    rotate: 45deg;
  }
  /* Panel expand/collapse via grid trick — no JS height calc needed */
  .svc-acc__panel{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease);
  }
  .svc-acc__item.is-open .svc-acc__panel{ grid-template-rows: 1fr; }
  .svc-acc__panel-inner{ overflow: hidden; }
  .svc-acc__panel-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    padding-bottom: clamp(24px, 3vw, 40px);
    padding-right: clamp(16px, 4vw, 64px);
  }
  .svc-acc__body{
    font-family: var(--sans); font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.65; color: var(--ink); opacity: 0.8; margin: 0;
  }
  .svc-acc__caps{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    border-left: 2px solid var(--tertiary);
    padding-left: clamp(16px, 1.8vw, 24px);
    gap: 0;
  }
  .svc-acc__caps li{
    font-family: var(--sans); font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.4; color: var(--ink); opacity: 0.75;
    padding: clamp(8px, 1vw, 12px) 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.07);
  }
  .svc-acc__caps li:last-child{ border-bottom: none; }
  .svc-acc__cta{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--primary);
    text-decoration: none;
    margin-bottom: clamp(24px, 3vw, 40px);
    transition: gap 0.3s var(--ease), color 0.3s var(--ease);
  }
  .svc-acc__cta:hover{ gap: 16px; color: var(--secondary); }
  .svc-acc__cta svg{ width: 16px; height: 16px; flex: 0 0 16px; }

  @media (max-width: 860px) {
    .svc-acc__header{ grid-template-columns: 1fr; }
    .svc-acc__trigger{ grid-template-columns: 2.4rem 1fr auto; }
    .svc-acc__summary{ display: none; }
    .svc-acc__panel-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 480px) {
    .svc-acc__num{ font-size: 11px; }
    .svc-acc__title{ font-size: clamp(15px, 4.5vw, 18px); }
    .svc-acc__body{ font-size: 14px; }
    .svc-acc__caps li{ font-size: 13px; }
  }

  /* ══════════════════════════════════════════════════════════════════════════
     PAGE HERO (shared — contact, blog, and future inner pages)
     ══════════════════════════════════════════════════════════════════════════ */
  .blg-hero{
    position: relative;
    /* z-index 2 puts this above the fixed .bg-video (z 0) and .bg-overlay (z 1).
       Without it the overlay paints straight over the section — same convention
       the .section class uses. Every full-width page section needs this. */
    z-index: 2;
    height: clamp(280px, 36vw, 519px);
    overflow: hidden;
  }
  .blg-hero__img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
  }
  .blg-hero::after{
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(245,240,227,0.18) 0%, rgba(245,240,227,0) 60%);
    pointer-events: none;
  }
  .blg-hero__content{
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: clamp(80px, 10.5vw, 152px) var(--side) 0;
  }
  .blg-hero__h{
    font-family: var(--font-sans); font-weight: 400;
    font-size: clamp(40px, 6.6vw, 95px); line-height: 1em;
    letter-spacing: -0.0284em; color: var(--ink);
    margin: 12px 0 0; max-width: 18ch;
  }
  .blg-hero__sub{
    margin: 20px 0 0; font-size: 16px; line-height: 1.6em;
    color: var(--ink); opacity: 0.72; max-width: 44ch;
  }
  .blg-hero__content .label{ color: var(--ink); margin-bottom: 0; }
  @media (max-width: 640px) {
    .blg-hero{ height: clamp(340px, 50vh, 480px); }
  }

  /* ══════════════════════════════════════════════════════════════════════════
     CONTACT FORM
     The .ctc-* classes below are the design contract. Gravity Forms markup is
     mapped onto them at the bottom of this block, so the form looks identical
     whether it's rendered by GF or by the placeholder.
     ══════════════════════════════════════════════════════════════════════════ */
  .ctc-section{
    position: relative;
    z-index: 2;                 /* see .blg-hero — must clear the fixed bg-overlay */
    background: var(--surface-cream);
    padding: clamp(36px, 3.4vw, 52px) var(--side) clamp(80px, 10vw, 130px);
  }
  .ctc-form-wrap{ max-width: 870px; margin: 0 auto; }
  .ctc-form-wrap__h{
    font-family: var(--font-sans); font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em;
    color: var(--ink); margin: 0 0 clamp(20px, 2vw, 28px);
  }
  .ctc-form{ display: flex; flex-direction: column; gap: 30px; }
  .ctc-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
  .ctc-row--center{ display: flex; justify-content: center; }
  .ctc-row--center .ctc-field{ width: calc(50% - 15px); }
  .ctc-field{ display: flex; flex-direction: column; gap: 5px; }
  .ctc-field--full{ width: 100%; gap: 8px; }
  .ctc-label{
    font-family: var(--font-sans); font-size: 16px; font-weight: 400;
    line-height: 1.6em; color: var(--ink); cursor: default;
  }
  .ctc-input, .ctc-select{
    height: 50px; background: #fff; border: none; border-radius: 10px;
    padding: 0 20px; font-family: var(--font-sans); font-size: 16px;
    color: var(--ink); outline: none; appearance: none; -webkit-appearance: none;
    transition: box-shadow var(--dur) var(--ease); width: 100%;
  }
  .ctc-input::placeholder, .ctc-select.is-empty{ color: rgba(5, 74, 71, 0.30); }
  .ctc-input:focus, .ctc-select:focus{ box-shadow: 0 0 0 2px var(--ink); }
  .ctc-select-wrap{ position: relative; }
  .ctc-select-wrap::after{
    content: ''; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); width: 10px; height: 6px;
    pointer-events: none; background-color: var(--ink); opacity: 0.5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .ctc-select-wrap .ctc-select{ padding-right: 44px; cursor: pointer; }
  .ctc-textarea{
    background: #fff; border: none; border-radius: 10px; padding: 16px 20px;
    font-family: var(--font-sans); font-size: 16px; color: var(--ink);
    height: 262px; resize: none; outline: none; width: 100%;
    transition: box-shadow var(--dur) var(--ease); line-height: 1.6em;
  }
  .ctc-textarea::placeholder{ color: rgba(5, 74, 71, 0.30); }
  .ctc-textarea:focus{ box-shadow: 0 0 0 2px var(--ink); }
  .ctc-submit{ display: flex; justify-content: center; padding-top: 10px; }
  .ctc-btn{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 12px 12px 24px; background: var(--primary);
    border: none; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    color: var(--ink-on-dark); cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .ctc-btn:hover{ background: var(--accent-coral); }
  .ctc-btn__arrow{
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ink-on-dark); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex: 0 0 auto;
    transition: transform var(--dur) var(--ease);
  }
  .ctc-btn:hover .ctc-btn__arrow{ transform: translateX(3px); }
  .ctc-btn:disabled{ opacity: 0.6; cursor: not-allowed; pointer-events: none; }
  .ctc-field-error{
    font-family: var(--font-sans); font-size: 12px; color: #c0392b;
    display: none; margin-top: 4px;
  }
  .ctc-field-error:not(:empty){ display: block; }
  .ctc-input[aria-invalid="true"], .ctc-select[aria-invalid="true"], .ctc-textarea[aria-invalid="true"]{ box-shadow: 0 0 0 2px #c0392b; }
  .ctc-form-error{
    font-family: var(--font-sans); font-size: 14px; color: #c0392b;
    padding: 12px 16px; background: rgba(192, 57, 43, 0.08);
    border-radius: 8px; display: none;
  }
  .ctc-form-error:not(:empty){ display: block; }
  .ctc-success{ display: none; text-align: center; padding: clamp(48px, 8vw, 80px) 0; }
  .ctc-success[aria-hidden="false"]{ display: block; }
  .ctc-success__icon{
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--surface-mint);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
  }
  .ctc-success__icon svg{ width: 24px; height: 24px; stroke: var(--primary); }
  .ctc-success__h{
    font-family: var(--font-sans); font-weight: 600;
    font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em;
    color: var(--ink); margin: 0 0 12px;
  }
  .ctc-success__body{
    font-family: var(--font-sans); font-size: 16px;
    color: var(--ink); opacity: 0.65; margin: 0;
  }

  /* Placeholder banner — shown until Gravity Forms is connected */
  .ctc-placeholder-note{
    display: flex; align-items: flex-start; gap: 12px;
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
    color: var(--ink); background: rgba(5, 74, 71, 0.06);
    border: 1px dashed rgba(5, 74, 71, 0.35);
    border-radius: 10px; padding: 14px 18px;
    margin: 0 0 clamp(24px, 3vw, 34px);
  }
  .ctc-placeholder-note strong{ font-weight: 600; }
  .ctc-form--placeholder{ opacity: 0.62; pointer-events: none; user-select: none; }

  @media (max-width: 760px) {
    .ctc-row{ grid-template-columns: 1fr; }
    .ctc-row--center{ display: flex; }
    .ctc-row--center .ctc-field{ width: 100%; }
  }

  /* ── Gravity Forms → .ctc-* mapping ────────────────────────────────────────
     GF ships its own stylesheet; these rules restyle its markup to the design
     above so the swap from placeholder to live form is invisible. Written
     against GF 2.5+ markup (.gform_fields grid, .gfield--width-half). */
  .ctc-form-wrap .gform_wrapper{ margin: 0; }
  .ctc-form-wrap .gform_fields{
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  }
  /* min-width: 0 is load-bearing on both.
     A grid item's automatic minimum size is its MIN-CONTENT width, and it will
     overflow its track rather than shrink below it. GF's text inputs carry 40px
     of horizontal padding and the `large` class, so their min-content exceeded
     the 311px track on a phone and every field laid out at 330px — 19px past
     its own container, on every page carrying the form. It reads as a width
     bug and is actually a min-size one, which is why setting width:100% (which
     was already set) never helped. */
  .ctc-form-wrap .gfield{ display: flex; flex-direction: column; gap: 5px; grid-column: span 2; min-width: 0; }
  .ctc-form-wrap .ginput_container{ min-width: 0; }
  .ctc-form-wrap .gfield--width-half{ grid-column: span 1; }
  .ctc-form-wrap .gfield_label{
    font-family: var(--font-sans); font-size: 16px; font-weight: 400;
    line-height: 1.6em; color: var(--ink);
  }
  .ctc-form-wrap .gfield_required{ color: var(--ink); }
  .ctc-form-wrap .ginput_container input[type="text"], .ctc-form-wrap .ginput_container input[type="email"], .ctc-form-wrap .ginput_container input[type="tel"], .ctc-form-wrap .ginput_container select{
    height: 50px; background: #fff; border: none; border-radius: 10px;
    padding: 0 20px; font-family: var(--font-sans); font-size: 16px;
    color: var(--ink); outline: none; appearance: none; -webkit-appearance: none;
    width: 100%; transition: box-shadow var(--dur) var(--ease);
  }
  .ctc-form-wrap .ginput_container textarea{
    background: #fff; border: none; border-radius: 10px; padding: 16px 20px;
    font-family: var(--font-sans); font-size: 16px; color: var(--ink);
    height: 262px; resize: none; outline: none; width: 100%; line-height: 1.6em;
    transition: box-shadow var(--dur) var(--ease);
  }
  .ctc-form-wrap .ginput_container input:focus, .ctc-form-wrap .ginput_container select:focus, .ctc-form-wrap .ginput_container textarea:focus{ box-shadow: 0 0 0 2px var(--ink); }
  /* GF 3 re-applies its chevron background-image on :hover. Our `background:
     #fff` shorthand above resets background-repeat/position to initial, so the
     re-applied icon TILED across the control — the herringbone hover. Kill the
     image at every state and draw our own chevron instead. */
  /* Dropdown answers get more air than text inputs (Tom, 2026-08-10):
     taller control, deeper inset either side. The extra
     .ginput_container_select class is load-bearing, not tidiness — GF 3's
     stylesheet loads after ours and re-applies its own select padding at
     equal specificity, which made this style hold on :hover only. */
  .ctc-form-wrap .ginput_container_select select,
  .ctc-form-wrap .ginput_container_select select:hover,
  .ctc-form-wrap .ginput_container_select select:focus{
    background-image: none !important;
    height: 56px;
    padding-left: 24px;
    padding-right: 48px;
    line-height: 56px;
  }
  .ctc-form-wrap .ginput_container_select{ position: relative; }
  .ctc-form-wrap .ginput_container_select::after{
    content: "";
    position: absolute;
    right: 18px; top: 50%;
    width: 12px; height: 8px;
    transform: translateY(-50%);
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
  /* File upload (CV / work samples on the careers forms). GF renders a bare
     input[type=file]; give it the same white pill as the text inputs and style
     the browser button inside it, plus GF's rules line ("Accepted file
     types…") as a quiet hint rather than a validation shout. */
  .ctc-form-wrap .ginput_container_fileupload input[type="file"]{
    width: 100%; background: #fff; border: none; border-radius: 10px;
    padding: 11px 20px; font-family: var(--font-sans); font-size: 15px;
    color: var(--ink); outline: none;
    transition: box-shadow var(--dur) var(--ease);
  }
  .ctc-form-wrap .ginput_container_fileupload input[type="file"]:focus{ box-shadow: 0 0 0 2px var(--ink); }
  .ctc-form-wrap .ginput_container_fileupload input[type="file"]::file-selector-button{
    margin-right: 14px; padding: 6px 14px; background: var(--ink);
    border: none; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    color: var(--ink-on-dark); cursor: pointer;
  }
  .ctc-form-wrap .gform_fileupload_rules{
    font-size: 12px; color: rgba(5, 74, 71, 0.55); padding-top: 4px;
  }
  /* Website/URL fields (LinkedIn, portfolio, CV link) share the text treatment. */
  .ctc-form-wrap .ginput_container input[type="url"]{
    height: 50px; background: #fff; border: none; border-radius: 10px;
    padding: 0 20px; font-family: var(--font-sans); font-size: 16px;
    color: var(--ink); outline: none; appearance: none; -webkit-appearance: none;
    width: 100%; transition: box-shadow var(--dur) var(--ease);
  }
  /* Consent checkbox — GF's consent field is a checkbox + inline label. */
  .ctc-form-wrap .ginput_container_consent{ display: flex; gap: 10px; align-items: flex-start; }
  .ctc-form-wrap .ginput_container_consent input[type="checkbox"]{
    width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex: none;
  }
  .ctc-form-wrap .ginput_container_consent .gfield_consent_label{
    font-size: 13px; line-height: 1.5; color: rgba(5, 74, 71, 0.72);
  }
  .ctc-form-wrap .gform_footer{ display: flex; justify-content: center; padding-top: 10px; }
  .ctc-form-wrap .gform_footer input[type="submit"], .ctc-form-wrap .gform_footer button{
    padding: 12px 24px; background: var(--primary); border: none;
    border-radius: var(--radius-pill); font-family: var(--font-sans);
    font-size: 14px; font-weight: 600; color: var(--ink-on-dark);
    cursor: pointer; transition: background var(--dur) var(--ease);
  }
  .ctc-form-wrap .gform_footer input[type="submit"]:hover, .ctc-form-wrap .gform_footer button:hover{ background: var(--accent-coral); }
  .ctc-form-wrap .gfield_description.validation_message, .ctc-form-wrap .gform_validation_errors{
    font-family: var(--font-sans); font-size: 12px; color: #c0392b;
    background: none; border: none; padding: 0; margin-top: 4px;
  }
  .ctc-form-wrap .gform_confirmation_message{
    font-family: var(--font-sans); font-size: 16px; color: var(--ink);
    text-align: center; padding: clamp(48px, 8vw, 80px) 0;
  }
  /* Single column on phones — expressed in GF's grid, not against it.
     The previous version set `grid-template-columns: 1fr` at (0,2,0), which ties
     with GF's own `.gform-theme--foundation .gform_fields` (also (0,2,0)) and
     loses on load order, because the four Gravity Forms stylesheets enqueue
     after garden.css. It also said `grid-column: span 1`, which in a
     twelve-column grid is one twelfth of the row rather than a full one.
     Same shape as trap 8: the fix is a class, not a bigger hammer.

     So keep GF's twelve columns and make every field span all of them. */
  @media (max-width: 760px) {
    .ctc-form-wrap .gform_wrapper.gform-theme .gfield,
    .ctc-form-wrap .gform_wrapper.gform-theme .gfield--width-half,
    .ctc-form-wrap .gfield,
    .ctc-form-wrap .gfield--width-half{
      grid-column: 1 / -1;
    }
    /* STOP USING THE GRID on phones — flex column instead.
       GF's field grid is twelve tracks with a 30px column gap: 11 × 30 = 330px
       of gap before a single track is sized, inside a ~311px wrapper. The free
       space goes negative, all twelve 1fr tracks resolve to 0px, and every
       field then overflows its zero-width track at its own min-content width —
       330px, 19px past its container, on every page carrying the form.

       Removing the gap and zeroing min-width were both tried and neither fixed
       it, because the tracks stay collapsed either way. A flex column has no
       tracks to collapse: items stretch to the container and shrink with it.
       Specificity (0,4,0) to clear GF's own (0,2,0) foundation rule, which
       enqueues after garden.css and would otherwise win on order — trap 8. */
    .ctc-form-wrap .gform_wrapper.gform-theme .gform_fields,
    .ctc-form-wrap .gform_fields{
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
  }

  /* ── GF 3.0 "orbital" theme overrides ──────────────────────────────────────
     Verified against the rendered form, not assumed. GF 3.0 ships a framework
     stylesheet whose button rule is
       .gform-theme.gform-theme--framework.gform_wrapper .button:where(…)
     — specificity (0, 4, 0), which outguns the (0, 2, 1) rules above, so the submit
     button rendered in GF's default blue with a 3px radius. Adding
     `.gform_wrapper.gform-theme` to the prefix takes these to (0, 4, 1) and wins.

     GF resolves most of its look through custom properties, so both the
     property and the --gf-local-* variable behind it are set here: whichever
     mechanism GF uses for a given control, the design value is what lands.

     The field grid is GF's own 12-column layout — .gfield--width-half already
     spans 6, so only the gap needs correcting to the 30px the design uses. */
  .ctc-form-wrap .gform_wrapper.gform-theme .gform_fields{
    column-gap: 30px;
    row-gap: 30px;
  }
  .ctc-form-wrap .gform_wrapper.gform-theme .gform_footer{
    display: flex;
    justify-content: center;
    padding-top: 10px;
    margin: 0;
  }
  /* Labels: GF's `.gform-theme--framework .gform-field-label` is (0, 2, 0) — the
     same weight as the `.ctc-form-wrap .gfield_label` rule above but loaded
     later, so it won on order alone. This is (0, 4, 0). */
  .ctc-form-wrap .gform_wrapper.gform-theme .gfield .gfield_label{
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--ink);
    margin-bottom: 5px;
  }
  .ctc-form-wrap .gform_wrapper.gform-theme .gfield_required{ color: var(--ink); }

  /* Button: !important is not laziness here, it is the only thing that works.
     GF 3.0's framework stylesheet marks the submit button's own appearance
     !important, which outranks every level of specificity — verified by setting
     an inline style on the button and watching it lose too. Raising the
     selector weight was tried first and had no effect. If a future GF release
     drops the !important, these can go back to plain declarations. */
  .ctc-form-wrap .gform_wrapper.gform-theme .gform_footer button.gform_button, .ctc-form-wrap .gform_wrapper.gform-theme .gform_footer input[type="submit"].gform_button{
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 12px 24px !important;
    height: auto !important;
    min-height: 42px !important;
    width: auto !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-on-dark) !important;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .ctc-form-wrap .gform_wrapper.gform-theme .gform_footer button.gform_button:hover, .ctc-form-wrap .gform_wrapper.gform-theme .gform_footer input[type="submit"].gform_button:hover{
    background: var(--accent-coral) !important;
    background-color: var(--accent-coral) !important;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     ABOUT PAGE — ported from about.html
     Every top-level <section> here carries position:relative + z-index:2 so it
     paints above the fixed .bg-video / .bg-overlay layers.
     ══════════════════════════════════════════════════════════════════════════ */
/* =====================================================================
   HERO — video background (same as home page approach)
   ===================================================================== */
/* .hero gets background: transparent from garden.css (z-index: 2 too) */
.hero-about{
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  padding: clamp(150px, 19vh, 240px) var(--side) clamp(80px, 11vw, 160px);
  z-index: 2;   /* clear the fixed bg-overlay — see .section */
}
.hero-about__inner{
  position: relative;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
}
/* Soft cream vignette behind text for legibility over the video */
.hero-about__inner::before{
  content: '';
  position: absolute;
  inset: -10% -12%;
  background: radial-gradient(
    ellipse at 25% 55%,
    rgba(245, 240, 227, 0.72) 0%,
    rgba(245, 240, 227, 0.45) 32%,
    rgba(245, 240, 227, 0.14) 65%,
    rgba(245, 240, 227, 0) 90%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
.hero-about__inner > *{ position: relative; z-index: 1; }
.hero-about__content{ max-width: 740px; }

.hero-about__eyebrow{
  color: var(--accent-coral) !important;
  transition: color 1.4s var(--ease);
}
/* Stage 1 (dark bg): show eyebrow in semi-transparent coral */
body.is-stage-1 .hero-about__eyebrow{ color: rgba(252, 119, 106, 0.85) !important; }
body.is-stage-2 .hero-about__eyebrow{ color: var(--accent-coral) !important; }

.hero-about__statement{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(48px, 6.6vw, 95px);
  line-height: 1.0;
  letter-spacing: -0.0284em;
  color: var(--ink);
  margin: 0;
  transition: color 1.4s var(--ease);
  text-shadow: 0 1px 24px rgba(245, 240, 227, 0.5), 0 1px 2px rgba(245, 240, 227, 0.4);
}
.hero-about__statement em{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
body.is-stage-1 .hero-about__statement{ color: rgba(245, 240, 227, 0.92); }
body.is-stage-2 .hero-about__statement{ color: var(--ink); }

.hero-about__body{
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(5, 74, 71, 0.72);
  max-width: 52ch;
  transition: color 1.4s var(--ease);
  text-shadow: 0 1px 12px rgba(245, 240, 227, 0.5);
}
body.is-stage-1 .hero-about__body{ color: rgba(245, 240, 227, 0.65); }
body.is-stage-2 .hero-about__body{ color: rgba(5, 74, 71, 0.72); }

.hero-about__cta{
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--surface-cream);
  background: var(--primary);
  padding: 10px 10px 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease);
}
.hero-about__cta:hover{ background: var(--secondary); }
.hero-about__cta-arrow{
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--surface-cream); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform var(--dur) var(--ease);
}
.hero-about__cta:hover .hero-about__cta-arrow{ transform: translateX(3px); }

.hero-about__content{ max-width: 680px; }

.hero-about__postcard{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(4deg);
  width: clamp(440px, 48vw, 640px);
  z-index: 2;
  mix-blend-mode: multiply;
}
.hero-about__postcard img{
  display: block;
  width: 100%;
}
@media (max-width: 1100px) {
  .hero-about__postcard{ display: none; }
  .hero-about__content{ max-width: 740px; }
}
@media (max-width: 640px) {
  .hero-about{
    min-height: auto;
    align-items: flex-start;
    padding-top: clamp(100px, 18vh, 130px);
    padding-bottom: 0;
    position: relative;
    z-index: 5;
  }
  .hero-about__inner{ display: flex; flex-direction: column; }
  .hero-about__postcard{
    display: block;
    position: relative;
    right: auto; top: auto;
    transform: none;
    width: calc(100% + 2 * var(--side));
    margin: 28px calc(-1 * var(--side)) -80px;
    z-index: 6;
  }
  .hero-about__postcard img{ border-radius: clamp(16px, 3vw, 22px); }
  .stats-band{ padding-top: calc(80px + var(--space-band-y)); }
}

/* =====================================================================
   STATS BAND
   ===================================================================== */
.stats-band{
  position: relative;
  padding: var(--space-band-y) var(--side);
  background: var(--surface-cream);
  z-index: 2;   /* clear the fixed bg-overlay — see .section */
}
.stats-band__inner{
  max-width: var(--max-w);
  margin: 0 auto;
}
.stats-band__label{
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(5, 74, 71, 0.55);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.stats-band__card{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(5, 74, 71, 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.stats-band__stat{
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 44px);
  border-right: 1px solid rgba(5, 74, 71, 0.2);
}
.stats-band__stat:last-child{ border-right: none; }
.stats-band__number{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--ink);
  margin: 0 0 14px;
}
.stats-band__desc{
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4em;
  color: rgba(5, 74, 71, 0.65);
  margin: 0;
  max-width: 22ch;
}
@media (max-width: 800px) {
  .stats-band__card{ grid-template-columns: repeat(2, 1fr); }
  .stats-band__stat:nth-child(2){ border-right: none; }
  .stats-band__stat:nth-child(3), .stats-band__stat:nth-child(4){ border-top: 1px solid rgba(5, 74, 71, 0.2); }
}
@media (max-width: 480px) {
  .stats-band__card{ grid-template-columns: 1fr; }
  .stats-band__stat{ border-right: none !important; }
  .stats-band__stat + .stats-band__stat{ border-top: 1px solid rgba(5, 74, 71, 0.2); }
}

/* =====================================================================
   EDITORIAL — centered large statements (What We're About)
   ===================================================================== */
.editorial{
  position: relative;
  padding: var(--space-section-y) var(--side);
  background: var(--surface-cream);
  z-index: 2;   /* clear the fixed bg-overlay — see .section */
}
.editorial__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.editorial__label{
  margin-bottom: clamp(32px, 4vw, 52px);
}
.editorial__body{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}

/* =====================================================================
   PROMISE — centred eyebrow (coral via label--coral), mint wash via JS
   ===================================================================== */
.editorial--promise{
  background: var(--surface-cream); /* JS overrides to mint on scroll */
}

/* =====================================================================
   TEAM — 6-col photo grid
   ===================================================================== */
.team{
  position: relative;
  padding: var(--space-section-y) var(--side);
  background: var(--surface-cream);
  z-index: 2;   /* clear the fixed bg-overlay — see .section */
}
.team__inner{
  max-width: var(--max-w);
  margin: 0 auto;
}
.team__header{ margin-bottom: clamp(40px, 5vw, 64px); }
.team__h{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.0466em;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.team__intro{
  font-size: 16px;
  line-height: 1.65;
  color: rgba(5, 74, 71, 0.72);
  margin: 0;
  max-width: 56ch;
}
.team__intro em{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.team__grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
}
.team-tile{
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6vw, 10px);
}
.team-tile__photo{
  aspect-ratio: 1;
  border-radius: clamp(6px, 0.7vw, 10px);
  overflow: hidden;
  position: relative;
  background: rgba(5, 74, 71, 0.07);
}
.team-tile__photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.team-tile__initials{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 26px);
  color: rgba(5, 74, 71, 0.35);
  letter-spacing: -0.01em;
}
.team-tile__info{
  padding: 0;
}
.team-tile__name{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(10px, 0.85vw, 13px);
  color: var(--ink);
  margin: 0 0 2px;
  line-height: 1.2;
}
.team-tile__role{
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.72vw, 11px);
  color: rgba(5, 74, 71, 0.6);
  margin: 0;
  line-height: 1.3;
}
@media (max-width: 900px) { .team__grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 580px) { .team__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px) {
  .team__grid--collapsed .team-tile:nth-child(n+10){ display: none; }
  .team__show-all{ display: flex; justify-content: center; margin-top: clamp(20px, 3vw, 32px); }
}
@media (min-width: 581px) { .team__show-all{ display: none; } }
.team__show-all-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--ink); background: transparent;
  border: 1.5px solid rgba(5, 74, 71, 0.28);
  padding: 12px 24px; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.team__show-all-btn:hover{ border-color: var(--ink); background: rgba(5, 74, 71, 0.05); }
.team__footer{ margin-top: clamp(28px, 3.5vw, 44px); }

/* =====================================================================
   VALUES — 5-col horizontal, NO borders on value items
   ===================================================================== */
.values{
  position: relative;
  padding: var(--space-section-y) var(--side);
  background: var(--surface-cream);
  z-index: 2;   /* clear the fixed bg-overlay — see .section */
}
.values__inner{ max-width: var(--max-w); margin: 0 auto; }
.values__header{ margin-bottom: clamp(48px, 6vw, 72px); }
.values__h{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
}
.values__strip{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
.value-col{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.value-col__name{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.2em;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.value-col__copy{
  font-size: 15px;
  line-height: 1.4em;
  color: rgba(5, 74, 71, 0.68);
  margin: 0;
}
@media (max-width: 900px) {
  .values__strip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
  .values__strip{ grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   ALL CUSTOM SECTIONS — must sit above the fixed video/overlay (z-index 0/1)
   ===================================================================== */
.stats-band, .editorial, .team, .values, .cta-section{
  position: relative;
  z-index: 2;
}

/* =====================================================================
   CONTACT CTA — LEFT aligned, JS sets backgroundColor for mint wash
   ===================================================================== */
.cta-section{
  position: relative;
  padding: var(--space-section-y) var(--side);
  background: var(--surface-cream); /* JS overrides to mint on scroll */
  z-index: 2;   /* clear the fixed bg-overlay — see .section */
}
.cta-section__inner{
  max-width: var(--max-w);
  margin: 0 auto;
}
.cta-section__h{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 7.3vw, 105px);
  line-height: 1.0;
  letter-spacing: -0.0257em;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2.5vw, 28px);
  max-width: 18ch;
}
.cta-section__body{
  font-size: 16px;
  line-height: 1.65;
  color: rgba(5, 74, 71, 0.72);
  margin: 0 0 clamp(32px, 4vw, 52px);
}
.cta-pill{
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--surface-cream);
  background: var(--ink);
  padding: 10px 10px 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease);
}
.cta-pill:hover{ background: var(--secondary); }
.cta-pill__arrow{
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--surface-cream); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform var(--dur) var(--ease);
}
.cta-pill:hover .cta-pill__arrow{ transform: translateX(3px); }

/* =====================================================================
   FOOTER — dark green (override shared filter so cream SVG shows on dark bg)
   ===================================================================== */
.site-footer:not(.site-footer--mint) .site-footer__brand img{
  filter: none;
}


  /* ══════════════════════════════════════════════════════════════════════════
     CMS-CONTROLLED HEADING TAGS
     Editors pick h1–h6 per heading for SEO; the look must not change. `:where()`
     has ZERO specificity, so this only strips the browser's default heading
     styling — every design class (.team__h, .label, …) still wins outright, regardless of source order. Applied automatically by garden_heading().
     ══════════════════════════════════════════════════════════════════════════ */
  :where(.hx){
    font: inherit;
    color: inherit;
    margin: 0;
    letter-spacing: inherit;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     SCROLL WASH — reusable cream → mint section background
     Add data-wash to any <section> and it fades from cream to mint as it
     scrolls through, bleeding the colour into the sections either side so no
     hard seam shows. Driven by the wash module in main.js.

       <section class="…" data-wash>                       (default mint)
       <section class="…" data-wash="#D4F2DE">             (custom target)
       <section class="…" data-wash data-wash-bleed="none"> (no neighbour bleed)

     The section needs an opaque starting background — that's what the wash
     interpolates away from.
     ══════════════════════════════════════════════════════════════════════════ */
  [data-wash]{
    background: var(--surface-cream);
    position: relative;
    z-index: 2;   /* clear the fixed .bg-overlay — see .section */
  }

  /* ══════════════════════════════════════════════════════════════════════════
     APPROACH PAGE — ported from approach.html
     --coral/--cream in the source map to --accent-coral/--surface-cream here.
     Every top-level <section> carries position:relative + z-index:2.
     ══════════════════════════════════════════════════════════════════════════ */
.ap-tax, .ap-how, .ap-loop, .ap-northstar, .ap-greenhouse, .ap-contact{
  position: relative;
  z-index: 2;
}

/* ── SHARED EYEBROW ────────────────────────────────────── */
.ap-eyebrow{
  /* inline-flex, not block: the ::before mark above is a flex item and needs a
     flex container to sit beside the text rather than on its own line. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin: 0 0 20px;
}

/* ── SHARED SECTION HEADING (58px) ────────────────────── */
.ap-h2{
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.0466em;
  color: var(--ink);
  margin: 0;
}

/* ── SHARED BODY COPY ──────────────────────────────────── */
.ap-body{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  color: var(--ink);
  opacity: 0.72;
}
.ap-body p{ margin: 0 0 1.4em; }
.ap-body p:last-child{ margin-bottom: 0; }

/* ─────────────────────────────────────────────────────── */
/* 1. HERO — transparent over bg-video (same as about)     */
/* ─────────────────────────────────────────────────────── */
.ap-hero{
  min-height: clamp(380px, 49.1vw, 707px);
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 10; /* same as .hero in garden.css */
}
.ap-hero__inner{
  position: relative;
  z-index: 2;
  padding: clamp(96px, 10.6vw, 152px) var(--side) clamp(48px, 5.6vw, 80px);
  max-width: clamp(400px, 58.3vw, 840px);
  width: 100%;
}
/* Soft cream vignette behind text for legibility over video */
.ap-hero__inner::before{
  content: '';
  position: absolute;
  inset: -20% -15%;
  background: radial-gradient(
    ellipse at 22% 62%,
    rgba(245,240,227,0.70) 0%,
    rgba(245,240,227,0.40) 32%,
    rgba(245,240,227,0.10) 62%,
    rgba(245,240,227,0) 82%
  );
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
.ap-hero__inner > *{ position: relative; z-index: 1; }

.ap-hero__eyebrow{
  color: var(--accent-coral) !important;
  transition: color 1.4s var(--ease);
}
body.is-stage-1 .ap-hero__eyebrow{ color: rgba(252,119,106,0.85) !important; }
body.is-stage-2 .ap-hero__eyebrow{ color: var(--accent-coral) !important; }

.ap-hero__h{
  font-size: clamp(38px, 6.6vw, 95px);
  font-weight: 400;
  line-height: 1em;
  letter-spacing: -0.0284em;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2.2vw, 32px);
  transition: color 1.4s var(--ease);
  text-shadow: 0 1px 24px rgba(245,240,227,0.5), 0 1px 2px rgba(245,240,227,0.4);
}
.ap-hero__h em{
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
body.is-stage-1 .ap-hero__h{ color: rgba(245,240,227,0.92); }
body.is-stage-2 .ap-hero__h{ color: var(--ink); }

.ap-hero__sub{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
  max-width: 52ch;
  transition: color 1.4s var(--ease), opacity 1.4s var(--ease);
  text-shadow: 0 1px 12px rgba(245,240,227,0.5);
}
body.is-stage-1 .ap-hero__sub{ color: rgba(245,240,227,0.65); opacity: 1; }
body.is-stage-2 .ap-hero__sub{ color: var(--ink); opacity: 0.72; }

/* ─────────────────────────────────────────────────────── */
/* 2. THE COMPLEXITY TAX                                    */
/* ─────────────────────────────────────────────────────── */
.ap-tax{
  padding: clamp(80px, 13.9vw, 200px) var(--side) clamp(48px, 6.9vw, 100px);
  background: var(--surface-cream);
}
.ap-tax__grid{
  display: grid;
  grid-template-columns: minmax(0, 543fr) minmax(0, 630fr);
  gap: clamp(32px, 7.4vw, 107px);
  align-items: start;
}
.ap-tax__h2{
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.0466em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.4vw, 36px);
}
.ap-tax__image{
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a2f2d;
  position: relative;
  cursor: pointer;
}
.ap-tax__image iframe{
  position: absolute;
  inset: -5%;
  width: 110%; height: 110%;
  border: 0;
  pointer-events: none;
}
.ap-tax__play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ap-tax__play-btn{
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(245, 240, 227, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  pointer-events: none;
}
.ap-tax__image:hover .ap-tax__play-btn{
  transform: scale(1.1);
  background: rgba(245, 240, 227, 1);
}
.ap-tax__play-btn svg{ width: 22px; height: 22px; fill: var(--ink); margin-left: 3px; }

/* ── Footer logo — light colour on dark footer (same fix as other pages) */
.site-footer__brand img{
  filter: none;
}

/* ─────────────────────────────────────────────────────── */
/* 3. HOW THE SYSTEM WORKS                                 */
/* ─────────────────────────────────────────────────────── */
.ap-how{
  padding: clamp(48px, 6.9vw, 100px) var(--side) clamp(24px, 4.2vw, 60px);
  background: var(--surface-cream);
}
.ap-how__text{ max-width: clamp(280px, 37.7vw, 543px); }
.ap-how__h2{
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.0466em;
  color: var(--ink);
  margin: 0;
}

/* ─────────────────────────────────────────────────────── */
/* 4. THE LOOP — 4 step cards                              */
/* ─────────────────────────────────────────────────────── */
.ap-loop{
  padding: 0 var(--side) clamp(80px, 13.9vw, 200px);
  background: var(--surface-cream);
}
.ap-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}
.ap-step{
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-step__label{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin: 0;
}
.ap-step__h{
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.ap-step__copy{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* ─────────────────────────────────────────────────────── */
/* 5. NORTH STAR                                           */
/* ─────────────────────────────────────────────────────── */
.ap-northstar{
  padding: clamp(80px, 13.9vw, 200px) var(--side) clamp(40px, 5.6vw, 80px);
  overflow: hidden;
  background: var(--surface-cream);
}
.ap-northstar__blob{
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: #D9EDE8;
  filter: blur(97px);
  z-index: 0;
  left: calc(-326 / 1440 * 100%);
  top: -160px;
  width: calc(2090 / 1440 * 100%);
  aspect-ratio: 2090 / 738;
}
.ap-northstar__top{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 630fr);
  gap: clamp(32px, 6.9vw, 100px);
  align-items: start;
  margin-bottom: clamp(32px, 4.4vw, 64px);
}
.ap-northstar__text .ap-h2{ margin: 0 0 clamp(16px, 2vw, 28px); }
.ap-northstar__large-img{
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 630 / 436;
  background: #7a9993;
  align-self: flex-start;
}
.ap-northstar__large-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.ap-scatter{
  position: relative;
  z-index: 1;
  min-height: clamp(300px, 44.4vw, 640px);
  margin: 0 calc(-1 * var(--side));
}
.ap-scatter-img{
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  background: #7a9993;
}
.ap-scatter-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-scatter-img--a{
  /* Narrowed from 478 and lifted above the flow: at 478 it ran to ~31.5% while
     the pull quote starts at ~29.5%, so the two overlapped. 400 ends at ~26%,
     leaving a clear gap before the text. */
  left: calc(-24 / 1440 * 100%);
  top: calc(-1 * clamp(16px, 2.4vw, 36px));
  width: calc(400 / 1440 * 100%);
  aspect-ratio: 478 / 311;
}
.ap-scatter-img--b{
  left: calc(1035 / 1440 * 100%);
  top: clamp(60px, 13.4vw, 192px);
  width: calc(467 / 1440 * 100%);
  aspect-ratio: 467 / 338;
}
.ap-scatter-img--c{
  left: calc(284 / 1440 * 100%);
  top: clamp(120px, 27.4vw, 394px);
  width: calc(74 / 1440 * 100%);
  aspect-ratio: 74 / 54;
  border-radius: 6px;
}
.ap-scatter-img--d{
  left: calc(592 / 1440 * 100%);
  top: clamp(150px, 34.7vw, 499px);
  width: calc(185 / 1440 * 100%);
  aspect-ratio: 185 / 134;
}
.ap-scatter__quote{
  position: absolute;
  left: calc(425 / 1440 * 100%);
  top: clamp(64px, 13.5vw, 195px);
  width: calc(587 / 1440 * 100%);
  min-width: 200px;
  z-index: 2;
}
.ap-scatter__quote p{
  font-size: clamp(22px, 4vw, 58px);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

/* ─────────────────────────────────────────────────────── */
/* 6. THE GREENHOUSE — concertina card stack               */
/* ─────────────────────────────────────────────────────── */
.ap-greenhouse{
  padding: clamp(80px, 13.9vw, 200px) var(--side);
  background: var(--surface-cream);
}
.ap-greenhouse__blob{
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: #D4F2DE;
  filter: blur(97px);
  z-index: 0;
  left: calc(-326 / 1440 * 100%);
  top: clamp(-120px, -8.9vw, -128px);
  width: calc(2090 / 1440 * 100%);
  aspect-ratio: 2090 / 760;
}
.ap-greenhouse__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 650fr) minmax(0, 569fr);
  gap: clamp(32px, 4.2vw, 61px);
  align-items: start;
}
/* Left column sticks while the 7 cards scroll/stack */
.ap-greenhouse__text{
  position: sticky;
  top: clamp(100px, 12vh, 130px);
  align-self: start;
}
.ap-greenhouse__h2{
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.0466em;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 28px);
}
.ap-greenhouse__intro{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
  max-width: 50ch;
}

/* Concertina stack — cards slide over each other as you scroll */
.ap-cards{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ap-gh-card{
  position: sticky;
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ap-gh-card:nth-child(1){ top: 90px; }
.ap-gh-card:nth-child(2){ top: 126px; }
.ap-gh-card:nth-child(3){ top: 162px; }
.ap-gh-card:nth-child(4){ top: 198px; }
.ap-gh-card:nth-child(5){ top: 234px; }
.ap-gh-card:nth-child(6){ top: 270px; }
.ap-gh-card:nth-child(7){ top: 306px; }

.ap-gh-card__num{
  flex: 0 0 65px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 2.78vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--surface-cream);
}
.ap-gh-card__body{ flex: 1; }
.ap-gh-card__h{
  font-size: clamp(16px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ap-gh-card__copy{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* ─────────────────────────────────────────────────────── */
/* 7. CONTACT / CTA                                        */
/* ─────────────────────────────────────────────────────── */
.ap-contact{
  padding: clamp(80px, 13.9vw, 200px) var(--side) clamp(48px, 6.9vw, 100px);
  overflow: hidden;
  background: var(--surface-cream); /* JS overrides with mint on scroll */
}
.ap-contact__blob{
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: #D4F2DE;
  filter: blur(97px);
  z-index: 0;
  left: calc(-326 / 1440 * 100%);
  top: clamp(-120px, -13vw, -188px);
  width: calc(2090 / 1440 * 100%);
  aspect-ratio: 2090 / 904;
}
.ap-contact__inner{
  position: relative;
  z-index: 1;
}
.ap-contact__h{
  font-size: clamp(48px, 7.3vw, 105px);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.0257em;
  color: var(--ink);
  margin: clamp(14px, 1.6vw, 24px) 0 clamp(16px, 2.2vw, 32px);
}
.ap-contact__sub{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6em;
  color: var(--ink);
  opacity: 0.72;
  margin: 0 0 clamp(24px, 3vw, 44px);
}
.ap-contact__btn{
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--surface-cream);
  background: var(--ink);
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  transition: background var(--dur) var(--ease);
}
.ap-contact__btn:hover{ background: #038261; }
.ap-contact__btn-circle{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-cream);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 28px;
}

/* ─────────────────────────────────────────────────────── */
/* SCROLL REVEAL                                           */
/* ─────────────────────────────────────────────────────── */
[data-reveal]{
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.85s var(--ease), translate 0.85s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}
[data-reveal].is-in{ opacity: 1; translate: 0 0; }
[data-reveal="dramatic"]{
  translate: 0 48px;
  filter: blur(4px);
  transition: opacity 1.1s var(--ease), translate 1.1s var(--ease), filter 0.9s var(--ease);
}
[data-reveal="dramatic"].is-in{ filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="dramatic"]{ opacity: 1; translate: 0; filter: none; transition: none; }
  .nav-wrap{ transition: none; }
  body{ opacity: 1; transition: none; }
}

/* ─────────────────────────────────────────────────────── */
/* EDGE BLUR (page-local, about.html pattern)             */
/* ─────────────────────────────────────────────────────── */
.ap-edge-blur{
  position: fixed; left: 0; right: 0;
  height: 110px;
  pointer-events: none;
  z-index: 80;
}

/* ─────────────────────────────────────────────────────── */
/* RESPONSIVE                                              */
/* ─────────────────────────────────────────────────────── */
@media (max-width: 960px){
  .ap-tax__grid { grid-template-columns: 1fr; }
  .ap-northstar__top { grid-template-columns: 1fr; }
  .ap-greenhouse__inner { grid-template-columns: 1fr; }
  .ap-greenhouse__text { position: static; }
  .ap-steps { grid-template-columns: repeat(2, 1fr); }
  /* Disable concertina below desktop — sticky stacking needs the tall column */
  .ap-gh-card { position: static !important; top: auto !important; }
  .ap-cards { gap: 16px; }
}

/* ── Mobile: Greenhouse cards become a horizontal swipe rail ────────────────
   Same pattern as the Garden OS dims: full-bleed track with inline padding for
   the end gutters, and the rounded end caps drawn on the FIRST and LAST cards
   so they scroll with the content. A container border can't do that — it would
   stay pinned to the viewport while the cards moved underneath it. */
@media (max-width: 640px){
  .ap-cards {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--side));
    padding-inline: var(--side);
    scroll-padding-inline: var(--side);
  }
  .ap-cards::-webkit-scrollbar { display: none; }
  .ap-gh-card {
    flex: 0 0 74vw;          /* vw, not %, so the inline padding can't shrink it */
    scroll-snap-align: center;
    margin-bottom: 0;
    margin-right: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: clamp(180px, 30vh, 240px);
  }
  .ap-gh-card:last-child { margin-right: 0; }
  /* Horizontally-clipped cards never intersect the viewport, so the scroll
     reveal would leave cards 3–7 permanently invisible. Force them on. */
  .ap-gh-card[data-reveal] {
    opacity: 1; translate: none; filter: none; transition: none;
  }
}
@media (max-width: 600px) {
  .ap-steps{ grid-template-columns: 1fr; }
}

/* ── Mobile: North Star scatter becomes image → quote → image ───────────────
   The desktop layout absolutely positions four images around the pull quote, which collapses into an overlapping mess at phone widths. Same resolution as
   the home page team showcase: stack it, keep the two large images as full-
   bleed bookends, and drop the two small decorative ones. */
@media (max-width: 720px){
  .ap-scatter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(40px, 9vw, 64px);
    min-height: 0;
    padding: clamp(8px, 2vw, 16px) 0 0;
    /* Drop the desktop full-bleed break-out so the images sit inside the
       section's --side gutters, matching the home page team showcase. */
    margin: 0;
  }
  .ap-scatter-img {
    position: relative;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100%;
    border-radius: 10px;   /* keep the desktop rounding */
  }
  .ap-scatter-img--a { order: 1; aspect-ratio: 16 / 10; }   /* bookend: top */
  .ap-scatter__quote { order: 2; }
  .ap-scatter-img--b { order: 3; aspect-ratio: 16 / 10; }   /* bookend: bottom */
  .ap-scatter-img--c,
  .ap-scatter-img--d { display: none; }                     /* decorative only */

  .ap-scatter__quote {
    position: relative;
    top: auto; left: auto;
    width: auto;
    min-width: 0;
    /* No side padding — .ap-northstar already supplies the --side gutter now
       that .ap-scatter no longer breaks out of it. */
    padding: 0;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION LIBRARY
   Shared by solution hubs (taxonomy-solution.php) and services
   (single-service.php). Markup comes from inc/sections.php; field definitions
   from acf-fields/sections.php. Values below are from Figma 335:7186 /
   341:7788 on a 1440 frame with an 80px gutter — 1280 of content.

   Every section renders as `.section .sec .sec--<name>`, so `.section` supplies
   the z-index 2 that clears the fixed .bg-overlay and `.sec` retunes the
   vertical rhythm: the composed pages run on the design's 100px section gap, not the 192px the one-off pages use.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --sec-y:        clamp(40px, 5vw, 50px);   /* ×2 between sections = the 100px rhythm */
  --sec-radius:   10px;
  --sec-hairline: rgba(5, 74, 71, 0.2);
}

.sec{ padding-block: var(--sec-y); }

/* The closing CTA gets more air than the 100px section rhythm. Figma marks it
   explicitly: a "200px Spacing" annotation sits above the CTA on both the case
   study and the Solutions Detail comps, where every other gap is marked 100px.
   150 here + the previous section's 50 = the 200 in the comp. */
.sec--cta{ padding-top: clamp(80px, 10vw, 150px); }

/* The testimonial gets the same doubled approach as the CTA (Tom 2026-09-05:
   the 100px rhythm between the results row and the quote read too tight).
   150 + the previous section's 50 = a 200px gap, matching the CTA treatment. */
.sec--quote{ padding-top: clamp(80px, 10vw, 150px); }

/* Figma stacks the closing CTA on a flat 20px column gap: eyebrow, headline, sub, button. `.sec__h` and `.sec__intro` both zero their margins for use
   inside other blocks, so without this the headline, sub-line and button had no
   separation at all. A flow gap rather than per-element margins, so adding or
   dropping the sub-line can't leave a double gap behind. */
.sec--cta .sec__inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
/* The eyebrow carries the site-wide 40px bottom margin; inside this stack the
   gap owns the spacing. */
.sec--cta .label{ margin-bottom: 0; }
/* A touch more air under the sub-line than between the headings, matching the
   comp's button offset. */
.sec--cta .pill{ margin-top: clamp(8px, 1.2vw, 16px); }

/* Banner to intro is 60px in the case study comp, not the standard 50. */
.sec--cs-intro{ padding-top: 60px; }
.sec__inner{ width: 100%; }
.sec--narrow .sec__inner{ max-width: 760px; }

/* ── Enquiry form section ────────────────────────────────────────────────────
   The mid-page lead capture. Social Garden runs one on 89 of its 99 service
   pages at roughly 55–65% down; on the migrated pages this section replaces the
   closing CTA entirely.

   The form itself is NOT restyled here. `.ctc-form-wrap` already carries every
   Gravity Forms override in this sheet — the field grid, the labels, and the
   !important submit rule that trap 8 exists for — so the section reuses that
   wrapper rather than re-solving it against GF's markup a second time. */
/* Centred: heading, sub and form share one axis. As a page's closing block this
   is the only thing on screen, and a left-aligned 870px form under a left-
   aligned heading leaves a large dead margin on the right at desktop widths. */
.sec--form .sec--form__head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  text-align: center;
}
.sec--form .sec--form__head .label { margin-bottom: 20px; }
.sec--form .sec__intro { margin-top: 16px; }
/* .ctc-form-wrap already centres itself (margin: 0 auto) — inherited, not
   restated, so the two stay on the same axis if that value ever changes. */

/* The eyebrow's coral asterisk is drawn with ::before, so centring the text
   would otherwise leave the mark hanging off-centre with the label. */
.sec--form .sec--form__head .label { display: inline-flex; align-items: center; }

/* Closing variant — no CTA follows, so this is the page's sign-off and takes
   the same generous top padding the closing CTA does. */
.sec--form-closing { padding-top: clamp(80px, 10vw, 150px); }

@media (max-width: 700px) {
  .sec--form .sec--form__head { margin-bottom: 24px; }
}

/* ── Page content section (Flexible page template) ───────────────────────────
   The block editor's canvas, dropped in as a section row so the Garden blocks
   can be ordered against the flexible layouts.

   The full-width variant carries NO .section class — the Garden blocks are
   complete sections already and wrapping them in another one doubles the
   vertical rhythm. That means it does not inherit the stacking context .section
   provides, so it has to set its own: without this the fixed .bg-overlay (z 1)
   paints straight over it. See trap 1 — getComputedStyle reports the right
   background while the page looks wrong; verify with document.elementFromPoint. */
.sec-page-content--full{ position: relative; z-index: 2; }

/* Constrained variant: theme.json's 846px contentSize, applied by the same
   is-layout-constrained rule core uses, so prose here matches prose in the blog
   editor rather than being a second opinion about measure. */
.sec--page-content .entry-content > *{ max-width: 846px; }
.sec--page-content .entry-content > .alignwide{ max-width: 1280px; }
.sec--page-content .entry-content > .alignfull{ max-width: none; }

/* ── Section head — headline left, intro right, aligned to the headline top ── */
/* Stacked, not two-column: the intro used to sit in a right-hand column
   beside the headline, which read as an orphan line floating top-right on
   every card/icon grid (Tom, 2026-08-10). It now flows under the title. */
.sec__head{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
  align-items: start;
  margin-bottom: clamp(32px, 4.2vw, 60px);
}
.sec__head-r{ padding-top: 0; max-width: 62ch; }

.sec__h{
  font-family: var(--sans);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.sec__h em{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.sec__h--lg{ font-weight: 700; letter-spacing: -0.0466em; }
.sec__h--xl{
  font-size: clamp(40px, 7.3vw, 105px);
  font-weight: 700;
  letter-spacing: -0.0257em;
}
.sec__h-link{ color: inherit; text-decoration: none; }
.sec__h-link:hover{ color: var(--secondary); }

.sec__intro{
  font-size: 16px;
  line-height: 1.6em;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}
.sec__foot{
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  justify-content: center;   /* centred in the comp, not left-aligned */
}

/* Eyebrow variants the library adds to the existing .label */
.label--green{ color: var(--tertiary); }
.label--center{ display: flex; justify-content: center; text-align: center; }

@media (max-width: 900px) {
  .sec__head{ grid-template-columns: 1fr; row-gap: 24px; }
  .sec__head-r{ padding-top: 0; }
}

/* ══ Pill button ═══════════════════════════════════════════════════════════ */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--surface-cream);
  background: var(--ink);
  padding: 10px 10px 10px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.pill:hover{ background: var(--secondary); }
.pill__arrow{
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: var(--radius-pill);
  background: var(--surface-cream);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform var(--dur) var(--ease);
}
.pill:hover .pill__arrow{ transform: translateX(3px); }

/* Ghost — the inline variant from the design: no fill, mint rounded-square
   arrow. Used inside copy blocks where a solid pill would shout. */
.pill--ghost{
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  padding: 0;
  gap: 12px;
}
.pill--ghost:hover{ background: transparent; color: var(--secondary); }
.pill--ghost .pill__arrow{
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px;
  background: var(--surface-mint);
  color: var(--ink);
}

/* ══ Floating advocate CTA ═════════════════════════════════════════════════
   The compact glass card pinned bottom-left on solution hubs and service
   singles — "Speak to George about Media & Performance today" → the
   multistep pricing form. Rendered by garden_advocate_cta(); main.js adds
   .is-shown once the visitor scrolls past the hero. z 90: above content and
   the edge blur (80), below the nav (100). */
.adv-cta{
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 320px;
  padding: 7px 18px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(5, 74, 71, 0.16);
  box-shadow: 0 8px 30px rgba(5, 74, 71, 0.12);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .25s ease;
}
.adv-cta.is-shown{ opacity: 1; transform: none; pointer-events: auto; }
.adv-cta:hover{ background: rgba(255, 255, 255, 0.82); }
.adv-cta__photo{
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: cover;
}
.adv-cta__text strong{ font-weight: 700; }
.adv-cta__arrow{
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--surface-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform .25s ease;
}
.adv-cta:hover .adv-cta__arrow{ transform: translateX(2px); }
@media (max-width: 640px){
  .adv-cta{
    left: 12px;
    bottom: 12px;
    max-width: 250px;
    font-size: 12px;
    gap: 9px;
    padding: 6px 14px 6px 6px;
  }
  .adv-cta__photo{ width: 32px; height: 32px; flex-basis: 32px; }
  .adv-cta__arrow{ display: none; }
}

/* ══ Rich text ═════════════════════════════════════════════════════════════ */
.rte{
  font-size: 16px;
  line-height: var(--type-body-line-prose);
  color: var(--ink);
}
.rte > :first-child{ margin-top: 0; }
.rte > :last-child{ margin-bottom: 0; }
.rte p{ margin: 0 0 1.4em; opacity: 0.72; }
.rte h2, .rte h3, .rte h4{
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2em 0 0.6em;
}
.rte h2{ font-size: clamp(24px, 2.4vw, 32px); }
.rte h3{ font-size: clamp(20px, 1.9vw, 26px); }
.rte h4{ font-size: 18px; }
.rte ul, .rte ol{ margin: 0 0 1.4em; padding-left: 1.2em; opacity: 0.72; }
.rte li{ margin-bottom: 0.5em; }
.rte a{ color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.rte strong{ font-weight: 700; }
.rte img{ max-width: 100%; height: auto; border-radius: var(--sec-radius); }

/* ══ Stat band ═════════════════════════════════════════════════════════════
   One bordered row with hairline dividers between cells. The row box and the
   dividers are the same 1px rule, so a single border-inline-start on every cell
   plus a closing border on the last produces both. ═══════════════════════════ */
.statband{
  display: grid;
  /* auto-flow, not a fixed repeat(4): the Stats repeater accepts 2–4 entries
     and a hard column count leaves empty cells (and a stray divider) whenever
     an editor uses fewer than four. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.statband__item{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 195px;
  padding: 20px;
  border: 1px solid var(--sec-hairline);
  border-inline-end: 0;
}
.statband__item:first-child{
  border-start-start-radius: var(--sec-radius);
  border-end-start-radius: var(--sec-radius);
}
.statband__item:last-child{
  border-inline-end: 1px solid var(--sec-hairline);
  border-start-end-radius: var(--sec-radius);
  border-end-end-radius: var(--sec-radius);
}
.statband__value{
  /* 64px in Figma — the image-stat and case-study figures are 70px, this one
     is deliberately a step smaller. */
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  /* No `order` here: this band reads label-then-figure in the design, which is
     also the DOM order. The image-stat panel below inverts it — check the
     comp before assuming the two match. */
}
.statband__label{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4em;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 900px) {
  .statband{
    grid-auto-flow: row;              /* undo the desktop column flow */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Each figure becomes its own bordered tile once the continuous row breaks. */
  .statband__item{ border: 1px solid var(--sec-hairline); border-radius: var(--sec-radius); }
}
@media (max-width: 560px) {
  .statband{ grid-template-columns: 1fr; }
  .statband__item{ min-height: 0; }
}

/* ══ Icon grid ═════════════════════════════════════════════════════════════
   Rows of four capability tiles, 195px tall, icon top-left and label bottom.
   Same continuous-row border trick as the stat band; 20px between rows. ══════ */
.icongrid{
  display: grid;
  /* Column count follows the tile count (capped at 4, set inline by
     garden_icongrid_open()) so a 3-item list fills its row instead of leaving a
     dead cell with the container's right border stranded mid-section. The 4 is
     the fallback for any markup that doesn't set the variable. */
  grid-template-columns: repeat(var(--icongrid-cols, 4), minmax(0, 1fr));
  row-gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.icongrid__item{
  display: flex;
  min-height: 195px;
  border: 1px solid var(--sec-hairline);
  border-inline-end: 0;
}
.icongrid__item:nth-child(4n + 1){
  border-start-start-radius: var(--sec-radius);
  border-end-start-radius: var(--sec-radius);
}
.icongrid__item:nth-child(4n), .icongrid__item:last-child{
  border-inline-end: 1px solid var(--sec-hairline);
  border-start-end-radius: var(--sec-radius);
  border-end-end-radius: var(--sec-radius);
}
.icongrid__item > *, .icongrid__link{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px;
  color: var(--ink);
  text-decoration: none;
}
.icongrid__icon{
  width: 65px; height: 65px;
  /* padding:0 is load-bearing. `.icongrid__item > *` sets the tile's 20px
     padding, and it matched the icon directly whenever a tile had no link and
     so no wrapper element. With border-box that left 25px of artwork in a 65px
     box, inset from the corner — the same icon rendering at two different sizes
     depending only on whether a link was filled in. The renderer now always
     emits a wrapper, and this keeps stray markup from bringing it back. */
  padding: 0;
  object-fit: contain;
  object-position: left top;
}
.icongrid__label{
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: -0.01em;
  margin-top: auto;
}
.icongrid__link{ transition: color var(--dur) var(--ease); }
.icongrid__link:hover{ color: var(--secondary); }

/* ── List style — the compact checklist (icon_grid "Style: List") ────────────
   The old site's "what you get" treatment: three columns of icon-beside-label
   rows with hairline dividers. Dense enough for 12–20 items without the tile
   grid's vertical cost. */
.icongrid--list{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 0;
}
.icongrid--list .icongrid__item,
.icongrid--list .icongrid__item:nth-child(4n + 1),
.icongrid--list .icongrid__item:nth-child(4n),
.icongrid--list .icongrid__item:last-child{
  min-height: 0;
  border: 0;
  border-block-end: 1px solid var(--sec-hairline);
  border-radius: 0;
}
.icongrid--list .icongrid__item > *,
.icongrid--list .icongrid__link{
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 0;
}
/* Wordmark logos in partner/platform tiles need width, not a 65px chip box
   (BugHerd #35). Specificity beats the base rules regardless of order. */
.icongrid .icongrid__icon--logo{ width: 150px; height: 56px; object-fit: contain; object-position: left center; }
.icongrid.icongrid--list .icongrid__icon--logo,
.icongrid.icongrid--list .icongrid__iconwrap:has(.icongrid__icon--logo){ width: 96px; height: 36px; }
.icongrid--list .icongrid__icon,
.icongrid--list .icongrid__iconwrap{
  width: 32px;
  height: 32px;
  flex: none;
  object-position: center;
}
.icongrid--list .icongrid__label{
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 600;
  line-height: 1.3em;
  margin-top: 0;
}
/* The hover reveal is a tile behaviour — a list row has nowhere for the
   description to go, so it stays a plain row even when a description exists. */
.icongrid--list .icongrid__desc{ display: none; }
.icongrid--list .icongrid__item--expandable .icongrid__link:hover .icongrid__iconwrap,
.icongrid--list .icongrid__item--expandable .icongrid__link:focus-visible .icongrid__iconwrap{
  opacity: 1;
  transform: none;
}
@media (max-width: 900px) {
  .icongrid--list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Expand on hover — only on tiles that were given a description ───────────
   `.icongrid__item--expandable` is added by garden_icongrid_item() when the
   Description field is filled. Tiles without one carry none of this, so a page
   whose capability list is just labels behaves exactly as it always has rather
   than opening an empty panel.

   Both the icon and the description animate with the 0fr↔1fr grid-rows trick
   rather than max-height: it interpolates against the real content height, so
   the icon genuinely rolls up and gives its space to the text instead of fading
   out and leaving a 65px hole. */
/* CROSS-FADE IN PLACE, not a height animation.
   The obvious build is the 0fr↔1fr grid-rows trick, and it does not work here:
   `.icongrid__desc` is a flex item inside `.icongrid__link`, and `1fr` resolves
   against free space the auto-height flex context never gives it, so the track
   computes to 0px and the panel never opens. Measured, not assumed —
   `display:block` on the same element reports its real 70px.

   Since the tile is already a fixed 195px with the label pinned to the bottom,
   the description can simply occupy the space the icon vacates. No height
   animation means no layout shift and no reflow of the grid on hover. */
.icongrid__item--expandable .icongrid__link{ position: relative; }
.icongrid__iconwrap{
  display: block;
  transition: transform 0.4s var(--ease), opacity 0.26s var(--ease);
}
.icongrid__desc{
  position: absolute;
  inset-inline: 20px;
  top: 20px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.26s var(--ease);
}
.icongrid__desc > span{
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.icongrid__item--expandable .icongrid__link:hover .icongrid__iconwrap,
.icongrid__item--expandable .icongrid__link:focus-visible .icongrid__iconwrap{
  transform: translateY(-14px);
  opacity: 0;
}
.icongrid__item--expandable .icongrid__link:hover .icongrid__desc,
.icongrid__item--expandable .icongrid__link:focus-visible .icongrid__desc{
  opacity: 1;
  transform: none;
}
.icongrid__item--expandable .icongrid__link:focus-visible{
  outline: 2px solid var(--secondary);
  outline-offset: -4px;
}

/* No hover to give, so give the content instead. Touch devices get the
   description permanently rather than a tile that looks interactive and is not. */
/* No hover to give, so give the content instead: on touch the description sits
   statically under the label. Absolute positioning is dropped here so the tile
   grows to fit rather than overlapping the icon.

   CRITICALLY, the reveal interaction is switched off entirely, not just
   bypassed. Touch browsers apply :hover on tap and keep it applied ("sticky
   hover"), so with only the description forced visible the result was: text
   already showing, then tapping the tile deleted the icon and changed nothing
   else. An interaction whose whole payload is already on screen should not be
   an interaction — so the icon is pinned in place here and the tile is inert. */
@media (hover: none) {
  .icongrid__desc{
    position: static;
    opacity: 1;
    transform: none;
    margin-top: 12px;
  }
  .icongrid__item--expandable .icongrid__link{ justify-content: flex-start; }
  .icongrid__item--expandable .icongrid__label{ margin-top: 12px; }

  .icongrid__item--expandable .icongrid__link:hover .icongrid__iconwrap,
  .icongrid__item--expandable .icongrid__link:focus-visible .icongrid__iconwrap,
  .icongrid__item--expandable .icongrid__link:active .icongrid__iconwrap{
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .icongrid__iconwrap, .icongrid__desc{ transition-duration: 0.01ms; }
}
/* Items with no icon still push their label to the bottom of the tile. */
.icongrid__item:not(:has(.icongrid__icon)) .icongrid__link{ justify-content: flex-end; }

@media (max-width: 1100px) {
  .icongrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icongrid__item:nth-child(4n + 1), .icongrid__item:nth-child(4n){ border-radius: 0; }
  .icongrid__item{ border-inline-end: 0; }
  .icongrid__item:nth-child(2n + 1){
    border-start-start-radius: var(--sec-radius);
    border-end-start-radius: var(--sec-radius);
  }
  .icongrid__item:nth-child(2n), .icongrid__item:last-child{
    border-inline-end: 1px solid var(--sec-hairline);
    border-start-end-radius: var(--sec-radius);
    border-end-end-radius: var(--sec-radius);
  }
}
@media (max-width: 640px) {
  /* Four at a time, swipe for the next four.
     A 16-item capability list stacked one-per-row ran to 3,213px — 3.7 phone
     screens for sixteen labels. Paginating it horizontally keeps the whole
     section to roughly one screen however many items it holds, which matters
     because the migrated service pages run to 16 and the count is editorial.

     No JS and no markup change: `grid-auto-flow: column` with four fixed rows
     fills down-then-across on its own, so items 1–4 are page one, 5–8 page two.
     `grid-auto-columns: 86%` leaves the next page peeking at the right edge,
     which is the affordance — a full-width page gives no hint there is more. */
  .icongrid{ grid-template-columns: 1fr; row-gap: 12px; }

  /* List-style grids keep their hairline rows on phones. The uniform-card
     rule further down this block boxes every tile-style item, and reached
     list items too through a specificity tie — which items it won varied by
     nth-child, hence the mixed boxed/open rows Tom flagged 2026-08-23.
     (0,3,0) pins the list treatment above it regardless of order. */
  .icongrid.icongrid--list .icongrid__item{
    min-height: 0;
    border: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--sec-hairline);
  }

  /* The list style opts OUT of the carousel below: a checklist row is ~50px,
     so even 20 items stack inside two screens, and paginating single-line
     labels four-at-a-time reads as broken. Plain single column. */
  .icongrid--list,
  .icongrid--list.icongrid:has(.icongrid__item:nth-child(5)){
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    overflow-x: visible;
    row-gap: 0;
  }

  /* Only paginate a grid that actually has a second page. With four or fewer
     items the carousel would render one 86%-wide column with dead space beside
     it and nothing to swipe to, which reads as a broken layout rather than a
     restrained one. `:nth-child(5)` is the test: five items or more. */
  .icongrid:has(.icongrid__item:nth-child(5)){
    grid-template-columns: none;
    grid-auto-flow: column;
    /* 1fr, not auto. With `auto` each of the four rows sizes to the tallest
       item ACROSS ALL PAGES in that row, so one tile carrying a description
       makes its whole row tall while the others stay short — the grid reads as
       four mismatched bands. Equal fractions give every tile the same height
       whatever page it is on, at no cost in total height since the tallest
       content sets it either way. */
    grid-template-rows: repeat(4, 1fr);
    grid-auto-columns: 86%;
    column-gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;                 /* dots below are the affordance */
  }
  .icongrid:has(.icongrid__item:nth-child(5))::-webkit-scrollbar{ display: none; }

  /* Swipe dots — appended by iconGridDots() in main.js, one per page. The
     element does not exist without JS, and the carousel still works without
     it, so there is nothing to hide or reserve space for. */
  .icongrid__dots{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .icongrid__dot{
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
    /* The visual dot is 8px; the button is padded out to a 44px tap target
       without moving it, because a thumb cannot reliably hit 8px. */
    position: relative;
  }
  .icongrid__dot::after{
    content: "";
    position: absolute;
    inset: -18px;
  }
  .icongrid__dot[aria-current="true"]{
    background: var(--ink);
    transform: scale(1.3);
  }
  @media (prefers-reduced-motion: reduce) {
    .icongrid__dot{ transition: none; }
  }
  /* Every item in a column shares its x, so snapping each one snaps the page. */
  .icongrid:has(.icongrid__item:nth-child(5)) .icongrid__item{ scroll-snap-align: start; }
  .icongrid__item, .icongrid__item:nth-child(2n + 1), .icongrid__item:nth-child(2n), .icongrid__item:last-child{
    border: 1px solid var(--sec-hairline);
    border-radius: var(--sec-radius);
  }

  /* The tile is designed for four-across on desktop, where 195px of height and
     a stacked icon-over-label reads as a card. Carried straight down to one
     column it becomes 16 cards of one word each: measured at 3,213px — 3.7
     phone screens, a third of the whole page, for sixteen labels.

     So on phones it stops being a card and becomes a list row: icon beside the
     label, height driven by content. Same markup, same component, ~a third of
     the scroll. */
  .icongrid__item{ min-height: 0; }
  .icongrid__item > *, .icongrid__link{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 18px;
    min-height: 68px;
  }
  .icongrid__iconwrap{ flex: 0 0 auto; }
  .icongrid__icon{ width: 34px; height: 34px; }
  .icongrid__label{
    font-size: 17px;
    line-height: 1.35;
    margin-top: 0;          /* desktop pins it to the bottom; here it sits beside the icon */
    flex: 1 1 0;
    min-width: 0;
  }
  /* A tile with no icon keeps its label flush left rather than pushed down. */
  .icongrid__item:not(:has(.icongrid__icon)) .icongrid__link{ justify-content: flex-start; }
  /* Description (shown statically on touch — see the hover block) drops to its
     own full-width line under the icon and label. */
  .icongrid__item--expandable .icongrid__desc{
    flex: 1 0 100%;
    margin-top: 2px;
  }
  .icongrid__desc > span{ font-size: 14px; }
}

/* ══ Copy + image ══════════════════════════════════════════════════════════ */
.copyimg{
  display: grid;
  /* Figma: image 544 at x80, text column 630 at x730 — a 106px gutter, and the
     text column is the WIDER of the two. */
  grid-template-columns: minmax(0, 544fr) minmax(0, 630fr);
  column-gap: clamp(32px, 7.4vw, 106px);
  align-items: start;
  margin-top: clamp(32px, 4.2vw, 60px);
}
.copyimg__img{
  width: 100%;
  height: auto;
  aspect-ratio: 544 / 377;
  object-fit: cover;
  border-radius: var(--sec-radius);
  display: block;
}
.sec--img-right .copyimg__media{ order: 2; }
/* Badge cluster — replaces the single image on partner/award sections. */
.copyimg__badges{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  justify-items: center;
}
.copyimg__badge{ display: flex; align-items: center; justify-content: center; }
.copyimg__badge-img{
  max-width: 160px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.copyimg__h{
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 20px;
}
.copyimg__copy{ margin-bottom: clamp(24px, 3vw, 36px); }

/* Optional icon points under the copy — fills the column against a tall image
   without stretching the paragraph. */
.copyimg__points{
  list-style: none;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
  display: grid;
  row-gap: 18px;
}
.copyimg__point{
  display: flex;
  align-items: center;
  gap: 16px;
}
.copyimg__point-icon{
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  padding: 0;
}
.copyimg__point-text{
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3em;
}

@media (max-width: 900px) {
  .copyimg{ grid-template-columns: 1fr; row-gap: 32px; }
  .sec--img-right .copyimg__media{ order: 0; }
}

/* ══ Image with stats ══════════════════════════════════════════════════════
   Full-bleed image with the stat panel floated 20px inside its lower edge. ══ */
.imgstats{ position: relative; }
.imgstats__img{
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 528;
  object-fit: cover;
  border-radius: var(--sec-radius);
  display: block;
}
.imgstats__panel{
  position: absolute;
  inset-inline: 20px;
  bottom: 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 30px;
  padding: 20px 30px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.imgstats__item + .imgstats__item{
  border-inline-start: 1px solid rgba(255, 255, 255, 0.6);
  padding-inline-start: 30px;
}
.imgstats__value{
  font-size: clamp(32px, 4.9vw, 70px);
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  order: -1;
}
.imgstats__label{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0;
}
.imgstats__item{ display: flex; flex-direction: column; }

@media (max-width: 900px) {
  .imgstats__img{ aspect-ratio: 4 / 5; }
  .imgstats__panel{
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 20px;
    padding: 20px;
  }
  .imgstats__item + .imgstats__item{
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    padding-top: 20px;
  }
}
@media (max-width: 560px) {
  /* The panel would swallow the picture at this width — put it underneath. */
  .imgstats__panel{ position: static; inset: auto; margin-top: 12px; }
}

/* ══ Reviews ═══════════════════════════════════════════════════════════════ */
.reviews{
  display: grid;
  /* Figma: copy 80→710, image 730→1360 — even halves, 20px apart. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
}
.reviews__rating{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: clamp(24px, 3vw, 36px) 0 clamp(20px, 2.4vw, 28px);
}
.reviews__score{
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.reviews__count{ font-size: 15px; color: var(--ink); opacity: 0.6; }

/* ── Google attribution ──────────────────────────────────────────────────────
   Business name, then "powered by Google" with the wordmark in Google's own
   colours. Letters are spans rather than an image: the rating is read from Site
   Settings and can change, so its attribution should not be baked into a PNG,
   and text scales with the surrounding type and stays legible at any zoom.

   The <span> letters carry aria-hidden and the wrapper carries aria-label, so a
   screen reader says "Google" once instead of spelling it out. */
.reviews__google{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.reviews__google-name{ font-weight: 700; font-size: 17px; color: var(--ink); }
.reviews__google-by{ font-size: 15px; font-weight: 700; color: var(--ink); opacity: 0.55; }
.reviews__goog{ font-weight: 700; letter-spacing: 0; }
.reviews__goog-0{ color: #3C6DF0; }   /* G */
.reviews__goog-1{ color: #D93025; }   /* o */
.reviews__goog-2{ color: #FB8E28; }   /* o */
.reviews__goog-3{ color: #3C6DF0; }   /* g */
.reviews__goog-4{ color: #188038; }   /* l */
.reviews__goog-5{ color: #D93025; }   /* e */
/* The wordmark must keep its colours when the block sits inside a washed or
   inverted section — otherwise it inherits the section's ink and stops being
   recognisably Google, which is the whole point of the attribution. */
.reviews__goog > span{ opacity: 1; }
.reviews__img{
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 385;
  object-fit: cover;
  border-radius: var(--sec-radius);
  display: block;
}
.reviews .sec__intro{ margin-top: 20px; }
.reviews__gicon{ display: block; width: 46px; height: 46px; }
.reviews__stars{ display: block; height: 21px; }
/* Comp order: icon / 4.9★ graphic / count, stacked and left-aligned. */
.reviews__rating--stack{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.reviews__rating--stack .reviews__count{ margin: 0; }
.reviews__quote--left{ margin: clamp(20px, 2.6vw, 32px) 0 0; max-width: 56ch; }
.reviews__quote--left blockquote{ margin: 0; font-weight: 600; color: var(--ink); line-height: 1.55; }
.reviews__img--placeholder{ background: #c4c4c4; border-radius: var(--sec-radius); aspect-ratio: 630 / 460; width: 100%; }

@media (max-width: 900px) {
  .reviews{ grid-template-columns: 1fr; row-gap: 32px; }
  .reviews__media{ order: -1; }
}

/* ══ Case study grid ═══════════════════════════════════════════════════════
   Superseded by .cs-card / .cs-grid — see inc/sections.php. ═══════════════ */

@media (max-width: 900px){
}

/* ══ FAQ ═══════════════════════════════════════════════════════════════════
   <details>/<summary>: opens with no JavaScript and is keyboard-accessible for
   free. Opening one changes the document height, so the wash system is told to
   re-measure — see the garden:relayout listener in main.js. ═════════════════ */
.faq{
  margin-top: clamp(32px, 4.2vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* White cards, per Figma — an earlier pass had these as hairline-separated
   rows, which is a different component altogether. */
.faq__item{
  background: #fff;
  border-radius: 10px;
  padding: 20px 25px;
}
.faq__q{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker{ display: none; }
.faq__q:hover{ color: var(--secondary); }
/* The summary is the only way to open an answer, and at 26px it was well under
   the ~44px a thumb needs. Padding rather than a min-height so the whole row
   stays clickable when the question wraps to two lines. */
@media (max-width: 760px) {
  .faq__q{ padding-block: 10px; }
}
.faq__icon{
  position: relative;
  width: 22px; height: 22px;
  flex: 0 0 22px;
  margin-top: 3px;
}
.faq__icon::before, .faq__icon::after{
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--ink);
  translate: -50% -50%;
  transition: opacity var(--dur) var(--ease), rotate var(--dur) var(--ease);
}
.faq__icon::before{ width: 13px; height: 2px; }
.faq__icon::after{ width: 2px; height: 13px; }
.faq__item[open] .faq__icon::after{ opacity: 0; rotate: 90deg; }
.faq__a{
  padding: 30px 0 0;
  max-width: 641px;      /* Figma answer column */
  font-size: 16px;
  line-height: 1.6em;
}
.faq__a p{ opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .faq__icon::before, .faq__icon::after{ transition: none; }
}

/* ══ Breadcrumbs ═══════════════════════════════════════════════════════════ */
/* Crumbs live at the FOOT of a hero now. Sitting above the eyebrow they were
   the loudest thing on the page; down here they read as a footer to the header
   band. The rich result is unaffected — it comes from the JSON-LD in <head>. */
.crumbs{ margin: clamp(32px, 4vw, 56px) 0 0; }
.crumbs__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.crumbs__item{ display: inline-flex; align-items: center; gap: 8px; }
.crumbs__link{ color: inherit; opacity: 0.55; text-decoration: none; }
.crumbs__link:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.crumbs__current{ opacity: 0.75; }
.crumbs__sep{ opacity: 0.35; }

/* ══ Solution / service hero ═══════════════════════════════════════════════
   Full-bleed image with the copy over it. z-index 10 matches .hero and
   .ap-hero so the hero clears the fixed chrome the same way they do. ════════ */
.dtl-hero{
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  min-height: clamp(420px, 49vw, 707px);
  padding: clamp(120px, 10.6vw, 152px) var(--side) clamp(56px, 7vw, 100px);
  overflow: hidden;
}
/* Compact variant — utility pages (legal, thank-you) don't carry a full-bleed
   image, so the 420–707px minimum is dead air above the content. Top padding
   stays: it's what clears the fixed nav. */
.pg-hero--compact{
  min-height: 0;
  padding-bottom: clamp(36px, 4vw, 56px);
}
.dtl-hero__bg{ position: absolute; inset: 0; z-index: 0; }
.dtl-hero__img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim: the headline is dark green and the hero image is editor-supplied, so
   readability cannot be left to whatever photo gets uploaded. */
.dtl-hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(245, 240, 227, 0.92) 0%,
    rgba(245, 240, 227, 0.72) 42%,
    rgba(245, 240, 227, 0.18) 78%,
    rgba(245, 240, 227, 0) 100%);
}
/* Figma: copy column 740 at x80, reel panel 522 at x838 — an 18px gutter, the
   panel sitting lower than the copy rather than centred against it. */
.dtl-hero__grid{
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 740fr) minmax(0, 522fr);
  column-gap: clamp(24px, 1.4vw, 18px);
  align-items: end;
}
/* No panel — the copy keeps the whole row rather than leaving a hole. */
.dtl-hero__grid:not(:has(.dtl-hero__media)){ grid-template-columns: minmax(0, 740px); }
.dtl-hero__content{ max-width: 740px; }

.dtl-hero__media{
  position: relative;
  aspect-ratio: 522 / 284;
  border-radius: 20px;
  overflow: hidden;
  background: #0a2f2d;
  box-shadow: 0 24px 64px -20px rgba(5, 74, 71, 0.35);
}
.dtl-hero__media-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.dtl-hero__media iframe{
  position: absolute; inset: -5%;
  width: 110%; height: 110%;
  border: 0;
  pointer-events: none;    /* the wrapper owns the click */
}
.dtl-hero__media[data-vimeo-id]{ cursor: pointer; }
.dtl-hero__play{
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.dtl-hero__play-btn{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(245, 240, 227, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: transform 0.3s var(--ease);
}
.dtl-hero__media:hover .dtl-hero__play-btn{ transform: scale(1.1); }
.dtl-hero__play-btn svg{ width: 20px; height: 20px; fill: var(--ink); margin-left: 3px; }
.dtl-hero__h{
  font-family: var(--sans);
  font-size: clamp(38px, 6.6vw, 95px);
  font-weight: 400;
  line-height: 1em;
  letter-spacing: -0.0284em;
  color: var(--ink);
  margin: 0 0 20px;
}
.dtl-hero__h em{ font-family: var(--serif); font-style: italic; }
.dtl-hero__sub{
  font-size: 16px;
  line-height: 1.6em;
  color: var(--ink);
  opacity: 0.72;
  max-width: 649px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.dtl-hero__sub:last-child{ margin-bottom: 0; }

/* The two-button conversion row (garden_hero_ctas) — Request Strategy Review
   solid, Request Pricing ghost. Sits between the sub and the breadcrumbs. */
.dtl-hero__ctas{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 4px 0 clamp(26px, 3.4vw, 36px);
}
/* Phone heroes ran long and ragged (Tom 2026-08-23): stacked CTAs, a
   two-line crumb trail and desktop-scale gaps added up to "messy". Tighten
   the rhythm and drop the visible crumbs — the breadcrumb rich result comes
   from the JSON-LD in <head> and is unaffected. */
@media (max-width: 640px){
  .dtl-hero__content .label{ margin-bottom: 14px; }
  .dtl-hero__h{ margin-bottom: 14px; }
  .dtl-hero__sub{ margin-bottom: 18px; }
  .dtl-hero .crumbs{ display: none; }

  /* Both CTAs on ONE line (Tom 2026-08-23). Full labels plus arrow chips
     cannot fit a 375px row, so on phones the pair becomes two equal
     buttons: solid + outlined, centred text, no arrows; the long label
     wraps inside its half and the heights stretch to match. */
  .dtl-hero__ctas{ flex-wrap: nowrap; gap: 10px; margin-bottom: 8px; align-items: stretch; }
  .dtl-hero__ctas .pill{
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    font-size: 13px;
    padding: 12px 10px;
  }
  .dtl-hero__ctas .pill__arrow{ display: none; }
  .dtl-hero__ctas .pill__lg{ display: none; }   /* "Request Strategy", not "… Review", on phones */
  .dtl-hero__ctas .pill--ghost{
    border: 1px solid rgba(5, 74, 71, 0.35);
    border-radius: var(--radius-pill);
    font-weight: 600;
  }
}

/* Index heroes carry no image, so they need no scrim and less height. */
.svc-hero--index{ min-height: 0; }

/* ── Detail page body ───────────────────────────────────────────────────────
   Everything below the hero on a service page or a solution hub. Flat cream, opaque, above the fixed .bg-overlay — so the video reads as a header device
   only, and the data-wash sections have a cream to fade FROM. Without an opaque
   base the mint wash interpolates against nothing and barely registers. */
.dtl-body{
  position: relative;
  z-index: 2;
  background: var(--surface-cream);
}
/* Service pages open too tight under the hero (Tom, 2026-08-10): give the
   first composed section extra breathing room. Scoped to service singles so
   hub and case-study rhythm is untouched. */
.single-service .dtl-body{ padding-top: clamp(28px, 3.5vw, 56px); }
/* The wash writes an inline background-color onto its own section, which sits
   inside this band — it overrides the cream for that section only, exactly as
   intended, and the neighbour bleed still lands on cream either side. */

@media (max-width: 900px){
  /* Same call as the other heroes: the panel is decorative and the copy needs
     the full width more than the page needs the reel. */
  .dtl-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .dtl-hero__media { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dtl-hero__media:hover .dtl-hero__play-btn{ transform: none; }
}

/* ══ Service list ══════════════════════════════════════════════════════════ */
.sec--service-list .sec__head-r{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .sec--service-list .sec__head-r{ justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SOLUTIONS INDEX — /solutions, ported from the static solutions.html
   Rendered by page-solutions.php. The stacking cards (.solutions /
   .solution-card), the case-study cards (.sol-cs-*), .section-head and the
   closing #contact block are all already defined above — shared with the home
   page — so only the four sections unique to this page live here.

   --cream / --coral in the static source map to --surface-cream /
   --accent-coral in the theme.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Trap 1: these are full-width sections that do NOT use the .section class, so
   they must clear the fixed .bg-overlay themselves. */
.sol-hero, .sol-integrated, .sol-howwork, .sol-casestudies{
  position: relative;
  z-index: 2;
}

/* ── Hero — copy left, Vimeo reel right ─────────────────────────────────────── */
.sol-hero{
  padding: clamp(150px, 19vh, 240px) var(--side) clamp(72px, 10vw, 140px);
  background: transparent;
}
.sol-hero__inner{
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr clamp(360px, 40%, 560px);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  position: relative;
}
/* The hero sits over the drifting background video, so the copy needs its own
   ground. A soft cream vignette rather than a hard panel — it has to read as
   light falling on the text, not a box behind it. */
.sol-hero__text{ position: relative; }
.sol-hero__text::before{
  content: '';
  position: absolute;
  inset: -8% -60% -8% -20%;
  background: radial-gradient(ellipse at 30% 50%,
    rgba(245, 240, 227, 0.82) 0%,
    rgba(245, 240, 227, 0.58) 30%,
    rgba(245, 240, 227, 0.20) 62%,
    rgba(245, 240, 227, 0) 85%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}
.sol-hero__text > *{ position: relative; z-index: 1; }
.sol-hero__h{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 95px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  text-shadow: 0 1px 24px rgba(245, 240, 227, 0.55), 0 1px 2px rgba(245, 240, 227, 0.45);
}
.sol-hero__h em{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
body.is-stage-2 .sol-hero__h, body.is-past-hero .sol-hero__h{ color: var(--ink); }
.sol-hero__body{
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
  max-width: 50ch;
  text-shadow: 0 1px 12px rgba(245, 240, 227, 0.4);
}

.sol-hero__media{
  position: relative;
  border-radius: clamp(12px, 1.2vw, 20px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a2f2d;
  box-shadow: 0 24px 64px -20px rgba(5, 74, 71, 0.35), 0 4px 12px -4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
/* Overscanned so Vimeo's own letterboxing never shows at the edges. */
.sol-hero__media iframe{
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  border: 0;
  pointer-events: none;   /* the wrapper handles the click, not the player */
}
.sol-hero__play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sol-hero__play-btn{
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(245, 240, 227, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.sol-hero__media:hover .sol-hero__play-btn{
  transform: scale(1.1);
  background: rgba(245, 240, 227, 1);
}
.sol-hero__media:focus-visible{ outline: 2px solid var(--ink); outline-offset: 4px; }
.sol-hero__play-btn svg{ width: 22px; height: 22px; fill: var(--ink); margin-left: 3px; }

@media (max-width: 860px) {
  .sol-hero__inner{ grid-template-columns: 1fr; }
  .sol-hero__text::before{ inset: -6% -10%; }
  .sol-hero__media{ display: none; }
  .sol-hero{ padding-bottom: clamp(48px, 8vw, 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .sol-hero__media:hover .sol-hero__play-btn{ transform: none; }
}

/* ── Integrated agency band ─────────────────────────────────────────────────── */
.sol-integrated{
  padding: clamp(80px, 11vw, 160px) var(--side) clamp(56px, 6vw, 80px);
  background: var(--surface-cream);
}
.sol-integrated__inner{ max-width: var(--max-w); margin: 0 auto; }
.sol-integrated__h{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4.03vw, 58px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
}

/* ── How we work ────────────────────────────────────────────────────────────── */
.sol-howwork{
  padding: clamp(56px, 6vw, 80px) var(--side) clamp(80px, 11vw, 160px);
  background: var(--surface-cream);
}
.sol-howwork__inner{ max-width: var(--max-w); margin: 0 auto; }
.sol-howwork__h{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4.03vw, 58px);
  line-height: 1em;
  letter-spacing: -0.0466em;
  color: var(--ink);
  margin: 0;
}
.how-diagram-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(10px, 1vw, 16px);
}

/* ── Featured case studies ──────────────────────────────────────────────────── */
.sol-casestudies{
  padding: clamp(80px, 13.9vw, 200px) var(--side);
  background: var(--surface-cream);
}
.sol-casestudies__inner{ max-width: var(--max-w); margin: 0 auto; }
.sol-casestudies__h{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4.03vw, 58px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
}
.sol-casestudies__cta{
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2.5vw, 36px);
}
.sol-casestudies__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.sol-casestudies__btn:hover{ background: var(--secondary); }

/* Card titles are links now that each solution has a hub to point at. */
.solution-card__link{ color: inherit; text-decoration: none; }
.solution-card__link:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* Closing CTA.
   The static source styles this off a bare `#contact` id, which garden.css
   already uses for an unrelated home-page padding tweak — so the section is
   given its own class here. Without it the CTA rendered with no side gutter and
   no bottom padding, hard against the viewport edge.
   The `.contact__*` inner styles it uses are shared and already defined above. */
.sol-contact{
  position: relative;
  z-index: 2;
  padding: clamp(80px, 9vw, 130px) var(--side);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SOLUTIONS MEGA MENU
   Five columns under the Solutions nav item: the four solution hubs with their
   services, plus Platforms. Markup from inc/nav-mega.php, behaviour in nav.js.

   Lives inside .nav-wrap, which is fixed at z-index 100 with
   pointer-events:none — so the panel re-enables pointer events for itself and
   positions against the nav bar above it.
   ══════════════════════════════════════════════════════════════════════════════ */

.mega{
  position: absolute;
  top: calc(100% + 14px);
  left: var(--side);
  right: var(--side);
  pointer-events: auto;
  background: var(--surface-cream);
  border-radius: var(--radius-card);
  box-shadow: 0 32px 80px -24px rgba(5, 74, 71, 0.28), 0 4px 16px -6px rgba(5, 74, 71, 0.12);
  overflow: hidden;
  opacity: 0;
  translate: 0 -8px;
  /* visibility rather than display keeps the transition playable, and unlike
     opacity alone it also pulls the panel's links out of the tab order while
     closed. The delay on the way out holds it visible for the fade; opening
     clears the delay so it appears immediately. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), translate 0.22s var(--ease), visibility 0s linear 0.22s;
}
.mega.is-open{
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s var(--ease), translate 0.22s var(--ease), visibility 0s;
}
/* No JS: the attribute stays put and the panel never renders. nav.js removes it
   on init and takes over via .is-open. */
.mega[hidden]{ display: none; }

/* The little notch pointing back at the trigger, as in the reference design. */
.mega::before{
  content: '';
  position: absolute;
  top: -7px;
  left: var(--mega-arrow-x, 50%);
  width: 16px;
  height: 16px;
  background: var(--surface-cream);
  rotate: 45deg;
  border-radius: 3px;
  translate: -50% 0;
}

.mega__inner{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3vw, 44px) clamp(32px, 3.4vw, 44px);
}

.mega__col{ min-width: 0; }

.mega__heading{
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--secondary);
  text-decoration: none;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}
.mega__heading:hover{ color: var(--primary); }

.mega__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mega__link{
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.mega__link:hover, .mega__link:focus-visible{
  color: var(--secondary);
  translate: 3px 0;
}

/* Footer bar — the "can't find it" prompt from the reference, in Garden green. */
.mega__foot{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  background: var(--tertiary);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.mega__foot strong{ font-weight: 700; }
.mega__foot:hover{ background: var(--secondary); color: var(--surface-cream); }
.mega__foot-arrow{ transition: translate var(--dur) var(--ease); }
.mega__foot:hover .mega__foot-arrow{ translate: 3px 0; }

/* The trigger keeps its underline drawn while the panel is open, so the nav
   still shows where you are. */
.nav__links a.nav__megatrigger[aria-expanded="true"]{ color: var(--secondary); }
.nav__links a.nav__megatrigger[aria-expanded="true"]::after{ transform: scaleX(1); }

/* ── Small nav dropdown — the mega panel's compact cousin ─────────────────────
   A narrow card hanging under one nav item (About; Industries later). Same
   cream card, notch and open/close motion as .mega, sized to its links.
   Positioned by --drop-x, which nav.js aims at the trigger's centre. */
.nav-drop{
  position: absolute;
  top: calc(100% + 14px);
  left: var(--drop-x, 50%);
  min-width: 224px;
  width: max-content;
  background: var(--surface-cream);
  border-radius: var(--radius-card);
  box-shadow: 0 32px 80px -24px rgba(5, 74, 71, 0.28), 0 4px 16px -6px rgba(5, 74, 71, 0.12);
  padding: 10px;
  opacity: 0;
  translate: -50% -8px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), translate 0.22s var(--ease), visibility 0s linear 0.22s;
}
.nav-drop.is-open{
  opacity: 1;
  translate: -50% 0;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s var(--ease), translate 0.22s var(--ease), visibility 0s;
}
.nav-drop[hidden]{ display: none; }
.nav-drop::before{
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--surface-cream);
  rotate: 45deg;
  border-radius: 3px;
  translate: -50% 0;
}
.nav-drop__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-drop__link{
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-drop__link:hover, .nav-drop__link:focus-visible{
  background: rgba(5, 74, 71, 0.07);
  color: var(--secondary);
}

/* Five columns need room. Below this the panel is cramped enough that the
   drawer is the better experience — .nav__links is hidden there anyway. */
@media (max-width: 1100px){
  .mega { display: none !important; }
  .nav-drop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mega{ transition: none; }
  .mega__link:hover, .mega__link:focus-visible{ translate: none; }
}

/* ── Drawer: the four hubs plus Platforms, one tap each ─────────────────────── */
/* Sub-menus nest under their parent with no fencing (Tom 2026-08-23: the
   left rail plus the parent's hairline read as broken boxes). The parent's
   own border-bottom is suppressed via :has below, and the GROUP closes on
   one hairline carried by the sub itself. */
.nav-drawer__sub{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 14px 18px;
  border-bottom: 1px solid rgba(245, 240, 227, 0.14);
}
.nav-drawer__links > a:has(+ .nav-drawer__sub){ border-bottom: 0; }
/* These sit inside .nav-drawer__links, whose `a` rule is (0, 1, 1) and sets a
   48px face with a divider on every link. Scoping to the parent takes these to
   (0, 2, 1) so the sub-list reads as subordinate rather than as more top-level
   items. */
.nav-drawer__links .nav-drawer__sublink{
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 500;
  color: rgba(245, 240, 227, 0.72);
  text-decoration: none;
  padding: 9px 0;
  border: 0;
  transition: color var(--dur) var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.nav-drawer__links .nav-drawer__sublink:hover, .nav-drawer__links .nav-drawer__sublink[aria-current="page"]{ color: var(--accent-coral); }

/* ══════════════════════════════════════════════════════════════════════════════
   INDUSTRIES INDEX — /industries, ported from the static industries.html
   Rendered by page-industries.php. The four blocks come from `industry` terms.

   Three rules from the static source are deliberately NOT copied wholesale, because the theme already defines them for other pages:
     .section-head__h  — a grid-area rule here; the typographic version is
                         scoped to .ind-intro below
     .marquee          — 360s and opacity:0 here (revealed by .logos.is-visible);
                         only the deltas are overridden, under .ind-logos
     .logo-img-marquee — already identical, left alone
   ══════════════════════════════════════════════════════════════════════════════ */

/* Trap 1: full-width sections not using .section must clear the fixed overlay. */
.wrk-hero, .ind-body{ position: relative; z-index: 2; }

/* ── Hero — copy left, stat cards right ─────────────────────────────────────── */
.wrk-hero{
  padding: clamp(150px, 19vh, 240px) var(--side) clamp(72px, 10vw, 140px);
  background: transparent;
}
.wrk-hero__inner{
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr clamp(340px, 32%, 480px);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
/* Same reasoning as the Solutions hero: the copy sits over the drifting
   background video and needs its own light to stay readable. */
.wrk-hero__text{ position: relative; }
.wrk-hero__text::before{
  content: '';
  position: absolute;
  inset: -8% -60% -8% -20%;
  background: radial-gradient(ellipse at 30% 50%,
    rgba(245, 240, 227, 0.82) 0%,
    rgba(245, 240, 227, 0.58) 30%,
    rgba(245, 240, 227, 0.20) 62%,
    rgba(245, 240, 227, 0) 85%);
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}
.wrk-hero__text > *{ position: relative; z-index: 1; }
.wrk-hero__h{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 95px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  text-shadow: 0 1px 24px rgba(245, 240, 227, 0.55), 0 1px 2px rgba(245, 240, 227, 0.45);
}
.wrk-hero__h em{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.wrk-hero__body{
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
  max-width: 50ch;
  text-shadow: 0 1px 12px rgba(245, 240, 227, 0.4);
}

.ind-hero-panel{ display: flex; flex-direction: column; gap: 12px; }
.ind-hero-stat{
  background: #fff;
  border-radius: 20px;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px);
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 20px -8px rgba(5, 74, 71, 0.12);
}
.ind-hero-stat__num{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1;
  color: var(--primary);
  flex: 0 0 auto;
  letter-spacing: -0.02em;
  min-width: clamp(62px, 6vw, 100px);
}
.ind-hero-stat__body{ flex: 1 1 0; min-width: 0; }
.ind-hero-stat__tag{
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin-bottom: 3px;
}
.ind-hero-stat__label{ font-size: 13px; line-height: 1.4; color: var(--ink); opacity: 0.72; }
.ind-hero-stat__logo{
  display: block;
  height: 40px;
  width: auto;
  max-width: 140px;
  opacity: 0.75;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .wrk-hero__inner{ grid-template-columns: 1fr; }
  .wrk-hero__text::before{ inset: -6% -10%; }
  /* The cards restate figures that also appear in the case-study cards below, so hiding them costs no information. */
  .ind-hero-panel{ display: none; }
}

/* ── Body + intro ───────────────────────────────────────────────────────────── */
.ind-body{ background: var(--surface-cream); }
.ind-intro{
  position: relative;
  z-index: 1;
  padding: clamp(72px, 10vw, 140px) var(--side) clamp(48px, 6vw, 80px);
}
.ind-intro__inner{ max-width: var(--max-w); margin: 0 auto; }
/* Scoped: .section-head__h is a grid-area rule elsewhere in this file. */
.ind-intro .section-head__h{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 22ch;
}
.ind-intro .section-head__h em{ font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.ind-intro .section-head__body{
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.72;
  max-width: 58ch;
  margin: 0;
}

/* ── Industry block ─────────────────────────────────────────────────────────── */
.ind-block{
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(5, 74, 71, 0.10);
  padding: clamp(72px, 9vw, 128px) var(--side) 0;
}
.ind-block__inner{ max-width: var(--max-w); margin: 0 auto; }
.ind-block__head{ margin-bottom: clamp(40px, 5vw, 60px); }
.ind-block__num{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-coral);
  margin: 0 0 16px;
}
.ind-block__h{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.047em;
  color: var(--ink);
  margin: 0;
}

/* ── Feature row ────────────────────────────────────────────────────────────── */
.ind-feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(60px, 7vw, 80px);
}
.ind-feature__img{
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 544 / 377;
  background: linear-gradient(140deg, #0a3530 0%, #054A47 100%);
}
.ind-feature__img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ind-feature__text{ display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.ind-feature__h{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.ind-feature__body{
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}
.ind-feature__ctas{ display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.ind-feature__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  align-self: flex-start;
  transition: gap var(--dur) var(--ease);
}
.ind-feature__cta:hover{ gap: 14px; }
.ind-feature__cta-arrow{
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--surface-mint);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: transform var(--dur) var(--ease);
}
.ind-feature__cta:hover .ind-feature__cta-arrow{ transform: translateX(3px); }

@media (max-width: 840px) {
  .ind-feature{ grid-template-columns: 1fr; }
}

/* ── Client logo marquee ────────────────────────────────────────────────────── */
.ind-logos{ padding: 0 0 clamp(40px, 5vw, 60px); }
.ind-logos__label{ text-align: center; margin-bottom: 28px; }
.ind-logos__label .eyebrow{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The mask and the overflow clip must be separate elements — combining them
   breaks the fade on iOS Safari. */
.ind-logos__fade{
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.ind-logos__track{ overflow: hidden; }
/* Only the deltas from the shared .marquee: the logo band on the home page is
   revealed by .logos.is-visible, which never fires here, and runs far slower. */
.ind-logos .marquee{
  opacity: 1;
  animation-duration: 120s;
  padding: 12px 0;
}

/* ── Case-study stat cards ──────────────────────────────────────────────────── */
.ind-cases{ padding-bottom: clamp(72px, 9vw, 128px); }
.ind-cases__h{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  opacity: 0.55;
}

/* ── Logo band ──────────────────────────────────────────────────────────────
   Figma (Services 341:7788): centred 13px/600/0.16em label, logos at 48px and
   78% opacity, the row masked to fade out at 12% and 88%. ─────────────────── */
.logoband__label{
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.95;
  margin: 0 0 clamp(24px, 2.8vw, 40px);
}
/* Mask and overflow clip must be separate elements — combined they break the
   fade on iOS Safari. Same split as .ind-logos. */
.logoband__fade{
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.logoband__track{ overflow: hidden; }
.logoband__row{
  display: flex;
  align-items: center;
  justify-content: center;   /* static rows sit centred */
  gap: clamp(32px, 4vw, 56px);
  flex-wrap: wrap;
}
.logoband__row--scroll{
  width: max-content;
  flex-wrap: nowrap;
  justify-content: flex-start;
  animation: marquee-scroll 120s linear infinite;
}
.logoband__logo{
  flex-shrink: 0;
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.78;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .logoband__row--scroll{ animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ── Card grid ──────────────────────────────────────────────────────────────
   Figma: 413×344 glass cards, 21.6px radius, white at 82%, hairline border and
   a soft drop plus an inset highlight along the top edge. ──────────────────── */
.cardgrid{
  display: grid;
  gap: clamp(16px, 1.6vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cardgrid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cardgrid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cardgrid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cardgrid__card{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 344px;
  padding: 33px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(26, 26, 26, 0.06);
  box-shadow: 0 10px 28px -16px rgba(5, 74, 71, 0.16),
              inset 0 1px 0 1px rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.cardgrid__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(5, 74, 71, 0.26),
              inset 0 1px 0 1px rgba(255, 255, 255, 0.55);
}
.cardgrid__icon{
  width: 48px; height: 48px;
  object-fit: contain;
  object-position: left top;
  margin-bottom: 20px;
}
.cardgrid__title{
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.0211em;
  margin: 0 0 auto;      /* title top, body pinned below it */
}
.cardgrid__body{
  font-size: 14.4px;
  line-height: 21.6px;
  color: rgba(5, 74, 71, 0.78);
  margin: 24px 0 0;
}
/* Per-card feature list — the partner pages' "Term – description" rows. */
.cardgrid__features{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  row-gap: 10px;
}
.cardgrid__feature{
  font-size: 14.4px;
  line-height: 21.6px;
  color: rgba(5, 74, 71, 0.78);
  padding-left: 18px;
  position: relative;
}
.cardgrid__feature::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}
.cardgrid__feature strong{
  color: var(--ink);
  font-weight: 600;
}
.cardgrid__arrow{
  margin-top: 20px;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--surface-mint);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: transform var(--dur) var(--ease);
}
a.cardgrid__card:hover .cardgrid__arrow{ transform: translateX(3px); }

@media (max-width: 1000px) {
  .cardgrid--3, .cardgrid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cardgrid--2, .cardgrid--3, .cardgrid--4{ grid-template-columns: 1fr; }
  .cardgrid__card{ min-height: 0; padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  a.cardgrid__card:hover{ transform: none; }
}

/* ── Reviews pull quote ─────────────────────────────────────────────────────
   Figma places the quote in the right-hand column beneath the image. ───────── */
.reviews__quote{
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.reviews__quote blockquote{
  margin: 0;
  quotes: '“' '”';
}
.reviews__quote blockquote::before{ content: open-quote; }
.reviews__quote blockquote::after{ content: close-quote; }
.reviews__cite{
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
}
.reviews__cite-name{ display: block; }
.reviews__cite-role{ display: block; font-weight: 400; opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════════════
   CASE STUDY — /work/<slug>
   One template for both Figma comps (33:1253 standard, 323:2691 creative); the
   creative variant is the same skeleton with Images blocks between the rows.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Case studies sit on flat cream, not over the drifting background video.
   The video is a home/hub device; on a long-form read it fights the copy and
   makes the hairline rules between split rows almost invisible. One opaque
   band over the whole article rather than per-section backgrounds, so the
   hairlines and the stat band read against a single consistent ground. */
.cstudy{
  position: relative;
  z-index: 2;
  background: var(--surface-cream);
}
/* The wash system writes inline background-colour onto [data-wash] sections;
   inside a case study those still work, they just start from this cream
   instead of from the video. */

.sec--cs-banner{ padding-top: clamp(96px, 11vw, 130px); }
.cstudy__banner{
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 528;
  object-fit: cover;
  border-radius: var(--sec-radius);
  display: block;
}
/* Missing banner → labelled grey block, so absent photography is visible
   work rather than an invisible gap (Tom 2026-09-05). Wiring a real
   hero_image replaces it automatically. */
.cstudy__banner--ph{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E4E0D5;
}
.cstudy__banner--ph span{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(5, 74, 71, 0.4);
}

/* Intro — heading 630 at x80, meta column 610 at x750. */
.cstudy__intro{
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 610fr);
  column-gap: clamp(32px, 2.8vw, 40px);
  align-items: start;
}
.cstudy__h{
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.cstudy__h em{ font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Client logo on the case study page.
   Sized by HEIGHT with width auto — the only shape that is safe for both an SVG
   with no intrinsic dimensions (which would otherwise fall back to the browser's
   300x150 replaced-element default, the same trap that shrank the icon-grid
   icons) and a wide raster logo that would otherwise overflow the column.
   No knock-out filter here: unlike the card, this sits on cream. */
/* ── Media slot — an image position that may hold video ────────────────────────
   Shared by the Images section and the case study banner. The poster sits
   underneath so there is never a blank frame while the player loads, and the
   aspect ratio comes from the poster rather than being hard-coded, so a slot
   keeps whatever shape its still had. */
.media-slot{ position: relative; overflow: hidden; border-radius: clamp(12px, 1.2vw, 20px); background: #0a2f2d; }
.media-slot__poster{ width: 100%; height: auto; display: block; }
.media-slot{ container-type: size; }
.media-slot iframe{
  /* Cover rather than letterbox — see the note on .cs-card__video iframe. */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width:  max(100cqw, 177.78cqh);
  height: max(56.25cqw, 100cqh);
  border: 0;
  pointer-events: none;          /* the wrapper owns the click */
}
/* With no poster there is nothing to give the box height, so fall back to 16/9
   rather than collapsing to zero. */
.media-slot:not(:has(.media-slot__poster)){ aspect-ratio: 16 / 9; }
.media-slot--click{ cursor: pointer; }
/* Autoplay slots are click targets too — the loop is a muted preview, the
   click opens the sound lightbox. */
.media-slot--auto[data-vimeo-id]{ cursor: pointer; }
.media-slot--auto[data-vimeo-id]:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
.media-slot--click .media-slot__poster{ transition: transform 0.9s var(--ease); }
.media-slot--click:hover .media-slot__poster{ transform: scale(1.02); }
.media-slot--click:focus-visible{ outline: 2px solid var(--tertiary); outline-offset: 3px; }

.cstudy__logo{ margin: 0 0 clamp(20px, 2.4vw, 32px); }
.cstudy__logo-img{
  height: clamp(38px, 4vw, 60px);
  width: auto;
  max-width: min(260px, 100%);
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Facts list — Industry / Solutions / Services / Customer type / Region.
   The taxonomy rows carry links, so they need to read as links without
   disturbing the two-column term/value rhythm. */
.cstudy__facts dd a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(5, 74, 71, 0.35);
  transition: text-decoration-color var(--dur) var(--ease);
}
.cstudy__facts dd a:hover{ text-decoration-color: currentColor; }

.cstudy__meta{ font-size: 16px; line-height: 1.3em; }
.cstudy__meta strong{ font-weight: 700; opacity: 1; }

.cstudy__facts{
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 16px;
  line-height: 1.4;
}
.cstudy__facts dt{ font-weight: 700; color: var(--ink); }
.cstudy__facts dd{ margin: 0; color: var(--ink); opacity: 0.72; }

/* The creative comp gives the intro a narrower measure — the imagery carries
   more of the story, so the copy column is not asked to do as much. */
.cstudy--creative .cstudy__intro{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .cstudy__intro, .cstudy--creative .cstudy__intro{ grid-template-columns: 1fr; row-gap: 28px; }
}

/* ── Split row — heading left, copy or image right ──────────────────────────── */
.sec--ruled{ border-top: 1px solid rgba(5, 74, 71, 0.2); }
.splitrow{
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 610fr);
  column-gap: clamp(32px, 2.8vw, 40px);
  align-items: start;
}
.splitrow__h{
  font-family: var(--font-sans);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.splitrow__body{ font-size: 16px; line-height: 1.6em; }
/* Bold runs are used as sub-labels in the comp — full strength, not the muted
   body colour the surrounding prose takes. */
.splitrow__body strong{ font-weight: 700; opacity: 1; color: var(--ink); }
.splitrow__img{
  width: 100%;
  height: auto;
  border-radius: var(--sec-radius);
  display: block;
}
@media (max-width: 900px) {
  .splitrow{ grid-template-columns: 1fr; row-gap: 24px; }
}

/* ── Pull quote — centred, 58px, 1050 measure ───────────────────────────────── */
.pullquote{ margin: 0; text-align: center; }
.pullquote__q{
  margin: 0 auto;
  max-width: 1050px;
  font-family: var(--font-sans);
  font-size: clamp(26px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: -0.03em;
  color: var(--ink);
  quotes: '“' '”';
}
.pullquote__q::before{ content: open-quote; }
.pullquote__q::after{ content: close-quote; }
.pullquote__cite{
  display: block;
  margin-top: clamp(28px, 3.4vw, 48px);
  font-size: 16px;
  line-height: 1.6em;
}
.pullquote__name{ display: block; font-weight: 700; color: var(--ink); }
.pullquote__role{ display: block; font-weight: 400; color: var(--ink); opacity: 0.72; }

/* ── Media block — 1, 2 or 3 images across ─────────────────────────────────── */
.mediarow{ display: grid; gap: 20px; }
.mediarow--1{ grid-template-columns: 1fr; }
.mediarow--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mediarow--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mediarow__img{
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 529;
  object-fit: cover;
  border-radius: var(--sec-radius);
  display: block;
}
/* A single image runs wide rather than tall — 1280×529 in the comp. */
.mediarow--1 .mediarow__img{ aspect-ratio: 1280 / 529; }

/* Anchored sections: keep the fixed nav from covering the heading when a
   #fragment link lands here. */
.sec[id]{ scroll-margin-top: 110px; }

/* Slider — one scroll-snap strip, next photo peeking in from the edge.
   Same affordance reasoning as the icon-grid carousel: a full-width page
   gives no hint more exists, a peek does. Pure CSS; no JS to fail. */
.mediarow--slider{
  grid-auto-flow: column;
  grid-auto-columns: min(62%, 640px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Let the strip's first/last snap points breathe past the inner gutter. */
  scroll-padding-inline: 4px;
}
.mediarow--slider::-webkit-scrollbar{ display: none; }
/* Arrow shell: prev/next controls + a soft fade where the strip leaves the
   viewport, so cards dissolve at the edge instead of slicing mid-frame. The
   mask lives on the strip so it works over cream and mint alike. */
.mediarow-shell{ position: relative; }
.mediarow-shell .mediarow--slider{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.mediarow-arrow{
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 5;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(5, 74, 71, 0.18);
  border-radius: 50%;
  background: var(--surface-cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(5, 74, 71, 0.35);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.mediarow-arrow svg{ width: 16px; height: 16px; }
.mediarow-arrow:hover:not(:disabled){ background: var(--ink); color: var(--ink-on-dark); }
.mediarow-arrow:disabled{ opacity: 0.35; cursor: default; }
.mediarow-arrow--prev{ left: -8px; }
.mediarow-arrow--next{ right: -8px; }
@media (max-width: 640px){
  .mediarow-arrow{ width: 38px; height: 38px; }
  .mediarow-arrow--prev{ left: 2px; }
  .mediarow-arrow--next{ right: 2px; }
}
.mediarow--slider .mediarow__item{ scroll-snap-align: start; }
.mediarow--slider .mediarow__img{ aspect-ratio: 4 / 3; }

/* Portrait video reel — narrow 9:16 cards. The base cover formula assumes a
   16:9 source, so a portrait source needs its own: fill the width, overflow
   the height (100cqw wide is 177.78cqw tall for 9:16 content). */
.mediarow--portrait{ grid-auto-columns: min(19%, 230px); }
.mediarow--portrait .media-slot{ aspect-ratio: 9 / 16; }
.mediarow--portrait .media-slot iframe{
  width:  max(100cqw, 56.25cqh);
  height: max(177.78cqw, 100cqh);
}

@media (max-width: 900px) {
  .mediarow--2, .mediarow--3{ grid-template-columns: 1fr; }
  .mediarow__img, .mediarow--1 .mediarow__img{ aspect-ratio: 4 / 3; }
  .mediarow--slider{ grid-auto-flow: column; grid-auto-columns: 86%; }
  .mediarow--portrait{ grid-auto-columns: 48%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CASE STUDIES INDEX — /case-studies (was /work)
   Grid cards (.wrk-cs-*) are already defined further up, ported from work.html.
   Only the hero tweak, the filter bar and the empty state live here.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Copy takes the full width unless the page has a reel panel set. The panel is
   the shared .dtl-hero__media (see garden_hero_panel()), so the two-column rule
   keys off its presence rather than a body class — set the hero to None in the
   CMS and this reverts to full width on its own.
   Kept inside a min-width query so the 860px collapse below still wins: this
   selector is 0, 3, 0 and would otherwise beat the single-column rule there. */
.csx-hero .wrk-hero__inner{ grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  .csx-hero .wrk-hero__inner:has(.dtl-hero__media){
    grid-template-columns: minmax(0, 1fr) clamp(340px, 32%, 480px);
  }
}

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.sec--csx-filters{ padding-bottom: 0; }
.csxf{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 48px);
}
.csxf__group{ border: 0; margin: 0; padding: 0; min-width: 0; }

/* Services are a second level: only the chosen solution's row is on screen.
   The hidden rows keep their radios in the form (reset to "All" by
   case-studies.js), so this is display only — see syncServiceRows(). */
.csxf__group--service.is-hidden{ display: none; }

/* Status line — the count carries the scope ("2 featured case studies" vs
   "14 case studies"), so no control has to say it. Reset sits beside it because
   it is a way out of a filtered state, not part of choosing one. */
.csxf__status{
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 16px;
  margin: clamp(12px, 1.4vw, 20px) 0 0;
}
.csxf__clear.is-hidden{ display: none; }
.csxf__legend{
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
.csxf__chips{ display: flex; flex-wrap: wrap; gap: 8px; }

/* The radio is the control; the chip is its skin. Kept in the accessibility
   tree (not display:none) so it stays focusable and announced. */
/* The FAQ hub reuses the chip skin outside the .csxf form — .faq-chips is the
   flex container the form's .csxf__chips styles would otherwise provide. */
.faq-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.csxf__chip{ position: relative; display: inline-flex; cursor: pointer; }
.csxf__chip input{
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.csxf__chip span{
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--sec-hairline);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.csxf__chip:hover span{ border-color: var(--ink); }
.csxf__chip.is-on span, .csxf__chip input:checked + span{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-cream);
}
/* Focus has to be visible on the skin, since the input itself is transparent. */
.csxf__chip input:focus-visible + span{
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.csxf__actions{ display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.csxf__apply{
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--ink);
  color: var(--surface-cream);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.csxf__clear{
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.csxf__clear:hover{ opacity: 1; }
.csxf__clear.is-hidden{ display: none; }

.csxf__count{
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.6;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.csx-empty{
  margin: clamp(32px, 5vw, 64px) 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--ink);
  opacity: 0.6;
  text-align: center;
}
.csx-empty.is-hidden{ display: none; }

@media (max-width: 700px) {
  .csxf{ gap: 22px; }
  .csxf__actions{ margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .csxf__chip span{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Decorative hero glows must not widen the page

   Four soft radial glows are positioned with NEGATIVE horizontal insets, so each
   is wider than the element it sits behind:

     .hero-about__inner::before   inset: -10% -12%
     .ap-hero__inner::before      inset: -20% -15%
     .sol-hero__text::before      inset: -8% -60% -8% -20%
     .wrk-hero__text::before      inset: -8% -60% -8% -20%   (both -6% -10% ≤860px)

   That is phantom page width. On /about it was 136px on the inner and 58px of
   document overflow at 1280 — a horizontal scrollbar at every breakpoint.
   `body{ overflow-x: hidden }` was swallowing most of it, which is why it
   presented as a stray 5px rather than the real figure, and why it survived this
   long unnoticed.

   The vertical bleed is kept: the page scrolls that way regardless, so it costs
   nothing. Only the horizontal bleed goes. These are blurred gradients, so
   ending at the parent's edge rather than 12% beyond it is not a visible change
   — a horizontal scrollbar on a phone is.

   NOT fixed with `overflow-x: clip` on the section: per spec, clipping one axis
   forces the other to clip too, which would cut the reveal transforms and the
   hero reel panel's drop shadow off at the section boundary.

   Scoped through the parent (0, 2, 0) rather than using !important, so it beats
   the base and breakpoint rules wherever they sit in the sheet.
   ══════════════════════════════════════════════════════════════════════════════ */
.hero-about .hero-about__inner::before, .ap-hero .ap-hero__inner::before, .sol-hero .sol-hero__text::before, .wrk-hero .wrk-hero__text::before{
  left: 0;
  right: 0;
}

/* ── Case studies filter: native selects below 700px ──────────────────────────
   Built by case-studies.js, which stows the chip rows rather than removing them
   — the radios stay in the form as the authoritative control. Without JS the
   chips remain visible and the selects never exist. */
.csxf__mobile{ display: none; }
.csxf__group--stowed{ display: none; }

@media (max-width: 700px) {
  /* .csxf is a flex row, so a block child still sizes to its content — the
     selects came out 134px and 216px wide. Force each onto its own full-width
     line. */
  .csxf{ flex-direction: column; align-items: stretch; gap: 0; }
  .csxf__mobile{ display: block; flex: 1 1 100%; width: 100%; margin: 0 0 14px; }
  .csxf__mobile .csxf__legend{ display: block; margin: 0 0 6px; }
  .csxf__select{
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%;
    font-family: var(--sans); font-size: 15px; font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid rgba(5, 74, 71, 0.25);
    border-radius: 999px;
    padding: 13px 44px 13px 18px;
    /* Chevron drawn in CSS so there is no asset and it inherits the ink colour. */
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }
  .csxf__select:focus-visible{ outline: 2px solid var(--tertiary); outline-offset: 2px; }
  .csxf__actions{ margin-top: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BLOG — index (Figma 2:2700) and detail (Figma 205:5241)

   Measured off the comps:
     index hero headline   95px / 1em  / -0.0284em
     detail hero headline  58px / 1em  / -0.0466em, white, centred
     section heading       58px / 1em  / -0.0466em
     newsletter CTA        105px / 1em / -0.0257em
     card                  413 wide, white, radius 10, 20px padding, 20px gap
     card title            26px / 1.2em / -0.01em bold
     card meta             13px / 1.4em at 40% opacity
     content column        846px
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.blog-hero{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 36vw, 519px);
  padding: clamp(120px, 14vw, 200px) var(--side) clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.blog-hero__bg{ position: absolute; inset: 0; z-index: 0; }
.blog-hero__img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* The copy sits over a photo, so it needs its own light to stay readable —
   same device as the other image heroes. No negative insets here: those are what
   caused the page-level overflow on /about and /approach. */
.blog-hero__bg::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(245,240,227,0.94) 0%, rgba(245,240,227,0.72) 42%, rgba(245,240,227,0.18) 100%);
}
.blog-hero__inner{ position: relative; z-index: 1; width: 100%; max-width: var(--max-w); margin: 0 auto; }
.blog-hero__h{
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(38px, 6.6vw, 95px);
  line-height: 1;
  letter-spacing: -0.0284em;
  color: var(--ink);
  max-width: 16ch;
  margin: 0.25em 0 0;
}
.blog-hero__h--sm{ font-weight: 700; font-size: clamp(32px, 4vw, 58px); letter-spacing: -0.0466em; }
.blog-hero__h em{ font-family: var(--serif); font-style: italic; }
.blog-hero__sub{
  font-size: 16px; line-height: 1.6;
  color: rgba(5,74,71,0.72);
  max-width: 56ch;
  margin: clamp(16px, 2vw, 24px) 0 0;
}
.blog-hero--archive{ min-height: 0; padding-bottom: clamp(32px, 4vw, 56px); }

/* ── Featured post ───────────────────────────────────────────────────────────── */
.blogfeat{
  display: grid;
  grid-template-columns: minmax(0, 522fr) minmax(0, 630fr);
  column-gap: clamp(32px, 8.9vw, 128px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}
.blogfeat__media{
  display: block;
  aspect-ratio: 522 / 312;
  border-radius: 10px;
  overflow: hidden;
  background: var(--primary);
}
.blogfeat__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.blogfeat__meta{
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-coral);
  margin: 0 0 clamp(12px, 1.4vw, 20px);
}
.blogfeat__sep{ margin: 0 0.5em; }
.blogfeat__h{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(28px, 4vw, 58px); line-height: 1;
  letter-spacing: -0.0466em;
  margin: 0;
}
.blogfeat__h a{ color: var(--ink); text-decoration: none; }
.blogfeat__h a:hover{ color: var(--secondary); }
.blogfeat__excerpt{
  font-size: 16px; line-height: 1.6;
  color: rgba(5,74,71,0.72);
  max-width: 54ch;
  margin: clamp(16px, 2vw, 24px) 0 0;
}
.blogfeat__cta{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.blogfeat__cta-arrow{
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--surface-mint); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur) var(--ease);
}
.blogfeat__cta:hover .blogfeat__cta-arrow{ transform: translateX(3px); }
.blogfeat__byline{
  display: flex; justify-content: space-between; gap: 20px;
  max-width: 197px;
  font-size: 13px; line-height: 1.4;
  color: rgba(5,74,71,0.4);
  margin: clamp(20px, 2.4vw, 32px) 0 0;
}

/* ── Newsletter band ─────────────────────────────────────────────────────────── */
.sec--nl-band .sec__inner{ padding-block: 0; }
.nlband{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 526px);
  column-gap: clamp(32px, 6vw, 100px);
  align-items: center;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid rgba(5,74,71,0.2);
  border-bottom: 1px solid rgba(5,74,71,0.2);
}
.nlband__h{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0;
}
.nlband__sub{
  font-size: 16px; line-height: 1.6;
  color: rgba(5,74,71,0.72);
  max-width: 52ch;
  margin: 8px 0 0;
}

/* ── Newsletter form ─────────────────────────────────────────────────────────── */
.nl-form{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nl-form__input{
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--sans); font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(5,74,71,0.15);
  border-radius: 10px;
  padding: 14px 20px;
}
.nl-form__input::placeholder{ color: rgba(5,74,71,0.3); }
.nl-form__btn{
  display: inline-flex; align-items: center; gap: 15px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  background: var(--primary); color: var(--surface-cream);
  border: 0; border-radius: 999px;
  padding: 10px 10px 10px 20px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.nl-form__btn:hover:not(:disabled){ background: var(--secondary); }
.nl-form__btn:disabled{ cursor: default; opacity: 0.55; }
.nl-form__arrow{
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface-cream); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Only the stub carries the note, and only for an editor's benefit. */
.nl-form__note{
  flex: 0 0 100%;
  font-size: 12px; line-height: 1.4;
  color: rgba(5,74,71,0.45);
  margin: 0;
}

/* ── "The latest." head + category pills ─────────────────────────────────────── */
.bloglist__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(16px, 2vw, 32px);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.bloglist__h{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(30px, 4vw, 58px); line-height: 1;
  letter-spacing: -0.0466em; color: var(--ink);
  margin: 0;
}
.blogcats{ display: flex; flex-wrap: wrap; gap: 10px; }
.blogcats__pill{
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--ink); text-decoration: none;
  padding: 9px 15px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.blogcats__pill:hover{ background: rgba(5,74,71,0.07); }
.blogcats__pill.is-on{ background: var(--primary); color: var(--surface-cream); }

/* ── Post card ───────────────────────────────────────────────────────────────── */
.postgrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.post-card{
  display: flex; flex-direction: column;
  gap: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.post-card:hover{ box-shadow: 0 16px 40px -14px rgba(5,74,71,0.18); transform: translateY(-2px); }
.post-card__cat{
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-coral);
}
/* Pushes the footer down so the hairline and meta sit on the card's bottom edge
   whatever the title and excerpt lengths — cards in a row stay aligned. */
.post-card__body{ display: block; flex: 1 1 auto; }
.post-card__title{
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink);
  text-wrap: balance;
}
.post-card__title em, .post-card__title i{
  font-family: var(--serif); font-style: italic; font-weight: 400;
}
.post-card__excerpt{
  display: block;
  font-size: 16px; line-height: 1.4;
  color: rgba(5,74,71,0.72);
  margin-top: 10px;
}
.post-card__foot{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(5,74,71,0.1);
  font-size: 13px; line-height: 1.4;
  color: rgba(5,74,71,0.4);
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pager{ margin-top: clamp(40px, 5vw, 72px); }
.pager__list{
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.pager__item{ display: flex; }
.pager a, .pager .page-numbers{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px;
  padding: 0 12px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  border: 1px solid rgba(5,74,71,0.25);
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager a:hover{ background: rgba(5,74,71,0.07); }
.pager .page-numbers.current{ background: var(--primary); color: var(--surface-cream); border-color: var(--primary); }
.pager .page-numbers.dots{ border-color: transparent; }

/* ── Closing newsletter CTA ──────────────────────────────────────────────────── */
.sec--nl-cta .sec__inner{ padding-top: clamp(80px, 10vw, 150px); }
.nlcta__h{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(38px, 7.3vw, 105px); line-height: 1;
  letter-spacing: -0.0257em; color: var(--ink);
  max-width: 18ch;
  margin: 0.2em 0 0;
}
.nlcta__form{ margin-top: clamp(28px, 3.4vw, 48px); max-width: 560px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Post detail
   ══════════════════════════════════════════════════════════════════════════════ */
.post-hero{
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(400px, 40vw, 578px);
  padding: clamp(140px, 15vw, 200px) var(--side) clamp(56px, 7vw, 96px);
  overflow: hidden;
  background: var(--primary);
}
.post-hero__bg{ position: absolute; inset: 0; z-index: 0; }
.post-hero__img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* The darkening layer the copy sits on. A sibling rather than a background blend
   so the image stays an <img> and keeps its srcset. */
.post-hero__scrim{
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,0.5);
}
.post-hero--plain{ background: var(--primary); }
.post-hero__inner{
  position: relative; z-index: 2;
  width: 100%; max-width: 630px;
  margin: 0 auto;
  text-align: center;
}
.post-hero__eyebrow{
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tertiary);
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.post-hero__eyebrow a{ color: inherit; text-decoration: none; }
.post-hero__eyebrow a:hover{ text-decoration: underline; }
.post-hero__eyebrow span{ margin: 0 0.5em; }
.post-hero__h{
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(28px, 4vw, 58px); line-height: 1;
  letter-spacing: -0.0466em;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
.post-hero__byline{
  display: flex; justify-content: center; gap: 28px;
  font-size: 13px; line-height: 1.4;
  color: rgba(255,255,255,0.6);
  margin: clamp(20px, 2.4vw, 32px) 0 0;
}

/* ── Body ────────────────────────────────────────────────────────────────────── */
.post-body{ max-width: 846px; margin: 0 auto; }
.post-share{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding-bottom: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgba(5,74,71,0.15);
}
.post-share__label{ font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); }
.post-share__link{
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(5,74,71,0.25);
  border-radius: 999px;
  transition: background var(--dur) var(--ease);
}
.post-share__link:hover{ background: rgba(5,74,71,0.07); }

.post-tags{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid rgba(5,74,71,0.15);
}
.post-tags__tag{
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(5,74,71,0.72); text-decoration: none;
  padding: 6px 13px;
  background: rgba(5,74,71,0.06);
  border-radius: 999px;
}
.post-tags__tag:hover{ background: rgba(5,74,71,0.12); color: var(--ink); }

/* Screen-reader-only, used by the pagination arrows. */
.u-sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .blogfeat{ grid-template-columns: 1fr; row-gap: clamp(20px, 3vw, 32px); }
  .nlband{ grid-template-columns: 1fr; row-gap: 20px; }
  .bloglist__head{ align-items: flex-start; }
}
@media (max-width: 700px) {
  .postgrid{ grid-template-columns: 1fr; }
  .blogfeat__byline{ max-width: none; }
  /* A long list of categories becomes a scroller rather than five stacked rows
     of pills — the same reasoning as the case studies filter, but there is no
     multi-group state here to justify a select. */
  .blogcats{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--side));
    padding-inline: var(--side);
    scroll-snap-type: x proximity;
  }
  .blogcats::-webkit-scrollbar{ display: none; }
  .blogcats__pill{ flex: 0 0 auto; scroll-snap-align: start; }
  .post-share{ gap: 8px 12px; }
}

/* ── Nav over a dark hero ─────────────────────────────────────────────────────
   The blog post hero is a photo under a 50% black layer, or flat dark green when
   there is no featured image. The nav's dark-green wordmark and links vanished
   against it — the whole bar was unreadable on every post.

   Reversed out while the hero is still behind the nav, then handed back once the
   page has scrolled past it. main.js already maintains body.is-past-hero from an
   IntersectionObserver on the hero, so that is the signal rather than a second
   observer — it just had to be taught that .post-hero is a hero.

   The wordmark is an <img>, so it is inverted rather than swapped — one rule
   instead of conditionally rendering a second logo file in header.php. */
body.has-dark-hero:not(.is-past-hero) .nav-wrap .nav__brand img{ filter: brightness(0) invert(1); }
body.has-dark-hero:not(.is-past-hero) .nav-wrap .nav__links a{ color: var(--surface-cream); }
body.has-dark-hero:not(.is-past-hero) .nav-wrap .nav__links a:hover{ color: var(--tertiary); }
body.has-dark-hero:not(.is-past-hero) .nav-wrap .nav__cta{
  background: var(--surface-cream);
  color: var(--primary);
}
body.has-dark-hero:not(.is-past-hero) .nav-wrap .nav__cta:hover{
  background: var(--tertiary);
  color: var(--primary);
}
body.has-dark-hero:not(.is-past-hero) .nav-wrap .nav__burger{ color: var(--surface-cream); }

/* ══════════════════════════════════════════════════════════════════════════════
   THE GARDEN STUDIO — /studio/ (concept, 2026-08-10)
   The creative arm's dark-mode page: deep green throughout, oversized type,
   serif italics as the accent voice, coral kept for punctuation. Scoped
   entirely to .studio; trap 1 handled by the wrapper itself.
   ══════════════════════════════════════════════════════════════════════════════ */
.studio{
  position: relative;
  z-index: 2;
  background:
    radial-gradient(120% 60% at 50% 0%, #0a4a47 0%, #053330 45%, #032420 100%);
  color: var(--surface-cream);
  overflow: hidden;
}
.studio section{ padding: clamp(64px, 8vw, 130px) var(--side); }
.studio__label{
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #FC776A; margin: 0 0 18px;
}
.studio__label::before{ content: "✳ "; }
.studio__eyebrow{
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245, 240, 227, 0.6); margin: 0 0 22px;
}
.studio__hero{
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(140px, 16vw, 200px);
}
.studio__h1{
  font-family: var(--font-sans, 'Vend Sans', sans-serif);
  font-weight: 700;
  font-size: clamp(52px, 9.5vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--surface-cream);
  margin: 0 0 28px;
  max-width: 12ch;
}
.studio__h1 em, .studio__h2 em, .studio__manifesto-line em{
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-style: italic; font-weight: 400; color: #FC776A;
}
.studio__h2{
  font-family: var(--font-sans, 'Vend Sans', sans-serif);
  font-weight: 700; font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--surface-cream); margin: 0;
}
.studio__sub{
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6;
  color: rgba(245, 240, 227, 0.72); max-width: 56ch; margin: 0 0 34px;
}
.studio__cta{
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 14px 26px; border-radius: 999px;
  background: #FC776A; color: #032420;
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.studio__cta:hover{ background: var(--surface-cream); translate: 0 -2px; }

/* Marquee */
.studio__marquee{
  overflow: hidden; padding: 18px 0;
  border-top: 1px solid rgba(245, 240, 227, 0.12);
  border-bottom: 1px solid rgba(245, 240, 227, 0.12);
}
.studio__marquee-track{
  display: flex; gap: 34px; width: max-content;
  animation: studio-marquee 28s linear infinite;
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-style: italic; font-size: clamp(18px, 2vw, 26px);
  color: rgba(245, 240, 227, 0.82); white-space: nowrap;
}
.studio__marquee-mark{ color: #FC776A; font-style: normal; }
@keyframes studio-marquee{ to{ transform: translateX(-50%); } }

/* Reel */
.studio__reel{ padding-top: clamp(40px, 5vw, 70px) !important; }
.studio__reel video{
  width: 100%; display: block;
  border-radius: clamp(14px, 1.6vw, 24px);
  aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
}

/* Manifesto */
.studio__manifesto-line{
  font-size: clamp(26px, 3.6vw, 52px); line-height: 1.18;
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--surface-cream); max-width: 24ch; margin: 0;
}

/* Services index — the numbered rail */
.studio__services-head{ margin-bottom: clamp(30px, 4vw, 54px); }
.studio__services-list{ border-top: 1px solid rgba(245, 240, 227, 0.14); }
.studio__service{
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 18px;
  padding: clamp(18px, 2.4vw, 30px) 4px;
  border-bottom: 1px solid rgba(245, 240, 227, 0.14);
  text-decoration: none;
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.studio__service-n{
  font-family: var(--font-serif, 'Instrument Serif', serif); font-style: italic;
  font-size: 15px; color: #FC776A;
}
.studio__service-name{
  font-size: clamp(22px, 3vw, 40px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--surface-cream);
}
.studio__service-arrow{ color: rgba(245, 240, 227, 0.4); font-size: 22px; transition: color var(--dur) var(--ease), translate var(--dur) var(--ease); }
.studio__service:hover{ background: rgba(245, 240, 227, 0.05); padding-left: 14px; }
.studio__service:hover .studio__service-arrow{ color: #FC776A; translate: 4px 0; }

/* Stats */
.studio__stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.studio__stat-n{
  font-family: var(--font-serif, 'Instrument Serif', serif); font-style: italic;
  font-size: clamp(40px, 5vw, 74px); line-height: 1; color: var(--surface-cream); margin: 0 0 10px;
}
.studio__stat-l{ font-size: 13px; line-height: 1.5; color: rgba(245, 240, 227, 0.6); margin: 0; }

/* Work wall */
.studio__work-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.studio__tile{
  position: relative; display: block; overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 18px);
  aspect-ratio: 4 / 3; text-decoration: none;
  background: rgba(245, 240, 227, 0.06);
}
.studio__tile-img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.9);
  transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
}
.studio__tile:hover .studio__tile-img{ transform: scale(1.04); filter: saturate(1.1); }
.studio__tile-name{
  position: absolute; inset: auto 0 0 0;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(3, 36, 32, 0.9));
  color: var(--surface-cream); font-size: 14px; font-weight: 600; line-height: 1.35;
}
.studio__more{
  display: inline-flex; gap: 8px; margin-top: 28px;
  color: #FC776A; font-weight: 600; text-decoration: none; font-size: 15px;
}
.studio__more:hover{ color: var(--surface-cream); }

/* Close */
.studio__close{ text-align: left; padding-bottom: clamp(90px, 11vw, 160px) !important; }
.studio__h1--close{ font-size: clamp(44px, 7vw, 104px); }

@media (max-width: 900px){
  .studio__stats{ grid-template-columns: repeat(2, 1fr); }
  .studio__work-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px){
  .studio__work-grid{ grid-template-columns: 1fr; }
  .studio__service{ grid-template-columns: 40px 1fr auto; }
}
@media (prefers-reduced-motion: reduce){
  .studio__marquee-track{ animation: none; }
}

/* Screen-reader-only text (hero carousel "Read →" links). */
.sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Related services strip (internal linking, 2026-09-08) ─────────────── */
.relsvc{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 32px 0 8px; padding-top: 20px; border-top: 1px solid rgba(5,74,71,0.12); }
.relsvc__label{ font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(5,74,71,0.62); margin-right: 4px; }
.relsvc__link{ display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(5,74,71,0.07); color: var(--ink); font-size: 14px; text-decoration: none; transition: background .2s; }
.relsvc__link:hover{ background: rgba(5,74,71,0.14); }
.relsvc-wrap .relsvc, .relsvc--service{ margin: 0 auto; max-width: var(--wrap, 1200px); padding: 24px clamp(20px, 4vw, 48px) 8px; border-top: 0; }

/* ── Mobile legibility + tap targets (cross-browser audit, 2026-09-08) ─────
   10px labels and 20px-tall links were the only things the Chromium /
   Firefox / WebKit pass flagged; nothing overflowed or clipped. */
@media (max-width: 900px){
  .cs-card__pill, .cs-card__stat-label, .floating-cs__eyebrow, .floating-cs__client,
  .orbit-tile__tier, .ind-hero-stat__tag,
  .testimonials__logos .logos-band__eyebrow, .logos-band__eyebrow{ font-size: 11px !important; }
  .team-tile__name{ font-size: 12px !important; }
  .team-tile__role{ font-size: 11px !important; }
}
/* The post hero's category link is 12px text in an 18px box; pad it to a tappable height. */
.post-hero__eyebrow a{ display: inline-block; padding-top: 6px; padding-bottom: 6px; }
/* Vertical padding on inline links grows the hit box without moving text. */
.prose a, .rte a, .cstudy__facts dd a, .cstudy__meta a{ padding-top: 4px; padding-bottom: 4px; }
.crumbs__link, .site-footer__links a, .site-footer__legal a, .site-footer__office-link, .post-tags__tag{ display: inline-block; padding-top: 5px; padding-bottom: 5px; }
.site-footer__legal a{ margin-top: -5px; margin-bottom: -5px; }