/* Self-hosted Google Fonts (latin subsets) - PERFORMANCE-REPORT.md Fix B.
   font-display: swap keeps text visible; the loader still waits for Anton via
   document.fonts.load(), which now resolves from the local file. */
@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bowlby One';
  src: url('/fonts/bowlbyone-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

    /* ============================================================
       RESET & TOKENS
    ============================================================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* Blood red ground with cream type (9.6:1 — readable at any size). The
         artboard's red-orange (#EA412E) was swapped for blood red by choice.
         Ink is only for text on cream fields/cards: on this red it's 1.9:1. */
      --chunk-red:   #8A0303;
      --chunk-cream: #FEF9F3;
      --chunk-ink:   #1B0906;
      --bg:        #0c0c0c;
      --surface:   #131313;
      --surface2:  #1a1a1a;
      --white:     #ffffff;
      --cream:     #f0ede8;
      --muted:     rgba(255,255,255,0.48);
      --border:    rgba(255,255,255,0.08);
      --border-h:  rgba(255,255,255,0.2);
      --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
      /* Contact CTA — the one warm accent in an otherwise monochrome palette.
         Defined once so the desktop pill and the mobile button can't drift. */
      --cta-yellow: #f7b733;
    }

    html {
      font-size: 16px;
      background: var(--bg);
      overscroll-behavior: none;
      scrollbar-gutter: stable;
      overflow-x: clip;   /* kill horizontal pan at the ROOT (body-only clipping leaks on mobile) */
      max-width: 100%;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
      color: var(--white);
      overflow-x: clip;
      max-width: 100%;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    ::selection { background: rgba(240,237,232,0.2); color: #fff; }
    a { text-decoration: none; color: inherit; }
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* ============================================================
       NAV
    ============================================================ */
    /* ── Outer nav bar — full width, transparent, just holds layout ── */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 900;
      padding: 1.1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: none;
      border-bottom: none;
      pointer-events: none; /* let clicks through to hero; children re-enable */
    }

    #nav > * { pointer-events: auto; }

    /* ── Logo ── */
    .nav-brand {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .nav-brand img {
      height: 44px;
      width: auto;
      display: block;
      content: url('/logo/okcr-colour.png');
      transition: content 0s;
    }
    /* The colour logo is red and vanishes over the blood-red contact section,
       so it swaps to the white one while that's behind it. */
    #nav.nav--on-red .nav-brand img { content: url('/logo/okcr-white.png'); }

    @font-face {
      font-family: 'Havana';
      src: url('/fonts/Havana.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Austrisa';
      src: url('/fonts/Austrisa.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* ── Right-side pill capsule — always visible ── */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 0;
      /* dark pill capsule */
      background: rgba(22, 22, 22, 0.96);   /* solid — Safari smears a backdrop-filter pill while scrolling */
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 100px;
      padding: 5px;
      box-shadow: 0 4px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    /* individual pill items */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
    }

    .nav-links li a {
      display: inline-flex;
      align-items: center;
      padding: 0.45rem 1.1rem;
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }

    .nav-links li a:hover {
      background: rgba(255,255,255,0.1);
      color: #fff;
    }

    /* active pill — white filled */
    .nav-links li.active > a,
    .nav-links li a.active {
      background: #fff;
      color: #000;
    }

    /* CTA sits as last pill in the capsule — filled accent */
    .nav-cta {
      display: inline-flex;
      align-items: center;
      padding: 0.45rem 1.2rem;
      background: #fff;
      border-radius: 100px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #000;
      border: none;
      margin-left: 2px;
      transition: background 0.2s, color 0.2s, transform 0.2s;
      white-space: nowrap;
    }

    .nav-cta:hover {
      background: var(--cream);
      transform: scale(1.04);
    }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--white);
      transition: transform 0.25s var(--ease), opacity 0.2s;
      border-radius: 2px;
    }

    /* ============================================================
       MOBILE NAV PANEL — fullscreen overlay
    ============================================================ */
    #mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(8,8,8,0.98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.28s ease, transform 0.28s ease;
      pointer-events: none;
      overflow: hidden;
    }

    body.nav-open #mobile-nav {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    #mobile-nav ul {
      list-style: none;
      padding: 0;
      text-align: center;
      width: 100%;
    }

    #mobile-nav ul li { overflow: hidden; }

    #mobile-nav ul a {
      display: block;
      font-size: clamp(2rem, 10vw, 3rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      padding: 0.45rem 2rem;
      transition: color 0.2s;
    }

    #mobile-nav ul a:active,
    #mobile-nav ul a:hover { color: #fff; }

    #mobile-nav .mob-cta {
      display: inline-block;
      margin-top: 2.5rem;
      padding: 0.85rem 2.5rem;
      background: var(--cta-yellow);
      border-radius: 100px;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #000;
      border: none;
      transition: filter 0.2s, transform 0.2s;
    }

    #mobile-nav .mob-cta:hover { filter: brightness(1.08); transform: scale(1.04); }

    /* Hamburger — dark pill so it's visible against any background */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px 10px;
      background: rgba(0,0,0,0.5);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 1000; /* always above the overlay */
      position: relative;
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--white);
      transition: transform 0.25s var(--ease), opacity 0.2s;
      border-radius: 2px;
    }

    body.nav-open #hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    body.nav-open #hamburger span:nth-child(2) { opacity: 0; }
    body.nav-open #hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* ============================================================
       HERO
    ============================================================ */
    #hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 560px;
      overflow: hidden;
      background: #0c0c0c;
    }

    /* Hero loader (see markup): the hero is blurred and veiled while it
       finishes, with three dots pulsing over it. */
    #hero-loader {
      position: absolute; inset: 0; z-index: 9;
      /* upper part of the hero: the chat's pop-up opens over the middle */
      display: flex; align-items: flex-start; justify-content: center;
      padding-top: 17vh;
      /* No backdrop-filter: blurring the LIVE scene behind (the WebGL eye
         re-renders every frame) made the GPU redo the blur constantly, which
         is what stuttered. The blur is applied once to the hero's still
         poster instead (#hero.hero--loading below), and this veil is a plain
         tint that fades on the compositor. */
      background: rgba(0,0,0,.45);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .8s;
      will-change: opacity;
    }
    #hero-loader.on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
    /* while a hero is still loading its still frame is shown soft-focused;
       it stays blurred underneath while the live hero cross-fades over it */
    #hero.hero--loading .hg-poster { filter: blur(18px); }
    #hero.hero--loading .hero-fallback { filter: blur(18px); }
    /* the live hero layers fade on the compositor */
    .hg-live, .hf-live, .hl-live, .hero-formula iframe { will-change: opacity; }
    /* Three BIG dots, no text, jumping in a wave. Sized off one font-size so
       dot, gap and jump height stay in proportion. */
    .hl-dots {
      display: flex; align-items: flex-end; gap: .55em;
      font-size: min(13vw, 10vh);              /* phones: ~49px dots */
    }
    @media (min-width: 769px) { .hl-dots { font-size: min(5.2vw, 9.5vh); } }
    .hl-dots i {
      width: 1em; height: 1em; border-radius: 50%; background: #f7b733;
      animation: hl-dot 1.1s ease-in-out infinite both;
    }
    .hl-dots i:nth-child(2) { animation-delay: .15s; }
    .hl-dots i:nth-child(3) { animation-delay: .3s; }
    @keyframes hl-dot {
      0%, 70%, 100% { transform: translateY(0); }
      35%           { transform: translateY(-.95em); }
    }
    @media (prefers-reduced-motion: reduce) { .hl-dots i { animation: none; } }

    /* The "Ignite 10X productivity" circle sits ON the hero's bottom edge, half over
       the hero, half over the page: the hero cedes half the circle so the whole
       circle lands inside the first screen. --vk-d is the circle's diameter.
       (Mobile equivalent lives in the mobile media query further below.) */
    :root { --vk-w: min(380px, 88vw); --vk-d: calc(var(--vk-w) * 0.6053); --vk-in: calc(var(--vk-d) * 0.08); }
    :root { --vk-d: 112px; --vk-bw: 172px; --vk-bh: 42px; --vk-jog: 26px; --vk-gap: 9px; }   /* folder-tab card (was a 92px strip) */   /* a thin strip across the hero's bottom edge (overrides the card sizes above) */
    @media (min-width: 769px) { :root { --vk-d: 120px; --vk-bw: 280px; --vk-bh: 50px; } }   /* desktop + tablet: twice as wide, same height */   /* --vk-d is now the card's HEIGHT (380 x 230) */   /* --vk-in: how far the circle cuts into the hero */
    @media (min-width: 769px) {
      #hero { height: calc(100vh - var(--vk-d) + var(--vk-in)); }
    }

    /* Scroll cue — frosted circle with a bobbing chevron, bottom-right of the
       hero. Colours flip per hero variant (dark reel vs white golden stage). */
    .hero-scroll-cue {
      position: absolute;
      right: 42px;
      bottom: 44px;
      z-index: 20;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      cursor: pointer;
      color: rgba(255,255,255,0.85);
      background: rgba(12,12,14,0.35);
      border: 1.5px solid rgba(255,255,255,0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.2s, background 0.2s, border-color 0.2s;
    }
    .hero-scroll-cue svg { width: 20px; height: 20px; animation: cueBob 2.4s ease-in-out infinite; }
    .hero-scroll-cue:hover { transform: scale(1.12); background: rgba(12,12,14,0.55); border-color: rgba(255,255,255,0.7); }
    #hero.hero--golden .hero-scroll-cue {
      color: #0c0c0c;
      background: rgba(255,255,255,0.4);
      border-color: rgba(12,12,12,0.4);
    }
    #hero.hero--golden .hero-scroll-cue:hover { background: rgba(255,255,255,0.75); border-color: #0c0c0c; }
    @keyframes cueBob {
      0%, 100% { transform: translateY(-2px); }
      50%      { transform: translateY(4px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-scroll-cue svg { animation: none; }
    }
    @media (max-width: 768px) {
      .hero-scroll-cue { right: 16px; bottom: 96px; width: 42px; height: 42px; }
    }

    /* Canvas fills hero — frames loop automatically */
    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Alternate hero: golden armillary logo. Hidden by default; JS shows it on
       golden days. Poster and live iframe are stacked 640×640 boxes, centered
       absolutely and scaled together via --hg-k (set by JS to fit the hero);
       the iframe cross-fades over the poster once the WebGL scene is ready. */
    .hero-golden {
      position: absolute;
      inset: 0;
      display: none;
      pointer-events: none;
    }
    .hero-golden .hg-item {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 640px;
      height: 640px;
      max-width: none;   /* beat any global max-width:100% clamp */
      border: 0;
      background: transparent;
      transform: translate(-50%, -50%) scale(var(--hg-k, 1));
    }
    .hero-golden .hg-live {
      opacity: 0;
      transition: opacity 0.7s ease;
    }
    .hero-golden.hg-ready .hg-live { opacity: 1; }
    .hero-golden.hg-ready .hg-poster { opacity: 0; transition: opacity 0.7s ease; }

    /* Big-rings variant: the emblem is responsive, so it fills the hero at the
       real viewport aspect (no fixed-square + transform scale) — rings bleed off
       every edge on any screen while the eye keeps its size. */
    .hero-golden.hg-cover .hg-item {
      left: 0; top: 0; width: 100%; height: 100%;
      transform: none;
    }
    /* Poster is a square capture of the scene's central square; the live scene
       keeps a fixed VERTICAL field of view, so scaling the poster by height
       (centred) makes it pixel-align with the live emblem on any aspect —
       wide screens briefly show white at the far sides until the live rings
       fade in there; tall screens crop the sides exactly like the live view. */
    .hero-golden.hg-cover .hg-poster {
      width: auto;
      height: 100%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }

    /* Frost-poster day. The poster HTML letterboxes itself to 16:9 on its own
       dark stage, so the layer just fills the hero and lets it letterbox. */
    .hero-frost {
      position: absolute;
      inset: 0;
      display: none;
      /* The poster is now purely ambient — the sponge wipe was removed — so it
         takes no pointer input and shouldn't sit in front of the page swallowing
         scroll and clicks. */
      pointer-events: none;
    }
    .hero-frost .hf-live {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      border: 0;
      background: transparent;
      opacity: 0;
      transition: opacity 0.7s ease;
    }
    .hero-frost.hf-ready .hf-live { opacity: 1; }

    /* Flesh-and-Spirit day: a three-plate crossfade with its own type. Iframed
       like the frost and note plates — it runs its own timeline, so isolating
       it keeps that clock out of the host page. */
    .hero-flesh {
      position: absolute;
      inset: 0;
      display: none;
      pointer-events: none;
    }
    .hero-flesh .hl-live {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      border: 0;
      background: transparent;
      opacity: 0;
      transition: opacity 0.7s ease;
      /* .hero-flesh itself stays pointer-events:none (it's a non-interactive
         background layer everywhere else in the rotation) — re-enabled only on
         this one iframe, whose only clickable content is the "Study N" credit
         line, now a real link to the YouTube channel the AI stills come from. */
      pointer-events: auto;
    }
    .hero-flesh.hl-ready .hl-live { opacity: 1; }
    /* .hero-content is the SEO <h1> block: z-index 10, pointer-events auto,
       and it spans the whole hero — so it swallowed every click before the
       iframe beneath could see one, which made the credit link unreachable.
       It holds no interactive children of its own (checked: zero links,
       buttons or handlers inside), so switching it off costs nothing. The
       scroll cue is a sibling, not a child, so it keeps working. Scoped to
       flesh days only — the other heroes have no reason to change. */
    #hero.hero--flesh .hero-content { pointer-events: none; }
    /* the plates carry their own scrim and vignette — don't double them */
    #hero.hero--flesh .hero-fallback { display: none; }
    #hero.hero--flesh .hero-overlay { display: none; }

    /* Burger day. Embedded DIRECTLY, not through an iframe like the frost and
       note plates: those are canvas apps that need their own document, whereas
       this hero is one <video> and a vignette. Inlining it skips a document,
       skips the nested-100vh problem entirely, and lets the browser manage
       buffering and decode natively. */
    .hero-burger {
      position: absolute;
      inset: 0;
      display: none;
      pointer-events: none;
    }
    .hero-burger video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* biased off-centre so the burger holds frame as the viewport shortens */
      object-fit: cover;
      object-position: 50% 42%;
      display: block;
      opacity: 0;
      transition: opacity 0.7s ease;
    }
    .hero-burger.hb-ready video { opacity: 1; }
    .hero-burger .hb-vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(120% 95% at 50% 40%, transparent 55%, rgba(10,6,10,.34) 86%, rgba(6,3,6,.62) 100%),
        linear-gradient(to bottom, rgba(8,4,8,.20) 0%, transparent 16%, transparent 80%, rgba(8,4,8,.30) 100%);
    }
    /* the clip carries its own vignette and dark ground — don't double them */
    #hero.hero--burger .hero-fallback { display: none; }
    #hero.hero--burger .hero-overlay { display: none; }


    /* Seventh variation: the Handler. Same shape as the burger layer — the
       clip carries its own DOF and grade, so the page only adds the weather
       and the lens character on top. */
    /* Formula EX: slant-wipe reel in an embedded page. Same shape as the flesh
       layer — the iframe carries its own grade, scanlines and vignette, so the
       host must not add a second set on top. */
    .hero-formula { position: absolute; inset: 0; display: none; pointer-events: none; }
    .hero-formula iframe {
      position: absolute; inset: 0; width: 100%; height: 100%;
      border: 0; display: block; opacity: 0; transition: opacity .7s ease;
      /* The layer stays pointer-events:none (it is a background everywhere
         else); re-enabled on the iframe alone, whose one clickable child is the
         Watch Now button. */
      pointer-events: auto;
    }
    .hero-formula.hfx-ready iframe { opacity: 1; }
    /* .hero-content is the SEO <h1> block — z-index 10, pointer-events auto,
       spanning the whole hero — so it swallows every click before the iframe
       beneath sees one. It holds no interactive children, so switching it off
       costs nothing. Scoped to formula days, exactly as the flesh hero does. */
    #hero.hero--formula .hero-content { pointer-events: none; }
    #hero.hero--formula .hero-fallback { display: none; }
    #hero.hero--formula .hero-overlay { display: none; }

    /* the poster carries its own dark stage — kill the gradient so it isn't double-darkened */
    #hero.hero--frost .hero-fallback { display: none; }
    #hero.hero--frost .hero-overlay { display: none; }

    /* Golden day: white studio backdrop behind the emblem. The dark gradient
       overlay would tint it, so it swaps to a soft vignette that frames the
       emblem; faint-white social icons flip dark. */
    #hero.hero--golden { background: #fff; }
    #hero.hero--golden .hero-fallback { display: none; }

    /* Golden hero: clean white stage, no vignette — depth is real (in-scene
       camera depth-of-field inside the emblem), not an overlay effect. */
    #hero.hero--golden .hero-overlay { display: none; }

    /* Fallback gradient shown while frames load (or if no frames) */
    .hero-fallback {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 60% 40%, rgba(40,35,30,0.9) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 30% 70%, rgba(20,18,15,0.6) 0%, transparent 60%),
        linear-gradient(135deg, #111 0%, #0c0c0c 100%);
    }

    /* Gradient overlay on canvas */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top,  rgba(12,12,12,0.85) 0%, rgba(12,12,12,0.35) 40%, transparent 75%),
        linear-gradient(to right, rgba(12,12,12,0.4) 0%, transparent 60%);
    }

    .hero-content {
      position: relative;
      z-index: 10;
      height: 100%;
      display: flex;
      padding: 0 3.5rem 3.5rem;
      flex-direction: column;
      justify-content: flex-end;
    }


    .hero-title {
      font-size: clamp(2.8rem, 7vw, 6rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 0.95;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }

    .hero-title em {
      font-style: normal;
      color: var(--cream);
    }

    .hero-title .red-grad {
      background: linear-gradient(90deg, #ff2020 0%, #ff6020 60%, #ff2060 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-title .days-line {
      font-size: 0.45em;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      display: block;
      margin-top: 0.3em;
    }

    .hero-desc-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
    }

    .hero-desc {
      max-width: 380px;
      font-size: 0.95rem;
      font-weight: 400;
      color: rgba(255,255,255,0.65);
      line-height: 1.65;
    }

    /* ── Nav pill — absolute inside hero, scrolls with page ── */
    /* ── Dock ──
       Owns the one position (bottom-anchored through the hero, pinned to the
       viewport top once scrolled past it) for BOTH the pill and the
       conversation, as a plain flex column — log first in the markup, pill
       second, so the input bar can never end up above the history:
       bottom-anchored, the box grows upward (the pill stays at the anchor,
       the log builds above it); pinned, it grows downward from the top (the
       log renders first, the pill lands right under it). No per-state CSS
       flip, no JS height math — flow order does the work either way. */
    .pill-dock {
      position: absolute;
      bottom: calc(var(--vk-in) + 26px);   /* rests just above the circle on the hero's edge */
      left: 50%;
      transform: translateX(-50%);
      z-index: 950;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: max-content;
      /* no transition — it should feel like it's nailed to the page */
    }

    /* Desktop: the bar is LONGER (393px → 600px with Pay added and larger type), same height and type
       size. The question box's input simply takes the extra room; the menu
       items spread edge to edge — first link against the left end, Chat
       against the right, the rest evenly spaced between. */
    @media (min-width: 769px) {
      .hero-nav-pill { min-width: 600px; }   /* bigger, bolder type + Pay: five items keep ~28px gaps */
      .pill-menu { justify-content: space-between; }
      /* the links' list steps aside so all four items (3 links + Chat) are
         spaced by the same rule */
      .pill-menu .hero-nav-links { display: contents; }
    }
    /* narrow phones (≤ 380px): same bold type, a touch smaller so the five
       items still have breathing room */
    @media (max-width: 380px) {
      /* .pill-dock prefix: out-ranks the ≤768px rules further down the file */
      .pill-dock .hero-nav-links li a { padding: 0.5rem 0.38rem; font-size: 0.68rem; letter-spacing: 0.02em; }
      .pill-dock .hero-nav-cta { padding: 0.5rem 0.55rem; font-size: 0.68rem; letter-spacing: 0.02em; }
    }

    /* Once scroll catches it, locks to top of viewport */
    .pill-dock.pinned {
      position: fixed;
      bottom: auto;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
    }

    .hero-nav-pill {
      display: grid;          /* question box and menu share one cell — see .pill-ask / .pill-menu */
      align-items: center;
      gap: 0;
      width: max-content;
      background: rgba(12, 12, 14, 0.9);   /* solid — Safari smears a backdrop-filter pill while scrolling */
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 100px;
      padding: 5px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
      flex: none;
    }

    /* ── Question box ⇄ menu ──
       Stacked in the same grid cell so the pill is always as wide as the wider
       of the two and swapping them never changes its size. The hidden layer
       keeps its box but is invisible and unclickable. */
    .pill-ask, .pill-menu {
      grid-area: 1 / 1;
      transition: opacity .38s cubic-bezier(.2,.8,.2,1), transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s;
    }
    .pill-menu { display: flex; align-items: center; }
    .hero-nav-pill.is-asking .pill-menu,
    .hero-nav-pill:not(.is-asking) .pill-ask {
      opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px) scale(.97);
    }
    .hero-nav-pill.is-asking .pill-ask,
    .hero-nav-pill:not(.is-asking) .pill-menu {
      transition-delay: .06s, .06s, 0s;
    }

    .pill-ask { display: flex; align-items: center; gap: .55rem; padding-left: .85rem; min-width: 0; }
    .pill-ask-spark { width: 16px; height: 16px; flex: none; color: var(--cta-yellow); }
    .pill-ask-field { position: relative; display: flex; flex: 1; min-width: 0; }
    /* The prompt, wiped in from the left on each change. */
    .pill-ask-ghost {
      position: absolute; inset: 0; display: none; align-items: center;
      pointer-events: none; white-space: nowrap; overflow: hidden;
      font-size: .9rem; color: rgba(255,255,255,.58);
    }
    .pill-ask-ghost.on { display: flex; }
    /* NOT called "reveal": the page already uses that class for its scroll-in
       animation, which starts at opacity 0 — borrowing the name made the prompt
       invisible. */
    .pill-ask-ghost.prompt-wipe { animation: promptWipe .5s ease forwards; }
    @keyframes promptWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @media (prefers-reduced-motion: reduce) { .pill-ask-ghost.prompt-wipe { animation: none; } }
    .pill-ask input[type="text"]:not(.pill-ask-hp) {
      flex: 1; min-width: 0; height: 2.2rem;
      background: transparent; border: 0; outline: 0;
      color: #fff; font: inherit; font-size: .9rem; letter-spacing: .01em;
    }
    .pill-ask input::placeholder { color: rgba(255,255,255,.58); }
    .pill-ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
    .pill-ask-send {
      flex: none; width: 2.2rem; height: 2.2rem; border-radius: 100px; border: 0; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--cta-yellow); color: #0c0c0c;
      transition: transform .2s, filter .2s, opacity .2s;
    }
    .pill-ask-send svg { width: 16px; height: 16px; }
    .pill-ask-send:hover { transform: scale(1.06); filter: brightness(1.06); }
    .pill-ask-send:disabled { opacity: .45; cursor: default; transform: none; }
    .hero-nav-pill.is-asking:focus-within { border-color: rgba(255,255,255,.3); }

    /* Conversation: a normal flow child of .pill-dock, always first — see the
       dock comment above for why that keeps it above the pill either way.
       Solid-ish background rather than its own backdrop-filter: a
       backdrop-filter nested inside the pill's would only blur the pill, not
       the page behind. */
    .pill-chat {
      width: min(420px, calc(100vw - 2rem));
      background: rgba(14,14,16,.94); border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.55);
      overflow: hidden; text-align: left;
      animation: pillChatIn .28s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes pillChatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .pill-chat-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: .7rem .8rem .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
      font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
    }
    /* Chat toggle — sits where Contact Me was and reuses its .hero-nav-cta look
       (including the small-screen paddings); these are only the <button> resets
       and the icon/dot. */
    .pill-chat-toggle { position: relative; gap: .4em; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
    .pill-chat-toggle-icon { width: 1.15em; height: 1.15em; flex: none; }
    .pill-chat-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    /* A conversation is waiting to be picked up again. */
    .pill-chat-dot {
      position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%;
      background: #e10600; box-shadow: 0 0 0 2px rgba(12,12,14,.9);
    }
    .pill-chat-dot.is-new { animation: pillDotPing 1.4s ease-out 3; }
    @keyframes pillDotPing { 0% { box-shadow: 0 0 0 2px rgba(12,12,14,.9), 0 0 0 0 rgba(225,6,0,.7); } 100% { box-shadow: 0 0 0 2px rgba(12,12,14,.9), 0 0 0 10px rgba(225,6,0,0); } }

    /* Buttons under a reply: an action for where the reply sent them
       ("Open payment form") or starter questions in an empty conversation. */
    .pill-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; max-width: 100%; }
    .pill-action {
      display: inline-flex; align-items: center; gap: .35em;
      padding: .45rem .8rem; border-radius: 100px; cursor: pointer;
      font: inherit; font-size: .78rem; font-weight: 700; line-height: 1.2; text-align: left;
      transition: background .2s, transform .2s, border-color .2s;
    }
    .pill-action--go { background: var(--cta-yellow); color: #0c0c0c; border: 0; }
    .pill-action--go:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .pill-action--ask { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.22); font-weight: 600; }
    .pill-action--ask:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
    .pill-action:disabled { opacity: .5; cursor: default; transform: none; }
    .pill-faq-label {
      margin: .2rem 0 -.1rem; align-self: flex-start;
      font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
    /* "Tick what you need" price picker inside the conversation. */
    .pill-picker {
      align-self: stretch; padding: .75rem .8rem .8rem; border-radius: 14px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    }
    .pill-picker-group { margin: .1rem 0 .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
    .pill-picker-group:not(:first-child) { margin-top: .7rem; }
    .pill-picker-group em { font-style: normal; color: var(--cta-yellow); letter-spacing: .04em; text-transform: none; }
    .pill-pick {
      display: flex; align-items: center; gap: .6rem; padding: .42rem .5rem; border-radius: 10px;
      font-size: .84rem; line-height: 1.3; color: #eee; cursor: pointer;
    }
    .pill-pick:hover { background: rgba(255,255,255,.06); }
    .pill-pick input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
      border: 1.5px solid rgba(255,255,255,.45); border-radius: 5px; background: transparent; cursor: pointer; display: grid; place-content: center; }
    .pill-pick input:checked { background: var(--cta-yellow); border-color: var(--cta-yellow); }
    .pill-pick input:checked::after { content: ''; width: 5px; height: 9px; border: solid #0c0c0c; border-width: 0 2px 2px 0; transform: translate(0,-1px) rotate(45deg); }
    .pill-pick input:focus-visible { outline: 2px solid var(--cta-yellow); outline-offset: 2px; }
    .pill-pick span { flex: 1; }
    .pill-pick small { color: rgba(255,255,255,.5); font-size: .74rem; white-space: nowrap; }
    .pill-picker .pill-action--go { margin-top: .75rem; }
    /* running total of what's ticked */
    .pill-tally {
      margin: .7rem 0 0; padding-top: .6rem;
      border-top: 1px solid rgba(255,255,255,.12);
      font-size: .8rem; font-weight: 700; color: var(--cta-yellow);
    }
    .pill-picker.is-done { opacity: .55; pointer-events: none; }
    /* Visitor is typing in a page form: keep the conversation, but as a slim strip. */
    .pill-dock.chat-compact .pill-chat-log { max-height: min(20vh, 150px); }
    .pill-chat-close {
      width: 1.8rem; height: 1.8rem; border: 0; border-radius: 100px; cursor: pointer;
      background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center;
    }
    .pill-chat-close svg { width: 14px; height: 14px; }
    .pill-chat-close:hover { background: rgba(255,255,255,.16); }
    .pill-chat-log {
      max-height: min(46vh, 380px); max-height: min(46dvh, 380px); overflow-y: auto; overscroll-behavior: contain;
      padding: .9rem; display: flex; flex-direction: column; gap: .55rem;
    }
    /* Phones: a shorter conversation area, and shorter again while the typing
       bar has focus (keyboard up), so the keyboard never shoves a tall chat
       off the top of the screen. Fixed caps rather than vh: the keyboard and
       the browser toolbar both change what vh means. Placed after the base
       rule so it wins the tie. */
    @media (max-width: 768px) {
      .pill-chat-log { max-height: min(34vh, 250px); max-height: min(34dvh, 250px); padding: .7rem; transition: max-height .25s ease; }
      .pill-dock.typing .pill-chat-log { max-height: min(22vh, 150px); max-height: min(22dvh, 150px); }
      /* Phones: while the chat is open the dock is a sheet fixed to the bottom
         of the screen, lifted above the on-screen keyboard (--sheet-kb, from
         visualViewport). Page scrolling, the keyboard and the pin logic can't
         move it, so the bar stays under the visitor's thumb. */
      .pill-dock.sheet {
        position: fixed; top: auto; left: 50%;
        bottom: calc(var(--sheet-b, 16px) + var(--sheet-kb, 0px));
        transform: translateX(-50%);
      }
      /* only once settled, so entering the sheet doesn't animate from the old
         position (that fought the glide); after that it follows the keyboard */
      .pill-dock.sheet.sheet-live { transition: bottom .25s cubic-bezier(.2,.8,.2,1); }
    }
    .pill-msg { max-width: 86%; padding: .6rem .85rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
    .pill-msg--user { align-self: flex-end; background: var(--cta-yellow); color: #0c0c0c; border-bottom-right-radius: 4px; }
    .pill-msg--ai { align-self: flex-start; background: rgba(255,255,255,.08); color: #eee; border-bottom-left-radius: 4px; }
    .pill-msg--ai a { color: var(--cta-yellow); text-decoration: underline; }
    /* "Thinking" indicator while the AI answers: sized like a one-line reply
       so it reads as the answer on its way, with three dots rising in a wave. */
    .pill-msg--thinking { padding: .8rem 1rem; min-width: 4.2rem; }
    .pill-typing { display: inline-flex; align-items: center; gap: 6px; height: 1.35em; }
    .pill-typing i {
      width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .35;
      animation: pillDot 1.2s infinite cubic-bezier(.45,0,.55,1);
    }
    .pill-typing i:nth-child(2) { animation-delay: .16s; }
    .pill-typing i:nth-child(3) { animation-delay: .32s; }
    @keyframes pillDot { 0%, 70%, 100% { opacity: .35; transform: translateY(0) scale(.85); } 35% { opacity: 1; transform: translateY(-5px) scale(1); } }
    /* Reduced motion: no movement, the dots just brighten in turn. */
    @keyframes pillDotFade { 0%, 70%, 100% { opacity: .35; } 35% { opacity: 1; } }

    @media (prefers-reduced-motion: reduce) {
      .pill-ask, .pill-menu { transition: none; }
      .pill-chat { animation: none; }
      .pill-typing i { animation: pillDotFade 1.2s infinite ease-in-out; }
    }

    .hero-nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
    }

    .hero-nav-links li a {
      display: inline-flex;
      align-items: center;
      padding: 0.56rem 1.1rem;
      border-radius: 100px;
      font-size: 0.86rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }

    .hero-nav-links li a:hover { background: rgba(255,255,255,0.12); color: #fff; }

    /* scroll-spy active section */
    .hero-nav-links li.active > a { background: rgba(255,255,255,0.16); color: #fff; }

    /* .hero-nav-links li a above is (class, element, element) — beats a bare
       .hero-nav-ai on specificity, so this must match its shape to actually win. */
    .hero-nav-links li a.hero-nav-ai {
      color: var(--cta-yellow);
    }

    .hero-nav-links li a.hero-nav-ai:hover {
      color: var(--cta-yellow);
    }

    .hero-nav-cta {
      display: inline-flex;
      align-items: center;
      padding: 0.56rem 1.2rem;
      background: var(--cta-yellow);
      border-radius: 100px;
      font-size: 0.86rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #000;
      margin-left: 2px;
      /* filter, not background: gradients don't interpolate, so a background
         transition would snap. Brightness fades smoothly and keeps the ramp. */
      transition: filter 0.2s, transform 0.2s;
      white-space: nowrap;
    }

    .hero-nav-cta:hover { filter: brightness(1.08); transform: scale(1.04); }

    /* ── Vorusk featured-project card (above the video section) ── */
    /* The circle cuts into the hero's bottom edge (pulled up by --vk-in, about a
       third of its diameter): a round interface between the hero and the rest of
       the page. No ring, no border: it meets the hero cleanly. */
    /* the hero's bottom edge melts into the page where it meets the automation strip */
    #hero::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 22%, 200px);
      z-index: 9; pointer-events: none;   /* over the hero media, under the words, pill dock and scroll cue */
      background: linear-gradient(to bottom, rgba(12,12,12,0) 0%, rgba(12,12,12,.55) 55%, #0c0c0c 100%);
    }
    #vorusk-feature { position: relative; z-index: 40; padding: 0 3.5rem; margin-top: calc(var(--vk-in) * -1); background: transparent; pointer-events: none; }
    #vorusk-feature .vk-card { pointer-events: auto; }
    /* a perfect circle, centred: the octopus behind the words, a Start pill underneath */
    #vorusk-feature { display: flex; justify-content: center; }
    .vk-card {
      position: relative; display: block;
      width: 100%; max-width: 1400px; height: var(--vk-d); flex: none; padding: 0;
      border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer;
      font: inherit; isolation: isolate;
      filter: drop-shadow(0 20px 34px rgba(0,0,0,.5));   /* follows the cut shape, unlike box-shadow */
      transition: transform .35s var(--ease-out, ease);
    }
    /* the card's body; its outline (tab step + button notch) is a clip-path set by vkShapeFit */
    .vk-shape { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; border-radius: 24px; }
    .vk-bg {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.4) 100%),
                  url('/automation-app/assets/bg-octopus-ink.jpg') 62% 40% / cover no-repeat;
      transition: transform .8s var(--ease-out, ease);
    }
    .vk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    .vk-lines path { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .vk-card:hover { transform: scale(1.01); }
    .vk-card:hover .vk-bg { transform: scale(1.06); }
    .vk-card:focus, .vk-card:focus-visible { outline: none; }
    /* the words circle the rim, turning slowly; over the white Start dome they flip
       to dark (difference blend), so they read all the way round */
    .vk-ring {
      position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
      mix-blend-mode: difference;   /* static: the words sit still round the rim */
      /* the bottom half of the words fades away: full at the top, about a quarter at the bottom edge */
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,.25) 100%);
              mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,.25) 100%);
    }
    .vk-ring text { fill: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; font-family: inherit; dominant-baseline: middle; }
    /* a glow that runs round the words: a warm-lit copy, seen only through a soft band that travels the path */
    .vk-ring text.vk-glow { fill: url(#vkSpectrum); opacity: .5; }   /* a subtle silver sheen passing through the letters */
    .vk-ring text:not(.vk-glow) { fill: rgba(255,255,255,.78); }
    .vk-sweep { animation: vkSweep 9s linear infinite; }   /* slow, steady drift */
    @keyframes vkSweep { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(var(--vk-per, 1039px) * -1); } }
    @media (prefers-reduced-motion: reduce) { .vk-sweep { animation: none; } }
    /* the two phrases either side of the button; the silver sheen drifts slowly through them */
    /* the words, top-left like a card's label and figure; the silver sheen drifts slowly through them */
    .vk-copy { position: absolute; left: 30px; top: 20px; z-index: 2; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
    .vk-side {
      display: block; white-space: nowrap;
      color: transparent; -webkit-text-fill-color: transparent;
      background: linear-gradient(100deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.55) 40%, #fff 50%, rgba(255,255,255,.55) 60%, rgba(255,255,255,.55) 100%) 0 0 / 260% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text;
      animation: vkSide 9s linear infinite;
    }
    .vk-lab { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
    .vk-big { font-size: clamp(1.15rem, 2.3vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; animation-delay: -4.5s;
      background-image: linear-gradient(100deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 40%, #fff 50%, rgba(255,255,255,.9) 60%, rgba(255,255,255,.9) 100%); }
    @keyframes vkSide { from { background-position: 100% 0; } to { background-position: 0% 0; } }   /* always covers the whole phrase */
    @media (max-width: 768px) {
      .vk-copy { left: 20px; top: 16px; gap: 4px; }
      .vk-lab { font-size: .58rem; letter-spacing: .16em; }
    }
    @media (prefers-reduced-motion: reduce) { .vk-side { animation: none; } }
    /* the arrow says "this opens another page" */
    .vk-arrow { display: inline-block; font-size: 1.15em; line-height: 1; transition: transform .3s var(--ease-out, ease); }
    .vk-card:hover .vk-arrow, .vk-card:focus-visible .vk-arrow { transform: translate(3px, -3px); }
    .vk-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
    .vk-label { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cta-yellow); }
    .vk-word { font-size: clamp(1.45rem, 3.2vw, 1.85rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
    .vk-go {
      position: absolute; right: calc(var(--vk-jog) + var(--vk-gap)); bottom: var(--vk-gap); width: var(--vk-bw); height: var(--vk-bh);
      border-radius: 12px; z-index: 3;   /* sits in the card's lowered bottom-right pocket, an even border all round */
      display: flex; align-items: center; justify-content: center; gap: .35em; padding-left: .14em;
      background: #fff; color: #000; font-size: .92rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
      transition: background .25s, transform .35s var(--ease-out, ease);
    }
    .vk-card:hover .vk-go, .vk-card:focus-visible .vk-go { background: var(--cta-yellow, #f7b733); }
    @media (max-width: 1024px) { #vorusk-feature { padding: 0 2.5rem; } }
    @media (max-width: 768px) {
      #vorusk-feature { padding: 0 1.25rem; }
      .vk-word { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
      .vk-go { letter-spacing: .06em; font-size: .74rem; border-radius: 11px; }   /* fits the button on narrow phones */
    }
    @media (prefers-reduced-motion: reduce) { .vk-card, .vk-bg { transition: none; } }
    /* phones: comfortable tap targets (about 40px) without changing the look. The
       icons and footer links get invisible padding, cancelled by a matching
       negative margin, so the layout doesn't move; the tabs get a little taller. */
    @media (max-width: 768px) {
      .vs-segtab { min-height: 36px; }
      .pay-social a { display: inline-flex; padding: 11px; margin: -11px; }
      .footer-links a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
      .footer-email { display: inline-block; padding: 10px 0; margin: -10px 0; }
    }

    /* ── Academy popup ── */
    .academy-modal {
      position: fixed; inset: 0; z-index: 2000;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.72);
      opacity: 0; transition: opacity .45s cubic-bezier(.22,1,.36,1);
      will-change: opacity;
    }
    .academy-modal[hidden] { display: none; }
    .academy-modal.open { opacity: 1; }
    .am-panel {
      position: relative; display: flex; flex-direction: column;
      width: min(1320px, 96vw); height: 94vh; height: 94dvh;
      background: #0c0c0c; border: 1px solid rgba(255,255,255,.12);
      border-radius: 18px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.6);
      transform: translateY(28px) scale(.97); transition: transform .6s cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }
    .academy-modal.open .am-panel { transform: none; }
    .am-bar {
      flex: none; display: flex; align-items: center; gap: 1rem;
      padding: .6rem .7rem .6rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08);
      font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff;
    }
    .am-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* the title is the way home: closes the popup */
    .am-back {
      text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
      font: inherit; letter-spacing: inherit; text-transform: inherit; color: #fff;
      transition: color .2s;
    }
    .am-back span { display: inline-block; margin-right: .35em; transition: transform .2s; }
    .am-back:hover { color: var(--cta-yellow); }
    .am-back:hover span { transform: translateX(-3px); }
    .am-back:focus-visible { outline: 2px solid var(--cta-yellow); outline-offset: 3px; border-radius: 4px; }
    .am-open { color: rgba(255,255,255,.6); font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
    .am-open:hover { color: var(--cta-yellow); }
    .am-close {
      flex: none; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 100px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.1); color: #fff; transition: background .2s;
    }
    .am-close svg { width: 16px; height: 16px; }
    .am-close:hover { background: rgba(255,255,255,.2); }
    .am-close:focus-visible { outline: 2px solid var(--cta-yellow); outline-offset: 2px; }
    .am-body { position: relative; flex: 1; min-height: 0; }
    .am-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0c0c0c; opacity: 0; transition: opacity .5s ease; }
    .academy-modal.loaded .am-frame { opacity: 1; }
    .am-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .am-loading .hl-dots { font-size: min(7vw, 6vh); }
    .academy-modal.loaded .am-loading { display: none; }
    /* phones: edge to edge */
    @media (max-width: 768px) {
      .am-panel { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
      .am-open { display: none; }
      #vorusk-modal .am-open { display: inline; }
    }
    html.academy-open, html.academy-open body { overflow: hidden; overscroll-behavior: none; }
    /* pinned in place underneath a popup (see pageLock) */
    body.page-pinned { position: fixed; left: 0; right: 0; width: 100%; }
    /* while a popup locks the page, its scrollbar's space stays reserved, so
       the page underneath never shifts sideways */
    html.academy-open { scrollbar-gutter: stable; }

    /* Vorusk popup: the okunolacreates menu bar stays on top so visitors can
       go anywhere on the site; the Vorusk page sits just below it. */
    html.vorusk-open .pill-dock:not(.sheet) {
      position: fixed; top: 14px; bottom: auto; left: 50%; transform: translateX(-50%); z-index: 2100;
    }
    #vorusk-modal { align-items: flex-end; padding-top: 76px; }
    #vorusk-modal .am-panel { height: calc(100vh - 76px - 2vh); height: calc(100dvh - 76px - 2vh); margin-bottom: 2vh; }
    @media (max-width: 768px) {
      html.vorusk-open .pill-dock:not(.sheet) { top: 10px; }
      #vorusk-modal { padding-top: 66px; }
      #vorusk-modal .am-panel { height: calc(100vh - 66px); height: calc(100dvh - 66px); margin-bottom: 0; border-radius: 16px 16px 0 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .academy-modal, .am-panel, .am-frame { transition: none; }
    }

    /* ============================================================
       MARQUEE
    ============================================================ */
    .marquee-wrap {
      overflow: hidden;
      contain: layout paint;   /* its own paint island: nothing else repaints with it */
      height: 51px;
      display: flex; align-items: center;
      background: #161616;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .marquee-track {
      display: flex;
      align-items: center;
      width: max-content;   /* track = exact content width, so the -50% shift
                               moves precisely one duplicated set — seamless loop */
      white-space: nowrap;
      /* own compositor layer + 3D transform → animates on the GPU, immune to the
         emblem's main-thread/GPU load, so the scroll stays buttery */
      will-change: transform;
      transform: translateZ(0);
      /* Speed + distance are set by the script below to a WHOLE number of
         pixels per frame (60px/s = 1px at 60Hz, 2 device px on a retina
         screen). The old ~47px/s moved a fractional pixel per frame, so the
         text alternated between steps of different size and judders. These are
         only the fallback values until the script has measured the strip. */
      animation: marqueeScroll 38s linear infinite;
    }

    /* big, tight, cream caps with a small red square between each */
    .marquee-track span {
      display: inline-flex; align-items: center;
      font-family: 'Inter', sans-serif;
      font-size: clamp(1.15rem, 2.1vw, 1.6rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1;
      text-transform: uppercase;
      color: #f2eee6;
    }
    .marquee-track .m-sq {
      display: inline-block; flex: none;
      width: .3em; height: .3em;
      margin: 0 1.6em;
      background: #ff3b1f;
    }

    @keyframes marqueeScroll {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(var(--mq-end, -50%), 0, 0); }
    }

    /* ============================================================
       SECTION COMMONS
    ============================================================ */
    .section {
      padding: 7rem 3.5rem;
    }

    .section-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cream);
      margin-bottom: 1.4rem;
      opacity: 0.8;
    }

    /* Section titles use the chunky display face from the Chunk artboard.
       Bowlby One is a free stand-in with the same heavy, flat-cut letters; to
       switch to the real Chunk, add its .woff2 to /fonts with an @font-face
       named 'Chunk' and put 'Chunk' first in this stack. (Not listed until the
       file exists, or a visitor's own unrelated font called "Chunk" would be
       used.) Bowlby only ships one weight (400), so the weight is set to match
       rather than faux-bolded. */
    .section-heading {
      font-family: 'Bowlby One', 'Inter', sans-serif;
      font-size: clamp(2rem, 4.5vw, 3.8rem);
      font-weight: 400;
      letter-spacing: -0.005em;
      line-height: 1;
      text-transform: uppercase;
    }

    .section-heading em {
      font-style: normal;
      color: var(--muted);
    }

    /* pen-pressure 3D rim (filters defined in the SVG at the top of <body>) */
    /* every heading gets the Let's Talk treatment: cream line, yellow
       second line, dark inked rim with a deep-red 3D edge */
    .section-heading { padding: 0 .1em .12em 0; color: var(--chunk-cream); }   /* SVG inked-rim filter removed: Safari re-rasterises it every scroll frame (jank + degradation) */
    .section-heading em { color: var(--cta-yellow); }
    /* Video / Services / Visuals headings: whitish grey, both lines (the
       cream + yellow two-tone stays on LET'S TALK, the reference look) */
    #media .section-heading, #services .section-heading, #visuals .section-heading { color: #d9d9d4; filter: none; }   /* flat: no inked rim / 3D edge */
    #media .section-heading em, #services .section-heading em, #visuals .section-heading em { color: #d9d9d4; }
    @media (max-width: 900px) {
      #media .section-heading, #services .section-heading, #visuals .section-heading { filter: none; }
    }

    /* ============================================================
       WORK GRID
    ============================================================ */

    .work-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 2.5rem;
    }

    .work-header .view-all {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid var(--border-h);
      padding-bottom: 2px;
      transition: color 0.2s, border-color 0.2s;
    }

    .work-header .view-all:hover { color: var(--white); border-color: var(--white); }

    .work-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;   /* main section: 2×2 = 4 featured cards */
      gap: 1rem;
    }

    /* Only the first 4 show in the section; the rest live in the "See All Projects" modal. */
    .work-grid .work-card:nth-child(n+5) { display: none; }

    /* Cut-corner card — also works as <a> tag */
    .work-card {
      position: relative;
      display: block;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.32s var(--ease-out), border-color 0.3s;
      aspect-ratio: 16/9;
      color: inherit;
      text-decoration: none;
    }

    /* Cut corner overlay — matches page bg colour */
    .work-card::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 30px; height: 30px;
      background: var(--bg);
      clip-path: polygon(0 0, 100% 0, 100% 100%);
      z-index: 5;
      transition: background 0.3s;
    }

    .work-card:hover { transform: translateY(-5px); border-color: var(--border-h); }

    /* Year label */
    .work-card-year {
      position: absolute;
      top: 1rem; right: 1.1rem;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.45);
      z-index: 6;
    }

    /* Thumbnail — replace .card-thumb background with actual screenshot */
    .card-thumb {
      position: absolute;
      inset: 0;
      transition: transform 0.6s var(--ease-out);
    }

    .work-card:hover .card-thumb { transform: scale(1.04); }

    /* Gradient overlay on card */
    .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
      z-index: 2;
    }

    .card-info {
      position: absolute;
      bottom: 1.2rem;
      left: 1.4rem;
      z-index: 3;
    }

    .card-name {
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.1;
    }

    .card-cat {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      margin-top: 0.25rem;
      padding-left: 0.6rem;
      border-left: 1px solid rgba(255,255,255,0.3);
    }

    /*
      THUMBNAILS — add real screenshots to /screenshots/ folder and
      uncomment the background-image lines below. Each card links live.
    */

    .thumb-new-1 { background: url('/screenshots/prospectcatcher.webp') center/cover no-repeat; }
    .thumb-new-2 { background: url('/screenshots/whowasi.webp') center/cover no-repeat; }
    .thumb-tnbm { background: url('/screenshots/thenewblackmagazine.webp') center/cover no-repeat; }
    .thumb-mba { background: url('/screenshots/markofthebest-academy.webp') center/cover no-repeat; }
    .thumb-gng { background: url('/screenshots/glitchandgrit.webp') center/cover no-repeat; }
    .thumb-mave { background: url('/screenshots/mave.webp') center/cover no-repeat; }
    .thumb-dgp { background: url('/screenshots/dateguidepro.webp') center/cover no-repeat; }
    .thumb-lpg { background: url('/screenshots/lipedemaguru.webp') center/cover no-repeat; }
    .thumb-bbf { background: url('/screenshots/beatsbyfranzi.webp') center/cover no-repeat; }
    .thumb-pouch { background: url('/screenshots/pouch.webp') center/cover no-repeat; }
    /* WebP-less browsers (Safari < 14) get the .jpg twins. The html.no-webp
       class is added by the WebP probe in <head>. */
    .no-webp .thumb-new-1 { background-image: url('/screenshots/prospectcatcher.jpg'); }
    .no-webp .thumb-new-2 { background-image: url('/screenshots/whowasi.jpg'); }
    .no-webp .thumb-tnbm { background-image: url('/screenshots/thenewblackmagazine.jpg'); }
    .no-webp .thumb-mba { background-image: url('/screenshots/markofthebest-academy.jpg'); }
    .no-webp .thumb-gng { background-image: url('/screenshots/glitchandgrit.jpg'); }
    .no-webp .thumb-mave { background-image: url('/screenshots/mave.jpg'); }
    .no-webp .thumb-dgp { background-image: url('/screenshots/dateguidepro.jpg'); }
    .no-webp .thumb-lpg { background-image: url('/screenshots/lipedemaguru.jpg'); }
    .no-webp .thumb-bbf { background-image: url('/screenshots/beatsbyfranzi.jpg'); }
    .no-webp .thumb-pouch { background-image: url('/screenshots/pouch.jpg'); }

    /* Portfolio slider — one compact sideways row above the footer */
    #work.work-tucked { padding: 1.6rem 3.5rem 2.5rem; border-top: 1px solid var(--border); }
    .work-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .work-summary-label {
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--muted); margin: 0;
    }
    .work-strip-nav { display: flex; gap: .5rem; }
    .work-strip-btn {
      width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
      background: transparent; border: 1px solid var(--border-h); color: var(--white); cursor: pointer;
      transition: background .2s, border-color .2s, opacity .2s;
    }
    .work-strip-btn svg { width: 16px; height: 16px; }
    .work-strip-btn:hover { background: var(--surface); border-color: var(--white); }
    .work-strip-btn:disabled { opacity: .3; cursor: default; background: transparent; border-color: var(--border-h); }
    .work-strip-btn:focus-visible { outline: 2px solid var(--cta-yellow); outline-offset: 3px; }
    @media (max-width: 1024px) { #work.work-tucked { padding: 1.4rem 2.5rem 2rem; } }
    @media (max-width: 768px) {
      #work.work-tucked { padding: 1.2rem 0 1.6rem; }
      .work-strip-head { padding: 0 1.25rem; }
      .work-strip-nav { display: none; }   /* phones just swipe */
    }

    /* ============================================================
       SERVICES
    ============================================================ */
    #services {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .services-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3.5rem;
    }

    .services-intro {
      max-width: 360px;
      font-size: 0.9rem;
      color: var(--muted);
      line-height: 1.7;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
    }

    .service-card {
      padding: 2rem 1.6rem;
      background: var(--bg);
      transition: background 0.3s;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .service-card:hover { background: var(--surface2); }

    .service-num {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--cream);
      opacity: 0.6;
    }

    .service-name {
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.15;
    }

    .service-desc {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.6;
      margin-top: auto;
      padding-top: 0.5rem;
    }

    /* ============================================================
       PROCESS
    ============================================================ */
    #process .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    .process-step {
      padding: 2rem 0;
      border-top: 1px solid var(--border);
    }

    .step-num {
      font-size: 2.5rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 1.4rem;
    }

    .step-name {
      font-size: 1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.6rem;
    }

    .step-desc {
      font-size: 0.83rem;
      color: var(--muted);
      line-height: 1.6;
    }

    /* Each step a different colour */
    .process-step:nth-child(1) .step-num { color: #ff4444; }
    .process-step:nth-child(1) .step-name { color: #ff4444; }
    .process-step:nth-child(2) .step-num { color: #f0a500; }
    .process-step:nth-child(2) .step-name { color: #f0a500; }
    .process-step:nth-child(3) .step-num { color: #00c4a7; }
    .process-step:nth-child(3) .step-name { color: #00c4a7; }
    .process-step:nth-child(4) .step-num { color: #a78bfa; }
    .process-step:nth-child(4) .step-name { color: #a78bfa; }

    .process-step:nth-child(1) { border-top-color: rgba(255,68,68,0.3); }
    .process-step:nth-child(2) { border-top-color: rgba(240,165,0,0.3); }
    .process-step:nth-child(3) { border-top-color: rgba(0,196,167,0.3); }
    .process-step:nth-child(4) { border-top-color: rgba(167,139,250,0.3); }

    /* ============================================================
       CTA
    ============================================================ */
    #contact {
      text-align: center;
      padding: 8rem 3.5rem;
      position: relative;
      overflow: hidden;
    }

    #contact::before {
      content: '';
      position: absolute;
      top: -40%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(240,237,232,0.04) 0%, transparent 65%);
      pointer-events: none;
    }

    .cta-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cream);
      opacity: 0.8;
      margin-bottom: 1.6rem;
    }

    .cta-heading {
      font-size: clamp(2.6rem, 7vw, 6rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 0.95;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }

    .cta-heading em {
      font-style: normal;
      color: var(--muted);
    }

    .cta-sub {
      font-size: 1rem;
      color: var(--muted);
      max-width: 440px;
      margin: 0 auto 3rem;
      line-height: 1.65;
    }

    .cta-email {
      display: inline-block;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--cream);
      border-bottom: 1px solid rgba(240,237,232,0.3);
      padding-bottom: 3px;
      margin-bottom: 2.5rem;
      transition: border-color 0.2s;
    }

    .cta-email:hover { border-color: var(--cream); }

    /* ============================================================
       FOOTER
    ============================================================ */
    /* PAGE LOADER */
    #page-loader {
      position: fixed;
      inset: 0;
      height: 100vh; height: 100lvh;   /* the largest viewport: no gap when a phone toolbar collapses */
      z-index: 99999;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .35s ease, visibility 0s linear .35s;
    }

    /* a quick fade straight into the site — no curtain, no extra wait */
    #page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    /* the logo drifts toward the viewer as it fades, so the hand-off breathes */
    #page-loader .loader-inner { transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1); }
    #page-loader.hidden .loader-inner { transform: scale(1.05); }
    @media (prefers-reduced-motion: reduce) {
      #page-loader.hidden .loader-inner { transform: none; }
    }

    #page-loader { isolation: isolate; overflow: hidden; }
    .loader-inner {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .loader-text {
      position: relative;
      font-family: 'Anton', 'Bowlby One', 'Inter', sans-serif;
      font-weight: 400;
      font-size: min(26vw, 38vh);   /* OKUNOLA is ~3.3em wide */
      line-height: .9;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      white-space: nowrap;
      color: #fff;
    }
    @media (min-width: 769px) {
      .loader-text { font-size: min(14vw, 24vh); }
    }
    .lx-word {
      position: relative; display: inline-block; opacity: 0;
      /* a real loading bar: white letters filling yellow left to right as the
         page loads (--p is set by the loader script). The shorthand comes
         before the clip or it would reset it. */
      background: linear-gradient(90deg, #f7b733 var(--p, 0%), #fff var(--p, 0%));
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
    }
    .lx-pct {
      position: absolute; right: 0; top: calc(100% + .12em);
      font-size: .2em; line-height: 1; letter-spacing: .08em;
      font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75);
      opacity: 0; transition: opacity .4s ease;
    }
    .lx-pct.on { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .lx-word { opacity: 1; }
    }
    .lx-fx { position: absolute; width: 0; height: 0; overflow: hidden; }

    footer {
      padding: 2.5rem 3.5rem 0;
      background: #000;
      border-top: none;
      margin-top: -1px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .footer-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
      gap: 1.3rem;
      padding-bottom: 2.5rem;
    }

    .cinematic-reveal {
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    .cinematic-reveal.visible { opacity: 1; }

    /* FOOTER SCROLLING WORDMARK */
    .footer-wordmark-wrap {
      width: auto;
      /* Cancel the footer's 3.5rem side padding so the marquee runs edge-to-edge
         instead of sitting inset (which read as "centred"). */
      margin: 0 -3.5rem;
      overflow: hidden;
      padding: 1rem 0 2rem;
    }

    .footer-wordmark-track {
      display: flex;
      gap: 2rem;
      will-change: transform;
      width: max-content;
      animation: wordmarkScroll 27s linear infinite;
      font-size: clamp(5rem, 18vw, 14rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 0.85;
      color: #fff;
      user-select: none;
      white-space: nowrap;
    }

    .footer-wordmark-track span { flex-shrink: 0; }
    .footer-wordmark-track span:nth-child(even) {
      color: rgba(255,255,255,0.25);
      font-size: 0.5em;
      align-self: center;
    }


    @keyframes wordmarkScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @media (max-width: 768px) {
      .footer-wordmark-wrap { display: none; }
    }

    /* the octopus sigil (inline SVG: ring text + octopus), transparent around
       the octopus so the footer shows through */
    .footer-brand .footer-badge { height: 84px; width: 84px; display: block; flex: none; }
    .footer-brand img {
      height: 49px;
      width: auto;
      display: block;
      content: url('/logo/okcr-white.png');
      transition: opacity 0.3s ease;
    }

    .footer-phone {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 0.3rem;
      letter-spacing: 0.04em;
    }

    .footer-copy {
      font-size: 0.72rem;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .footer-links {
      display: flex;
      gap: 2rem;
      list-style: none;
      justify-content: center;
      flex-wrap: wrap;
    }

    .footer-links a {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.2s;
    }

    .footer-links a:hover { color: var(--white); }
    .footer-email { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); transition: color 0.2s; }
    .footer-email:hover { color: #f5a623; }

    /* ── "PAY" card — ATM/credit-card styled button that opens the payment popup ── */
    .pay-card {
      position: relative;
      width: 220px;
      aspect-ratio: 1.586 / 1;   /* real card proportions */
      border: none;
      border-radius: 14px;
      cursor: pointer;
      overflow: hidden;
      background:
        radial-gradient(120% 90% at 85% -10%, rgba(245,166,35,0.22), rgba(245,166,35,0) 55%),
        radial-gradient(100% 120% at 0% 110%, rgba(99,102,241,0.20), rgba(99,102,241,0) 55%),
        linear-gradient(135deg, #23232b 0%, #101014 55%, #0a0a0d 100%);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.14),
        inset 0 -1px 2px rgba(0,0,0,0.6),
        0 18px 40px -12px rgba(0,0,0,0.8);
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
      text-align: left;
      font-family: 'Inter', system-ui, sans-serif;
    }
    .pay-card:hover {
      transform: translateY(-6px) rotate(-1.5deg);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.16),
        inset 0 -1px 2px rgba(0,0,0,0.6),
        0 28px 55px -14px rgba(0,0,0,0.9),
        0 0 24px rgba(245,166,35,0.12);
    }
    .pay-card:active { transform: translateY(-2px) rotate(-0.5deg); }
    /* moving light sheen */
    .pay-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.08) 55%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.9s ease;
      pointer-events: none;
    }
    .pay-card:hover::after { transform: translateX(100%); }

    .pay-card-top {
      position: absolute;
      top: 14px;
      left: 16px;
      right: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .pay-card-chip {
      width: 32px;
      height: 24px;
      border-radius: 5px;
      background: linear-gradient(135deg, #f5d67b 0%, #d9a441 45%, #f0c95c 70%, #b8862f 100%);
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.35);
      position: relative;
    }
    .pay-card-chip::before {
      content: "";
      position: absolute;
      inset: 4px 5px;
      border: 1px solid rgba(90,60,10,0.45);
      border-radius: 3px;
    }
    .pay-card-wave { width: 22px; height: 22px; color: rgba(255,255,255,0.55); }

    .pay-card-word {
      position: absolute;
      left: 16px;
      bottom: 34px;
      font-size: 1.7rem;
      font-weight: 900;
      letter-spacing: 0.34em;
      color: #fff;
      /* embossed look */
      text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 -1px 1px rgba(0,0,0,0.7), 0 0 16px rgba(245,166,35,0.25);
    }
    .pay-card-word .pay-arrow { letter-spacing: 0; font-weight: 700; color: #f5a623; }

    .pay-card-bottom {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.5rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }
    .pay-card-dots { letter-spacing: 0.2em; font-size: 0.6rem; color: rgba(255,255,255,0.35); }

    /* mini variant — 45% smaller, sits under the contact form */
    .pay-card--sm { width: 121px; border-radius: 9px; }
    .pay-card--sm .pay-card-top { top: 8px; left: 9px; right: 9px; }
    .pay-card--sm .pay-card-chip { width: 18px; height: 13px; border-radius: 3px; }
    .pay-card--sm .pay-card-chip::before { inset: 2px 3px; border-radius: 2px; }
    .pay-card--sm .pay-card-wave { width: 13px; height: 13px; }
    .pay-card--sm .pay-card-word {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.52rem;   /* +30% again (0.9 → 1.17 → 1.52rem) */
      letter-spacing: 0.24em;
    }
    .pay-card--sm .pay-card-bottom { left: 9px; right: 9px; bottom: 7px; font-size: 0.32rem; letter-spacing: 0.12em; }
    .pay-card--sm .pay-card-dots { font-size: 0.38rem; letter-spacing: 0.16em; }


    /* ============================================================
       SCROLL REVEAL
    ============================================================ */
    .reveal {
      opacity: 1;
      transform: none;
    }
    /* Scroll-reveal removed (2026-10-24): sections sit fully visible from the
       start so the page flows smoothly on scroll instead of cutting/revealing.
       .reveal-delay-* / .reveal.visible remain as inert class hooks. */

    /* ============================================================
       SECTION SCROLL OFFSET (fixed nav compensation)
    ============================================================ */
    #work, #services, #process, #media, #visuals, #contact, #ai-banner {
      scroll-margin-top: 72px;
    }
    #hero { scroll-margin-top: 0; }

    /* ============================================================
       RESPONSIVE — TABLET 1024px
    ============================================================ */
    @media (max-width: 1024px) {
      .section { padding: 5rem 2.5rem; }
      #contact  { padding: 5rem 2.5rem; }
      #media    { padding: 5rem 1.5rem; }
      #visuals  { padding: 5rem 1.5rem; }
    }

    /* ============================================================
       RESPONSIVE — TABLET 900px
    ============================================================ */
    @media (max-width: 900px) {
      .services-grid { grid-template-columns: 1fr 1fr; }
      #process .process-grid { grid-template-columns: 1fr 1fr; }
      .media-cards-grid { grid-template-columns: 1fr; }
      .wm-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    }


    /* ============================================================
       RESPONSIVE — SMALL MOBILE 480px
    ============================================================ */
    @media (max-width: 480px) {
      #nav { padding: 0.75rem 0.8rem; }
      .hero-title { font-size: clamp(2rem, 12vw, 2.8rem); }
      .hero-title .red-grad { display: block; }
      #process .process-grid { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .work-grid { gap: 0.6rem; }
      .section { padding: 2rem 0.85rem; }
      #media, #visuals, #contact { padding: 2rem 0.85rem; }
      .media-cards-grid { gap: 1rem; }
      .gv-stage { min-height: 220px; }
      /* Pill on phones — keep the bigger text but drop letter-spacing & tighten
         padding/gap so the whole thing fits inside the viewport. If it doesn't fit,
         the nowrap content overflows the centered box and reads as off-centre. */
      .hero-nav-links { gap: 0; }
      .hero-nav-links li a { padding: 0.42rem 0.42rem; font-size: 0.62rem; letter-spacing: 0; }
      .hero-nav-cta { padding: 0.42rem 0.62rem; font-size: 0.62rem; letter-spacing: 0; }
      .pill-chat-toggle { padding: 0.42rem 0.5rem; gap: 0.25em; }
    }

    /* ============================================================
       GLOBAL POLISH
    ============================================================ */

    /* Smooth scrolling */
    html { scroll-behavior: smooth; }

    /* Custom scrollbar — desktop only */
    @media (hover: hover) {
      ::-webkit-scrollbar { width: 5px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
      ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
    }

    /* Focus visible ring for keyboard nav */
    :focus-visible {
      outline: 2px solid rgba(255,255,255,0.55);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* Image drag prevention */
    img { -webkit-user-drag: none; user-select: none; }

    /* Prevent text selection on interactive UI */
    .vs-arrow, .slide-arrow, .nav-arr, .gv-nav-btn,
    .modal-close, .gm-close, .wm-close { user-select: none; }

    /* Tap highlight removal on mobile */
    button, a { -webkit-tap-highlight-color: transparent; }

    /* Work card aspect ratio — consistent on all devices */
    .work-card { aspect-ratio: 16/9; }

    /* ── Recent Projects: picture + caption, diagonally stacked ──
       Each card is a clean screenshot band on top (no text over it, no dark
       fade) and a solid caption strip underneath: name + category/year on the
       left, a round ↗ on the right.
       Stacking: each lower card lies ON TOP of the one above, its top edge cut
       on one gentle angle (~4°: level on the left, --slant higher on the
       right), covering that card's caption bottom-right. The cut never lands
       on a picture:
         · a stacked card starts with a --slant-tall dark lip above its picture,
           so the clipped triangle is lip, not screenshot;
         · a card with another tucked under it gets extra caption padding, so
           the overlap covers empty strip, never the name or the ↗.
       The slant is clipped on the inner .card-face; the <a> stays unclipped
       so a drop-shadow filter can follow the diagonal (clip-path would cut a
       box-shadow off). Desktop: two rows per column; phones: one stack.
       Scoped to .work-grid — the "See All Projects" modal builds its own
       cards and is untouched. */
    .work-grid {
      container-type: inline-size;
      --cols: 2;
      --stack-gap: 1rem;
      --stack-air: 12px;   /* visible gap on the left edge */
      /* same angle at every width (~4°): 7% of one card's width */
      --slant: calc((100cqw - (var(--cols) - 1) * 1rem) / var(--cols) * 0.07);
      --caption-h: 68px;
      row-gap: var(--stack-gap);
      align-items: start;
    }
    .work-grid .work-card {
      aspect-ratio: auto;
      background: transparent; border: 0; border-radius: 16px; overflow: visible;
      pointer-events: none;   /* only the visible, clipped face takes clicks */
      filter: drop-shadow(0 -4px 8px rgba(0,0,0,.25)) drop-shadow(0 -16px 30px rgba(0,0,0,.4));
      transition: transform .35s var(--ease-out);
    }
    .work-grid .work-card::before { display: none; }
    .work-grid .work-card:hover { transform: translateY(-6px); }
    .work-grid .card-face {
      position: relative; display: flex; flex-direction: column; pointer-events: auto;
      border-radius: inherit; overflow: hidden;
      background: #121214; border: 1px solid var(--border);
      transition: border-color .3s;
    }
    .work-grid .work-card:hover .card-face { border-color: var(--border-h); }

    /* picture band: the screenshot, nothing on top of it */
    .work-grid .card-pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
    .work-grid .card-pic .card-thumb { position: absolute; inset: 0; }
    .work-grid .work-card:hover .card-thumb { transform: scale(1.04); }

    /* caption strip */
    .work-grid .card-caption {
      display: flex; align-items: center; gap: 1rem;
      min-height: var(--caption-h); padding: .8rem 1rem .8rem 1.2rem;
      border-top: 1px solid rgba(255,255,255,.07);
      box-sizing: border-box;
    }
    .work-grid .card-info { position: static; flex: 1; min-width: 0; }
    .work-grid .card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .work-grid .card-cat {
      margin-top: .3rem; padding-left: 0; border-left: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      color: rgba(255,255,255,.5);
    }
    .work-grid .card-cat .work-card-year {
      position: static; display: inline; font-size: inherit; letter-spacing: inherit;
      color: rgba(255,255,255,.35);
    }
    .work-grid .card-cat .work-card-year::before { content: '·'; margin: 0 .5em; }
    .work-grid .card-go {
      flex: none; width: 38px; height: 38px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,.2); color: #fff;
      transition: background .25s, color .25s, border-color .25s, transform .25s;
    }
    .work-grid .card-go svg { width: 16px; height: 16px; }
    .work-grid .work-card:hover .card-go { background: var(--cta-yellow); border-color: var(--cta-yellow); color: #0c0c0c; transform: rotate(0deg) scale(1.05); }

    /* light line along the slanted edge */
    .work-grid .card-face::after {
      content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--slant);
      z-index: 7; pointer-events: none; display: none; opacity: .6;
      background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255,255,255,.42) 50%, transparent calc(50% + 1.5px));
      transition: opacity .3s;
    }
    .work-grid .work-card:hover .card-face::after { opacity: 1; }

    .work-grid .work-card:nth-child(1) { z-index: 1; }
    .work-grid .work-card:nth-child(2) { z-index: 2; }
    .work-grid .work-card:nth-child(3) { z-index: 3; }
    .work-grid .work-card:nth-child(4) { z-index: 4; }

    /* cards with another card tucked under them: reserve the overlap in the
       caption so it only ever covers empty strip */
    .work-grid .work-card:nth-child(-n+2) .card-caption { padding-bottom: calc(.8rem + var(--slant) - var(--stack-air)); }

    @media (min-width: 769px) {
      .work-grid .work-card:nth-child(n+3):nth-child(-n+4) { margin-top: calc(var(--stack-air) - var(--slant) - var(--stack-gap)); }
      .work-grid .work-card:nth-child(n+3):nth-child(-n+4) .card-face { padding-top: var(--slant); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
      .work-grid .work-card:nth-child(n+3):nth-child(-n+4) .card-face::after { display: block; }
    }
    @media (max-width: 768px) {
      .work-grid { --cols: 1; --stack-gap: 0.8rem; --stack-air: 10px; --caption-h: 62px; }
      .work-grid .work-card { border-radius: 14px; }
      .work-grid .work-card:nth-child(n+2):nth-child(-n+3) { margin-top: calc(var(--stack-air) - var(--slant) - var(--stack-gap)); }
      .work-grid .work-card:nth-child(n+2):nth-child(-n+3) .card-face { padding-top: var(--slant); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
      .work-grid .work-card:nth-child(n+2):nth-child(-n+3) .card-face::after { display: block; }
      .work-grid .card-caption { padding-left: 1rem; }
      .work-grid .card-go { width: 34px; height: 34px; }
    }

    /* Slider: a flat sideways row of every project — none of the big-grid
       stacking/slant. Four across on desktop, a peek of the next on phones. */
    .work-tucked .work-grid {
      --slant: 0px; --cols: 4;
      display: flex; gap: .8rem;
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-behavior: smooth;
      scrollbar-width: none;
      padding: 8px 0 .4rem;   /* room for the hover lift */
    }
    .work-tucked .work-grid::-webkit-scrollbar { display: none; }
    .work-tucked .work-grid .work-card {
      flex: 0 0 calc((100% - 3 * .8rem) / 4);
      scroll-snap-align: start;
      margin-top: 0 !important;
      display: block !important;   /* show all ten, not just the first four */
      border-radius: 12px;
    }
    .work-tucked .work-grid .work-card .card-face { padding-top: 0 !important; clip-path: none !important; }
    .work-tucked .work-grid .card-face::after { display: none !important; }
    .work-tucked .work-grid .card-caption { padding-bottom: .8rem !important; }
    .work-tucked .work-grid .card-name { font-size: 0.74rem; }
    .work-tucked .work-grid .card-cat { font-size: 0.6rem; }
    .work-tucked .work-grid .card-go { width: 30px; height: 30px; }
    @media (max-width: 1024px) {
      .work-tucked .work-grid .work-card { flex-basis: calc((100% - 2 * .8rem) / 3); }
    }
    @media (max-width: 768px) {
      .work-tucked .work-grid { gap: .6rem; padding-left: 1.25rem; padding-right: 1.25rem; scroll-padding: 0 1.25rem; }
      .work-tucked .work-grid .work-card { flex-basis: 64%; }
      .work-tucked .work-grid .card-caption { padding-left: .8rem; }
      .work-tucked .work-grid .card-go { display: none; }
    }

    /* Make all close buttons at least 44px on all screens */
    .modal-close, .gm-close, .wm-close { min-width: 44px; min-height: 44px; }

    /* Improved "See All Projects" button */
    .btn-load-more {
      gap: 0.5rem;
      padding: 0.85rem 2rem;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .btn-load-more:hover { transform: translateY(-2px); }
    .btn-load-more:active { transform: translateY(0); }

    /* vs-card hover lift */
    .vs-card { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
    .vs-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }

    /* Ken Burns — randomised per slide via JS class */
    .vs-slide img { transition: transform 9s linear; transform: scale(1); display: block; }
    .vs-kb-in.active  img { transform: scale(1.07); }
    .vs-kb-out img        { transform: scale(1.07); }
    .vs-kb-out.active img { transform: scale(1); }
    .vs-kb-left img        { transform: scale(1.06) translateX(0%); }
    .vs-kb-left.active img { transform: scale(1.06) translateX(-4%); }
    .vs-kb-right img        { transform: scale(1.06) translateX(0%); }
    .vs-kb-right.active img { transform: scale(1.06) translateX(4%); }

    /* Section heading consistent spacing */
    .section-heading { margin-bottom: 0; }
    .section-label { margin-bottom: 1rem; }

    /* Marquee pause on hover */
    .marquee-wrap:hover .marquee-track { animation-play-state: paused; }

    /* Gallery viewer smooth background */
    .gv-stage { background: #050505; }

    /* Work modal cards full height */
    .wm-grid .work-card { width: 100%; display: block; }

    /* Video modal header fix */
    .modal-header { padding: 1.2rem 1.6rem; }

    /* ============================================================
       LOAD MORE
    ============================================================ */
    .work-card.work-hidden { display: none; }

    .work-load-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 2.5rem;
    }

    .btn-load-more {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.75rem 2rem;
      border: 1px solid var(--border-h);
      border-radius: 50px;
      font-family: inherit;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--white);
      background: transparent;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn-load-more:hover { background: var(--surface); border-color: var(--white); }
    .btn-load-more.hidden { display: none; }

    /* ============================================================
       MEDIA SECTION — VIDEO PRODUCTIONS & PODCAST
    ============================================================ */
    #media {
      padding: 7rem 1.5rem;
      background: var(--bg);
      border-top: 0;   /* no rule under the circle */
    }

    .media-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3rem;
    }

    .media-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .media-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Coloured accent line at top of each card */
    .media-card::before {
      content: '';
      display: block;
      height: 3px;
      width: 100%;
    }

    .media-card--video::before {
      background: linear-gradient(90deg, #f5a623, #ff4444, #ff6020);
    }

    .media-card--podcast::before {
      background: linear-gradient(90deg, #a855f7, #6366f1, #38bdf8);
    }

    .media-card-top {
      padding: 1.4rem 1.5rem 0.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .media-card-tag {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.3rem 0.75rem;
      border-radius: 50px;
      border: 1px solid var(--border-h);
      color: var(--muted);
    }

    .media-card--video .media-card-tag { border-color: rgba(245,166,35,0.4); color: #f5a623; }
    .media-card--podcast .media-card-tag { border-color: rgba(168,85,247,0.4); color: #a855f7; }

    .media-card-count {
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.1em;
    }

    .media-card-title {
      padding: 0.2rem 1.5rem 1rem;
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      line-height: 1.05;
    }

    /* Featured YouTube embed */
    .media-featured {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
    }

    .media-featured iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Facade for the featured video — a thumbnail that becomes a real YouTube
       embed on click. This exists for load time, not looks: two auto-injected
       embeds took ~4s each to settle and, because they were injected before the
       document finished, they held the window load event (and therefore the
       splash) open for 4.6s on a zero-latency local server. Both sit ~4000px
       below the fold, so nobody was watching them during that wait.
       loading="lazy" did not save us — Chrome's lazy threshold on a fast
       connection is generous enough that it fetched them anyway. */
    .yt-facade {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0; padding: 0; margin: 0;
      display: block; cursor: pointer;
      background: #000;
      overflow: hidden;
    }
    .yt-facade img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      /* hqdefault is 4:3 with letterbox bars baked in; a slight scale crops them
         back off so the facade matches the 16/9 frame the iframe used to fill */
      transform: scale(1.34);
      transition: transform .6s cubic-bezier(.16,.84,.28,1), filter .4s ease;
      filter: brightness(.86);
    }
    .yt-facade:hover img { transform: scale(1.38); filter: brightness(1); }
    .yt-facade-play {
      position: absolute; left: 50%; top: 50%;
      translate: -50% -50%;
      width: 60px; height: 42px; border-radius: 11px;
      background: rgba(18,18,18,.78);
      display: flex; align-items: center; justify-content: center;
      transition: background .25s ease, scale .25s ease;
      pointer-events: none;
    }
    .yt-facade:hover .yt-facade-play { background: #f00; scale: 1.06; }
    .yt-facade-play svg { width: 20px; height: 20px; color: #fff; }
    .yt-facade:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

    /* Video list below featured */
    .media-list {
      padding: 1rem 1.5rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .media-list-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 10px;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.02);
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }

    .media-list-item::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #a855f7, #6366f1);
      opacity: 0;
      transition: opacity 0.2s;
    }

    .media-list-item:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(168,85,247,0.25);
      box-shadow: 0 0 20px rgba(168,85,247,0.08);
    }

    .media-list-item:hover::before { opacity: 1; }

    .media-list-thumb {
      width: 80px;
      height: 48px;
      border-radius: 7px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: var(--surface2);
    }

    .media-list-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s;
    }

    .media-list-item:hover .media-list-thumb img { transform: scale(1.05); }

    .media-list-thumb-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.35);
      opacity: 0;
      transition: opacity 0.2s;
    }

    .media-list-thumb-play svg { width: 14px; height: 14px; color: #fff; }
    .media-list-item:hover .media-list-thumb-play { opacity: 1; }

    .media-list-info { flex: 1; min-width: 0; }

    .media-list-title {
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: rgba(255,255,255,0.85);
      transition: color 0.2s;
    }

    .media-list-item:hover .media-list-title { color: #fff; }

    .media-list-meta {
      font-size: 0.62rem;
      color: var(--muted);
      margin-top: 0.2rem;
      letter-spacing: 0.06em;
    }

    .media-list-play {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.2s, background 0.2s;
    }

    .media-list-play svg { width: 9px; height: 9px; color: rgba(255,255,255,0.4); transition: color 0.2s; }
    .media-list-item:hover .media-list-play { border-color: #a855f7; background: rgba(168,85,247,0.15); }
    .media-list-item:hover .media-list-play svg { color: #a855f7; }

    @media (max-width: 900px) {
      .media-cards-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      /* media section mobile — consolidated above */
      .media-list-thumb { width: 72px; height: 44px; flex-shrink: 0; }
      .media-list-title { font-size: 0.75rem; }
    }

    /* ============================================================
       BACK TO TOP BUTTON
    ============================================================ */
    #back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
      background: transparent;
      border: 1.5px solid rgba(0, 255, 140, 0.5);
      border-radius: 50px;
      padding: 0.65rem 1rem 0.55rem;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity 0.3s, transform 0.3s;
      animation: blink-border 2s ease-in-out infinite;
    }

    #back-to-top.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    #back-to-top:hover {
      background: rgba(0, 255, 140, 0.1);
      animation: none;
      border-color: #00ff8c;
    }

    @keyframes blink-border {
      0%, 100% { border-color: rgba(0, 255, 140, 0.5); box-shadow: 0 0 0 0 rgba(0, 255, 140, 0); }
      50%       { border-color: rgba(0, 255, 140, 1);   box-shadow: 0 0 10px 2px rgba(0, 255, 140, 0.2); }
    }

    .btt-arrow {
      width: 18px;
      height: 18px;
      color: #00ff8c;
    }

    .btt-label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #00ff8c;
      white-space: nowrap;
    }

    /* ============================================================
       CONTACT FORM SECTION
    ============================================================ */
    #contact {
      padding: 7rem 3.5rem;
      background: var(--surface);
      border-top: 1px solid var(--border);
    }

    .contact-form-inner {
      max-width: 680px;
      margin: 0 auto;
    }

    .contact-form-inner .section-label { margin-bottom: 0.8rem; }

    .contact-form-inner .section-heading {
      font-size: clamp(2rem, 5vw, 3.5rem);
      margin-bottom: 0.6rem;
    }

    .contact-form-sub {
      font-size: 0.92rem;
      color: var(--muted);
      margin-bottom: 3rem;
      line-height: 1.6;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .form-field label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      font-family: inherit;
      font-size: 0.88rem;
      color: var(--white);
      transition: border-color 0.2s;
      outline: none;
      resize: none;
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: rgba(255,255,255,0.2);
    }

    .form-field input:focus,
    .form-field textarea:focus {
      border-color: rgba(255,255,255,0.35);
    }

    .form-field textarea { min-height: 140px; line-height: 1.6; }
    /* 16px floor on phones: anything smaller makes iOS Safari zoom the whole
       page in on focus — the desktop 0.88rem (14px) is fine with a mouse but
       not a touch keyboard. Placed after the base rule above (same
       specificity) so it actually wins the cascade — a max-width override
       declared earlier in the file loses that tie otherwise. */
    @media (max-width: 768px) {
      .form-field input, .form-field textarea, .form-field select { font-size: 16px; }
    }

    .form-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 2.5rem;
      border: none;
      border-radius: 50px;
      background: var(--white);
      color: var(--bg);
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      align-self: flex-start;
    }

    .form-submit:hover { background: var(--cream); transform: translateY(-2px); }

    /* Hidden by default — shown by the form handler on submit */
    [data-fs-success],
    [data-fs-error] {
      display: none;
    }

    .form-success {
      margin-bottom: 1.5rem;
      padding: 1rem 1.4rem;
      background: rgba(0, 255, 140, 0.08);
      border: 1px solid rgba(0, 255, 140, 0.25);
      border-radius: 10px;
      font-size: 0.85rem;
      color: #00ff8c;
      letter-spacing: 0.04em;
    }

    .form-error {
      margin-bottom: 1.5rem;
      padding: 0.8rem 1.2rem;
      background: rgba(255, 50, 50, 0.08);
      border: 1px solid rgba(255, 50, 50, 0.25);
      border-radius: 10px;
      font-size: 0.83rem;
      color: #ff6060;
    }

    .field-error {
      font-size: 0.72rem;
      color: #ff6060;
      margin-top: 0.2rem;
      min-height: 1em;
    }

    .form-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* ── Contact section in blood red ──
       Cream on the red for everything that sits directly on it (9.6:1), fonts
       unchanged. Fields and the send button are cream with ink / red text; the
       second title line uses the site's yellow (6.2:1) for the two-tone. */
    #contact {
      background: var(--chunk-red);
      border-top: 0;
      color: var(--chunk-cream);
    }
    #contact::before { background: radial-gradient(circle, rgba(255,120,110,0.10) 0%, transparent 65%); }
    #contact .section-heading { color: var(--chunk-cream); margin-bottom: 2.2rem; }
    #contact .section-heading em { color: var(--cta-yellow); }
    #contact .form-field label { color: var(--chunk-cream); }
    #contact .form-field input,
    #contact .form-field textarea {
      background: var(--chunk-cream);
      border: 1px solid transparent;
      color: var(--chunk-ink);
      box-shadow: 0 1px 0 rgba(27,9,6,0.08);
    }
    #contact .form-field input::placeholder,
    #contact .form-field textarea::placeholder { color: rgba(27,9,6,0.42); }
    #contact .form-field input:focus,
    #contact .form-field textarea:focus {
      border-color: var(--chunk-ink);
      box-shadow: 0 0 0 3px rgba(254,249,243,0.35);
    }
    #contact .form-submit { background: var(--cta-yellow); color: var(--chunk-ink); }   /* ink on yellow 10.8:1 */
    #contact .form-submit:hover { background: #ffc94f; }
    #contact .form-submit:focus-visible { outline: 3px solid var(--chunk-cream); outline-offset: 3px; }
    #contact .field-error { color: var(--chunk-cream); font-weight: 700; }
    #contact .form-error {
      background: var(--chunk-cream);
      border-color: transparent;
      color: var(--chunk-ink);
      font-weight: 600;
    }
    #contact .form-success {
      background: rgba(0,0,0,0.22);
      border-color: rgba(254,249,243,0.35);
      color: var(--chunk-cream);
    }
    /* "Message sent" promo card. It never had styles, so after sending a
       message the photo rendered at its natural size and spilled out of the
       success box — the last thing a new lead saw. */
    #contact .fs-ok { margin: 0 0 0.9rem; font-weight: 600; }
    #contact .fs-promo {
      display: flex; align-items: stretch; overflow: hidden;
      border-radius: 12px; background: var(--chunk-ink); color: var(--chunk-cream);
      text-decoration: none; text-align: left; letter-spacing: normal;
      transition: transform 0.2s;
    }
    #contact .fs-promo:hover { transform: translateY(-2px); }
    #contact .fs-promo img { width: 38%; max-width: 180px; aspect-ratio: 4 / 3; object-fit: cover; display: block; flex: none; }
    #contact .fs-promo-body { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 0.9rem 1.1rem; min-width: 0; }
    #contact .fs-promo-kicker { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
    #contact .fs-promo-title { font-size: 1rem; font-weight: 800; }
    #contact .payment-section { border-top-color: rgba(254,249,243,0.22); }
    #contact .pay-social a { color: rgba(254,249,243,0.8); }
    #contact .pay-social a:hover { color: var(--chunk-cream); }

    /* ============================================================
       STRIPE PAYMENT SECTION
    ============================================================ */
    .payment-section {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid var(--border);
    }

    /* Mobile-only socials, stacked under the PAY button (desktop keeps them in the hero) */
    .pay-social {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 1.1rem;
      margin-top: 1rem;
    }
    .pay-social a {
      color: rgba(255,255,255,0.55);
      transition: color 0.2s, transform 0.2s;
    }
    .pay-social a:hover { color: #fff; transform: translateY(-2px); }
    .pay-social svg { width: 18px; height: 18px; display: block; }

    .payment-heading {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
      margin: 0 0 0.5rem;
    }

    .payment-subtitle {
      font-size: 0.85rem;
      color: var(--muted);
      margin: 0 0 1.5rem;
      letter-spacing: 0.02em;
    }

    .payment-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .payment-field {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .payment-field label {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }

    .amount-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .currency-symbol {
      position: absolute;
      left: 1rem;
      color: var(--muted);
      font-weight: 600;
      font-size: 0.95rem;
    }

    .payment-field input,
    .payment-field select {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      font-family: inherit;
      font-size: 0.88rem;
      color: var(--white);
      transition: border-color 0.2s;
      outline: none;
      width: 100%;
      box-sizing: border-box;
    }

    /* only the amount field carries the € symbol, so only it needs the extra left pad */
    .amount-input-wrapper input { padding-left: 2.2rem; }

    .payment-field input:focus,
    .payment-field select:focus {
      border-color: rgba(255, 255, 255, 0.35);
    }

    .payment-field input::placeholder {
      color: rgba(255, 255, 255, 0.2);
    }

    /* custom dropdown chevron + native-UI reset so the select matches the inputs */
    .payment-field select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.4rem;
    }
    .payment-field select option { color: #111; }
    .payment-field select:invalid { color: rgba(255, 255, 255, 0.35); }

    .payment-error {
      font-size: 0.72rem;
      color: #ff6060;
      margin-top: 0.2rem;
      min-height: 1em;
    }

    /* accepted payment-method badges under the Pay Now button */
    .payment-methods {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 0.4rem;
    }
    .pm-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 26px;
      border-radius: 5px;
      background: #f4f4f6;
      border: 1px solid rgba(255,255,255,0.12);
      overflow: hidden;
    }
    .pm-badge svg { width: 100%; height: 100%; display: block; }

    .payment-submit {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      align-self: flex-start;
      margin-top: 0.5rem;
      padding: 0.4rem 0;
      border: none;
      background: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background-image: linear-gradient(90deg, #a855f7, #6366f1, #3f8cff);
      background-size: 100% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: opacity 0.2s, transform 0.2s, gap 0.2s;
    }

    .payment-submit-arrow {
      transition: transform 0.2s;
    }

    .payment-submit:hover {
      opacity: 0.8;
      gap: 0.75rem;
    }

    .payment-submit:hover .payment-submit-arrow {
      transform: translateX(3px);
    }

    .payment-submit:active { opacity: 0.6; }

    .payment-submit:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* ---- payment modal ---- */
    .payment-modal {
      position: fixed;
      inset: 0;
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .payment-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .payment-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .payment-modal-card {
      position: relative;
      width: 100%;
      max-width: 420px;
      background: #111;
      border: 1px solid var(--border, rgba(255,255,255,0.1));
      border-radius: 20px;
      overflow: hidden;   /* clips the scrollable inner content to the rounded corners */
      box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
      transform: translateY(16px) scale(0.97);
      opacity: 0;
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
    }

    .payment-modal.open .payment-modal-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Everything except the close button lives in here, so long forms can scroll
       internally without the close button (pinned to the card, not this wrapper)
       ever moving. */
    .payment-modal-scroll {
      max-height: inherit;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 2rem 1.75rem;
    }

    /* ── Send a Payment form in brushed silver ──
       Scoped to the modal so nothing else shifts. Ink for everything on the
       metal (16:1 at the top, 9.9:1 at the darkest edge), white fields with ink
       text, a dark button, and errors in the contact section's blood red
       (7:1 mid-card). These come after the #contact rules on purpose: the modal
       lives inside that section, so its cream/red button styling would
       otherwise win. */
    #payment-modal .payment-modal-card {
      /* Brushed metal rather than a flat fill: a bright sweep across the top
         left, a soft band of light through the middle and a darker foot, so the
         card reads as a sheet of silver catching light. */
      background:
        radial-gradient(120% 80% at 14% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(162deg,
          #D6DBE3 0%, #C3CAD4 22%, #AEB6C2 48%, #C0C7D2 62%, #9AA2B0 84%, #8F97A5 100%);
      border: 1px solid rgba(20,24,32,0.22);
      /* Depth: a bright top edge and a dark foot inside the card, a cool halo
         outside it, and a long shadow to lift it off the page. */
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -1px 0 rgba(20,24,32,0.35),
        0 2px 0 rgba(20,24,32,0.18),
        0 26px 60px -18px rgba(40,50,70,0.55),
        0 40px 90px -30px rgba(0,0,0,0.7);
    }
    /* A fine sheen across the top of the card — a plain gradient, no blur. */
    #payment-modal .payment-modal-card::before {
      content: '';
      position: absolute; inset: 0 0 auto 0; height: 46%;
      background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
      pointer-events: none;
    }
    #payment-modal .payment-modal-scroll { position: relative; }   /* above the sheen */
    #payment-modal .payment-heading { color: var(--chunk-ink); }
    #payment-modal .payment-subtitle { color: rgba(20,24,32,0.8); }
    #payment-modal .payment-field label { color: var(--chunk-ink); }
    #payment-modal .currency-symbol { color: rgba(20,24,32,0.7); }
    /* Fields sit INTO the card: a soft inner shadow at the top, a hairline
       highlight underneath, so they read as recessed rather than pasted on.
       color-scheme:light pins the browser's own control rendering to the light
       palette — without it a visitor in dark mode gets dark UA styling for the
       select, its drop-down list and the caret, on top of our light field. */
    #payment-modal { color-scheme: light; }
    #payment-modal .payment-field input,
    #payment-modal .payment-field select {
      background-color: #ffffff;
      background-image: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
      border: 1px solid rgba(20,24,32,0.3);
      color: var(--chunk-ink);
      -webkit-text-fill-color: var(--chunk-ink);   /* iOS ignores `color` on some controls */
      box-shadow: inset 0 2px 4px rgba(20,24,32,0.16), 0 1px 0 rgba(255,255,255,0.75);
      opacity: 1;                                  /* iOS dims disabled-looking selects */
    }
    /* The chevron is drawn as a background image on the base rule; the gradient
       above would replace it, so it is restated here (and darkened to match the
       ink text) along with the list itself. */
    #payment-modal .payment-field select {
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231B0906' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
      background-repeat: no-repeat, no-repeat;
      background-position: right 1rem center, 0 0;
      background-size: 12px 8px, 100% 100%;
    }
    /* The drop-down list is drawn by the operating system: both colours have to
       be stated or a dark-mode browser paints dark text on a dark list. */
    #payment-modal .payment-field select option { color: #111111; background-color: #ffffff; }
    /* Chrome's autofill repaints the field its own colour; the inset shadow
       trick is the only way to keep it white with readable text. */
    #payment-modal .payment-field input:-webkit-autofill,
    #payment-modal .payment-field input:-webkit-autofill:hover,
    #payment-modal .payment-field input:-webkit-autofill:focus {
      -webkit-box-shadow: inset 0 0 0 100px #ffffff, inset 0 2px 4px rgba(20,24,32,0.16);
      -webkit-text-fill-color: var(--chunk-ink);
      caret-color: var(--chunk-ink);
    }
    /* Windows High Contrast / forced colours: let the OS palette through
       instead of fighting it, so the fields keep their edges there too. */
    @media (forced-colors: active) {
      #payment-modal .payment-field input,
      #payment-modal .payment-field select { border-color: CanvasText; forced-color-adjust: auto; }
    }
    #payment-modal .payment-field input::placeholder { color: rgba(20,24,32,0.5); -webkit-text-fill-color: rgba(20,24,32,0.5); opacity: 1; }
    #payment-modal .payment-field input:focus,
    #payment-modal .payment-field select:focus {
      border-color: rgba(20,24,32,0.55);
      box-shadow: inset 0 2px 4px rgba(20,24,32,0.12), 0 0 0 3px rgba(20,24,32,0.18);
    }
    #payment-modal .payment-field select:invalid { color: rgba(20,24,32,0.55); -webkit-text-fill-color: rgba(20,24,32,0.55); }
    #payment-modal .payment-error { color: #5A0101; }   /* 6.3:1 on the darker metal */
    #payment-modal .form-submit,
    #payment-modal .payment-submit {
      background: linear-gradient(180deg, #2C3240 0%, #171B24 62%, #0A0C11 100%);
      color: #ffffff;
      border: 1px solid rgba(0,0,0,0.55);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 8px 18px -6px rgba(30,38,55,0.6);
    }
    #payment-modal .form-submit:hover,
    #payment-modal .payment-submit:hover {
      background: linear-gradient(180deg, #3A4152 0%, #20252F 62%, #0F1218 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 22px -6px rgba(30,38,55,0.65);
    }
    #payment-modal .payment-modal-close {
      background: rgba(20,24,32,0.10); color: var(--chunk-ink);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    }
    #payment-modal .payment-modal-close:hover { background: rgba(20,24,32,0.2); }
    #payment-modal .pm-badge { box-shadow: 0 1px 2px rgba(20,24,32,0.3), inset 0 1px 0 rgba(255,255,255,0.9); }
    /* Hairline rule under the title, the way a printed form is set. */
    #payment-modal .payment-heading {
      padding-bottom: 0.7rem;
      border-bottom: 1px solid rgba(20,24,32,0.18);
      box-shadow: 0 1px 0 rgba(255,255,255,0.8);
    }
    #payment-modal-success div[style*="font-size:2rem"] { color: var(--chunk-ink); }

    .payment-modal-close {
      position: absolute;
      top: 0.9rem;
      right: 0.9rem;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: var(--muted, #999);
      font-size: 1.3rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
      z-index: 3;
    }

    .payment-modal-close:hover {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }

    .payment-modal .payment-heading { margin-bottom: 0.4rem; }
    .payment-modal .payment-subtitle { margin-bottom: 1.5rem; }

    body.payment-modal-open { overflow: hidden; }

    @media (max-width: 768px) {
      .payment-section { margin-top: 2rem; padding-top: 1.5rem; }
      .pay-social { display: flex; }
      .payment-heading { font-size: 0.92rem; }
      .payment-subtitle { font-size: 0.8rem; }

      /* Bottom sheet instead of a centered card — avoids a tall form fighting
         for space with a floating dialog on a small screen. Height uses dvh
         (falls back to vh) so it's sized to what's ACTUALLY visible, not the
         address-bar-collapsed max — otherwise content hides behind Safari's
         toolbar chrome. */
      .payment-modal { align-items: flex-end; padding: 0; }
      .payment-modal-card {
        max-width: 100%;
        max-height: 82vh;
        max-height: 82dvh;
        border-radius: 18px 18px 0 0;
      }
      .payment-modal.open .payment-modal-card { transform: translateY(0); }
      .payment-modal-scroll { padding: 1.25rem 1.1rem 1.1rem; }

      /* tighter rhythm — same fields, less scroll */
      .payment-form { gap: 0.55rem; }
      .payment-field label { font-size: 0.68rem; margin-bottom: 0.3rem; }
      /* 16px floor: below that iOS Safari zooms the whole page in on focus —
         this rule was shrinking it further than the desktop size, not raising it. */
      .payment-field input,
      .payment-field select { padding: 0.65rem 0.85rem; font-size: 16px; }
      .amount-input-wrapper input { padding-left: 2rem; }
      #payment-btn { padding: 0.85rem 2rem; margin-top: 0.15rem; }
      .payment-methods { margin-top: 0.2rem; }
      .pm-badge { width: 40px; height: 22px; }

      .payment-modal-close { width: 34px; height: 34px; font-size: 1.2rem; }
    }

    /* contact + back-to-top mobile — consolidated above */

    /* The hero-rotation banner that briefly lived in the Learn AI card is
       parked in tools/parked-hero-rotation.html — CSS, markup and script, with
       notes on putting it back. Its artwork stays in hero-gallery/. */

    #ai-banner-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* The overlay stays with the section, not with whatever media is in it.
       The webreel has bright dust-and-sand frames that wash the headline out
       just as the rotation's pale slides did, so the same veil applies —
       at the halved strength that was settled on, which keeps the footage
       clearly readable underneath. */
    .ai-card-media::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(8,8,10,.38) 0%, rgba(8,8,10,.33) 60%, rgba(8,8,10,.26) 100%);
    }

    /* ============================================================
       AI CLASS BANNER — "Join Class" card with iridescent capsule CTA
    ============================================================ */
    @property --ring-angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }

    /* stage = centering wrapper; bottom padding gives the half-out button room */
    .ai-card-stage {
      width: 100%;
      max-width: 640px;
      margin: 3rem auto 2rem;
      padding: 0 1.5rem 36px;
    }

    #ai-banner.ai-card {
      position: relative;
      border-radius: 0;             /* sharp rectangular edges */
      overflow: visible;            /* CRITICAL: lets the button hang out */
      background: #111113;
      cursor: pointer;
    }

    .ai-card-media {
      position: relative;
      border-radius: 0;             /* sharp rectangular edges */
      overflow: hidden;
      aspect-ratio: 1300 / 470;
    }

    .ai-card-scrim {
      display: none;
    }

    .ai-card-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 24px 20px 40px;
      text-align: center;
      z-index: 2;
    }

    .ai-card-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      border: 1.5px solid rgba(74, 222, 128, .55);
      border-radius: 999px;
      color: #6ee7a8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      background: rgba(10,20,12,.25);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }
    .ai-card-badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 10px #4ade80;
    }

    .ai-card-headline {
      color: #f4f3f7;
      font-weight: 900;
      font-size: clamp(1.5rem, 4.2vw, 2.4rem);
      line-height: 1.05;
      letter-spacing: -.02em;
      text-transform: uppercase;
      /* Back to the single wide shadow. The tighter second one existed to hold
         the headline over the rotation's bright slides; the webreel is
         uniformly dark, so it is not needed and only muddied the type. */
      text-shadow: 0 4px 30px rgba(0,0,0,.5);
    }
    .ai-card-headline em {
      font-style: normal;
      background: linear-gradient(100deg, #a855f7 0%, #7c6cf7 50%, #6d8bf9 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    /* ==========================================================
       JOIN CLASS — iridescent glass capsule
       Straddles the card's bottom edge: 50% inside, 50% outside.
       Layers (back→front): blurred halo (::after) → white bloom
       (.bloom) → crisp refraction ring (::before) → glass body →
       label.
       ========================================================== */
    .join-btn {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 50%);   /* 50% inside, 50% sticking out */
      z-index: 3;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 18px 41px;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      isolation: isolate;

      /* near-black glass interior */
      background:
        radial-gradient(140% 160% at 72% -20%, rgba(160,170,185,.28), rgba(70,74,84,.10) 38%, rgba(8,8,10,0) 62%),
        radial-gradient(120% 130% at 50% 120%, rgba(30,32,40,.5), rgba(8,8,10,0) 60%),
        #0b0b0e;
      color: #eef0f5;
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: clamp(15px, 1.84vw, 18px);
      letter-spacing: .16em;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 1px 2px rgba(0,0,0,.6);

      box-shadow:
        0 0 0 8px var(--bg, #0c0c0c),       /* punch-through ring matching page bg */
        0 0 0 9.5px rgba(255,255,255,.07),  /* faint outer capsule rim */
        inset 0 1px 1px rgba(255,255,255,.18),
        inset 0 -12px 26px rgba(0,0,0,.7),
        0 22px 48px -10px rgba(0,0,0,.75);
      transition: transform .2s ease, filter .2s ease;
    }

    /* refraction ring: mostly white light with chromatic streaks + dark gaps */
    .join-btn::before {
      content: "";
      position: absolute;
      inset: -2.5px;
      border-radius: inherit;
      padding: 3px;                       /* = ring thickness */
      background: conic-gradient(from var(--ring-angle, 0deg) at 50% 50%,
        #ffffff 0deg,
        #ffffff 28deg,
        #eaf4ff 55deg,            /* blazing white arc */
        #9fd9ff 80deg,
        rgba(35,42,60,.9) 100deg, /* dim gap */
        #46c8ff 118deg,
        rgba(18,22,38,.85) 132deg,
        #6fb7ff 148deg,
        rgba(10,10,14,.9) 165deg, /* dark gap */
        #ff5a2a 182deg,           /* orange-red burst */
        rgba(40,12,6,.9) 192deg,
        #ffb02a 202deg,
        rgba(12,13,20,.9) 216deg,
        #3f8cff 238deg,
        #8fe0ff 262deg,
        rgba(28,34,52,.85) 280deg,
        #cfeaff 305deg,
        #ffffff 335deg,
        #ffffff 360deg);
      /* mask-composite ring trick: keep only the 3px border band */
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      z-index: -1;
      animation: spin-ring 14s linear infinite;
    }

    /* soft blurred halo of the same refraction ring (gaps fully transparent) */
    .join-btn::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      background: conic-gradient(from var(--ring-angle, 0deg) at 50% 50%,
        #ffffff 0deg, #ffffff 40deg, #bfe2ff 70deg,
        rgba(20,26,44,0) 100deg, #46c8ff 120deg, rgba(10,12,20,0) 140deg,
        rgba(10,10,14,0) 165deg, #ff5a2a 184deg, rgba(20,8,4,0) 196deg,
        #ffb02a 204deg, rgba(10,11,18,0) 220deg, #3f8cff 240deg,
        #8fe0ff 262deg, rgba(20,24,40,0) 282deg, #cfeaff 308deg, #ffffff 360deg);
      filter: blur(13px);
      opacity: .55;
      z-index: -2;
      animation: spin-ring 14s linear infinite;
    }

    /* asymmetric white light bloom washing the right side */
    .join-btn .bloom {
      position: absolute;
      top: -45%;
      right: -10%;
      width: 38%;
      height: 190%;
      background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 75%);
      filter: blur(12px);
      z-index: -2;
      pointer-events: none;
      animation: bloom-drift 14s ease-in-out infinite;
    }

    @keyframes spin-ring {
      to { --ring-angle: 360deg; }
    }
    @keyframes bloom-drift {
      0%, 100% { opacity: .9; transform: translateX(0); }
      50%      { opacity: .55; transform: translateX(-14px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .join-btn::before, .join-btn::after, .join-btn .bloom { animation: none; }
    }

    .join-btn .label {
      position: relative;
      z-index: 2;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(255,255,255,.35);
    }

    .join-btn:hover {
      transform: translate(-50%, calc(50% - 4px));  /* keep the -50% X! */
      filter: brightness(1.07);
    }
    .join-btn:active {
      transform: translate(-50%, calc(50% - 1px));
    }

    /* ── AI card — mobile ── */
    @media (max-width: 768px) {
      .ai-card-stage { margin: 2rem auto 1.25rem; padding: 0 1rem 36px; }
      .ai-card-media { aspect-ratio: 2.35 / 1; }   /* ~18% taller than the desktop ratio so it reads better on phones */
      .ai-card-content { gap: 12px; padding: 20px 16px 32px; }
      .ai-card-badge { font-size: 10px; padding: 6px 13px; gap: 8px; }
      .ai-card-headline { font-size: clamp(1.4rem, 7vw, 2rem); }
    }
    @media (max-width: 480px) {
      .join-btn { padding: 15px 32px; font-size: 14px; }
    }

    /* ============================================================
       TESTIMONIAL MARQUEE — scrolling praise strip under AI card
    ============================================================ */
    .testimonial-strip {
      width: 100%;
      max-width: 640px;
      margin: 0 auto 3rem;
      padding: 0 1.5rem;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .testimonial-track {
      display: flex;
      width: max-content;
      gap: 2.5rem;
      animation: testimonial-scroll 533s linear infinite;
    }
    .testimonial-strip:hover .testimonial-track {
      animation-play-state: paused;
    }
    .testimonial-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      white-space: nowrap;
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
    }
    .testimonial-item .flag { font-size: 1rem; }
    .testimonial-item .quote { color: rgba(255,255,255,.78); }
    .testimonial-item .name { font-weight: 700; color: rgba(255,255,255,.5); }
    .testimonial-item .dot { color: rgba(255,255,255,.25); }

    @keyframes testimonial-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .testimonial-track { animation: none; }
    }
    @media (max-width: 768px) {
      .testimonial-strip { margin: 0 auto 2rem; padding: 0 1rem; }
      .testimonial-item { gap: 0.5rem; font-size: 0.78rem; }
      .testimonial-item .flag { font-size: 0.95rem; }
      .testimonial-track { gap: 1.8rem; }
    }

    /* ============================================================
       BROWSE ALL BUTTON
    ============================================================ */
    .media-browse-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.85rem;
      border: none;
      border-top: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      margin-top: auto;
    }
    .media-browse-btn:hover { background: var(--surface2); color: var(--white); }
    .media-card--video .media-browse-btn:hover { color: #f5a623; }
    .media-card--podcast .media-browse-btn:hover { color: #a855f7; }

    /* ============================================================
       VIDEO BROWSE MODAL
    ============================================================ */
    #video-modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: flex;
      flex-direction: column;
      background: rgba(8,8,8,0.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    #video-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.2rem 1.6rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .modal-title {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .modal-tag {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.25rem 0.7rem;
      border-radius: 50px;
      border: 1px solid;
    }

    .modal-tag--video { border-color: rgba(245,166,35,0.5); color: #f5a623; }
    .modal-tag--podcast { border-color: rgba(168,85,247,0.5); color: #a855f7; }

    .modal-heading {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-transform: uppercase;
    }

    .modal-count {
      font-size: 0.68rem;
      color: var(--muted);
      letter-spacing: 0.08em;
    }

    /* Back button — hidden on desktop, giant on mobile */
    .modal-back-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 100px;
      padding: 0.75rem 1.6rem;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .modal-back-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .modal-back-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }

    @media (max-width: 768px) {
      .modal-back-btn { display: flex; }
      .modal-close, .gm-close, .wm-close { display: none !important; }

      /* Back button → floating side tab, vertically centred on the left edge, so it's
         never hidden under the mobile browser's address bar. Content scrolls under it. */
      #work-modal .modal-back-btn,
      #video-modal .modal-back-btn {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        gap: 0.35rem;
        padding: 0.65rem 1rem 0.65rem 0.7rem;
        border-radius: 0 100px 100px 0;   /* tab attached to the left edge */
        border-left: none;
        font-size: 0.75rem;
        background: rgba(18,18,18,0.9);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 6px 24px rgba(0,0,0,0.55);
      }

      /* Drop the header title text on mobile and collapse the now-empty top bar */
      #work-modal .wm-title,
      #video-modal .modal-title { display: none; }
      #work-modal .wm-header,
      #video-modal .modal-header {
        padding: 0;
        min-height: 0;
        border-bottom: none;
      }
    }

    .modal-close {
      background: none;
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--muted);
      font-size: 1rem;
      transition: border-color 0.2s, color 0.2s;
      flex-shrink: 0;
    }

    .modal-close:hover { border-color: var(--white); color: var(--white); }

    /* Player area — shows when a video is selected */
    .modal-player {
      flex-shrink: 0;
      background: #000;
      display: none;
      position: relative;
    }

    .modal-player.active { display: block; }

    .modal-player iframe {
      width: 100%;
      aspect-ratio: 16/9;
      max-height: 45vh;
      border: none;
      display: block;
    }

    .modal-player-close {
      position: absolute;
      top: 0.5rem; right: 0.5rem;
      background: rgba(0,0,0,0.7);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%;
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--white);
      font-size: 0.8rem;
      z-index: 10;
    }

    /* Scrollable grid */
    .modal-grid-wrap {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem 2rem 2rem;
      overscroll-behavior: contain;
    }

    .modal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
    }

    .modal-video-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s, transform 0.2s;
    }

    .modal-video-card:hover { border-color: var(--border-h); transform: translateY(-3px); }
    .modal-video-card.playing { border-color: #f5a623; }
    #video-modal[data-type="podcast"] .modal-video-card.playing { border-color: #a855f7; }

    .modal-thumb-wrap {
      position: relative;
      aspect-ratio: 16/9;
      background: var(--surface2);
    }

    .modal-thumb-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    .modal-thumb-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .modal-video-card:hover .modal-thumb-overlay { background: rgba(0,0,0,0.1); }

    .modal-thumb-overlay svg {
      width: 32px; height: 32px;
      color: #fff;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    }

    .modal-duration {
      position: absolute;
      bottom: 0.4rem; right: 0.5rem;
      background: rgba(0,0,0,0.8);
      border-radius: 3px;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 0.1rem 0.35rem;
      color: #fff;
    }

    .modal-video-info {
      padding: 0.65rem 0.8rem 0.75rem;
    }

    .modal-video-title {
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .modal-video-meta {
      font-size: 0.6rem;
      color: var(--muted);
      margin-top: 0.25rem;
      letter-spacing: 0.06em;
    }

    .modal-empty {
      color: var(--muted);
      font-size: 0.85rem;
      text-align: center;
      padding: 3rem 0;
      grid-column: 1/-1;
    }

    /* video modal mobile — consolidated above */

    /* ============================================================
       VISUALS SECTION — GRAPHICS & AI VISUALS
    ============================================================ */
    #visuals {
      padding: 7rem 1.5rem;
      background: var(--bg);
      border-top: 1px solid var(--border);
    }

    /* ── Visual cards — no top accent bar (image fills everything) ── */
    .media-card--graphics,
    .media-card--ai-vis {
      border: none;
      background: transparent;
      border-radius: 16px;
    }

    .media-card--graphics::before,
    .media-card--ai-vis::before { display: none; }

    .media-card--graphics .media-browse-btn:hover { color: #00c4a7; }
    .media-card--ai-vis .media-browse-btn:hover   { color: #f59e0b; }

    /* ── TCN-style full-bleed slideshow ── */
    .vs-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: #0a0a0a;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(255,255,255,0.07);
    }

    .vs-slideshow {
      position: relative;
      width: 100%;
      aspect-ratio: 16/13;
      overflow: hidden;
      flex-shrink: 0;
    }

    /* ── Tabbed Graphics / AI card ── */
    .vs-card--tabbed { position: relative; }
    .vs-seg { display: none; }
    .vs-seg.vs-seg--active { display: block; }
    .vs-segtabs {
      position: absolute;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      z-index: 6;
      display: flex;
      gap: 4px;
      padding: 4px;
      background: rgba(10,10,10,0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 100px;
    }
    .vs-segtab {
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.72);
      font: 700 0.7rem/1 'Inter', sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 7px 14px;
      border-radius: 100px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .vs-segtab:hover { color: #fff; }
    .vs-segtab.active { background: #fff; color: #000; }

    /* ── Camera-video segment on the photography card ──
       ONE film on screen at a time with arrows to move between them — the same
       idiom as the photography slideshow it shares a card with. A 2x2 grid put
       four competing thumbnails in the space of one and fetched four YouTube
       stills for a tab many visitors never open; only the current film's
       thumbnail is in the DOM now. Shares .vs-slideshow's aspect-ratio so
       switching tabs doesn't resize the card. */
    .vs-vidreel {
      position: relative;
      width: 100%;
      aspect-ratio: 16/13;
      background: #0a0a0a;
      overflow: hidden;
    }
    /* No display rule of its own: `.vs-seg.vs-seg--active { display: block }`
       above already does the right thing for a block container. The old grid
       version needed an override here only because grid isn't block. */
    .vs-vidstage { position: absolute; inset: 0; z-index: 1; }
    /* The document-level .yt-facade handler swaps the button for an iframe on
       click; sizing the iframe here too keeps the stage from collapsing. */
    .vs-vidstage .yt-facade,
    .vs-vidstage iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0; display: block;
    }
    .vs-vidstage .yt-facade img { border-radius: 0; }

    /* Once a film is playing, the overlay's bottom gradient and title would sit
       on top of the picture, so it comes out entirely. It returns when playback
       is torn down (tab switch, arrow, or the card scrolling out of view). */
    .vs-vidreel.is-playing .vs-overlay { display: none; }

    /* Counter sits where the photography slideshow puts its dots. It gets its
       own class because `.vs-dots` is display:none site-wide. */
    .vs-vidcount {
      font: 700 0.68rem/1 'Inter', sans-serif;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.62);
      font-variant-numeric: tabular-nums;
    }

    /* ── Gallery modal sub-tabs ── */
    .gm-segtabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      margin-left: auto;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 100px;
    }
    .gm-segtab {
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.72);
      font: 700 0.72rem/1 'Inter', sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 100px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .gm-segtab:hover { color: #fff; }
    .gm-segtab.active { background: #fff; color: #000; }

    .vs-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1) translate(0, 0);
      transition: opacity 1.15s ease, transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    /* Entry states — each defines where the slide enters FROM */
    .vs-trans-zoom  { transform: scale(1.13); }
    .vs-trans-up    { transform: translateY(38px) scale(1.03); }
    .vs-trans-left  { transform: translateX(38px); }
    .vs-trans-rgt   { transform: translateX(-38px); }
    /* vs-trans-fade: no extra transform */

    /* Active overrides all entry transforms */
    .vs-slide.active {
      opacity: 1;
      transform: scale(1) translate(0, 0);
    }

    .vs-slide img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Cinematic overlays — TCN style: dark left edge + heavy bottom gradient */
    .vs-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      pointer-events: none;
    }

    .vs-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top,  rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.1) 68%, transparent 100%),
        linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 60%);
    }

    /* Top-left eyebrow lines (like TCN category stacks) */
    .vs-eyebrow {
      position: absolute;
      top: 1.4rem;
      left: 1.6rem;
      z-index: 4;
      pointer-events: none;
    }

    .vs-eyebrow-line {
      display: block;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
    }

    /* Bottom content area */
    .vs-content {
      position: relative;
      z-index: 4;
      padding: 0 1.6rem 0.5rem;
      pointer-events: none;
    }

    .vs-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.26rem 0.7rem;
      border-radius: 3px;
      margin-bottom: 0.65rem;
    }

    .media-card--graphics .vs-badge { background: #00c4a7; color: #000; }
    .media-card--ai-vis   .vs-badge { background: #f59e0b; color: #000; }
    .media-card--photo    .vs-badge { background: #8b9cff; color: #000; }
    #graphics-wrap .vs-badge        { background: #00c4a7; color: #000; }

    .vs-title {
      font-size: clamp(1.8rem, 3.2vw, 2.8rem);
      font-weight: 900;
      letter-spacing: -0.025em;
      line-height: 0.95;
      text-transform: uppercase;
      color: #fff;
      text-shadow: 0 2px 24px rgba(0,0,0,0.6);
      margin-bottom: 0.3rem;
    }

    .vs-sub {
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.05em;
      margin-bottom: 0.1rem;
    }

    /* Nav row: arrows + dots INSIDE the image at the bottom */
    .vs-nav {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 1.3rem 1.1rem;
      pointer-events: auto;
    }

    .vs-arrow {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.75);
      cursor: pointer;
      font-size: 0.9rem;
      font-family: inherit;
      line-height: 1;
      flex-shrink: 0;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .vs-arrow:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.45); color: #fff; }

    .vs-dots { display: none; }
    .vs-dot  { display: none; }

    /* Ensure eyebrow sits above slides */
    .vs-eyebrow { z-index: 4; }

    @media (max-width: 900px) {
      .vs-slideshow { aspect-ratio: 4/3; }
    }

    @media (max-width: 768px) {
      .vs-title { font-size: clamp(1.4rem, 6vw, 2rem); }
    }

    /* ── Whole vs-card is clickable ── */
    .vs-card { cursor: pointer; }

    /* ============================================================
       GALLERY MODAL — viewer + filmstrip
    ============================================================ */
    #gallery-modal {
      position: fixed;
      inset: 0;
      z-index: 9200;
      background: rgba(5,5,5,0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    #gallery-modal.open { opacity: 1; pointer-events: auto; }

    .gm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.4rem;
      padding: 1rem 1.8rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .gm-title { display: flex; align-items: center; gap: 1.1rem; }

    .gm-badge {
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.25rem 0.65rem;
      border-radius: 3px;
    }

    .gm-badge--graphics { background: #00c4a7; color: #000; }
    .gm-badge--ai       { background: #f59e0b; color: #000; }
    .gm-badge--photo    { background: #8b9cff; color: #000; }

    .gm-heading {
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-transform: uppercase;
    }

    .gm-count { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.08em; }

    .gm-close {
      background: none;
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--muted);
      font-size: 1rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .gm-close:hover { border-color: #fff; color: #fff; }

    /* Big viewer area */
    .gv-stage {
      flex: 1;
      position: relative;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      min-height: 200px;
      touch-action: pan-y;
    }

    .gv-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
      transition: opacity 0.2s ease;
      will-change: opacity;
    }

    .gv-img.fade { opacity: 0; }

    .gv-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: rgba(255,255,255,0.8);
      font-size: 1.2rem;
      font-family: inherit;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      z-index: 10;
    }

    .gv-nav-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); color: #fff; }
    .gv-prev { left: 1.2rem; }
    .gv-next { right: 1.2rem; }

    .gv-counter {
      position: absolute;
      bottom: 0.8rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.4);
      pointer-events: none;
    }

    /* Filmstrip */
    .gv-strip-wrap {
      flex-shrink: 0;
      overflow-x: auto;
      background: #0a0a0a;
      border-top: 1px solid var(--border);
      padding: 0.7rem 1rem;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.15) transparent;
    }

    .gv-strip-wrap::-webkit-scrollbar { height: 4px; }
    .gv-strip-wrap::-webkit-scrollbar-track { background: transparent; }
    .gv-strip-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

    .gv-strip {
      display: flex;
      gap: 6px;
      width: max-content;
    }

    .gv-thumb {
      width: 88px;
      height: 64px;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      flex-shrink: 0;
      border: 2px solid transparent;
      transition: border-color 0.2s, opacity 0.2s;
      opacity: 0.55;
    }

    .gv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .gv-thumb:hover { opacity: 0.85; border-color: rgba(255,255,255,0.3); }
    .gv-thumb.active { opacity: 1; border-color: #fff; }

    @media (max-width: 768px) {
      #visuals { padding: 4rem 1rem; }

      /* Header: drop the badge/count on mobile (like the work/reels modals) so
         the Graphics/AI filter bar sits alone, centred, at the top. */
      .gm-header {
        padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1rem 0.6rem;
        flex-wrap: wrap;
        row-gap: 0.6rem;
        justify-content: center;
        min-height: 0;
      }
      #gallery-modal .gm-title { display: none; }
      .gm-segtabs { margin: 0 auto; width: auto; justify-content: center; }
      .gm-segtab { padding: 8px 14px; }

      /* Back → floating left-edge tab, same pattern as the work/reels modals so
         navigation feels identical across sections. Pinned just below the filter
         bar and above the vertically-centred image arrows, so it can never hide
         under the "search"/filter section or collide with the nav arrows. */
      #gallery-modal .modal-back-btn {
        position: fixed;
        left: 0;
        top: calc(env(safe-area-inset-top, 0px) + 64px);
        z-index: 30;
        gap: 0.35rem;
        padding: 0.6rem 1rem 0.6rem 0.7rem;
        font-size: 0.75rem;
        border-radius: 0 100px 100px 0;   /* tab attached to the left edge */
        border-left: none;
        background: rgba(18,18,18,0.9);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 6px 24px rgba(0,0,0,0.55);
      }

      .gv-nav-btn { width: 44px; height: 44px; font-size: 1rem; }
      .gv-thumb { width: 68px; height: 50px; }
    }

    /* ============================================================
       WORK MODAL — overlay for extra projects
    ============================================================ */
    #work-modal {
      position: fixed;
      inset: 0;
      z-index: 9100;
      display: flex;
      flex-direction: column;
      background: rgba(8,8,8,0.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    #work-modal.open { opacity: 1; pointer-events: auto; }

    .wm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.4rem 2rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .wm-title { display: flex; align-items: center; gap: 1rem; }

    .wm-tag {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.25rem 0.7rem;
      border-radius: 50px;
      border: 1px solid rgba(240,237,232,0.3);
      color: var(--cream);
    }

    .wm-heading {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-transform: uppercase;
    }

    .wm-count { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.08em; }

    .wm-close {
      background: none;
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: var(--muted);
      font-size: 1rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .wm-close:hover { border-color: #fff; color: #fff; }

    .wm-grid-wrap {
      flex: 1;
      overflow-y: auto;
      padding: 2rem;
      overscroll-behavior: contain;
    }

    .wm-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);   /* See All Projects modal: 3 across */
      gap: 1rem;
    }

    @media (max-width: 768px) {
      .wm-header { padding: 1rem; }
      .wm-grid-wrap { padding: 1rem; }
      /* Two columns, matching the 900px tablet breakpoint — a single
         column made every visitor scroll through 8+ full-width cards to
         see the whole set. 16/9 cards still read fine at 2-up down to
         phone width; only the type inside them needs to shrink. */
      .wm-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
      .wm-grid .card-name { font-size: 0.78rem; }
      .wm-grid .card-cat  { font-size: 0.58rem; }
    }

    /* Moved here (from just above process/media-cards-grid earlier in the
       file) — same-specificity rules resolve by SOURCE ORDER regardless of
       which media query they're in, so this whole mobile block was losing
       every property that a later desktop rule also set: section padding,
       the contact form's two-up name/email row not stacking, gallery/work
       modal spacing, etc. Keeping it last guarantees it wins. */
    /* ============================================================
       RESPONSIVE — MOBILE 768px
    ============================================================ */
    @media (max-width: 768px) {
      /* ── Nav — logo only, not fixed so it scrolls away ── */
      #nav {
        position: absolute;
        padding: 1rem 1rem;
        background: none !important;
      }
      #nav::before { display: none; } /* remove scrolled gradient */
      .nav-right { display: none !important; }
      .nav-hamburger { display: none !important; } /* pill nav is the only menu */
      #mobile-nav { display: none !important; }    /* overlay not needed */
      .nav-brand img { height: 38px; }

      /* ── Hero ── */
      /* Cede half the circle so it lands whole inside the first screen. */
      #hero { min-height: calc(100vh - var(--vk-d) + var(--vk-in)); min-height: calc(100svh - var(--vk-d) + var(--vk-in)); height: calc(100vh - var(--vk-d) + var(--vk-in)); height: calc(100svh - var(--vk-d) + var(--vk-in)); }
      .hero-content { padding: 0 1.2rem 2.5rem; }
      .hero-title { font-size: clamp(2.4rem, 11vw, 3.5rem); line-height: 0.9; }
      .hero-desc-row { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
      .pill-dock { bottom: calc(var(--vk-in) + 20px); max-width: calc(100vw - 24px); }
      .pill-dock.pinned { top: 10px; }
      .hero-nav-links { gap: 1px; }
      /* Phones: bold, a step bigger, and the bar runs nearly the full width
         (viewport minus 12px a side, capped on big phones); the five items
         spread across it. */
      .hero-nav-links li a { padding: 0.5rem 0.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
      .hero-nav-cta { padding: 0.5rem 0.7rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
      .hero-nav-pill { width: min(calc(100vw - 24px), 440px); }
      .pill-menu { justify-content: space-between; width: 100%; }
      .pill-menu .hero-nav-links { display: contents; }
      .pill-chat-toggle { padding: 0.46rem 0.72rem; gap: 0.3em; }
      /* 16px floor: iOS Safari zooms the whole page into any input smaller than that. */
      .pill-ask input[type="text"]:not(.pill-ask-hp) { font-size: 16px; }
      .pill-ask input::placeholder { font-size: 14px; }
      .pill-ask-ghost { font-size: 14px; }

      /* ── Marquee ── */
      .marquee-wrap { height: 38px; }
      .marquee-track span { font-size: 1rem; }

      /* ── Sections ── */
      .section  { padding: 2.5rem 1rem; }
      #media    { padding: 2.5rem 1rem; }
      #visuals  { padding: 2.5rem 1rem; }
      #contact  { padding: 2.5rem 1rem; }
      .section-heading { font-size: clamp(1.8rem, 8vw, 2.8rem); }
      .section-label { font-size: 0.62rem; }

      /* ── Work grid ── */
      .work-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
      .work-grid { grid-template-columns: 1fr; gap: 0.8rem; }
      /* 3 on the homepage stack on phones, not 4 — the rest are still in
         "See All Projects" (.wm-grid, untouched — different class). */
      .work-grid .work-card:nth-child(4) { display: none; }
      .work-card { border-radius: 12px; }
      .work-load-more-wrap { margin-top: 1.5rem; }
      .btn-load-more { width: 100%; justify-content: center; min-height: 48px; }

      /* ── Services ── */
      .services-top { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .services-intro { font-size: 0.85rem; }
      .services-grid { grid-template-columns: 1fr; border-radius: 10px; }
      .service-card { padding: 1.3rem 1.1rem; }
      .service-name { font-size: 0.95rem; }
      .service-desc { font-size: 0.78rem; }

      /* ── Process ── */
      #process .process-grid { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
      .process-step { padding: 1.2rem 0.4rem 1.2rem 0; }
      .step-num { font-size: 1.6rem; margin-bottom: 0.8rem; }
      .step-name { font-size: 0.82rem; }
      .step-desc { font-size: 0.75rem; }

      /* ── Media section ── */
      .media-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.8rem; }
      .media-card { border-radius: 14px; }
      .media-card-title { font-size: 1.3rem; }
      .media-list-thumb { width: 72px; height: 44px; flex-shrink: 0; }
      .media-list-title { font-size: 0.77rem; }
      .media-list-play { width: 36px; height: 36px; }
      .media-browse-btn { min-height: 48px; font-size: 0.72rem; }

      /* ── Visuals section ── */
      .vs-arrow { width: 40px; height: 40px; }
      .vs-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
      .vs-badge { font-size: 0.56rem; }
      .vs-dots  { display: none; } /* single static image on mobile */
      .vs-nav   { display: none; } /* hide arrows too */
      /* The `.vs-nav { display:none }` above is in fact dead — a later base
         `.vs-nav { display:flex }` outranks it on source order, so arrows do
         still show on phones. This pins the camera-films reel explicitly on
         higher specificity, because unlike the auto-rotating slideshows it is
         four separate films the visitor must be able to move between: if that
         source-order accident is ever tidied up, the reel must not be the
         thing that silently strands a phone visitor on film 1. */
      .vs-vidreel .vs-nav { display: flex; }

      /* ── Gallery modal ── */
      .gm-header { padding: 0.9rem 1rem; }
      .gv-nav-btn { width: 44px; height: 44px; font-size: 1rem; }
      .gv-prev { left: 0.5rem; }
      .gv-next { right: 0.5rem; }
      .gv-thumb { width: 68px; height: 50px; }
      .gm-close, .wm-close, .modal-close { width: 44px; height: 44px; }

      /* ── Work modal ── */
      .wm-header { padding: 1rem; }
      .wm-grid-wrap { padding: 1rem; }
      /* Two columns, matching the 900px tablet breakpoint — a single
         column made every visitor scroll through 8+ full-width cards to
         see the whole set. 16/9 cards still read fine at 2-up down to
         phone width; only the type inside them needs to shrink. */
      .wm-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
      .wm-grid .card-name { font-size: 0.78rem; }
      .wm-grid .card-cat  { font-size: 0.58rem; }

      /* ── AI banner ── */
      .ai-stat-num { font-size: 1.1rem; }
      .ai-stat-label { font-size: 0.55rem; }

      /* ── Contact ── */
      .form-row { grid-template-columns: 1fr; gap: 1rem; }
      .contact-form-inner { width: 100%; overflow: hidden; }
      .contact-form { width: 100%; }
      .form-field { width: 100%; min-width: 0; }
      .form-submit { align-self: stretch; min-height: 52px; font-size: 0.82rem; width: 100%; }

      /* ── Footer ── */
      footer { padding: 1.8rem 1.2rem 0; }
      .footer-top { flex-direction: column; align-items: center; gap: 1.2rem; padding-bottom: 1.8rem; }
      .footer-links { flex-wrap: wrap; gap: 0.8rem; }
      .footer-links a { font-size: 0.68rem; }
      .footer-brand img { height: 38px; }
      .footer-brand .footer-badge { height: 68px; width: 68px; }
      .footer-copy { font-size: 0.68rem; }
      .footer-wordmark-wrap { display: none; }

      /* ── Back to top ── */
      #back-to-top { bottom: 1.2rem; right: 1rem; }

      /* ── Video modal ── */
      .modal-header { padding: 0.9rem 1rem; }
      .modal-grid-wrap { padding: 1rem 1rem 2rem; }
      .modal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
    }



    /* ============================================================
       RED BAND: Services, Graphics & AI Visuals, Contact and Web & brand
       projects share the blood-red ground, from the top of Services down to
       just above the footer (2026-10-20). Cream type on it; the dark service
       and project cards keep their dark faces; the form's send button is the
       site's yellow, as it was.
    ============================================================ */
    #services, #visuals, #contact, #work { background: var(--chunk-red); border-top: 0; border-bottom: 0; color: var(--chunk-cream); }
    #visuals, #contact, #work { box-shadow: 0 -1px 0 var(--chunk-red); }   /* no hairline seam where the red sections meet */
    #services .section-heading, #visuals .section-heading { color: var(--chunk-cream); }
    #services .section-heading em, #visuals .section-heading em { color: var(--cta-yellow); }
    #services .services-grid { border-color: rgba(254,249,243,.22); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }
    #services .service-card { color: var(--white); }
    #services .service-desc { color: rgba(255,255,255,.62); }
    #work .work-summary-label { color: rgba(254,249,243,.82); }
    #work .work-strip-btn { border-color: rgba(254,249,243,.4); color: var(--chunk-cream); }
    #work .work-strip-btn:hover { background: rgba(0,0,0,.28); border-color: var(--chunk-cream); }
    #work .work-strip-btn:disabled { border-color: rgba(254,249,243,.25); }
    #work .work-strip-btn:focus-visible { outline-color: var(--chunk-cream); }

    /* Learn AI card and its testimonial strip sit on the same pure black as the footer below them */
    .ai-zone { background: #000; width: 100%; display: flow-root; }   /* flow-root keeps the card margins inside the black */

    /* ============================================================
       SERVICES: light and open. No boxes: four columns on the red ground, each
       with a hairline above it, a thin Inter title and one quiet line. The
       hairline turns yellow on hover.
    ============================================================ */
    #services { padding-top: 4.2rem; padding-bottom: 4.2rem; }
    #services .services-top { margin-bottom: 2rem; }
    #services .services-grid {
      grid-template-columns: repeat(4, 1fr); gap: 2.2rem; border: 0; border-radius: 0;
      background: transparent; box-shadow: none; overflow: visible;
    }
    #services .service-card {
      background: transparent; min-height: 0; gap: .85rem; padding: 1.15rem 0 0;
      border-top: 1px solid rgba(254,249,243,.38);
      transition: border-color .35s;
    }
    #services .service-card:hover { background: transparent; border-top-color: var(--cta-yellow); }
    #services .service-name {
      font-family: 'Inter', sans-serif; font-weight: 200; text-transform: none;
      font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.1; letter-spacing: -.015em;
      color: var(--chunk-cream);
    }
    #services .service-name::after { display: none; }
    #services .service-desc {
      font-family: 'Inter', sans-serif; font-weight: 400; font-size: .86rem; line-height: 1.55;
      color: rgba(254,249,243,.72); margin-top: 0; padding-top: 0; max-width: 26ch;
    }
    @media (max-width: 900px) { #services .services-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.6rem; } }
    @media (max-width: 600px) {
      #services { padding-top: 3rem; padding-bottom: 3rem; }
      #services .services-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      #services .service-card { padding-top: 1rem; }
      #services .service-name { font-size: 1.7rem; }
      #services .service-desc { max-width: none; }
    }


    /* ============================================================
       AUTOMATE POSTER (2026-10-21): the AI-class card's own style (sharp card, green badge,
       uppercase headline, hanging iridescent capsule) now shows Clay and Regina together.
       The Learn AI card and testimonials are parked in <template id="academy-parked">.
    ============================================================ */
    .ai-zone .ai-card-stage { max-width: 760px; }
    .ai-card--bots .ai-card-media { aspect-ratio: 1300 / 560; background: #0b0b0d; }
    .ai-card--bots .ai-card-media::after { background: linear-gradient(90deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.1) 50%, rgba(8,8,10,0) 100%); }
    .bots-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
    .ai-card--bots:hover .bots-poster { transform: scale(1.035); }
    /* the pair stands in the right half, so the words and the button sit on the dark left */
    .ai-card--bots .ai-card-content { z-index: 3; align-items: flex-start; text-align: left; padding: 22px 50% 44px 7%; pointer-events: none; }
    .ai-card--bots .ai-card-headline { font-size: clamp(1.25rem, 3.1vw, 2rem); }
    .ai-card--bots .join-btn { left: 26%; }
    @media (max-width: 768px) {
      /* phones: words on the dark top, the close-up pair fills the lower part */
      .ai-card--bots .ai-card-media { aspect-ratio: 1 / 1.12; background: #121212; }
      /* the close-up fills the lower card and melts upward into the same dark, so the words sit ON the poster */
      .bots-poster { top: auto; bottom: 0; height: 74%; object-fit: cover; object-position: 62% 50%;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 18%, #000 42%);
                mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 18%, #000 42%); }
      .ai-card--bots .ai-card-media::after { background: linear-gradient(180deg, rgba(8,8,10,.1) 0%, rgba(8,8,10,0) 40%, rgba(8,8,10,.18) 100%); }
      .ai-card--bots .ai-card-content { align-items: center; text-align: center; justify-content: flex-start; padding: 26px 16px 0; gap: 12px; }
      .ai-card--bots .ai-card-headline { font-size: clamp(1.45rem, 7vw, 1.9rem); }
      .ai-card--bots .join-btn { left: 50%; }
    }
    @media (prefers-reduced-motion: reduce) { .bots-poster { transition: none; } }

    /* ============================================================
       RED BAND POLISH (2026-10-21): one flat red from Services to the footer, no stray lighter or
       darker patches, and every shadow on it is a wide, feathered, deep-red one instead of a hard
       black one.
    ============================================================ */
    #contact::before { display: none; }                      /* the lighter red glow patch at the top of Contact */
    #work.work-tucked { border-top: 0; }                     /* the thin pale line above the project strip */
    /* the "LET'S TALK" heading: the hard black extrusion becomes a soft feathered shadow */
    #contact .section-heading { filter: none; text-shadow: 0 2px 3px rgba(45,0,0,.22), 0 12px 34px rgba(45,0,0,.46); }
    /* dark cards sitting on the red */
    #visuals .media-card, #visuals .vs-card, #visuals .media-card--graphics, #visuals .media-card--ai-vis {
      box-shadow: 0 34px 70px -30px rgba(40,0,0,.62), 0 14px 32px -18px rgba(40,0,0,.42);
    }
    #services .service-card { box-shadow: none; }
    /* the project strip: shadows fall softly below (they used to point up in plain black) and the
       scroller gets room so nothing is clipped into a hard edge */
    #work .work-card { filter: drop-shadow(0 8px 12px rgba(40,0,0,.2)) drop-shadow(0 26px 36px rgba(40,0,0,.3)); }
    #work .work-grid { padding-top: 6px; padding-bottom: 48px; margin-bottom: -30px; }
    /* the form: cream fields lift off the red softly; the yellow button and the pay card too */
    #contact .form-field input, #contact .form-field textarea { box-shadow: 0 14px 30px -18px rgba(40,0,0,.55), 0 3px 8px -4px rgba(40,0,0,.22); }
    #contact .form-submit { box-shadow: 0 16px 30px -16px rgba(40,0,0,.6); }
    #contact .payment-trigger, #contact #payment-trigger { filter: drop-shadow(0 14px 20px rgba(40,0,0,.38)); }