: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; }
  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;
  }
  #opener-svg.kf-2 {                                       /* ← changed: lands top-left, not top-centre */
    top: 8px;
    left: var(--side);
    width: clamp(160px, 18vw, 220px);
    transform: 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, never displayed directly */
  .bg-source { 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 */
  .label::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 { 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-divider {
    width: 100%;
    border: none;
    border-top: 1px solid var(--ink);
    opacity: 0;
    margin: 0 0 32px;
    transition: opacity 0.8s var(--ease);
  }
  .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%); }
  }

  /* === The Change ======================================================== */
  .change__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 56px);
  }
  .change__quote {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 5.2vw, 72px);                        /* ← changed: bigger */
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink-on-dark);
    margin: 0;
    max-width: 22ch;
  }
  .change__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 clamp(24px, 3vw, 40px);
    align-items: start;
  }
  .change__body .label { grid-column: 1; align-self: start; padding-top: 3px; }
  .change__body p {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(245, 240, 227, 0.85);
    margin: 0;
    max-width: 52ch;
    grid-column: 2;
  }

  /* === 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);
  }
  .tilt-stage:has(.glass-card) { max-width: clamp(640px, 82vw, 1100px); }
  .tilt-stage:not(:has(.glass-card)) { width: fit-content; max-width: 100%; }

  /* 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 {
    position: relative;
    padding: clamp(48px, 7vw, 104px);
    border-radius: clamp(22px, 2.4vw, 34px);
    background: rgba(245, 240, 227, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
      0 30px 80px -24px rgba(0, 0, 0, 0.25),
      0 6px 18px -8px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
  }
  .glass-card .change__quote {
    color: var(--ink);
    text-shadow: none;
  }
  .glass-card .change__body p {
    color: var(--ink);
    text-shadow: none;
    opacity: 0.78;
  }
  .glass-card .label--on-dark {
    color: var(--ink);
    opacity: 0.55;
  }
  .glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.00) 38%,
      rgba(255, 255, 255, 0.00) 100%
    );
    opacity: 0.7;
  }

  /* Staggered text reveal — quote gets a cinematic scale+blur entrance */
  .glass-card .change__quote {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    filter: blur(6px);
    transition:
      opacity 1.0s var(--ease),
      transform 1.2s cubic-bezier(.22, .9, .25, 1),
      filter 0.8s var(--ease);
  }
  .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,
  .glass-card .change__body p {
    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-stage, .tilt-target { transition: none; transform: none; opacity: 1; }
    .glass-card .change__quote,
    .glass-card .change__body .label,
    .glass-card .change__body p { opacity: 1; transform: none; filter: none; transition: none; }
  }

  /* === The Stakes ======================================================== */
  .stakes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 8vw, 120px);
    align-items: start;
  }
  .stakes__headline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 76px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 12ch;
  }
  .stakes__cards { display: flex; flex-direction: column; gap: 28px; }
  .stakes__card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 6px 14px 24px 14px;                           /* ← changed: room for hover lift */
    margin: 0 -14px;                                       /* ← new: align text edge to grid */
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    border-radius: 8px;                                    /* ← new */
    transition:
      transform 0.45s var(--ease),
      background 0.45s var(--ease),
      border-color 0.45s var(--ease);                      /* ← new: hover transitions */
  }
  .stakes__card:hover {                                    /* ← new */
    transform: translateY(-3px);
    background: rgba(245, 240, 227, 0.55);
    border-bottom-color: rgba(5, 74, 71, 0.28);
  }
  .stakes__card:hover .stakes__num {                       /* ← new */
    color: var(--primary);
    letter-spacing: 0.08em;
  }
  .stakes__card:last-child { border-bottom: none; }
  .stakes__num {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-coral);
    letter-spacing: 0.02em;
    transition: color 0.45s var(--ease), letter-spacing 0.45s var(--ease); /* ← new */
  }
  .stakes__copy {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
  }
  @media (max-width: 900px) { .stakes__grid { grid-template-columns: 1fr; gap: 32px; } }

  /* === The Uncomfortable Truth (interstitial band) ======================== */
  .truth {
    padding: clamp(72px, 9vw, 120px) var(--side);
    text-align: center;
  }
  .truth__line {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
    max-width: 28ch;
    margin: 24px auto 0;
  }

  /* === 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); }
  }
  /* === 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 */
  .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); }
  }

  /* === 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; }
  }

  /* Scroll hint — subtle scroll indicator at top of Garden OS */       /* ← new */
  .scroll-hint {
    position: absolute;
    top: clamp(24px, 4vw, 48px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #999;                                                               /* ← changed: subtle grey */
    opacity: 0.6;                                                              /* ← changed: slightly more visible */
    z-index: 10;                                                               /* ← changed: above ::before overlay */
    animation: scroll-hint-fade 3s ease-in-out infinite;
    pointer-events: none;
  }
  .scroll-hint__text {
    font-family: var(--ff-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .scroll-hint__arrow {
    animation: scroll-hint-bob 2s ease-in-out infinite;
  }
  @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 */
  #team      { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }  /* ← changed: reduced top + bottom */
  #team::after {                                                               /* ← new: 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 */
  }
  #services  { padding-top:    clamp(24px, 3vw, 40px);        /* ← changed: tighter */
               padding-bottom: clamp(24px, 3vw, 40px); }    /* ← new */
  #work      { padding-top:    clamp(80px, 13.9vw, 200px);
               padding-bottom: clamp(24px, 3vw, 40px); }
  #contact   { padding-top:    clamp(48px, 6vw, 80px); }     /* ← new */

  /* === 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) 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; }
    .solution-card:last-child { padding-bottom: clamp(16px, 1.6vw, 20px); }
    .solutions__stack { padding: 0 0 260px; }
    .solutions__h { margin-bottom: 10px; }
    .solutions__intro { margin-bottom: 32px; }
  }

  .services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(24px, 3vw, 36px);
  }
  /* 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;
  }
  .services__h {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(48px, 6.4vw, 92px);
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 28px;
    max-width: 14ch;
  }
  .services__h em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .services__intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 60ch;
    margin: 0 0 clamp(48px, 6vw, 72px);
  }

  .services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
  }
  .service-card {
    position: relative;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: clamp(14px, 1.4vw, 20px);
    padding: clamp(22px, 2.4vw, 32px);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: clamp(200px, 18vw, 260px);
    box-shadow:
      0 10px 28px -16px rgba(5, 74, 71, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 22px 44px -18px rgba(5, 74, 71, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }
  .service-card__title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--primary);
    margin: 0;
  }
  .service-card__copy {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(26, 26, 26, 0.74);
    margin: 0;
    flex: 1;
    padding-right: 48px;            /* leave room for arrow button */
  }
  .service-card__arrow {
    position: absolute;
    right: clamp(18px, 1.8vw, 24px);
    bottom: clamp(18px, 1.8vw, 24px);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tertiary);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition:
      background 0.3s var(--ease),
      color 0.3s var(--ease),
      transform 0.3s var(--ease);
  }
  .service-card:hover .service-card__arrow {
    background: var(--primary);
    color: var(--tertiary);
    transform: translate(2px, -2px);
  }
  @media (max-width: 1100px) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .services__grid { grid-template-columns: 1fr; }
    .service-card { min-height: 0; }
  }

  /* ── 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);
  }
  .work-card__tag {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-coral);
    margin: 0;
  }
  .work-card__metric {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .work-card__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(56px, 6vw, 84px);
    line-height: 0.9;
    color: var(--primary);
    letter-spacing: -0.03em;
  }
  .work-card__copy {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(26, 26, 26, 0.78);
    margin: 0;
    flex: 1;
  }
  .work-card__brand {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
  }
  @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);
  }
  .sol-cs-card {
    position: relative;
    border-radius: clamp(7px, 0.7vw, 10px);
    overflow: hidden;
    aspect-ratio: 630 / 528;
    display: block;
    text-decoration: none;
  }
  .sol-cs-card__photo {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s var(--ease);
    display: block;
  }
  .sol-cs-card:hover .sol-cs-card__photo { transform: scale(1.04); }
  .sol-cs-card--dark-glass::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 26%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
  }
  .sol-cs-card__metric {
    position: absolute;
    bottom: clamp(10px, 1.4vw, 20px);
    left: clamp(10px, 1.4vw, 20px);
    right: clamp(10px, 1.4vw, 20px);
    z-index: 2;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    padding: clamp(12px, 1.5vw, 20px) clamp(12px, 1.4vw, 20px);
    gap: clamp(10px, 1.4vw, 20px);
    height: clamp(110px, 13.5vw, 195px);
    overflow: hidden;
  }
  .sol-cs-card--dark-glass .sol-cs-card__metric {
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.5);
  }
  .sol-cs-card--mint .sol-cs-card__metric    { background: #D4F2DE; }
  .sol-cs-card--white .sol-cs-card__metric   { background: #FFFFFF; }
  .sol-cs-card--dkgreen .sol-cs-card__metric { background: #054A47; }
  .sol-cs-card__logo {
    height: clamp(44px, 4.5vw, 68px);
    width: auto; max-width: 100%;
    display: block; object-fit: contain;
  }
  .sol-cs-card--dark-glass .sol-cs-card__logo,
  .sol-cs-card--dkgreen .sol-cs-card__logo { filter: brightness(0) invert(1); }
  .sol-cs-card__divider { align-self: stretch; }
  .sol-cs-card--dark-glass .sol-cs-card__divider,
  .sol-cs-card--dkgreen .sol-cs-card__divider { background: rgba(255,255,255,0.5); }
  .sol-cs-card--mint .sol-cs-card__divider,
  .sol-cs-card--white .sol-cs-card__divider  { background: rgba(5,74,71,0.3); }
  .sol-cs-card__stat {
    font-family: var(--font-sans); font-weight: 700;
    font-size: clamp(22px, 4.86vw, 70px); line-height: 1;
    display: block;
  }
  .sol-cs-card__stat-label {
    font-family: var(--font-sans); font-weight: 700;
    font-size: clamp(9px, 1vw, 14px); line-height: 1.4;
    display: block; margin-top: clamp(3px, 0.4vw, 6px);
  }
  .sol-cs-card--dark-glass .sol-cs-card__stat,
  .sol-cs-card--dark-glass .sol-cs-card__stat-label,
  .sol-cs-card--dkgreen .sol-cs-card__stat,
  .sol-cs-card--dkgreen .sol-cs-card__stat-label { color: var(--ink-on-dark); }
  .sol-cs-card--mint .sol-cs-card__stat,
  .sol-cs-card--mint .sol-cs-card__stat-label,
  .sol-cs-card--white .sol-cs-card__stat,
  .sol-cs-card--white .sol-cs-card__stat-label { color: var(--ink); }
  @media (max-width: 720px) {
    .sol-cs-grid { grid-template-columns: 1fr; }
    .sol-cs-card { aspect-ratio: 4/3; }
  }

  /* === Case study cards (shared: work.html + home #work) ======= */
  .wrk-cs-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px);
  }
  .wrk-cs-card {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: visible;
  }
  .wrk-cs-card__photo-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 21 / 8;
    border-radius: clamp(12px, 1.2vw, 20px);
    background: #fff;
    box-shadow: 0 2px 20px -6px rgba(5, 74, 71, 0.10), 0 1px 4px -2px rgba(5, 74, 71, 0.06);
    transition: box-shadow 0.5s var(--ease);
  }
  .wrk-cs-card:hover .wrk-cs-card__photo-wrap {
    box-shadow: 0 16px 48px -12px rgba(5, 74, 71, 0.18), 0 2px 8px -2px rgba(5, 74, 71, 0.08);
  }
  .wrk-cs-card__photo {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.9s var(--ease);
  }
  .wrk-cs-card:hover .wrk-cs-card__photo { transform: scale(1.03); }
  .wrk-cs-card__panel {
    position: absolute;
    bottom: clamp(16px, 2vw, 20px);
    left: clamp(16px, 2vw, 20px);
    right: clamp(16px, 2vw, 20px);
    display: flex;
    align-items: stretch;
    min-height: clamp(150px, 15.3vw, 196px);
    padding: clamp(22px, 2.4vw, 32px) clamp(26px, 2.8vw, 40px);
    background: #fff;
    border-radius: clamp(6px, 0.8vw, 10px);
    gap: 0;
  }
  .wrk-cs-card__brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: clamp(16px, 2vw, 28px);
  }
  .wrk-cs-card__logo {
    height: clamp(26px, 2.6vw, 38px);
    width: auto; max-width: 170px;
    object-fit: contain;
    display: block;
  }
  .wrk-cs-card--wv .wrk-cs-card__logo {
    height: clamp(34px, 3.4vw, 44px);
    filter: brightness(0) saturate(100%) invert(20%) sepia(65%) saturate(800%) hue-rotate(131deg) brightness(95%);
  }
  .wrk-cs-card--au .wrk-cs-card__logo {
    height: clamp(44px, 4.4vw, 58px);
    max-width: 220px;
  }
  .wrk-cs-card--lc .wrk-cs-card__logo {
    height: clamp(40px, 4vw, 52px);
    max-width: 230px;
  }
  .wrk-cs-card__expand-btn { display: none; }
  .wrk-cs-card__tagline {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
  }
  .wrk-cs-card__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(5, 74, 71, 0.3);
    flex-shrink: 0;
    margin: 0 clamp(20px, 2.5vw, 32px);
  }
  .wrk-cs-card__metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .wrk-cs-card__stat {
    display: block;
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(48px, 4.9vw, 70px); line-height: 1;
    letter-spacing: -0.03em; color: var(--ink);
    margin: 0;
  }
  .wrk-cs-card__stat-label {
    display: block;
    font-family: var(--sans); font-size: 16px;
    font-weight: 700; line-height: 1.4;
    color: var(--ink);
    max-width: 30ch;
    margin: clamp(12px, 1.5vw, 20px) 0 0 0;
  }
  @media (max-width: 860px) {
    .wrk-cs-grid { gap: clamp(32px, 5vw, 48px); }
    .wrk-cs-card__photo-wrap { aspect-ratio: 16 / 9; }
    .wrk-cs-card__panel { position: static; flex-wrap: wrap; min-height: 0; padding: clamp(16px, 3vw, 24px); }
    .wrk-cs-card__brand { flex: 0 0 100%; padding-right: 0; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(5,74,71,0.15); }
    .wrk-cs-card__logo { display: block; margin: 0 auto 14px; }
    .wrk-cs-card__divider { display: none; }
    .wrk-cs-card__metric { flex: 0 0 50%; padding: 12px 0; }
    .wrk-cs-card__stat { font-size: clamp(40px, 9vw, 56px); }
    .wrk-cs-card__metric--extra { display: none; }
    .wrk-cs-card--expanded .wrk-cs-card__metric--extra { display: flex; flex: 0 0 50%; }
    .wrk-cs-card__expand-btn {
      display: flex; align-items: center; flex: 0 0 100%;
      background: none; border: none; cursor: pointer;
      color: var(--primary); font-family: var(--font-sans);
      font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
      padding: 14px 0 2px; gap: 6px;
    }
    .wrk-cs-card--expanded .wrk-cs-card__expand-btn { display: none; }
  }
  @media (max-width: 480px) {
    .wrk-cs-card__metric { flex: 0 0 100%; }
    .wrk-cs-card--expanded .wrk-cs-card__metric--extra { flex: 0 0 100%; }
  }

  .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;
  }
  .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) {
    .nav__cta { max-width: 120px; font-size: 14px; padding: 10px 16px; }
  }

  /* === 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;
  }
  .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); }

  /* === Result card — bottom-right teaser ================================== */
  .result-card {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(240px, 26vw, 320px);
    background: #fffdf7;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(5, 74, 71, 0.06), 0 0 0 1px rgba(5, 74, 71, 0.06);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: 0.2s;
  }
  body.hero-done .result-card {
    opacity: 1;
    transform: translateY(0);
  }
  .result-card__photo {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 72px;
    background: var(--surface-mint);
  }
  .result-card__photo img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .result-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
  .result-card__stat {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
    font-weight: 500;
  }
  .result-card__stat em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--secondary);
  }
  .result-card__client {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* === Decorative squares (small, very sparing) =========================== */
  .deco-square {
    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;
  }
  .deco-square--1 { top: 32%; right: 6%; animation-delay: 1.3s; }
  .deco-square--2 { top: 84%; right: 28%; background: var(--tertiary-soft); animation-delay: 1.5s; width: 22px; height: 22px; }
  .deco-square--3 { top: 22%; right: 38%; background: var(--tertiary-soft); animation-delay: 1.7s; width: 10px; height: 10px; }

  /* === 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; }
    .result-card { width: 80vw; }
  }
  @media (max-width: 560px) {
    .hero__col-r { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__eyebrow,
    .hero__body,
    .hero__accent,
    .result-card,
    .deco-square,
    .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, right edge ================== */  /* ← changed */
  .section-progress {
    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 {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(153, 153, 153, 0.25);
    transition: background 0.4s, transform 0.4s;
    cursor: pointer;
  }
  .section-progress__dot.is-active {
    background: #999;
    transform: scale(1.6);
  }
  .section-progress__dot.is-past {
    background: rgba(153, 153, 153, 0.45);
  }
  @media (max-width: 900px) {
    .section-progress { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .section-progress__dot { transition: none; }
  }
  /* === 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;
    padding: 0 clamp(32px, 6vw, 80px);
    will-change: transform;
    /* Motion is JS-driven: dwell-and-step pattern (hold each card at viewport
       centre for ~5.5s, then 0.7s sharp slide to the next). See <script>. */
  }

  /* 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);
    padding: clamp(28px, 4vw, 56px) 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 */;
  }
  /* 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 {
    background: var(--surface-mint, #D4F2DE);
    color: var(--ink);
  }
  .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);
  }
  .site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1fr 1fr;
    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;
  }
  @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: 32vw;
      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); }