:root {
    --black: #050507;
    --white: #F0EEE8;
    --acid: #C8FF00;
    --electric: #00F0FF;
    --crimson: #FF1744;
    --mid: #1A1A22;
    --border: rgba(200,255,0,0.15);
    /* Lifted tone for the alternating section bands (see SECTION BANDS at
       the end of this file). --black and the rest of the palette unchanged. */
    --band-lift: #15151e;
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:var(--black); color:var(--white); font-family:'Space Mono',monospace; overflow-x:hidden; }
  @media (pointer:fine) { body { cursor:none; } }

  /* CURSOR (desktop only) */
  .cursor,.cursor-ring { display:none; }
  @media (pointer:fine) {
    .cursor { display:block; position:fixed; top:0; left:0; width:12px; height:12px; background:var(--acid); border-radius:50%; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition:width .2s,height .2s; mix-blend-mode:difference; }
    .cursor-ring { display:block; position:fixed; top:0; left:0; width:40px; height:40px; border:1px solid var(--acid); border-radius:50%; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); opacity:.6; }
  }

  /* ── NOISE ── */
  body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity:.03; pointer-events:none; z-index:9000; }

  /* ── NAV ── */
  /* iOS Safari exposes a strip of page above a top-fixed bar while the URL bar
     animates — the layout viewport moves under the element. Painting the nav's
     own background upward past its box closes that gap without touching
     layout, and is off-screen everywhere else. */
  /* Solid, not .92 — at 92% the page still showed through this strip, which
     is exactly what Fin was seeing above the bar. */
  nav::before {
    content:''; position:absolute; left:0; right:0; bottom:100%; height:160px;
    background:#050507; pointer-events:none;
  }
  /* padding-top carries env(safe-area-inset-top) so the bar physically covers
     the notch/status strip rather than starting below it. Falls back to 0 on
     every browser that has no inset, so desktop is unchanged. */
  nav { position:fixed; top:0; left:0; right:0; z-index:100; display:grid; grid-template-columns:1fr auto 1fr; grid-auto-flow:dense; align-items:center; padding:calc(14px + env(safe-area-inset-top, 0px)) 24px 14px; border-bottom:1px solid var(--border); background:rgba(5,5,7,.92); backdrop-filter:blur(20px); gap:12px; }
  .nav-logo { display:flex; align-items:center; grid-column:2; justify-self:center; }
  .nav-logo img { height:42px; width:auto; object-fit:contain; }
  .nav-links { display:none; }
  /* 8px is the house corner for controls — same as the booking console's
     chips, inputs and buttons, and the waiting-list modal's. */
  .nav-cta { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--black); background:var(--acid); border:none; border-radius:8px; padding:10px 18px; cursor:pointer; font-weight:700; transition:background .2s; white-space:nowrap; flex-shrink:0; grid-column:3; justify-self:end; }
  .nav-cta:hover { background:#d4ff33; }
  /* Default: show full label, hide short one. Mobile swaps. */
  .nav-cta-short { display:none; }
  /* Phones: opaque bar, no backdrop-filter. Same failure mode as the hero
     stat bar — a LIVE blur sampling content that is moving underneath it. On
     a fixed nav the content moves on every scroll frame, so Safari re-samples
     constantly and the page bleeds through the bar. .92 + blur is a frosted
     effect worth having on a desktop pointer; on a phone it costs legibility
     and a per-frame resample for something nobody stops to look at. */
  @media (max-width:768px) {
    nav { padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background:#050507; backdrop-filter:none; -webkit-backdrop-filter:none; }
    .nav-links { display:none; }
    .nav-logo img { height:36px; }
    .nav-cta { font-size:.58rem; padding:9px 14px; }
  }
  /* On narrow mobile, swap "Book Consultation" for "Book" so logo gets breathing room. */
  @media (max-width:600px) {
    .nav-cta-full { display:none; }
    .nav-cta-short { display:inline; }
    .nav-cta { padding:9px 16px; font-size:.62rem; letter-spacing:.18em; }
  }
  /* Mobile hamburger */
  /* Hamburger — always visible, top-left */
  .hamburger {
    display:flex; flex-direction:column; gap:5px;
    cursor:pointer; padding:10px;
    background:none; border:none;
    grid-column:1; justify-self:start;
    transition:transform .3s ease;
  }
  .hamburger span {
    display:block; width:24px; height:2px;
    background:var(--acid);
    transition:transform .3s ease, opacity .3s ease;
  }
  .hamburger:hover { transform:scale(1.05); }
  .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* Site menu — full-screen overlay revealed when hamburger clicked */
  .mobile-menu {
    display:flex; flex-direction:column;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(5,7,6,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:96px 32px 48px;
    z-index:98;
    gap:0;
    opacity:0; visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
    overflow-y:auto;
  }
  .mobile-menu.open {
    opacity:1; visibility:visible;
    transform:translateY(0);
    transition:opacity .35s ease, transform .35s ease, visibility 0s;
  }
  @media (min-width:769px) {
    .mobile-menu { padding:112px 64px 64px; }
  }

  .mobile-menu-inner {
    max-width:1100px; margin:0 auto;
    width:100%;
    display:flex; flex-direction:column;
    gap:0;
  }
  .mobile-menu-eyebrow {
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.4em;
    text-transform:uppercase;
    color:var(--acid);
    opacity:.7;
    margin-bottom:32px;
    display:flex; align-items:center; gap:12px;
  }
  .mobile-menu-eyebrow::before {
    content:''; width:32px; height:1px; background:var(--acid);
  }
  .mobile-menu a {
    display:flex; align-items:baseline; justify-content:space-between;
    gap:24px;
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(2rem, 7vw, 4.5rem);
    line-height:1.1;
    letter-spacing:.005em;
    color:var(--white);
    text-decoration:none;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:color .25s ease, padding-left .3s ease;
  }
  .mobile-menu a:hover {
    color:var(--acid);
    padding-left:12px;
  }
  .mobile-menu a .menu-num {
    font-family:'Space Mono', monospace;
    font-size:.55rem;
    letter-spacing:.32em;
    color:var(--acid);
    opacity:.6;
    align-self:center;
  }
  .mobile-menu-footer {
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex; flex-wrap:wrap;
    justify-content:space-between; align-items:center;
    gap:16px;
    font-family:'Space Mono', monospace;
    font-size:.55rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(240,238,232,.4);
  }
  .mobile-menu-footer a {
    font-family:'Space Mono', monospace;
    font-size:.55rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(240,238,232,.6);
    text-decoration:none;
    padding:0;
    border:none;
    transition:color .2s ease;
  }
  .mobile-menu-footer a:hover { color:var(--acid); padding-left:0; }
  body.menu-open { overflow:hidden; }

  /* ── HERO ── */
  /* Clears the nav, which is now taller by the safe-area inset. */
  .hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:calc(110px + env(safe-area-inset-top, 0px)) 24px 80px; position:relative; overflow:hidden; }
  @media (min-width:769px) { .hero { padding:120px 48px 80px; } }
  .hero::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(200,255,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,.04) 1px,transparent 1px); background-size:50px 50px; pointer-events:none; }
  /* (removed .scan-line — replaced by hero radar sweep) */

  /* ── INTRO OVERLAY ── */
  body.intro-active { overflow:hidden; }
  /* Set by the inline flag in <head> when the gate has already been passed in
     this tab: the overlay never paints and the scroll lock never applies, so a
     refresh lands straight on the hero. */
  html.intro-seen .intro-overlay { display:none; }
  html.intro-seen body.intro-active { overflow:visible; }
  .intro-overlay { position:fixed; inset:0; z-index:99999; background:#050706; display:flex; align-items:center; justify-content:center; transition:opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1); }
  .intro-overlay.dismissed { opacity:0; transform:scale(1.04); pointer-events:none; }
  .intro-overlay::before { display:none; }
  .intro-splash { position:relative; z-index:3; text-align:center; cursor:pointer; user-select:none; padding:24px; transition:transform .4s ease; }
  .intro-splash:hover { transform:scale(1.02); }
  .intro-overlay.playing .intro-splash { display:none; }
  .intro-splash-logo { display:block; width:min(56vw, 460px); height:auto; margin:-65px auto -19px; }
  .intro-splash-sub { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.4em; color:rgba(240,238,232,.55); text-transform:uppercase; margin-bottom:56px; }
  .intro-splash-cta { display:inline-flex; align-items:center; gap:12px; font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.35em; color:var(--acid); text-transform:uppercase; padding:14px 26px; border:1px solid rgba(200,255,0,.4); border-radius:8px; animation:introPulse 2s ease-in-out infinite; }
  /* Mobile: tighten the splash so logo + sub + CTA feel like one block.
     Pull the FAID logo tight onto the "Future AI Design" sub — the .jpg
     logo has built-in transparent padding around it, so a slight negative
     margin closes the visible whitespace without clipping the glyphs. */
  @media (max-width:600px) {
    .intro-splash { padding:12px; }
    .intro-splash-logo { width:min(72vw, 360px); margin:0 auto -8px; }
    .intro-splash-sub { margin-bottom:22px; }
    .intro-splash-cta { padding:12px 22px; }
  }
  .intro-splash-cta::before { content:'▸'; }
  @keyframes introPulse { 0%,100% { box-shadow:0 0 0 0 rgba(200,255,0,.3); border-color:rgba(200,255,0,.4); } 50% { box-shadow:0 0 24px 4px rgba(200,255,0,.15); border-color:rgba(200,255,0,.8); } }
  .intro-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; z-index:1; background:#050706; }
  /* Mobile loads a natively-vertical 9:16 cut of the cinematic logo
     (intro-mobile.mp4, set in JS) with the side-space baked into the frame
     by the AI reframe — so it displays full-bleed with object-fit:cover and
     the logo still sits centred with seamless dark space all around it. */
  .intro-overlay.playing .intro-video { display:block; }
  .intro-skip { position:absolute; top:24px; right:24px; background:rgba(0,0,0,.55); border:1px solid rgba(200,255,0,.45); border-radius:8px; color:var(--acid); padding:10px 18px; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; cursor:pointer; opacity:0; transition:opacity .5s ease, background .2s, border-color .2s; z-index:4; backdrop-filter:blur(8px); font-weight:700; }
  .intro-overlay.playing.skip-visible .intro-skip { opacity:1; }
  .intro-skip:hover { background:rgba(200,255,0,.18); border-color:var(--acid); }
  @media (max-width:768px) { .intro-skip { top:16px; right:16px; padding:8px 14px; font-size:.52rem; } }
  /* (removed @keyframes scan — old top→bottom line animation) */
  /* ── HERO BACKGROUND — REAL WORLD MAP ──
     Same world-map.svg used inside the Learn modal + the FAID logo's
     letter-fill texture. Anchored across the hero, tuned softer than
     the modal version so the headline reads on top. */
  .hero-worldmap-wrap {
    position:absolute; inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .hero-worldmap {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    /* COVER fills the hero edge-to-edge.
       X=42% → Europe + Africa + Asia anchored (kills empty Pacific).
       Y=center → whole map vertically centered; nothing shifted up. */
    object-fit:cover;
    object-position:42% center;
    opacity:.32;
    filter:drop-shadow(0 0 60px rgba(200,255,0,.4));
    animation:heroMapBreath 14s ease-in-out infinite;
    user-select:none;
    -webkit-user-drag:none;
  }
  @media (max-aspect-ratio: 1/1) {
    .hero-worldmap { object-position:38% center; }
  }
  @media (min-aspect-ratio: 2/1) {
    .hero-worldmap { object-position:46% center; }
  }
  @keyframes heroMapBreath {
    0%, 100% { opacity:.26; filter:drop-shadow(0 0 50px rgba(200,255,0,.30)); }
    50%      { opacity:.38; filter:drop-shadow(0 0 90px rgba(200,255,0,.50)); }
  }
  /* Camo grain — adds texture across the map, now stronger to match visibility */
  .hero-worldmap-grain {
    position:absolute; inset:0;
    pointer-events:none;
    background-image:
      radial-gradient(rgba(200,255,0,.08) 1px, transparent 1.5px),
      radial-gradient(rgba(200,255,0,.05) 1px, transparent 1.5px);
    background-size:7px 7px, 13px 13px;
    background-position:0 0, 4px 5px;
    mix-blend-mode:screen;
    opacity:.7;
  }
  /* No bottom fade — Antarctica sits at the bottom edge and the section
     transition into "What We Do" happens via the next section's own bg. */
  /* Subtle acid horizon glow sitting under the hero text */
  .hero-worldmap-wrap::before {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 65% 35% at 50% 60%, rgba(200,255,0,.08) 0%, transparent 65%);
    pointer-events:none;
    z-index:1;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-worldmap { animation:none; opacity:.14; }
  }
  .code-base { color:rgba(240,238,232,0.09); }
  /* ── HERO RADAR SWEEP ──
     Origin pinned to Great Harwood, UK; broadcasts a conic acid wedge
     outward, rotating slowly. Three concentric pulse rings + a glowing
     origin dot signal "live global operations." */
  .hero-radar {
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  /* UK position on the visible map — calibrated via click-to-position on the live hero */
  :root { --radar-x:47.1%; --radar-y:23.2%; }
  @media (max-aspect-ratio: 1/1)  { :root { --radar-x:46.1%; --radar-y:25.2%; } }
  @media (min-aspect-ratio: 2/1)  { :root { --radar-x:47.6%; --radar-y:21.2%; } }
  /* Mobile: hand-tuned hardcoded position. JS applyUK() skips at this width. */
  @media (max-width:600px)        { :root { --radar-x:64%;   --radar-y:27%;   } }

  /* Origin dot — small acid bullet at UK */
  .hero-radar-origin {
    position:absolute;
    left:var(--radar-x); top:var(--radar-y);
    width:10px; height:10px;
    background:var(--acid);
    border-radius:50%;
    transform:translate(-50%, -50%);
    box-shadow:0 0 14px rgba(217,255,0,.9), 0 0 32px rgba(217,255,0,.55);
    z-index:3;
  }
  /* Subtle pulse ring around the origin — purely decorative, no events */
  .hero-radar-origin::before {
    content:'';
    position:absolute; inset:-6px;
    border:1px solid var(--acid);
    border-radius:50%;
    opacity:.7;
    pointer-events:none;
    animation:radarOriginPulse 2.4s ease-out infinite;
  }
  .hero-radar-origin::after {
    content:'';
    position:absolute; inset:-6px;
    border:1px solid var(--acid);
    border-radius:50%;
    opacity:.7;
    pointer-events:none;
    animation:radarOriginPulse 2.4s ease-out 1.2s infinite;
  }
  /* Larger invisible hit target so the dot is easy to grab */
  .hero-radar-origin.is-draggable {
    box-shadow:0 0 0 18px transparent, 0 0 14px rgba(217,255,0,.9), 0 0 32px rgba(217,255,0,.55);
  }
  @keyframes radarOriginPulse {
    0%   { transform:scale(.6); opacity:.85; }
    100% { transform:scale(3.5); opacity:0; }
  }
  /* Coordinates label next to the origin */
  .hero-radar-origin-label {
    position:absolute;
    left:18px; top:50%;
    transform:translateY(-50%);
    font-family:'Space Mono',monospace;
    font-size:.48rem; letter-spacing:.22em;
    color:var(--acid);
    text-transform:uppercase;
    white-space:nowrap;
    opacity:.75;
    text-shadow:0 0 8px rgba(5,5,7,.6);
  }

  /* Concentric reach rings — slowly emanate from origin, like sonar pings */
  .hero-radar-rings {
    position:absolute;
    left:var(--radar-x); top:var(--radar-y);
    width:0; height:0;
    pointer-events:none;
    z-index:2;
  }
  .hero-radar-rings::before,
  .hero-radar-rings::after {
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:60px; height:60px;
    margin:-30px 0 0 -30px;
    border:1px solid rgba(217,255,0,.35);
    border-radius:50%;
    opacity:0;
    animation:radarRingExpand 6s ease-out infinite;
  }
  .hero-radar-rings::after { animation-delay:3s; }
  @keyframes radarRingExpand {
    0%   { transform:scale(.3); opacity:.55; }
    100% { transform:scale(20); opacity:0; }
  }

  /* The sweeping wedge — conic gradient rotating around the origin.
     The mask fades it out beyond a certain radius so it feels like a
     beam diminishing into the distance rather than a hard wedge. */
  .hero-radar-sweep {
    position:absolute;
    left:var(--radar-x); top:var(--radar-y);
    width:200vmax; height:200vmax;
    margin-left:-100vmax; margin-top:-100vmax;
    border-radius:50%;
    background:conic-gradient(
      from 0deg,
      rgba(217,255,0,0) 0deg,
      rgba(217,255,0,.22) 6deg,
      rgba(217,255,0,.08) 14deg,
      rgba(217,255,0,0) 30deg,
      rgba(217,255,0,0) 360deg
    );
    -webkit-mask:radial-gradient(circle at center, #000 0%, rgba(0,0,0,.85) 18%, transparent 45%);
            mask:radial-gradient(circle at center, #000 0%, rgba(0,0,0,.85) 18%, transparent 45%);
    transform-origin:center center;
    animation:radarSweep 12s linear infinite;
    z-index:2;
    opacity:.85;
    mix-blend-mode:screen;
  }
  @keyframes radarSweep {
    0%   { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-radar-sweep,
    .hero-radar-rings::before,
    .hero-radar-rings::after,
    .hero-radar-origin::before,
    .hero-radar-origin::after { animation:none; opacity:.3; }
  }
  /* Mobile: compact the radar so its rings + sweep stay close to the UK dot
     and don't extend across the headline. Dot stays pinned to UK by the JS,
     only the surrounding aura shrinks. */
  @media (max-width:600px) {
    .hero-radar-sweep { width:140vmax; height:140vmax; margin-left:-70vmax; margin-top:-70vmax; opacity:.5; }
    .hero-radar-rings::before,
    .hero-radar-rings::after { width:40px; height:40px; margin:-20px 0 0 -20px; }
    @keyframes radarRingExpandMobile { 0% { transform:scale(.3); opacity:.55; } 100% { transform:scale(14); opacity:0; } }
    .hero-radar-rings::before,
    .hero-radar-rings::after { animation-name:radarRingExpandMobile; }
  }
  .hero-eyebrow { font-size:.62rem; letter-spacing:.35em; text-transform:uppercase; color:var(--acid); margin-bottom:20px; opacity:0; animation:fadeUp .8s .3s forwards; display:flex; align-items:center; gap:10px; }
  .hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--acid); }
  .hero-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(4rem,16vw,14rem); line-height:.88; letter-spacing:-.01em; position:relative; z-index:1; }
  /* Mobile: bump headline ~25% bigger — clamp min from 4rem (64px) to
     5.4rem (~86px), and grow the vw scaling so it fills the column. */
  @media (max-width:600px) {
    .hero-title { font-size:clamp(5.4rem, 22vw, 8rem); line-height:.86; }
  }
  .hero-title .line { display:block; opacity:0; transform:translateY(50px); }
  .hero-title .line:nth-child(1) { animation:slideUp .9s .5s cubic-bezier(.16,1,.3,1) forwards; }
  .hero-title .line:nth-child(2) { animation:slideUp .9s .65s cubic-bezier(.16,1,.3,1) forwards; color:var(--acid); }
  .hero-title .line:nth-child(3) { animation:slideUp .9s .8s cubic-bezier(.16,1,.3,1) forwards; -webkit-text-stroke:1px var(--white); color:transparent; }
  /* "TO" stays huge. The dashes either side are sized so the FULL
     line (dash + TO + dash) is roughly the same width as "BUILT" above
     it — visually balanced. Gap is tight so dashes hug the word. */
  .hero-title .line-accent {
    display:flex;
    align-items:center;
    gap:.12em;
    line-height:.88;
    height:.88em;
  }
  .hero-title .line-accent::before,
  .hero-title .line-accent::after {
    content:'';
    display:block;
    width:.25em;
    height:.05em;
    background:var(--acid);
    opacity:.7;
    flex-shrink:0;
  }
  @keyframes slideUp { to{opacity:1;transform:translateY(0)} }
  @keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
  .hero-sub-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:40px; opacity:0; animation:fadeUp 1s 1.1s forwards; flex-wrap:wrap; gap:32px; }
  .hero-desc { max-width:360px; font-size:.8rem; line-height:1.8; color:rgba(240,238,232,.55); }
  /* Mobile: lift the hero description so it reads cleanly against the
     world map. Weight stays 400 (premium mono feel) — visibility comes
     from color + a soft halo shadow. */
  @media (max-width:600px) {
    .hero-desc {
      font-size:.86rem;
      color:rgba(248,247,243,.95);
      text-shadow:
        0 0 1px rgba(5,5,7,1),
        0 0 6px rgba(5,5,7,.9),
        0 1px 14px rgba(5,5,7,.85);
    }
  }
  .hero-metrics {
    display:flex; gap:32px; flex-wrap:wrap;
    padding:18px 28px;
    /* No backdrop-filter here, deliberately. The world map behind this bar
       runs heroMapBreath on an infinite loop, and Safari has to re-clip a
       LIVE blur to the rounded path every frame — which made the bar visibly
       jump once it gained a corner. Square corners let it take a cheap
       rectangular clip, which is why this only appeared when the radius did.
       The blur was only there to keep the stats legible over the map, so a
       more opaque panel does the same job with none of the cost.
       Chromium renders the blur version fine; this is a Safari fix. */
    background:rgba(5,7,6,.82);
    border:1px solid rgba(217,255,0,.12);
    /* 16px, the house box corner — it was the last square panel on the page. */
    border-radius:16px;
    align-self:flex-end;
  }
  /* On a phone the 32px gap forced a wrap, so the bar became two ragged rows
     with a block of empty box beside the orphan. Tightened so all three sit on
     one row and the box stays a clean rectangle. */
  @media (max-width:600px) {
    .hero-metrics { gap:10px; padding:13px 14px; flex-wrap:nowrap; justify-content:space-between; width:100%; }
    /* Nothing may wrap: "7 Days" breaking after the numeral, and the labels
       breaking mid-phrase, is what turned a stat bar into a 137px block with
       ragged rows inside it. */
    .hero-metrics .metric { min-width:0; flex:1 1 0; }
    .hero-metrics .metric-num { font-size:1.9rem; white-space:nowrap; }
    .hero-metrics .metric-label { font-size:.46rem; letter-spacing:.12em; white-space:nowrap; }
  }
  @media (max-width:600px) { .hero-metrics { padding:14px 20px; gap:24px; } }
  .metric { text-align:center; }
  .metric-num { font-family:'Bebas Neue',sans-serif; font-size:2.8rem; color:var(--acid); line-height:1; }
  /* .5 not .4 — at 9px on the hero panel these measured 3.41:1, under the
     4.5 AA floor. Pre-dates the panel change; caught while measuring it. */
  .metric-label { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,238,232,.5); margin-top:3px; }
  /* Bebas Neue has no infinity (∞) glyph, so the character fell back to a
     thin mismatched system font. This SVG renders an identical, brand-acid
     infinity at the same visual weight as the numerals on every device.
     Height is in em so it scales with whatever metric font-size it sits in. */
  .infinity-glyph { display:inline-block; height:.72em; width:auto; fill:currentColor; vertical-align:-.02em; }
  @media (max-width:600px) { .hero-sub-row { flex-direction:column; align-items:flex-start; } .hero-metrics { justify-content:flex-start; } }
  .hero-scroll { position:absolute; bottom:32px; left:24px; display:flex; align-items:center; gap:12px; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(240,238,232,.4); opacity:0; animation:fadeUp 1s 1.4s forwards; }
  @media (min-width:769px) { .hero-scroll { left:48px; } }
  .scroll-line { width:1px; height:48px; background:linear-gradient(var(--acid),transparent); animation:scrollPulse 2s ease-in-out infinite; }
  @keyframes scrollPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* ── TICKER ── */
  .ticker { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:16px 0; overflow:hidden; background:rgba(200,255,0,.03); }
  /* 13s not 20s. The loop travels half the 2778px track, so the old duration
     worked out at 69px/s — a crawl, and most obvious on a narrow screen where
     an item takes longest to cross. 13s puts it at ~107px/s.
     NOTE: duration is fixed but the distance is the track width, so adding
     ticker items changes the SPEED. Recompute as distance/107 if items change. */
  /* No `gap` here, deliberately. The loop is 6 items duplicated and animates
     translateX(-50%), which is only seamless if half the track equals one set
     PLUS one gap. With flex gap there are 11 gaps across 12 items, so half the
     track is one set + 5.5 gaps — 32px short, and it jumped by exactly that
     every cycle. Per-item margin-right gives 12 gaps across 12 items, so half
     the track is one set + 6 gaps exactly.
     PADDING, not margin: a trailing margin on the last flex item is not
     counted in the container's width, so margin-right left the track the same
     size as gap did and the 32px seam survived. Padding is inside the box and
     always counts. */
  .ticker-inner { display:flex; animation:ticker 13s linear infinite; white-space:nowrap; will-change:transform; }
  .ticker-item { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:.2em; color:rgba(240,238,232,.3); display:flex; align-items:center; gap:28px; padding-right:64px; }
  .ticker-item span { color:var(--acid); font-size:.58rem; }
  @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* ── SECTION LABEL ── */
  .section-label { font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--acid); margin-bottom:48px; display:flex; align-items:center; gap:14px; font-weight:700; }
  .section-label::after { content:''; flex:1; height:1px; background:var(--border); }
  /* Display header for a section. Syne 800 at the same scale as HOW WE
     OPERATE, wearing the hero's colourway: word one solid, word two acid, word
     three outlined — BUILT / TO / CONVERT, in that order. One line: the words
     are short enough to hold it down to 360px, so it never breaks. */
  .section-title {
    font-family:'Bebas Neue',sans-serif; font-weight:400;
    font-size:clamp(3.6rem,10vw,8.5rem); line-height:.9; letter-spacing:.01em;
    /* 44px was right under an 11px eyebrow; under an 80px display head it left
       the cards crowding the title. HOW WE OPERATE stands 112px above its first
       box on a phone and 118px on desktop, and the two heads read as siblings
       now, so they get the same air. */
    margin:0 0 114px; color:var(--white); white-space:nowrap;
  }
  /* 108px put the best part of a phone screen of nothing between the heading
     and the first card. .section-title is used only on What We Do, so this is
     scoped to that heading by definition. */
  @media (max-width:768px) { .section-title { margin-bottom:44px; } }
  /* The 340px step-down this had was sized for Syne, which set this line about
     twice as wide. Bebas clears 320px at the clamp floor with room to spare, so
     the smallest phones get the full size like everything else. */
  .section-title .st-accent  { color:var(--acid); }
  /* heavier than the hero's 1px: this is Syne 800 at half the hero's size, and
     a hairline stroke on a face this heavy reads as grey, not as an outline */
  .section-title .st-outline { letter-spacing:.03em; -webkit-text-stroke:1.6px var(--white); color:transparent; }

  /* ── SERVICES ── */
  .services {
    padding:80px 24px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  @media (min-width:769px) { .services { padding:120px 48px; } }

  /* Atmospheric backdrop: punchy acid radial glow at top + visible geometric
     grid at moderate opacity. Now obvious enough to be felt, not just
     calculated. Top/bottom edge accents anchor the section. */

  /* Top edge: thin acid stripe drawing a horizon line */
  .services::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(200,255,0,.4) 30%,
      rgba(200,255,0,.4) 70%,
      transparent 100%);
    pointer-events:none;
    z-index:0;
  }

  /* Punchy radial glow + geometric grid — applied to a dedicated bg layer
     so we don't run out of pseudo-elements on the section itself. */
  .services {
    background-image:
      /* Acid radial glow at top — significantly more visible (15% peak) */
      radial-gradient(ellipse 70% 50% at 50% 0%,
        rgba(200,255,0,.15) 0%,
        rgba(200,255,0,.06) 25%,
        transparent 60%),
      /* Subtle bottom-up glow to anchor the section's bottom edge */
      radial-gradient(ellipse 50% 30% at 50% 100%,
        rgba(200,255,0,.05) 0%,
        transparent 70%),
      /* Visible geometric grid — 6% opacity, 56px tile */
      linear-gradient(rgba(200,255,0,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.045) 1px, transparent 1px);
    background-size:
      100% 100%,
      100% 100%,
      56px 56px,
      56px 56px;
    background-position:
      center top,
      center bottom,
      center center,
      center center;
    background-repeat:no-repeat, no-repeat, repeat, repeat;
  }

  /* Bottom-edge mirror of the top stripe */
  .services::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(200,255,0,.28) 30%,
      rgba(200,255,0,.28) 70%,
      transparent 100%);
    pointer-events:none;
    z-index:0;
  }

  /* All children sit above the backdrop layers. */
  .services > * { position:relative; z-index:1; }
  /* ──────────── SERVICES GRID — gradient dividers + animated draw ──────────── */
  .services-grid {
    display:grid;
    grid-template-columns:1fr;
    /* The cards carry border-radius:20px, so butting them together left four
       curves closing on a hairline — rounded boxes that touch read as a
       mistake. The gap does the separating the divider used to. */
    gap:16px;
    background:transparent;
    border:none;
    position:relative;
  }
  @media (min-width:600px) { .services-grid { grid-template-columns:repeat(2,1fr); } }

  /* The vertical divider between cards 01 and 02 was removed with the gap —
     it drew a line down the middle of empty space once the cards no longer met.
     Its reveal animation went with it. */

  /* ──────────── LEARN-THE-SYSTEM BANNER ────────────
     Uses the same component layout as a service card, just stretched
     to full width: title/desc/stats on the left, acid badge top-right,
     huge "03" background number bottom-right (same scale as 01 / 02). */
  .learn-banner {
    /* A grid item now, spanning both columns, so .services-grid's gap spaces
       it from the cards — one value governs every gap in this section. */
    grid-column:1 / -1;
    width:100%;
    margin-top:0;
    /* Matte deep black — same as service cards */
    background:#0a0a0a;
    border:none;
    padding:48px 32px 56px;
    color:var(--text);
    text-align:left;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    display:block;
    border-radius:20px;
    box-shadow:inset 0 0 0 1px rgba(217,255,0,.06);
    /* Single coordinated transition — carries BOTH the scroll reveal
       (opacity + rise) and the hover lift. The easing is front-loaded, so
       the longer duration still reads as immediate on hover. */
    transition:
      opacity .85s cubic-bezier(.16,1,.3,1),
      transform .85s cubic-bezier(.16,1,.3,1),
      background .5s cubic-bezier(.16,1,.3,1),
      box-shadow .5s cubic-bezier(.16,1,.3,1);
    font-family:inherit;
    min-height:200px;
    --mx:50%; --my:50%;
  }
  /* Cursor-tracked acid spotlight on the 03 banner */
  .learn-banner::after {
    content:'';
    position:absolute; inset:0;
    /* The illumination is a separate layer, so it needs the corner too —
       without it the glow paints into the square corners the card no longer
       has, and the hover reads as a square box lighting up behind a rounded
       one. inherit, so it can never drift from the card's radius. */
    border-radius:inherit;
    background:radial-gradient(520px circle at var(--mx) var(--my),
      rgba(217,255,0,.18) 0%,
      rgba(217,255,0,.07) 22%,
      transparent 62%);
    opacity:0;
    transition:opacity .45s ease;
    pointer-events:none;
    z-index:0;
    mix-blend-mode:screen;
  }
  .learn-banner:hover::after,
  .learn-banner:focus-visible::after { opacity:1; }
  @media (min-width:769px) {
    .learn-banner { padding:56px 48px 64px; min-height:220px; border-radius:26px; }
  }

  /* Reveal — faid.js adds .is-in per box as it comes into frame, 110ms apart.
     A touch more travel than the site's stock .reveal: these are the biggest
     objects on the page and they should arrive with some weight, not snap.

     The TRANSITION for this lives in the .service-card / .learn-banner base
     blocks further down, NOT here — those come later in the file at the same
     specificity, so any transition declared here is dead on arrival. That is
     exactly how the cards ended up with no opacity transition at all. One
     coordinated transition per element, declared once, in the base block. */
  .service-card,
  .learn-banner {
    opacity:0;
    transform:translateY(34px);
  }
  .service-card.is-in,
  .learn-banner.is-in {
    opacity:1;
    transform:translateY(0);
  }
  /* Once revealed AND hovered, restore the hover lift (translateY -6px) */
  .service-card.is-in:hover,
  .learn-banner.is-in:hover,
  .learn-banner.is-in:focus-visible {
    transform:translateY(-6px);
  }

  /* Respect reduced-motion across the whole services section */
  @media (prefers-reduced-motion: reduce) {
    .service-card, .learn-banner {
      opacity:1; transform:none;
      transition:background .2s ease, box-shadow .2s ease;
      animation:none;
    }
    .service-card:hover, .learn-banner:hover,
    .service-card.is-in:hover, .learn-banner.is-in:hover { transform:none; }
    .service-num, .learn-banner-num {
      --parallax-y:0px !important;
      transform:none !important;
      animation:none !important;
    }
    .service-card::before, .learn-banner::before { transition:none; }
    .service-badge::before, .learn-banner-cta::before { transition:none; }
    .service-badge::after, .learn-banner-cta-arrow { transition:none; }
  }

  /* The horizontal divider above the Learn banner was removed with the gap,
     same as the vertical one between the cards: the grid gap separates them
     now, and a hairline sitting in that gap separates nothing. */
  /* Top accent bar — same as service cards */
  /* The accent traces the card's OUTLINE, not a straight line across its top.
     As a 2px bar pinned to top:0 it ran edge to edge and the rounded corners
     simply cut it off flat, which read as a square box wearing round corners.
     A full-perimeter border with the card's own radius, wiped in left to right
     with clip-path — the same reveal the operate section uses — follows the
     curve the whole way round. */
  .learn-banner:hover,
  .learn-banner:focus-visible {
    background:#0c0c0e;
    transform:translateY(-6px);
    /* The perimeter is the TRACE's job now. Jumping the inset border straight
       to .42 lit the whole outline the instant you hovered, so the line had
       nothing left to reveal and the lap was invisible — it read as "it doesn't
       travel". The border stays near its resting weight while the trace runs,
       and the breathing pulse waits until the lap has closed. */
    box-shadow:
      inset 0 0 0 1px rgba(217,255,0,.10),
      0 18px 40px -22px rgba(217,255,0,.32),
      0 6px 24px -8px rgba(0,0,0,.45),
      0 0 32px -10px rgba(217,255,0,.18);
    animation:cardBorderPulse 2.4s ease-in-out .95s infinite;
  }
  .learn-banner:focus-visible { outline:none; }

  /* Huge background "03" — SAME size as .service-num on cards above */
  .learn-banner-num {
    font-family:'Bebas Neue',sans-serif;
    position:absolute;
    right:-24px; bottom:-44px;
    margin:0;
    font-size:clamp(10rem, 20vw, 16rem);
    line-height:.78;
    letter-spacing:-.03em;
    background:linear-gradient(110deg,
      rgba(217,255,0,.07) 0%,
      rgba(217,255,0,.07) 38%,
      rgba(217,255,0,.42) 50%,
      rgba(217,255,0,.07) 62%,
      rgba(217,255,0,.07) 100%);
    background-size:240% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    --parallax-y:0px;
    transform:translateY(var(--parallax-y));
    transition:transform .7s cubic-bezier(.16,1,.3,1), background-position .9s ease, filter .5s ease;
    pointer-events:none;
    z-index:0;
    filter:drop-shadow(0 0 0px rgba(217,255,0,0));
  }
  .learn-banner:hover .learn-banner-num,
  .learn-banner:focus-visible .learn-banner-num {
    transform:translate(-12px, calc(var(--parallax-y) - 12px));
    animation:numShimmer 2.4s ease-in-out infinite;
    filter:drop-shadow(0 0 24px rgba(217,255,0,.25));
  }

  /* CTA badge — outlined, wipes acid fill on hover, mirrors .service-badge */
  .learn-banner-cta {
    position:absolute; top:24px; right:24px;
    display:inline-flex; align-items:center; gap:9px;
    background:transparent; color:var(--acid);
    border:1px solid rgba(217,255,0,.55);
    font-family:'Space Mono',monospace;
    font-size:.52rem; letter-spacing:.22em;
    text-transform:uppercase; font-weight:700;
    padding:7px 13px;
    z-index:3;
    overflow:hidden;
    isolation:isolate;
    transition:
      color .35s cubic-bezier(.16,1,.3,1),
      border-color .35s cubic-bezier(.16,1,.3,1),
      transform .35s cubic-bezier(.16,1,.3,1),
      box-shadow .35s cubic-bezier(.16,1,.3,1);
  }
  .learn-banner-cta::before {
    content:'';
    position:absolute; inset:0;
    background:var(--acid);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
    z-index:-1;
  }
  .learn-banner:hover .learn-banner-cta,
  .learn-banner:focus-visible .learn-banner-cta {
    color:var(--black);
    border-color:var(--acid);
    transform:translateY(-2px);
    box-shadow:0 8px 22px -6px rgba(217,255,0,.5);
  }
  .learn-banner:hover .learn-banner-cta::before,
  .learn-banner:focus-visible .learn-banner-cta::before {
    transform:scaleX(1);
  }
  .learn-banner-cta-arrow { font-size:.85rem; line-height:1; transition:transform .35s cubic-bezier(.16,1,.3,1); }
  /* Mobile: unstick the CTA from top-right so it can't clash with the heading.
     It flows naturally at the top of the banner before the body block. */
  /* Matches .service-badge exactly: static, left-aligned, pushed down off the
     content above it. margin-bottom belonged to the old top position. */
  @media (max-width:768px) {
    .learn-banner-cta {
      position:static;
      align-self:flex-start;
      margin-top:18px;
      margin-bottom:4px;
    }
  }
  .learn-banner:hover .learn-banner-cta-arrow,
  .learn-banner:focus-visible .learn-banner-cta-arrow { transform:translateX(4px); }
  @media (min-width:769px) {
    .learn-banner-cta { font-size:.55rem; padding:8px 15px; }
  }

  /* Body wraps the textual content, kept on the left */
  .learn-banner-body {
    position:relative; z-index:1;
    max-width:640px;
  }
  .learn-banner-eyebrow {
    font-family:'Space Mono',monospace;
    font-size:.66rem; letter-spacing:.32em;
    color:var(--acid); text-transform:uppercase;
    font-weight:700;
    margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
    opacity:1;
  }
  .learn-banner-eyebrow::before { content:''; width:22px; height:1px; background:var(--acid); }

  .learn-banner-title {
    font-family:'Syne',sans-serif;
    font-size:clamp(1.6rem, 2.4vw, 2rem);
    font-weight:800; line-height:1.12;
    letter-spacing:-.005em;
    margin:0 0 12px;
    color:#ffffff;
    transition:color .35s ease;
  }
  .learn-banner:hover .learn-banner-title { color:var(--acid); }

  .learn-banner-sub {
    font-size:.92rem; line-height:1.65;
    color:rgba(240,238,232,.92);
    margin:0 0 16px;
    max-width:52ch;
  }

  /* Stats — inline horizontal pills, same look as .service-stats */
  .learn-banner-stats {
    display:flex; gap:18px;
    flex-wrap:wrap;
  }
  .learn-banner-stat {
    font-family:'Space Mono',monospace;
    font-size:.7rem; letter-spacing:.22em;
    color:var(--acid);
    text-transform:uppercase;
    font-weight:700;
    opacity:1;
    position:relative;
    padding-left:14px;
  }
  .learn-banner-stat::before {
    content:'';
    position:absolute; left:0; top:50%;
    width:6px; height:6px;
    background:var(--acid);
    transform:translateY(-50%) rotate(45deg);
    opacity:.7;
  }

  /* Legacy: no horizontal grid needed anymore — block layout */
  .learn-banner-glow { display:none; }

  .service-card {
    --mx: 50%;
    --my: 50%;
    /* Matte deep black — no gradient, flat for clean dark presence */
    background:#0a0a0a;
    /* Same corner as the operate cards, so the two sections agree. The 1px
       border is an inset shadow and the top accent bar is clipped by
       overflow:hidden, so both follow the curve without extra work. */
    border-radius:20px;
    padding:40px 32px 80px;
    position:relative;
    overflow:hidden;
    min-height:440px;
    display:flex;
    flex-direction:column;
    box-shadow:inset 0 0 0 1px rgba(217,255,0,.06);
    /* Single coordinated transition — carries BOTH the scroll reveal
       (opacity + rise) and the hover lift. The easing is front-loaded, so
       the longer duration still reads as immediate on hover. */
    transition:
      opacity .85s cubic-bezier(.16,1,.3,1),
      transform .85s cubic-bezier(.16,1,.3,1),
      background .5s cubic-bezier(.16,1,.3,1),
      box-shadow .5s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  @media (min-width:769px) { .service-card { padding:64px 40px 104px; min-height:520px; border-radius:26px; } }
  .service-card-clickable { cursor:pointer; outline:none; }
  .service-card-clickable:focus-visible {
    outline:none;
    box-shadow:inset 0 0 0 2px var(--acid);
  }

  /* Top accent bar — draws across on hover */
  /* The accent traces the card's OUTLINE, not a straight line across its top.
     As a 2px bar pinned to top:0 it ran edge to edge and the rounded corners
     simply cut it off flat, which read as a square box wearing round corners.
     A full-perimeter border with the card's own radius, wiped in left to right
     with clip-path — the same reveal the operate section uses — follows the
     curve the whole way round. */
  .service-card:hover {
    /* Slight lift — still matte black, just a touch warmer */
    background:#0c0c0e;
    transform:translateY(-6px);
    /* The perimeter is the TRACE's job now. Jumping the inset border straight
       to .42 lit the whole outline the instant you hovered, so the line had
       nothing left to reveal and the lap was invisible — it read as "it doesn't
       travel". The border stays near its resting weight while the trace runs,
       and the breathing pulse waits until the lap has closed. */
    box-shadow:
      inset 0 0 0 1px rgba(217,255,0,.10),
      0 18px 40px -22px rgba(217,255,0,.32),
      0 6px 24px -8px rgba(0,0,0,.45),
      0 0 32px -10px rgba(217,255,0,.18);
    animation:cardBorderPulse 2.4s ease-in-out .95s infinite;
  }

  /* Border-glow pulse — rhythmic acid breathing on hover */
  @keyframes cardBorderPulse {
    0%, 100% {
      box-shadow:
        inset 0 0 0 1px rgba(217,255,0,.42),
        0 18px 40px -22px rgba(217,255,0,.32),
        0 6px 24px -8px rgba(0,0,0,.45),
        0 0 32px -10px rgba(217,255,0,.18);
    }
    50% {
      box-shadow:
        inset 0 0 0 1px rgba(217,255,0,.7),
        0 18px 40px -22px rgba(217,255,0,.48),
        0 6px 24px -8px rgba(0,0,0,.45),
        0 0 48px -8px rgba(217,255,0,.34);
    }
  }

  /* Mouse-following acid spotlight — softer radial that tracks the cursor.
     Slightly stronger inner stop + wider falloff so it reads at a glance. */
  .service-card::after {
    content:'';
    position:absolute; inset:0;
    /* The illumination is a separate layer, so it needs the corner too —
       without it the glow paints into the square corners the card no longer
       has, and the hover reads as a square box lighting up behind a rounded
       one. inherit, so it can never drift from the card's radius. */
    border-radius:inherit;
    background:radial-gradient(460px circle at var(--mx) var(--my),
      rgba(217,255,0,.18) 0%,
      rgba(217,255,0,.07) 22%,
      transparent 62%);
    opacity:0;
    transition:opacity .45s ease;
    pointer-events:none;
    z-index:0;
    mix-blend-mode:screen;
  }
  .service-card:hover::after { opacity:1; }

  /* Huge background number — slides + shimmers on hover.
     Slightly more present default (was .05/.32 → now .07/.42).
     Parallax drift is applied via --parallax-y by JS on scroll. */
  .service-num {
    font-family:'Bebas Neue',sans-serif;
    position:absolute;
    right:-24px; bottom:-44px;
    margin:0;
    font-size:clamp(10rem, 20vw, 16rem);
    line-height:.78;
    letter-spacing:-.03em;
    background:linear-gradient(110deg,
      rgba(217,255,0,.07) 0%,
      rgba(217,255,0,.07) 38%,
      rgba(217,255,0,.42) 50%,
      rgba(217,255,0,.07) 62%,
      rgba(217,255,0,.07) 100%);
    background-size:240% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    --parallax-y:0px;
    transform:translateY(var(--parallax-y));
    transition:transform .7s cubic-bezier(.16,1,.3,1), background-position .9s ease, filter .5s ease;
    pointer-events:none;
    z-index:0;
    filter:drop-shadow(0 0 0px rgba(217,255,0,0));
  }
  .service-card:hover .service-num {
    transform:translate(-12px, calc(var(--parallax-y) - 12px));
    animation:numShimmer 2.4s ease-in-out infinite;
    filter:drop-shadow(0 0 24px rgba(217,255,0,.25));
  }
  @keyframes numShimmer {
    0% { background-position:120% 0; }
    100% { background-position:-20% 0; }
  }

  /* Section number eyebrow */
  .service-card > .service-title { position:relative; z-index:1; }
  .service-tag {
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.35em;
    color:var(--acid); text-transform:uppercase;
    margin-bottom:24px;
    display:flex; align-items:center; gap:10px;
    opacity:.85;
    position:relative; z-index:1;
  }
  .service-tag::before { content:''; width:22px; height:1px; background:var(--acid); }

  .service-title {
    font-family:'Syne',sans-serif;
    font-size:clamp(1.65rem, 2.5vw, 2.05rem);
    font-weight:800; line-height:1.12;
    margin-bottom:16px;
    color:#ffffff;
    letter-spacing:-.005em;
    transition:color .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
    position:relative; z-index:1;
  }
  .service-card:hover .service-title { color:var(--acid); }

  .service-desc {
    font-size:.92rem; line-height:1.7;
    /* Pure white-ish for max readability */
    color:rgba(240,238,232,.95);
    max-width:420px;
    position:relative; z-index:1;
  }
  /* Inline "See it live ↗" link inside .service-desc — acid, underlined,
     brighter on hover. event.stopPropagation on the <a> so clicking it
     opens the live site instead of also firing the card's openCaseStudy(). */
  .service-desc-link {
    color:var(--acid);
    font-weight:700;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    text-decoration-color:rgba(217,255,0,.45);
    white-space:nowrap;
    position:relative; z-index:2;
    transition:text-decoration-color .25s ease, filter .25s ease;
  }
  .service-desc-link:hover {
    text-decoration-color:var(--acid);
    filter:drop-shadow(0 0 6px rgba(217,255,0,.5));
  }

  /* ── BORDER CHASE ── single acid pulse traces clockwise around the
     card's perimeter on hover. Circuit-board / signal feel.
     Uses @property + conic-gradient + mask-composite for true border-only
     rendering (no inner fill). Modern browsers only (Chrome 85+, Safari
     15.4+, Firefox 128+) — falls back to no pulse on older browsers. */
  @property --chase-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  /* ── Card outline trace ──
     The accent TRAVELS the perimeter on hover rather than wiping across it. A
     border cannot be animated along a rounded rectangle, so faid.js lays an SVG
     outline over the card and this releases its dash. Same idea as the
     serpentine in the operate section, one card at a time.

     --trace-len is written by faid.js from the real path length, so the line
     starts fully retracted whatever size the card is. Without the script the
     rule is inert and the card still has its inset hairline and glow. */
  .card-trace {
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    overflow:visible;
    z-index:3;
  }
  .card-trace path {
    fill:none;
    stroke:var(--acid);
    stroke-width:2;
    stroke-dasharray:var(--trace-len, 4000);
    stroke-dashoffset:var(--trace-len, 4000);
    filter:drop-shadow(0 0 5px rgba(217,255,0,.55));
    transition:stroke-dashoffset .95s cubic-bezier(.22,1,.36,1);
  }
  .service-card:hover .card-trace path,
  .learn-banner:hover .card-trace path,
  .learn-banner:focus-visible .card-trace path,
  .work-lane-col:hover .card-trace path,
  .service-card-clickable:focus-visible .card-trace path { stroke-dashoffset:0; }
  @media (prefers-reduced-motion: reduce) {
    .card-trace path { transition:none; }
  }

  .service-pulse {
    position:absolute; inset:0;
    pointer-events:none;
    overflow:hidden;
    /* This layer clips its own chase, so it needs the card's corner as well —
       without it the ring runs a square lap around a rounded card. */
    border-radius:inherit;
    opacity:0;
    /* held back until the trace has finished its lap, so there are not two
       rings going round the card at once */
    transition:opacity .35s ease .95s;
    z-index:2;
  }
  .service-card:hover .service-pulse,
  .learn-banner:hover .service-pulse,
  .learn-banner:focus-visible .service-pulse {
    opacity:1;
  }
  /* The chase itself — a conic gradient with a bright acid arc.
     Rotating the gradient origin makes the arc circle the perimeter. */
  .service-pulse::before {
    content:'';
    position:absolute;
    inset:0;
    padding:2px;
    /* the masked ring is the shape that travels — it has to be the card's */
    border-radius:inherit;
    background:conic-gradient(
      from var(--chase-angle, 0deg),
      transparent 0deg,
      transparent 260deg,
      rgba(217,255,0,.45) 290deg,
      rgba(217,255,0,1)   335deg,
      rgba(217,255,0,.45) 348deg,
      transparent 360deg);
    /* Mask: only show on the border, hide the interior */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    /* Acid bloom around the chase pulse — slightly stronger glow */
    filter:
      drop-shadow(0 0 6px rgba(217,255,0,.75))
      drop-shadow(0 0 12px rgba(217,255,0,.3));
  }
  .service-card:hover .service-pulse::before,
  .learn-banner:hover .service-pulse::before,
  .learn-banner:focus-visible .service-pulse::before {
    animation:borderChase 2.2s linear infinite;
  }
  @keyframes borderChase {
    to { --chase-angle: 360deg; }
  }
  @media (prefers-reduced-motion: reduce) {
    .service-card:hover, .learn-banner:hover { animation:none; }
    .service-pulse::before { animation:none !important; display:none; }
  }

  /* Arrow */
  .service-arrow {
    position:absolute;
    bottom:28px; right:32px;
    font-size:1.55rem; color:var(--acid);
    opacity:0; transform:translateX(-14px);
    transition:opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1);
    z-index:2;
  }
  .service-card:hover .service-arrow { opacity:1; transform:translateX(0); }

  /* CTA badge — outlined by default, wipes acid fill across on hover.
     Arrow tucked on the right slides forward on hover. */
  .service-badge {
    position:absolute; top:24px; right:24px;
    display:inline-flex; align-items:center; gap:9px;
    background:transparent; color:var(--acid);
    border:1px solid rgba(217,255,0,.55);
    font-family:'Space Mono',monospace;
    font-size:.52rem; letter-spacing:.22em;
    text-transform:uppercase; font-weight:700;
    padding:7px 13px 7px 13px;
    z-index:3;
    overflow:hidden;
    isolation:isolate;
    transition:
      color .35s cubic-bezier(.16,1,.3,1),
      border-color .35s cubic-bezier(.16,1,.3,1),
      transform .35s cubic-bezier(.16,1,.3,1),
      box-shadow .35s cubic-bezier(.16,1,.3,1);
  }
  /* Wipe fill */
  .service-badge::before {
    content:'';
    position:absolute; inset:0;
    background:var(--acid);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
    z-index:-1;
  }
  /* Arrow after the text */
  .service-badge::after {
    content:'→';
    font-size:.85rem;
    line-height:1;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .service-card-clickable:hover .service-badge,
  .service-card-clickable:focus-visible .service-badge {
    color:var(--black);
    border-color:var(--acid);
    transform:translateY(-2px);
    box-shadow:0 8px 22px -6px rgba(217,255,0,.5);
  }
  .service-card-clickable:hover .service-badge::before,
  .service-card-clickable:focus-visible .service-badge::before {
    transform:scaleX(1);
  }
  .service-card-clickable:hover .service-badge::after,
  .service-card-clickable:focus-visible .service-badge::after {
    transform:translateX(4px);
  }
  @media (min-width:769px) { .service-badge { font-size:.55rem; padding:8px 15px; } }
  /* On mobile, unstick from top-right so it can't crash into the heading.
     Let it flow under .service-desc as a proper inline CTA chip. */
  @media (max-width:768px) {
    .service-badge {
      position:static;
      align-self:flex-start;
      margin-top:18px;
      margin-bottom:4px;
    }
  }

  /* Secondary badge — outlined, stacks under the main acid pill.
     Used to surface a SECOND example without competing with the primary action. */
  .service-badge-secondary {
    position:absolute; top:60px; right:24px;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(5,5,7,.4);
    color:var(--acid);
    border:1px solid rgba(217,255,0,.35);
    font-family:'Space Mono',monospace;
    font-size:.52rem; letter-spacing:.22em;
    text-transform:uppercase; font-weight:700;
    padding:5px 11px;
    z-index:4;
    text-decoration:none;
    backdrop-filter:blur(6px);
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .service-badge-secondary:hover {
    background:var(--acid);
    border-color:var(--acid);
    color:var(--black);
    transform:translateY(-2px);
  }
  .service-badge-secondary-arrow {
    font-size:.65rem; line-height:1;
    transition:transform .25s ease;
  }
  .service-badge-secondary:hover .service-badge-secondary-arrow {
    transform:translate(2px,-2px);
  }
  @media (min-width:769px) {
    .service-badge-secondary { top:64px; right:24px; font-size:.55rem; padding:6px 12px; }
  }
  /* Mobile: same un-stick treatment as the primary badge, sits just under it. */
  @media (max-width:768px) {
    .service-badge-secondary {
      position:static;
      align-self:flex-start;
      margin-top:6px;
      margin-bottom:4px;
    }
  }

  /* Proof-point stats row — sits between title and description */
  .service-stats {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:-4px 0 22px;
    font-family:'Space Mono',monospace;
    font-size:.62rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(200,255,0,.92);
    font-weight:700;
    position:relative; z-index:1;
  }
  .service-stats span {
    display:flex; align-items:center; gap:8px;
  }
  .service-stats span + span::before {
    content:'';
    width:4px; height:4px; border-radius:50%;
    background:rgba(200,255,0,.4);
    margin-left:-6px; margin-right:2px;
  }
  @media (min-width:769px) { .service-stats { font-size:.68rem; gap:18px; margin:-2px 0 26px; } }

  /* Bottom CTA strip — sits below the services grid */
  .services-cta {
    margin-top:1px;
    padding:32px 28px;
    background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%);
    border:1px solid rgba(200,255,0,.10);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:relative;
    overflow:hidden;
    transition:background .4s ease;
  }
  .services-cta::before {
    content:'';
    position:absolute; top:0; left:0;
    width:0; height:2px;
    background:linear-gradient(90deg, var(--acid), #d8ff4d, var(--acid));
    transition:width .7s cubic-bezier(.16,1,.3,1);
  }
  .services-cta:hover::before { width:100%; }
  .services-cta:hover { background:linear-gradient(165deg, #1a1a24 0%, #0c0c14 100%); }
  .services-cta-text {
    font-family:'Syne',sans-serif;
    font-size:clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight:800;
    line-height:1.25;
    color:var(--white);
    max-width:520px;
  }
  .services-cta-text span { color:var(--acid); }
  .services-cta-btn {
    font-family:'Space Mono',monospace;
    font-size:.62rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--black);
    background:var(--acid);
    padding:14px 22px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:background .2s ease, transform .3s ease;
    white-space:nowrap;
  }
  .services-cta-btn:hover { background:#d8ff4d; transform:translateX(2px); }
  @media (min-width:769px) { .services-cta { padding:40px 36px; } }

  /* ── BRAND-AI MODAL — Section 01 "Trained on your brand" DNA cards ── */
  .brand-dna-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:rgba(200,255,0,.10);
    border:1px solid rgba(200,255,0,.10);
  }
  @media (min-width:769px) { .brand-dna-grid { grid-template-columns:repeat(4, 1fr); } }
  .brand-dna-card {
    background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%);
    padding:18px 18px 20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .brand-dna-eyebrow {
    font-family:'Space Mono',monospace;
    font-size:.5rem; letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--acid);
    display:flex; align-items:center; gap:8px;
    opacity:.85;
  }
  .brand-dna-eyebrow::before { content:''; width:16px; height:1px; background:var(--acid); }
  .brand-dna-title {
    font-family:'Syne',sans-serif;
    font-size:1rem;
    font-weight:800;
    color:var(--white);
    line-height:1.15;
  }
  /* ── UNIFIED ROW SYSTEM — every card uses the same structural pattern:
        title at top, then a stack of horizontal rows. Makes the 4 cards read
        as one system, not four disconnected experiments. ── */
  .brand-dna-rows { display:flex; flex-direction:column; gap:6px; }
  .brand-dna-row {
    display:flex; align-items:center;
    gap:10px;
    padding:8px 10px;
    min-height:34px;
    border:1px solid rgba(200,255,0,.08);
    background:rgba(255,255,255,.015);
    position:relative;
    overflow:hidden;
  }
  .brand-dna-row-label {
    font-family:'Space Mono',monospace;
    font-size:.42rem; letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(240,238,232,.45);
    margin-left:auto;
    flex-shrink:0;
  }
  /* PALETTE — color bar rows */
  .palette-row { padding:0; min-height:34px; border:1px solid rgba(255,255,255,.05); }
  .palette-row-inner {
    display:flex; align-items:center;
    justify-content:space-between;
    padding:8px 12px;
    width:100%;
  }
  .palette-row-name {
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:700;
  }
  .palette-row-hex {
    font-family:'Space Mono',monospace;
    font-size:.48rem; letter-spacing:.08em;
    opacity:.7;
  }
  .palette-ratio {
    margin-top:8px;
    font-family:'Space Mono',monospace;
    font-size:.45rem; letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(240,238,232,.45);
    text-align:center;
  }
  .palette-ratio span { color:var(--acid); }
  /* TYPOGRAPHY — type sample rows */
  .typo-row { display:flex; align-items:baseline; gap:10px; padding:8px 10px; border:1px solid rgba(200,255,0,.08); background:rgba(255,255,255,.015); }
  .typo-sample-text { line-height:1; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .typo-row-label { flex-shrink:0; font-family:'Space Mono',monospace; font-size:.4rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(240,238,232,.4); }
  /* VOICE — quote + rules */
  .voice-quote {
    font-family:'Syne',sans-serif;
    font-size:1.05rem;
    font-weight:800;
    line-height:1.15;
    color:var(--acid);
    padding:10px 12px;
    border:1px solid rgba(200,255,0,.25);
    background:rgba(200,255,0,.05);
  }
  .voice-quote-cite {
    font-family:'Space Mono',monospace;
    font-size:.42rem; letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(240,238,232,.4);
    margin-top:4px;
    display:block;
  }
  .voice-rule {
    display:flex; align-items:center; gap:10px;
    padding:7px 10px;
    border:1px solid rgba(200,255,0,.08);
    background:rgba(255,255,255,.015);
    font-family:'Space Mono',monospace;
    font-size:.58rem;
    line-height:1.25;
    color:rgba(240,238,232,.7);
  }
  .voice-rule-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:.85rem;
    letter-spacing:.05em;
    color:var(--acid);
    flex-shrink:0;
  }
  /* REFERENCES — stacked reference rows, each with distinct visual + label */
  .ref-row {
    display:flex; align-items:center;
    gap:10px;
    padding:0;
    min-height:36px;
    border:1px solid rgba(200,255,0,.1);
    position:relative;
    overflow:hidden;
  }
  .ref-row-visual { flex:1; height:100%; min-height:36px; position:relative; }
  .ref-row-label {
    font-family:'Space Mono',monospace;
    font-size:.42rem; letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(240,238,232,.55);
    padding:0 12px;
    flex-shrink:0;
    position:relative; z-index:2;
  }
  .ref-texture .ref-row-visual {
    background:
      radial-gradient(circle at 30% 50%, rgba(200,255,0,.35) 0%, transparent 60%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 3px),
      #0a0a10;
  }
  .ref-form .ref-row-visual { background:#0a0a10; position:relative; }
  .ref-form .ref-row-visual::before {
    content:'';
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:24px; height:24px;
    border:1.5px solid rgba(200,255,0,.5); border-radius:50%;
  }
  .ref-form .ref-row-visual::after {
    content:'';
    position:absolute; left:46px; top:50%; transform:translateY(-50%);
    width:8px; height:8px;
    background:var(--acid); border-radius:50%;
  }
  .ref-type .ref-row-visual {
    background:#0a0a10; position:relative;
    font-family:'Bebas Neue',sans-serif;
    font-size:1.6rem;
    color:rgba(240,238,232,.5);
    line-height:1;
    display:flex; align-items:center;
    padding-left:14px;
    letter-spacing:.05em;
  }
  .ref-type .ref-row-visual::before { content:'FAID'; }
  .ref-grade .ref-row-visual {
    background:linear-gradient(90deg, var(--acid) 0%, rgba(200,255,0,.5) 30%, #1a1a22 70%, var(--black) 100%);
  }

  /* ── BRAND-AI MODAL — Section 02 "One Engine" mixed-format row ──
     Each tile keeps its native aspect (16:9 logo · 4:5 product · 9:16 UGC).
     Flex-grow values are proportional to (width / height) so each tile's
     calculated WIDTH ends up matching its aspect ratio at the same HEIGHT —
     the entire row always fits the container, no horizontal scroll. */
  .brand-ai-formats {
    display:flex;
    flex-direction:column;
    gap:1px;
    background:rgba(200,255,0,.10);
    border:1px solid rgba(200,255,0,.10);
  }
  .brand-ai-formats .ad-tile { width:100%; max-width:none; }
  @media (min-width:769px) {
    .brand-ai-formats { flex-direction:row; align-items:flex-start; }
    /* flex-grow proportional to width/height (× 100 for readability) */
    .brand-ai-formats .ad-tile-logo    { flex:178; width:auto; min-width:0; } /* 16/9  */
    .brand-ai-formats .ad-tile-product { flex:80;  width:auto; min-width:0; } /* 4/5   */
    .brand-ai-formats .ad-tile-ugc     { flex:56;  width:auto; min-width:0; } /* 9/16  */
  }

  /* ── BRAND-AI MODAL — Section 03 "What you keep" deliverables ── */
  .brand-deliverables-grid {
    display:grid;
    grid-template-columns:repeat(1, 1fr);
    gap:1px;
    background:rgba(200,255,0,.10);
    border:1px solid rgba(200,255,0,.10);
  }
  @media (min-width:600px) { .brand-deliverables-grid { grid-template-columns:repeat(2, 1fr); } }
  @media (min-width:900px) { .brand-deliverables-grid { grid-template-columns:repeat(3, 1fr); } }
  .brand-deliverable {
    background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%);
    padding:22px 20px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    transition:background .4s ease;
  }
  .brand-deliverable:hover { background:linear-gradient(165deg, #1a1a24 0%, #0c0c14 100%); }
  .brand-deliverable-check {
    flex-shrink:0;
    width:24px; height:24px;
    border:1px solid var(--acid);
    display:flex; align-items:center; justify-content:center;
    color:var(--acid);
  }
  .brand-deliverable-check svg { width:14px; height:14px; }
  .brand-deliverable-body { display:flex; flex-direction:column; gap:6px; }
  .brand-deliverable-title {
    font-family:'Syne',sans-serif;
    font-size:.85rem;
    font-weight:800;
    color:var(--white);
    line-height:1.2;
  }
  .brand-deliverable-desc {
    font-family:'Space Mono',monospace;
    font-size:.6rem;
    line-height:1.6;
    color:rgba(240,238,232,.55);
  }

  /* ── PROCESS ── */
  .process { padding:80px 24px; border-top:1px solid var(--border); position:relative; }
  @media (min-width:769px) { .process { padding:120px 48px; } }
  /* The heading and the boxes must sit on ONE shared rail. Change this and
     both move; they drifted apart the last time they carried separate widths
     and the mismatch only showed at wide viewports. */
  .process { --rail:1560px; }
  .process-head {
    margin-bottom:0; display:flex; align-items:center;
    justify-content:space-between; gap:32px; flex-wrap:wrap;
    max-width:var(--rail); margin-left:auto; margin-right:auto;
  }
  /* Syne 800 in the hero's colourway — HOW solid, WE acid, OPERATE outlined,
     the same run as BUILT / TO / CONVERT. faid.js re-measures the side bearings
     and the ink centre from whatever face is actually rendering, so the head's
     optical alignment follows a typeface or colour change on its own. */
  /* Bebas is condensed, so this head reads narrow for its height. Widen the
     LETTERFORMS, not the gaps between them — tracking pushes the letters apart
     and reads as spaced-out, not as bigger. transform-origin keeps the left
     edge pinned so the head still starts on the rail, and a transform does not
     affect layout, so nothing downstream moves. */
  .process-title { font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(3.6rem,10vw,8.5rem); line-height:.84; letter-spacing:.01em; margin:0;
    transform:scaleX(1.18); transform-origin:left center; }
  .process-title .st-accent { color:var(--acid); -webkit-text-fill-color:var(--acid); }
  /* -webkit-text-fill-color has to be set explicitly: it wins over `color`, so
     leaving it at currentColor would paint the glyph solid over the stroke. */
  /* Positive tracking on the outlined line, against the title's -.02em. Solid
     glyphs at negative tracking just merge and you never see it; outlined, every
     collision shows as strokes crossing INSIDE the letterforms — at -.02em the R
     ran through the A and the A through the T. */
  /* the stroke scales with the transform too, so it is set a shade under 1.6 to
     land near it once stretched */
  .process-title em { font-style:normal; letter-spacing:.03em; -webkit-text-stroke:1.45px var(--white); -webkit-text-fill-color:transparent; color:transparent; }
  /* Offset with position, never margin: a margin on a centred flex item
     changes the container's own height once it is big enough, so the
     correction feeds back into the value being measured and never settles.
     faid.js overwrites `top` inline with a measured value; this is the no-JS
     fallback. */
  .process-meta {
    font-family:'Space Mono',monospace;
    color:rgba(240,238,232,.55);
    max-width:470px;
    text-align:right;
    position:relative;
    top:-.09em;
  }
  .process-meta-line {
    font-size:.94rem;
    letter-spacing:.18em;
    line-height:1.6;
    text-transform:uppercase;
    margin-bottom:16px;
    /* letter-spacing appends space AFTER the last glyph, so right-aligned
       text stops short of its own edge. Pull it back by exactly its tracking. */
    margin-right:-.18em;
  }
  .process-meta-line span { color:var(--acid); font-weight:700; }
  .process-meta-stats {
    padding-top:17px;
    border-top:1px solid rgba(217,255,0,.18);
    display:flex; align-items:baseline; flex-wrap:wrap;
    justify-content:flex-end;
    gap:12px;
    font-family:'Space Mono',monospace;
    font-size:.72rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(240,238,232,.6);
  }
  .stat-pill {
    display:inline-flex; align-items:baseline; gap:6px;
    white-space:nowrap;
  }
  /* the row carries the hairline rule, so pull the last PILL, not the row —
     otherwise the rule overshoots the rail by the same amount */
  .process-meta-stats > .stat-pill:last-child { margin-right:-.2em; }
  .stat-pill b {
    font-family:'Bebas Neue',sans-serif;
    font-size:1.38rem;
    line-height:1;
    color:var(--acid);
    font-weight:400;
    letter-spacing:.01em;
  }
  .stat-dot {
    color:var(--acid);
    opacity:.5;
  }
  @media (max-width:768px) {
    .process-meta-stats { justify-content:flex-start; }
    .process-meta { text-align:left; top:0; }
    .process-head { align-items:flex-start; }
  }

  /* ── How We Operate — the serpentine ──────────────────────────────
     Boxes alternate left and right down the page. The route leaves a box's
     bottom edge running HORIZONTALLY — collinear with that edge, so it reads
     as the edge itself travelling — turns down through two rounded elbows,
     and runs horizontally into the next box's TOP edge. No diagonals.

     The SVG trace IS each box's outline: it arrives at the inner-top corner,
     wraps the other three sides and leaves from the inner-bottom, so the
     side it enters and leaves on stays open. The first and last boxes are
     circled completely, which closes both ends of the cycle.

     faid.js builds the path and drives it from ONE scroll value. */
  .zz { position:relative; max-width:var(--rail); margin:0 auto; padding:104px 0 56px; }
  .zz-row { display:flex; margin-bottom:var(--zzgap,124px); position:relative; z-index:2; }
  /* :last-of-type, not :last-child — faid.js appends the trace <svg> to .zz,
     so the final row is never the last CHILD and would keep its bottom margin
     as a void under box 05. */
  .zz-row:last-of-type { margin-bottom:0; }
  .zz-row.is-left  { justify-content:flex-start; }
  .zz-row.is-right { justify-content:flex-end; }

  /* Resting-state material: gradient body, an ::after overlay ring (never an
     inset shadow — that paints under child content), a grounded shadow. The
     border stays faint at all times; the traced line supplies the lit outline,
     so brightening it here would double the edge. */
  .zz-tile {
    position:relative; isolation:isolate;
    width:clamp(320px, var(--zzw,49%), 760px);
    padding:40px 44px 42px;
    border-radius:26px;
    display:flex; flex-direction:column;
    min-height:var(--zzd,0px);
    /* Field only. The grid moved to ::before so it can be masked — as a flat
       background layer it tiled edge to edge and read as wallpaper.
       Fill is the site's blue-grey, matching the console, the service cards
       and the summary bar below; the acid lives in the grid, bloom and
       keyline over it, exactly as it does on .qwrap. */
    background:linear-gradient(180deg,#12121b 0%,#0b0b12 44%,#07070c 100%);
    box-shadow:
      inset 0 1px 0 rgba(200,255,0,.10),
      0 18px 40px -26px rgba(0,0,0,.9);
    transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
  }
  /* Light falling across the panel: a bloom at the top-left, the grid beneath
     it, both raked off toward the bottom-right so the card has a lit corner
     and a quiet one instead of even coverage. */
  .zz-tile::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
    background:
      radial-gradient(75% 60% at 10% 0%, rgba(200,255,0,.11), transparent 64%),
      linear-gradient(rgba(200,255,0,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.05) 1px, transparent 1px);
    background-size:100% 100%, 56px 56px, 56px 56px;
    -webkit-mask-image:linear-gradient(158deg, #000 0%, rgba(0,0,0,.5) 52%, transparent 94%);
    mask-image:linear-gradient(158deg, #000 0%, rgba(0,0,0,.5) 52%, transparent 94%);
    opacity:.88; transition:opacity .45s ease;
  }
  .zz-tile:hover::before { opacity:1; }
  /* Content rides above the wash — a positioned ::before paints over in-flow
     text otherwise. */
  .zz-tile > * { position:relative; z-index:1; }
  .zz-tile::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
    border-radius:inherit; border:1px solid rgba(200,255,0,.20);
    transition:border-color .4s ease;
  }
  .zz-tile.is-lit { box-shadow:inset 0 1px 0 rgba(200,255,0,.10), 0 22px 52px -26px rgba(0,0,0,.95), 0 0 40px -18px rgba(200,255,0,.34); }
  /* The reveal pins transform:none at 4-class specificity, which killed the
     hover lift outright once a card had been revealed. Restored at matching
     weight — by then the clip-path reveal has finished, so nothing fights. */
  .zz-tile:hover { transform:translateY(-3px); }
  .op-anim .zz-row .zz-tile.is-lit:hover { transform:translateY(-3px); }
  .zz-tile:hover::after { border-color:rgba(200,255,0,.45); }
  .zz-tile:hover { box-shadow:inset 0 1px 0 rgba(200,255,0,.16), 0 26px 58px -26px rgba(0,0,0,.95), 0 0 48px -18px rgba(200,255,0,.42); }

  .zz-tile .zz-title { font-family:'Syne',sans-serif; font-weight:700; letter-spacing:-.01em; font-size:1.48rem; line-height:1.1; margin-bottom:14px; }
  /* Every other block on the site opens with a short acid rule (.bpre::before,
     the section eyebrows). These cards were the one place a heading started
     cold. */
  .zz-tile .zz-title::before {
    content:''; display:block; width:30px; height:1px; margin-bottom:18px;
    background:var(--acid); box-shadow:0 0 8px rgba(200,255,0,.55);
    transition:width .45s cubic-bezier(.16,1,.3,1);
  }
  .zz-tile:hover .zz-title::before { width:52px; }
  .zz-tile .zz-desc  { font-size:.85rem; line-height:1.68; color:rgba(240,238,232,.62); margin-bottom:22px; }
  /* The flat grey rule under the copy is now an acid hairline that burns out
     across the card — the same editorial move as the section eyebrows. */
  .zz-tile .zz-list  { position:relative; list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:auto; padding-top:20px; border-top:0; }
  .zz-tile .zz-list::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, rgba(200,255,0,.5), rgba(200,255,0,.1) 45%, transparent 85%);
  }
  .zz-tile .zz-list li { position:relative; padding-left:20px; font-size:.75rem; line-height:1.5; color:rgba(240,238,232,.56); letter-spacing:.02em; }
  /* Chevron rather than a filled lozenge: it points along the line of the
     text, so the list reads as steps instead of decoration. */
  .zz-tile .zz-list li::before {
    content:''; position:absolute; left:1px; top:.42em; width:5px; height:5px;
    border-right:1.5px solid rgba(200,255,0,.75);
    border-bottom:1.5px solid rgba(200,255,0,.75);
    transform:rotate(-45deg);
  }

  /* The ordinal and day marker live in the empty half of the row, set large —
     the void carries the sequence instead of being nothing. The connector's
     corridor sits at 50%, so each one is centred in the free half and can
     never straddle the route. */
  .zz-mark {
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    pointer-events:none; display:flex; flex-direction:column;
    align-items:center; gap:14px;
  }
  .zz-row.is-left  .zz-mark { left:52%; right:0; }
  .zz-row.is-right .zz-mark { right:52%; left:0; }
  .zz-mark-num {
    font-family:'Bebas Neue',sans-serif; line-height:.74; letter-spacing:.02em;
    font-size:clamp(6rem,15vw,15rem); color:transparent;
    -webkit-text-stroke:2.5px rgba(200,255,0,.22);
    transition:-webkit-text-stroke-color .5s ease, color .5s ease;
  }
  .zz-row.is-lit .zz-mark-num { -webkit-text-stroke-color:rgba(200,255,0,.7); color:rgba(200,255,0,.06); }
  .zz-mark-day { font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(240,238,232,.34); transition:color .5s ease .22s; }
  .zz-row.is-lit .zz-mark-day { color:var(--acid); }

  /* 1 user unit == 1 CSS px. faid.js sizes and places this to the ROW STACK's
     own box; an inset:0 box over a padded parent stretches the viewBox and the
     drawn length then stops short of the last node. */
  .zz-svg  { position:absolute; overflow:visible; pointer-events:none; z-index:4; }
  .zz-glow { fill:none; stroke:var(--acid); stroke-width:6; opacity:.13; filter:blur(4px); stroke-linejoin:miter; }
  .zz-line { fill:none; stroke:var(--acid); stroke-width:2; stroke-linecap:butt; stroke-linejoin:miter; filter:drop-shadow(0 0 3px rgba(200,255,0,.55)); }
  .zz-head { fill:var(--acid); opacity:0; filter:drop-shadow(0 0 5px var(--acid)) drop-shadow(0 0 14px rgba(200,255,0,.7)); }

  /* ── Entrance ─────────────────────────────────────────────────────
     EVERY hidden state below is scoped to .op-anim, and faid.js adds that
     class only once the observer which removes it is already attached. No JS,
     a thrown frame, or a dead IntersectionObserver all leave this section
     fully visible — everything-at-once is the failure mode, not the design.

     Clip-wipe and translate, never opacity: text at partial opacity is text at
     partial contrast. inset(-50%) is the end state because clip-path cannot
     transition to `none` and a tight inset crops the card shadows. */
  /* Clip-wipe only, no lift. The route is traced at the RESTING box, so a card
     that un-clips into view while still held 14px low is crossed by the line
     for the length of its reveal. The wipe moves no geometry, so the box is
     wrapped correctly from the first frame it can be seen. This was fixed for
     stacked first; the same defect was always there side by side. */
  .op-anim .zz-tile {
    clip-path:inset(0 100% 0 0);
    transition:clip-path .62s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
  }
  .op-anim .zz-row.is-right .zz-tile { clip-path:inset(0 0 0 100%); }
  /* .zz-row is load-bearing here: the hidden state for right-hand rows is
     `.op-anim .zz-row.is-right .zz-tile` (4 classes), so the lit state must
     match that weight or boxes 02 and 04 can never un-clip. */
  .op-anim .zz-row .zz-tile.is-lit { clip-path:inset(-50%); transform:none; }

  /* NOTE the -50%: .zz-mark is centred BY transform, so the entrance offset has
     to be composed into that same transform. Writing transform on its own here
     replaces the centring and drops the number half its height down the box. */
  .op-anim .zz-mark {
    transform:translateY(calc(-50% + 20px));
    transition:clip-path .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .op-anim .zz-row.is-left  .zz-mark { clip-path:inset(0 100% 0 0); }
  .op-anim .zz-row.is-right .zz-mark { clip-path:inset(0 0 0 100%); }
  .op-anim .zz-row.is-lit .zz-mark { clip-path:inset(-50%); transform:translateY(-50%); }

  .op-anim .op-enter { transform:translateY(18px); transition:clip-path .78s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1); }
  .op-anim .op-enter-l { clip-path:inset(0 100% 0 0); }
  .op-anim .op-enter-r { clip-path:inset(0 0 0 100%); }
  .op-anim .op-enter.op-shown { clip-path:inset(-50%); transform:none; }
  .op-anim .process-meta.op-enter { transition-delay:.14s; }
  /* The head is calibrated by measuring rendered geometry, and
     getBoundingClientRect INCLUDES transforms — so measuring mid-entrance
     reads an animation frame, not the resting layout. The meta carries a
     transition-delay, so the two can be up to 18px apart while revealing.
     faid.js sets this flag for the duration of a measurement. */
  .op-measuring .op-enter { transform:none !important; transition:none !important; }
  /* The serpentine is traced from the tiles' rects and has exactly the same
     exposure: an unlit tile is held 14px low by the entrance transform, so a
     re-measure while any tile is still hidden draws the route 14px below the
     box it is supposed to be wrapping — the line cuts through the card instead
     of hugging it. Neutralise the offset for the measuring pass only. */
  .op-measuring .zz-tile { transform:none !important; transition:none !important; }

  @media (max-width:860px) {
    .zz { padding:64px 0 40px; }
    .zz-row { flex-direction:column-reverse; align-items:stretch; margin-bottom:var(--zzgap,54px); }
    .zz-row.is-left, .zz-row.is-right { justify-content:stretch; }
    .zz-tile { width:100%; padding:26px 24px 28px; border-radius:20px; }
    .zz-tile .zz-title { font-size:1.24rem; }
    .zz-mark { position:static; transform:none; flex-direction:row; align-items:baseline; gap:14px; margin-bottom:12px; }
    .zz-row.is-left .zz-mark, .zz-row.is-right .zz-mark { left:auto; right:auto; align-items:baseline; }
    .zz-mark-num { font-size:2.9rem; -webkit-text-stroke-width:1.6px; }
    /* the centring transform does not exist here, so the entrance offset is
       plain translate again */
    .op-anim .zz-mark { transform:translateY(20px); }
    .op-anim .zz-row.is-lit .zz-mark { transform:none; }

  }

  @media (prefers-reduced-motion: reduce) {
    /* The pseudo-elements are listed explicitly: the card's hover now lives on
       ::before (wash), ::after (keyline) and the title's rule, and a
       transition on the element itself does not cover its pseudo-elements. */
    .zz-tile, .zz-mark, .op-enter,
    .zz-tile::before, .zz-tile::after, .zz-tile .zz-title::before { transition:none !important; }
    .zz-tile:hover { transform:none; }
    .op-anim .zz-row .zz-tile.is-lit:hover { transform:none; }
  }

  /* ── Process summary footer ──────────────────────────────────────
     The closing line of the serpentine, so it is built from the same material
     as the cards it follows: one rounded body with the tile's own gradient,
     keyline and grounded shadow. Four separately-backed cells with a 1px grid
     gap between them read as a table; one continuous surface divided by inset
     hairlines reads as a card, which is what the section above establishes. */
  .process-summary {
    margin-top:32px;
    display:grid; grid-template-columns:1fr; gap:0;
    border-radius:26px; overflow:hidden;
    /* Same material as the .zz-tile cards above it — this bar was built from
       the identical gradient, so it has to move with them or the section
       ends in a slab that no longer matches the cards it summarises. */
    background:
      linear-gradient(rgba(200,255,0,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.045) 1px, transparent 1px),
      linear-gradient(180deg,#12121b 0%,#0b0b12 44%,#07070c 100%);
    background-size:56px 56px, 56px 56px, 100% 100%;
    border:1px solid rgba(200,255,0,.10);
    box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
  }
  @media (min-width:769px) { .process-summary { grid-template-columns:repeat(3, 1fr) 1.5fr; } }
  .process-stat { position:relative; padding:30px 26px; display:flex; flex-direction:column; gap:8px; }
  /* Hairlines that stop short of the edges and fade at both ends — the same
     quiet acid rule as the card lists, not a full-height table border. */
  .process-stat:not(:first-child)::after, .process-stat-tag::after {
    content:''; position:absolute; left:0; top:24px; bottom:24px; width:1px;
    background:linear-gradient(180deg, transparent, rgba(200,255,0,.16) 18%, rgba(200,255,0,.16) 82%, transparent);
  }
  .process-stat-num {
    font-family:'Bebas Neue',sans-serif; font-size:3.2rem; line-height:1;
    color:var(--acid); letter-spacing:-.01em;
    /* the trace carries a glow; these are the same light, at rest */
    text-shadow:0 0 20px rgba(200,255,0,.22);
  }
  .process-stat-label { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(240,238,232,.5); line-height:1.6; }
  .process-stat-tag { position:relative; padding:30px; display:flex; align-items:center; gap:18px; font-family:'Bebas Neue',sans-serif; font-size:1.6rem; line-height:1.05; letter-spacing:.005em; text-transform:uppercase; color:var(--white); }
  /* Two sentences, so they break as two whole lines or sit as one — never
     mid-phrase. The arrow stays beside the block rather than joining the flow. */
  /* nowrap on each sentence: they sit side by side when there is room and drop
     to two WHOLE lines when there isn't — never breaking mid-phrase */
  .tag-lines { display:flex; flex-wrap:wrap; gap:2px 10px; }
  .tag-lines span { white-space:nowrap; }
  .process-stat-tag .tag-a { color:var(--white); }
  .process-stat-tag span { color:var(--acid); }
  .process-stat-tag::before { content:'→'; color:var(--acid); font-size:1.8rem; flex-shrink:0; }

  /* Stacked, a column layout gave each stat a tall empty box and broke the
     labels mid-phrase. The number and its label belong on one line. */
  @media (max-width:768px) {
    .process-summary { margin-top:26px; border-radius:20px; }
    .process-stat { flex-direction:row; align-items:baseline; gap:14px; padding:18px 22px; }
    .process-stat-num { font-size:2.5rem; flex:none; }
    .process-stat-label { font-size:.58rem; letter-spacing:.22em; line-height:1.55; }
    /* sized so the longer sentence holds one line at 360px, the narrowest
       phone we target — a two-word orphan is worse than a slightly smaller cap */
    .process-stat-tag { padding:20px 22px 22px; font-size:clamp(.98rem, 4.6vw, 1.16rem); align-items:flex-start; gap:13px; }
    .process-stat-tag::before { font-size:1.35rem; line-height:1.1; }
    .tag-lines { flex-direction:column; gap:3px; }
    /* the dividers turn with the layout */
    .process-stat:not(:first-child)::after, .process-stat-tag::after {
      left:22px; right:22px; top:0; bottom:auto; width:auto; height:1px;
      background:linear-gradient(90deg, transparent, rgba(200,255,0,.16) 15%, rgba(200,255,0,.16) 85%, transparent);
    }
  }

  .step-desc {
    font-size:.74rem;
    line-height:1.85;
    color:rgba(240,238,232,.55);
  }

  /* ── VIDEO SHOWREEL ── */
  .video-section { padding:50px 24px; background:#08080f; border-top:1px solid var(--border); position:relative; overflow:hidden; }
  @media (min-width:769px) { .video-section { padding:64px 48px; } }
  .video-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(200,255,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,.025) 1px,transparent 1px); background-size:80px 80px; pointer-events:none; }
  .video-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:20px; }
  .video-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,4.5vw,4.5rem); line-height:.9; }
  .video-title span { color:var(--acid); }
  .video-sub { max-width:320px; font-size:.74rem; line-height:1.8; color:rgba(240,238,232,.4); }

  /* TABS */
  .video-tabs { display:flex; border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .video-tabs::-webkit-scrollbar { display:none; }
  .vtab { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,238,232,.35); padding:12px 18px; background:none; border:none; cursor:pointer; position:relative; transition:color .2s; white-space:nowrap; }
  .vtab::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--acid); transform:scaleX(0); transition:transform .3s; }
  .vtab.active { color:var(--acid); }
  .vtab.active::after { transform:scaleX(1); }

  /* PLAYER */
  .vplayer { position:relative; width:100%; overflow:hidden; background:#000; }
  .vplayer::before { content:''; display:block; padding-top:42%; }
  .clip { position:absolute; inset:0; display:none; }
  .clip.active { display:block; }

  /* CLIP 1 */
  .clip1 { background:#050507; }
  .c1grid { position:absolute; inset:0; background-image:linear-gradient(rgba(200,255,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,.07) 1px,transparent 1px); background-size:60px 60px; }
  .c1scan { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#C8FF00,transparent); animation:c1s 3s linear infinite; opacity:.5; }
  @keyframes c1s { 0%{top:0} 100%{top:100%} }
  .c1body { position:absolute; inset:0; display:flex; align-items:center; padding:0 8%; gap:8%; }
  .c1txt { flex:0 0 auto; }
  .ctag { font-size:clamp(.5rem,.8vw,.72rem); letter-spacing:.3em; text-transform:uppercase; color:#C8FF00; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
  .ctag::before { content:''; width:24px; height:1px; background:#C8FF00; }
  .clip1 h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,6vw,6rem); line-height:.88; }
  .clip1 h2 span { color:#C8FF00; }
  .c1sub { margin-top:12px; font-size:clamp(.45rem,.85vw,.78rem); color:rgba(255,255,255,.4); line-height:1.7; max-width:340px; }
  .c1vis { flex:1; display:flex; align-items:center; justify-content:center; }
  .hexbox { position:relative; width:clamp(110px,18vw,240px); height:clamp(110px,18vw,240px); display:flex; align-items:center; justify-content:center; }
  .hx { position:absolute; border:1px solid rgba(200,255,0,.35); width:100%; height:100%; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); animation:hxspin 8s linear infinite; }
  .hx:nth-child(2){width:72%;height:72%;border-color:rgba(200,255,0,.6);animation-direction:reverse;animation-duration:5s}
  .hx:nth-child(3){width:44%;height:44%;border-color:rgba(200,255,0,.9);animation-duration:3s}
  @keyframes hxspin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
  .hxcore { width:12px;height:12px;background:#C8FF00;border-radius:50%;box-shadow:0 0 30px #C8FF00;z-index:1;animation:hxpulse 2s ease-in-out infinite; }
  @keyframes hxpulse{0%,100%{box-shadow:0 0 15px #C8FF00}50%{box-shadow:0 0 50px #C8FF00}}
  .c1nodes { position:absolute; inset:0; pointer-events:none; }
  .cn { position:absolute; width:4px;height:4px;background:#C8FF00;border-radius:50%;animation:cnf 5s ease-in-out infinite; }
  @keyframes cnf{0%,100%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-14px) scale(1.8);opacity:1}}
  .clogo { position:absolute;bottom:5%;right:5%;font-family:'Bebas Neue',sans-serif;font-size:clamp(.8rem,1.8vw,1.8rem);letter-spacing:.2em; }

  /* CLIP 2 */
  .clip2 { background:#06060f; }
  .c2bars { position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;gap:3px;padding:0 4%;height:55%; }
  .c2b { flex:1;background:rgba(0,240,255,.1);border-top:1px solid rgba(0,240,255,.35);animation:c2ba 1.8s ease-in-out infinite alternate; }
  @keyframes c2ba{0%{height:15%}100%{height:90%}}
  .c2fade { position:absolute;inset:0;background:linear-gradient(to top,#06060f 18%,transparent 58%); }
  .c2body { position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8%; }
  .c2left { flex:0 0 55%; }
  .clip2 h2 { font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,6vw,6rem);line-height:.88; }
  .c2ghost { -webkit-text-stroke:1px white;color:transparent; }
  .c2dsub { margin-top:12px;font-size:clamp(.45rem,.8vw,.72rem);color:rgba(255,255,255,.4);line-height:1.7;max-width:340px; }
  .c2pill { display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:#00F0FF;color:#06060f;font-size:clamp(.42rem,.65vw,.58rem);letter-spacing:.25em;text-transform:uppercase;font-weight:700;padding:9px 20px; }
  .c2stats { display:flex;flex-direction:column;gap:10px;align-items:flex-end; }
  .c2stat { background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.18);padding:12px 18px;text-align:right;min-width:130px; }
  .c2sval { font-family:'Bebas Neue',sans-serif;font-size:clamp(1.3rem,2.5vw,2.3rem);color:#00F0FF;line-height:1; }
  .c2slbl { font-size:clamp(.4rem,.55vw,.5rem);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:3px; }

  /* CLIP 3 — Web Design (full-space two-column composition) */
  .clip3 {
    background:#050507;
    overflow:hidden;
  }
  .clip3.active {
    display:grid;
    grid-template-columns:36% 1fr;
    gap:3%;
    align-items:stretch;
    padding:3% 3.5%;
  }
  .clip3-bg {
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 22% 50%, rgba(200,255,0,.09) 0%, transparent 45%),
      radial-gradient(circle at 78% 60%, rgba(200,255,0,.04) 0%, transparent 55%);
    pointer-events:none;
  }
  .clip3::before {
    content:'';
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(200,255,0,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.035) 1px, transparent 1px);
    background-size:50px 50px;
    pointer-events:none;
    opacity:.5;
  }

  /* LEFT — project info */
  .clip3-info {
    z-index:2;
    display:flex; flex-direction:column;
    justify-content:space-between;
    gap:10px;
    min-width:0;
    padding:6px 0;
  }
  .clip3-info-top {
    display:flex; flex-direction:column;
    gap:12px;
  }
  .clip3-info-bottom {
    display:flex; flex-direction:column;
    gap:12px;
  }
  .clip3-info .ctag {
    margin-bottom:0;
  }
  .clip3 h2 {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem, 6vw, 6rem);
    line-height:.86;
    margin:0;
    letter-spacing:-.01em;
  }
  .clip3 h2 em {
    display:block;
    color:#C8FF00;
    font-style:normal;
  }
  .clip3-tagline {
    font-size:clamp(.55rem, .95vw, .85rem);
    color:rgba(240,238,232,.55);
    line-height:1.7;
    margin:0;
    max-width:460px;
  }
  .clip3-meta-mini {
    display:flex; flex-wrap:wrap; gap:20px;
    margin-top:2px;
  }
  .clip3-meta-mini span {
    font-family:'Space Mono',monospace;
    font-size:clamp(.5rem, .72vw, .65rem);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(240,238,232,.5);
    display:flex; flex-direction:column;
    gap:3px;
  }
  .clip3-meta-mini strong {
    color:rgba(200,255,0,.6);
    font-weight:400;
    font-size:.82em;
    letter-spacing:.22em;
  }
  .clip3-open-btn {
    display:inline-flex; align-items:center; gap:12px;
    background:var(--acid);
    color:var(--black);
    font-family:'Space Mono',monospace;
    font-size:clamp(.6rem, .9vw, .8rem);
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:700;
    padding:16px 28px;
    border:none;
    cursor:pointer;
    transition:transform .18s, background .2s, box-shadow .25s;
    margin-top:6px;
    align-self:flex-start;
  }
  .clip3-open-btn:hover {
    background:#d4ff33;
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(200,255,0,.32);
  }
  .clip3-open-icon { width:13px; height:13px; display:flex; }
  .clip3-open-icon svg { width:100%; height:100%; }

  /* RIGHT — preview card (styled mock browser) */
  .clip3-preview {
    z-index:2;
    position:relative;
    height:100%;
    width:100%;
    cursor:pointer;
    display:flex;
    transition:transform .3s;
  }
  .clip3-preview:hover { transform:translateY(-2px); }

  .clip3-mini-browser {
    width:100%; height:100%;
    background:#000;
    border:1px solid rgba(200,255,0,.22);
    box-shadow:
      0 0 0 1px rgba(200,255,0,.05),
      0 24px 60px rgba(0,0,0,.6),
      0 0 80px rgba(200,255,0,.1);
    display:flex; flex-direction:column;
    overflow:hidden;
    position:relative;
    transition:box-shadow .3s, border-color .3s;
  }
  .clip3-preview:hover .clip3-mini-browser {
    border-color:rgba(200,255,0,.4);
    box-shadow:
      0 0 0 1px rgba(200,255,0,.15),
      0 30px 80px rgba(0,0,0,.7),
      0 0 120px rgba(200,255,0,.18);
  }
  .clip3-mini-bar {
    background:linear-gradient(180deg, #0a0a14, #050507);
    padding:8px 12px;
    display:flex; align-items:center; gap:7px;
    border-bottom:1px solid rgba(200,255,0,.12);
    flex-shrink:0;
  }
  .clip3-mini-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .clip3-mini-url {
    flex:1;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(200,255,0,.08);
    height:18px;
    display:flex; align-items:center;
    padding:0 9px;
    margin:0 6px;
    font-family:'Space Mono',monospace;
    font-size:.48rem;
    color:rgba(200,255,0,.7);
    letter-spacing:.06em;
  }
  .clip3-mini-live {
    width:7px; height:7px; border-radius:50%;
    background:var(--acid);
    box-shadow:0 0 6px var(--acid);
    animation:miniLivePulse 2s ease-in-out infinite;
    flex-shrink:0;
  }
  @keyframes miniLivePulse { 0%,100% {opacity:1} 50% {opacity:.4} }

  .clip3-mini-content {
    flex:1;
    background:
      radial-gradient(ellipse at top, rgba(200,255,0,.05), transparent 60%),
      linear-gradient(180deg, #0a0d0a 0%, #050507 100%);
    padding:clamp(14px, 2.2vw, 28px) clamp(16px, 2.6vw, 32px);
    display:flex; flex-direction:column;
    justify-content:space-between;
    gap:clamp(10px, 1.8vw, 22px);
    position:relative;
    overflow:hidden;
  }
  .clip3-mini-content::before {
    content:'';
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(200,255,0,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.04) 1px, transparent 1px);
    background-size:24px 24px;
    pointer-events:none;
  }
  .clip3-mini-nav {
    display:flex; justify-content:space-between; align-items:center;
    z-index:1;
  }
  .clip3-mini-logo {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(.78rem, 1.4vw, 1.2rem);
    letter-spacing:.18em;
    color:var(--acid);
    text-shadow:0 0 12px rgba(200,255,0,.4);
  }
  .clip3-mini-links {
    font-family:'Space Mono',monospace;
    font-size:clamp(.32rem, .5vw, .46rem);
    letter-spacing:.25em;
    color:rgba(240,238,232,.5);
  }
  .clip3-mini-hero {
    flex:1;
    display:flex; flex-direction:column; justify-content:center;
    align-items:flex-start;
    gap:10px;
    z-index:1;
  }
  .clip3-mini-headline {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.8rem, 4.4vw, 4rem);
    line-height:.84;
    letter-spacing:-.01em;
  }
  .clip3-mini-headline em {
    -webkit-text-stroke:1px var(--acid);
    color:transparent;
    font-style:normal;
  }
  .clip3-mini-pill {
    display:inline-block;
    background:var(--acid);
    color:var(--black);
    font-family:'Space Mono',monospace;
    font-size:clamp(.36rem, .55vw, .5rem);
    letter-spacing:.2em;
    text-transform:uppercase;
    font-weight:700;
    padding:7px 14px;
  }
  .clip3-mini-products {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:6px;
    z-index:1;
  }
  .clip3-mini-prod {
    aspect-ratio:1;
    background:
      radial-gradient(circle at 50% 45%, rgba(200,255,0,.18) 0%, rgba(200,255,0,.04) 60%, transparent 100%);
    border:1px solid rgba(200,255,0,.15);
    position:relative;
    overflow:hidden;
    animation:miniProdPulse 4s ease-in-out infinite;
  }
  .clip3-mini-prod:nth-child(2) { animation-delay:.4s; }
  .clip3-mini-prod:nth-child(3) { animation-delay:.8s; }
  .clip3-mini-prod:nth-child(4) { animation-delay:1.2s; }
  @keyframes miniProdPulse {
    0%,100% { border-color:rgba(200,255,0,.15); }
    50% { border-color:rgba(200,255,0,.4); }
  }
  .clip3-mini-prod::after {
    content:'';
    position:absolute;
    bottom:6px; left:6px;
    width:55%; height:3px;
    background:rgba(200,255,0,.5);
    border-radius:1px;
  }

  /* Scan line over the mini preview */
  .clip3-mini-content::after {
    content:'';
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, rgba(200,255,0,.4), transparent);
    animation:miniScan 5s linear infinite;
    pointer-events:none;
    z-index:2;
  }
  @keyframes miniScan { 0% {top:0; opacity:0} 10% {opacity:1} 90% {opacity:1} 100% {top:100%; opacity:0} }

  /* Click-to-view overlay (hover only) */
  .clip3-preview-overlay {
    position:absolute; inset:0;
    display:flex; align-items:flex-end; justify-content:flex-end;
    padding:18px;
    background:transparent;
    transition:background .3s;
    z-index:3;
    pointer-events:none;
  }
  .clip3-preview:hover .clip3-preview-overlay {
    background:linear-gradient(to top, rgba(0,0,0,.4), transparent 70%);
  }
  .clip3-preview-cta {
    background:var(--acid);
    color:var(--black);
    font-family:'Space Mono',monospace;
    font-size:clamp(.36rem, .52vw, .5rem);
    letter-spacing:.25em;
    font-weight:700;
    padding:8px 14px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s, transform .3s;
  }
  .clip3-preview:hover .clip3-preview-cta {
    opacity:1; transform:translateY(0);
  }

  /* MOBILE — stack vertically */
  @media (max-width:768px) {
    .clip3 {
      grid-template-columns:1fr;
      grid-template-rows:auto 1fr;
      padding:3% 3.5%;
      gap:10px;
    }
    .clip3-info { gap:8px; padding:2px 0; }
    .clip3-info-top { gap:6px; }
    .clip3-info-bottom { gap:8px; }
    .clip3 h2 { font-size:clamp(1.5rem, 5.5vw, 2rem); }
    .clip3-tagline { font-size:.5rem; max-width:none; }
    .clip3-meta-mini { gap:10px; }
    .clip3-open-btn { padding:9px 16px; font-size:.5rem; }
    .clip3-preview { min-height:0; }
    .clip3-mini-content { padding:10px 14px; gap:8px; }
    .clip3-mini-products { display:none; }
    .clip3-mini-links { display:none; }
    .clip3-mini-headline { font-size:clamp(1.1rem, 4vw, 1.6rem); }
  }
  @media (max-width:480px) {
    .clip3 { padding:3% 3%; }
    .clip3 h2 { font-size:1.3rem; }
    .clip3-mini-content { padding:9px 12px; }
  }

  /* CLIP 4 */
  .clip4 { background:#040410; }
  .c4orbs { position:absolute;inset:0;overflow:hidden; }
  .c4o { position:absolute;border-radius:50%;filter:blur(60px);animation:c4od 8s ease-in-out infinite; }
  @keyframes c4od{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-20px) scale(1.1)}}
  .c4body { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
  .clip4 h2 { font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,6vw,6rem);line-height:.88; }
  .c4r{color:#FF1744} .c4g{-webkit-text-stroke:1px rgba(255,255,255,.3);color:transparent}
  .c4sub { font-size:clamp(.45rem,.8vw,.72rem);color:rgba(255,255,255,.4);line-height:1.7;max-width:380px;margin-top:14px; }
  .c4grid { display:flex;gap:10px;margin-top:22px; }
  .c4img { width:clamp(46px,7vw,90px);height:clamp(46px,7vw,90px);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;animation:c4ip 3s ease-in-out infinite; }
  @keyframes c4ip{0%,100%{border-color:rgba(255,255,255,.08)}50%{border-color:rgba(255,23,68,.4)}}
  .c4img svg{width:52%;height:52%;opacity:.22}


  /* ── CINEMA CLIP — real footage with FAID-coded overlay ── */
  .clip-real { background:#000; }
  .clip-real-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .clip-real-dim {
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(5,5,7,.3) 0%, rgba(5,5,7,0) 30%, rgba(5,5,7,0) 60%, rgba(5,5,7,.75) 100%),
      radial-gradient(ellipse at center, rgba(5,5,7,0) 40%, rgba(5,5,7,.45) 100%);
    z-index:1; pointer-events:none;
  }
  .clip-real-grid {
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(200,255,0,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(200,255,0,.04) 1px,transparent 1px);
    background-size:60px 60px;
    z-index:2; pointer-events:none;
    mix-blend-mode:screen;
  }
  .clip-real-scan {
    position:absolute; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--acid),transparent);
    z-index:3; opacity:0; pointer-events:none;
  }
  .clip.active .clip-real-scan { animation:realScan 9s linear infinite; }
  @keyframes realScan {
    0%   { top:-2%; opacity:0; }
    8%   { opacity:.55; }
    92%  { opacity:.55; }
    100% { top:102%; opacity:0; }
  }
  /* Top-left FAID mark */
  .clip-real-tl {
    position:absolute; top:18px; left:22px; z-index:5;
    display:flex; align-items:center; gap:10px;
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
  }
  .clip-real-tl .cr-faid { font-family:'Bebas Neue',sans-serif; font-size:.95rem; letter-spacing:.18em; color:var(--acid); }
  .clip-real-tl .cr-meta { color:rgba(240,238,232,.55); }
  @media (min-width:769px) {
    .clip-real-tl { top:24px; left:32px; font-size:.6rem; }
    .clip-real-tl .cr-faid { font-size:1.1rem; }
  }
  /* Top-right REC indicator */
  .clip-real-tr {
    position:absolute; top:18px; right:22px; z-index:5;
    display:flex; align-items:center; gap:8px;
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--acid);
  }
  .clip-real-recdot {
    width:8px; height:8px; border-radius:50%;
    background:#FF1744;
    box-shadow:0 0 10px rgba(255,23,68,.6);
    animation:realRec 1.2s ease-in-out infinite;
  }
  @keyframes realRec {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.35; transform:scale(.85); }
  }
  @media (min-width:769px) { .clip-real-tr { top:24px; right:32px; font-size:.6rem; } }
  /* Bottom-left cinema credit */
  .clip-real-bl { position:absolute; left:22px; bottom:22px; z-index:5; max-width:80%; }
  @media (min-width:769px) { .clip-real-bl { left:40px; bottom:36px; max-width:60%; } }
  .clip-real-eyebrow {
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.35em; text-transform:uppercase;
    color:var(--acid);
    margin-bottom:10px;
    display:flex; align-items:center; gap:10px;
    opacity:.9;
  }
  .clip-real-eyebrow::before { content:''; width:24px; height:1px; background:var(--acid); }
  @media (min-width:769px) { .clip-real-eyebrow { font-size:.6rem; margin-bottom:14px; } }
  .clip-real-title {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.8rem, 4.5vw, 4rem);
    line-height:.9; letter-spacing:-.01em;
    margin-bottom:14px;
    color:var(--white);
  }
  .clip-real-title em { -webkit-text-stroke:1px rgba(240,238,232,.45); color:transparent; font-style:normal; }
  .clip-real-title span { color:var(--acid); }
  .clip-real-desc {
    font-family:'Space Mono',monospace;
    font-size:.66rem; line-height:1.7; letter-spacing:.04em;
    color:rgba(240,238,232,.75);
    max-width:380px;
  }
  @media (min-width:769px) { .clip-real-desc { font-size:.72rem; } }
  /* Bottom-right sequence counter */
  .clip-real-br {
    position:absolute; right:22px; bottom:22px; z-index:5;
    font-family:'Space Mono',monospace;
    font-size:.5rem; letter-spacing:.28em; text-transform:uppercase;
    color:rgba(240,238,232,.5);
    text-align:right;
  }
  .clip-real-br .acid { color:var(--acid); }
  @media (min-width:769px) { .clip-real-br { right:32px; bottom:36px; font-size:.55rem; } }
  /* Film-frame corner brackets */
  .clip-real-bracket {
    position:absolute; width:22px; height:22px;
    border-color:rgba(200,255,0,.5);
    z-index:4; pointer-events:none;
  }
  .clip-real-bracket.tl { top:14px; left:14px; border-top:1px solid; border-left:1px solid; }
  .clip-real-bracket.tr { top:14px; right:14px; border-top:1px solid; border-right:1px solid; }
  .clip-real-bracket.bl { bottom:14px; left:14px; border-bottom:1px solid; border-left:1px solid; }
  .clip-real-bracket.br { bottom:14px; right:14px; border-bottom:1px solid; border-right:1px solid; }
  @media (min-width:769px) {
    .clip-real-bracket { width:30px; height:30px; }
    .clip-real-bracket.tl { top:18px; left:18px; }
    .clip-real-bracket.tr { top:18px; right:18px; }
    .clip-real-bracket.bl { bottom:18px; left:18px; }
    .clip-real-bracket.br { bottom:18px; right:18px; }
  }

  /* CONTROLS */
  .vprogress { width:100%; height:2px; background:rgba(240,238,232,.08); }
  .vpfill { height:100%;background:var(--acid);width:0%;transition:width .08s linear; }
  .vcontrols { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--mid);border:1px solid var(--border);border-top:none; }
  .vcl { display:flex;align-items:center;gap:14px; }
  .vcplay { width:34px;height:34px;border-radius:50%;background:var(--acid);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;flex-shrink:0; }
  .vcplay svg { width:13px;height:13px;fill:var(--black);margin-left:2px; }
  .vclabel { font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; }
  .vcsub { font-size:.52rem;letter-spacing:.12em;color:rgba(240,238,232,.35);margin-top:2px;text-transform:uppercase; }
  .vcr { display:flex;gap:7px; }
  .vcdot { width:8px;height:8px;border-radius:50%;background:rgba(240,238,232,.15);border:1px solid rgba(240,238,232,.2);cursor:pointer;transition:background .2s; }
  .vcdot.active { background:var(--acid);border-color:var(--acid); }

  .aiv { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
  .prings { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
  .pr { position:absolute;border-radius:50%;border:1px solid var(--acid);top:50%;left:50%;transform:translate(-50%,-50%);animation:prA 3s ease-out infinite; }
  .pr:nth-child(1){width:50px;height:50px}
  .pr:nth-child(2){width:100px;height:100px;animation-delay:.5s}
  .pr:nth-child(3){width:150px;height:150px;animation-delay:1s}
  @keyframes prA{0%{opacity:.6;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
  .fnodes { position:absolute;inset:0;overflow:hidden; }
  .fn { position:absolute;width:4px;height:4px;background:var(--acid);border-radius:50%;animation:fnA 6s ease-in-out infinite; }
  @keyframes fnA{0%,100%{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-18px) scale(1.5);opacity:1}}
  .dbars { position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;gap:3px;padding:16px;height:100px; }
  .db { flex:1;background:rgba(200,255,0,.2);border-top:1px solid rgba(200,255,0,.5);animation:dbA 2s ease-in-out infinite alternate; }
  @keyframes dbA{0%{height:20%}100%{height:80%}}
  

  /* ============================================
     CASE STUDY MODAL — FAID Clothing
  ============================================ */
  .case-modal {
    position:fixed; inset:0;
    z-index:10000;
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    opacity:0;
    transition:opacity .35s ease;
  }
  .case-modal.open {
    display:flex;
    opacity:1;
  }
  body.modal-open { overflow:hidden; }

  .case-modal-backdrop {
    position:absolute; inset:0;
    background:rgba(5,5,7,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .case-modal-frame {
    position:relative;
    width:100%;
    max-width:1340px;
    max-height:92vh;
    background:linear-gradient(135deg, #08080f 0%, #0a0d0a 100%);
    border:1px solid rgba(200,255,0,.18);
    border-radius:22px;
    box-shadow:
      0 0 0 1px rgba(200,255,0,.05),
      0 40px 120px rgba(0,0,0,.8),
      0 0 200px rgba(200,255,0,.12);
    transform:scale(.96) translateY(12px);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .case-modal.open .case-modal-frame {
    transform:scale(1) translateY(0);
  }
  .case-modal-frame::before {
    content:'';
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(200,255,0,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.025) 1px, transparent 1px);
    background-size:40px 40px;
    pointer-events:none;
    opacity:.6;
  }
  .case-modal-frame::after {
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--acid), transparent 70%);
    pointer-events:none;
  }

  .case-modal-close {
    position:absolute;
    top:18px; right:18px;
    width:38px; height:38px;
    background:rgba(5,5,7,.7);
    border:1px solid rgba(200,255,0,.25);
    border-radius:10px;
    color:var(--acid);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    z-index:10;
    transition:background .2s, transform .2s, border-color .2s;
  }
  .case-modal-close svg { width:18px; height:18px; }
  .case-modal-close:hover {
    background:var(--acid);
    color:var(--black);
    border-color:var(--acid);
    transform:rotate(90deg);
  }

  /* Slider — holds N case-study slides */
  .case-modal-slider {
    flex:1;
    position:relative;
    overflow:hidden;
    z-index:1;
  }
  .case-modal-track {
    display:flex;
    height:100%;
    transition:transform .6s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .case-modal-slide {
    flex:0 0 100%;
    width:100%;
    height:100%;
    min-width:0;
    overflow:hidden;
  }

  /* Slider navigation arrows */
  .case-modal-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:42px; height:42px;
    background:rgba(5,5,7,.6);
    backdrop-filter:blur(10px);
    border:1px solid rgba(217,255,0,.25);
    color:var(--acid);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .case-modal-nav:hover {
    background:var(--acid);
    border-color:var(--acid);
    color:var(--black);
  }
  .case-modal-nav.prev { left:18px; }
  .case-modal-nav.prev:hover { transform:translate(-3px, -50%); }
  .case-modal-nav.next { right:18px; }
  .case-modal-nav.next:hover { transform:translate(3px, -50%); }
  .case-modal-nav svg { width:20px; height:20px; }
  .case-modal-nav[disabled] { opacity:.25; cursor:default; }
  .case-modal-nav[disabled]:hover { background:rgba(5,5,7,.6); border-color:rgba(217,255,0,.25); color:var(--acid); transform:translateY(-50%); }
  @media (max-width:768px) {
    .case-modal-nav { width:36px; height:36px; }
    .case-modal-nav.prev { left:10px; }
    .case-modal-nav.next { right:10px; }
  }

  /* Slider dots — bottom centered */
  .case-modal-dots {
    position:absolute;
    bottom:14px; left:50%;
    transform:translateX(-50%);
    display:flex; gap:8px;
    z-index:10;
    padding:6px 12px;
    background:rgba(5,5,7,.6);
    backdrop-filter:blur(10px);
    border:1px solid rgba(217,255,0,.15);
  }
  .case-modal-dot {
    width:24px; height:6px;
    background:rgba(255,255,255,.18);
    border:none;
    cursor:pointer;
    transition:background .3s ease, width .3s ease;
    padding:0;
  }
  .case-modal-dot.active {
    background:var(--acid);
    width:36px;
  }
  .case-modal-dot:hover:not(.active) {
    background:rgba(217,255,0,.45);
  }

  /* Slider counter (e.g. "01 / 02") next to dots */
  .case-modal-counter {
    position:absolute;
    bottom:18px; right:18px;
    z-index:10;
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.32em;
    color:var(--muted);
    text-transform:uppercase;
    padding:6px 10px;
    background:rgba(5,5,7,.6);
    backdrop-filter:blur(10px);
    border:1px solid rgba(217,255,0,.15);
  }
  .case-modal-counter strong {
    color:var(--acid);
    font-weight:400;
  }

  .case-modal-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    height:100%;
    overflow:auto;
    position:relative;
    z-index:1;
  }
  @media (min-width:900px) {
    .case-modal-grid { grid-template-columns:38% 1fr; overflow:hidden; }
  }

  /* LEFT info panel */
  .case-modal-info {
    padding:36px 32px;
    display:flex; flex-direction:column;
    gap:18px;
    background:rgba(0,0,0,.3);
    border-bottom:1px solid rgba(200,255,0,.12);
    overflow-y:auto;
  }
  @media (min-width:900px) {
    .case-modal-info {
      border-bottom:none;
      border-right:1px solid rgba(200,255,0,.12);
      padding:44px 38px;
    }
  }
  .case-modal-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Mono',monospace;
    font-size:.6rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--acid);
  }
  .case-modal-livedot {
    width:7px; height:7px;
    background:var(--acid);
    border-radius:50%;
    box-shadow:0 0 10px var(--acid), 0 0 20px rgba(200,255,0,.4);
    animation:caseDot 2s ease-in-out infinite;
  }
  @keyframes caseDot {
    0%,100% { opacity:1; }
    50% { opacity:.4; }
  }
  .case-modal-title {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.6rem, 4.4vw, 4.6rem);
    line-height:.88;
    letter-spacing:-.01em;
    margin:0;
  }
  .case-modal-title span { color:var(--acid); }
  .case-modal-desc {
    font-size:.78rem;
    line-height:1.75;
    color:rgba(240,238,232,.6);
    margin:0;
  }

  .case-modal-meta {
    display:flex; flex-direction:column;
    gap:0;
    border-top:1px solid rgba(200,255,0,.15);
    margin-top:4px;
  }
  .case-modal-meta-row {
    display:flex; justify-content:space-between;
    padding:10px 0;
    font-family:'Space Mono',monospace;
    font-size:.62rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    border-bottom:1px solid rgba(200,255,0,.08);
  }
  .case-modal-meta-row span:first-child {
    color:rgba(240,238,232,.4);
  }
  .case-modal-meta-row span:last-child {
    color:var(--acid);
    font-weight:700;
  }

  .case-modal-access {
    margin-top:auto;
    padding-top:18px;
    display:flex; flex-direction:column;
    gap:14px;
  }
  .case-modal-qr-block {
    display:flex; align-items:center; gap:16px;
    padding:16px;
    background:rgba(200,255,0,.04);
    border:1px solid rgba(200,255,0,.18);
  }
  .case-modal-qr {
    width:96px; height:96px;
    background:white;
    padding:8px;
    flex-shrink:0;
    box-shadow:0 4px 18px rgba(0,0,0,.5), 0 0 24px rgba(200,255,0,.1);
  }
  .case-modal-qr canvas, .case-modal-qr img {
    display:block;
    /* node-qrcode renders the canvas at a fixed pixel size with inline
       width/height styles — !important forces it to scale down to fill the
       small QR box instead of overflowing across the heading. */
    width:100% !important; height:100% !important;
  }
  .case-modal-qr-info {
    display:flex; flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .case-modal-qr-label {
    font-family:'Syne',sans-serif;
    font-size:.88rem;
    font-weight:800;
    color:var(--white);
    line-height:1.2;
  }
  .case-modal-qr-sub {
    font-size:.66rem;
    color:rgba(240,238,232,.45);
    line-height:1.4;
  }

  .case-modal-link {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    background:var(--acid);
    color:var(--black);
    padding:16px 20px;
    text-decoration:none;
    transition:transform .15s, background .2s, box-shadow .25s;
  }
  .case-modal-link:hover {
    background:#d4ff33;
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(200,255,0,.3);
  }
  .case-modal-link-left {
    display:flex; flex-direction:column;
    gap:3px;
    min-width:0;
  }
  .case-modal-link-label {
    font-family:'Space Mono',monospace;
    font-size:.55rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    opacity:.7;
  }
  .case-modal-link-url {
    font-family:'Space Mono',monospace;
    font-size:.84rem;
    font-weight:700;
    letter-spacing:.04em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .case-modal-link-arrow {
    font-size:1.4rem;
    flex-shrink:0;
    transition:transform .2s;
  }
  .case-modal-link:hover .case-modal-link-arrow {
    transform:translate(3px,-3px);
  }

  /* RIGHT iframe panel */
  .case-modal-preview {
    padding:20px;
    display:flex; flex-direction:column;
    min-height:340px;
    background:#0a0d0a;
  }
  @media (min-width:900px) {
    .case-modal-preview { padding:24px; }
  }
  .case-modal-browser {
    flex:1;
    background:#000;
    border:1px solid rgba(200,255,0,.2);
    display:flex; flex-direction:column;
    overflow:hidden;
    position:relative;
    box-shadow:
      0 0 0 1px rgba(200,255,0,.04),
      0 18px 50px rgba(0,0,0,.6);
  }
  .case-modal-browser-bar {
    background:linear-gradient(180deg, #0a0a14 0%, #050507 100%);
    padding:9px 12px;
    display:flex; align-items:center; gap:10px;
    border-bottom:1px solid rgba(200,255,0,.12);
    flex-shrink:0;
  }
  .case-modal-browser-dots {
    display:flex; gap:5px;
  }
  .case-modal-browser-dots span {
    width:9px; height:9px; border-radius:50%; display:block;
  }
  .case-modal-browser-url {
    flex:1;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(200,255,0,.1);
    height:22px;
    border-radius:2px;
    display:flex; align-items:center;
    padding:0 10px;
    font-family:'Space Mono',monospace;
    font-size:.62rem;
    color:rgba(200,255,0,.8);
    letter-spacing:.08em;
  }
  .case-modal-lock {
    font-size:.55rem;
    margin-right:7px;
    opacity:.7;
  }

  .case-modal-iframe-wrap {
    flex:1;
    position:relative;
    background:#0a0d0a;
    overflow:hidden;
  }
  /* ── SCROLLING SHOT ───────────────────────────────────────────────
     Shared component: a full-page screenshot that scrolls on hover,
     replacing live iframe embeds. Used by the case-study modal and by
     the Built by FAID grid, so both run one code path.

     .shot-frame  the clipping viewport (overflow:hidden, any aspect)
     .shot-strip  the tall strip, translated upward — one compositor-
                  friendly transform, no layout or paint per frame
     .shot-img    the screenshot itself

     Duration is set per-instance in JS from the image height, so every
     shot travels at a constant speed and a longer site simply takes
     longer. That constant rate is what reads as real scrolling rather
     than a canned animation.
     ───────────────────────────────────────────────────────────────── */
  .shot-frame { position:relative; overflow:hidden; }
  .shot-strip {
    position:absolute;
    top:0; left:0; right:0;
    transform:translateY(0);
    transition:transform var(--shot-duration, 8s) linear 120ms;
    will-change:transform;
  }
  .shot-img {
    display:block;
    width:100%;
    height:auto;
    background:#0a0d0a;
  }
  /* Only hover-capable pointers get the scroll. On touch there is no hover
     to leave, so the strip would stick mid-scroll with no way back. */
  @media (hover:hover) and (pointer:fine) {
    .shot-frame:hover .shot-strip,
    .shot-frame:focus-visible .shot-strip,
    a:focus-visible .shot-strip {
      transform:translateY(var(--shot-travel, 0px));
    }
  }
  @media (prefers-reduced-motion:reduce) {
    .shot-strip { transition:none; }
    .shot-frame:hover .shot-strip { transform:translateY(0); }
  }

  /* ── BUILT BY FAID ────────────────────────────────────────────────
     3-up grid of live builds, inside the case-study modal that opens
     from the Website & App Design card. Collapses 3 → 2 → 1 so a tile
     never gets so narrow that the screenshot becomes unreadable.
     ───────────────────────────────────────────────────────────────── */

  /* Scroll container for the modal body. The old slider was a fixed-height
     track; a grid of variable-height cards needs to scroll instead, and the
     grid is taller than the viewport on anything but a large desktop. */
  .case-modal-scroll {
    position:relative;
    z-index:2;
    width:100%;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:48px 28px;
    -webkit-overflow-scrolling:touch;
  }
  @media (min-width:769px) { .case-modal-scroll { padding:56px 48px; } }

  .case-modal-head { margin-bottom:40px; max-width:60ch; }
  /* LEGIBILITY — this section moved the small type up a tier.
     The site runs two label sizes: a ~9px one (footer pill 8.3px, service
     badge 8.8px) and a ~11px one (section label 11.2px, service stat chips
     10.9px). Everything here had landed in the smallest tier, which is fine
     for a decorative stamp but not for text sitting beside reading copy.
     Tracking eased at the same time — wide letter-spacing on very small type
     makes it harder to bind letters into words, not easier. */
  .case-modal-eyebrow {
    display:inline-flex; align-items:center; gap:9px;
    font-family:'Space Mono',monospace;
    font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(240,238,232,.62);
    margin-bottom:18px;
  }
  .case-modal-heading {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.4rem,6vw,4.6rem);
    line-height:.88;
    margin:0 0 16px;
    letter-spacing:.01em;
    /* The wordmark sits on the same line as the type, so the line box has to
       be able to hold it without the words shifting. */
    display:flex; align-items:center; flex-wrap:wrap; gap:.18em;
  }
  /* Sized off the TEXT, not a fixed px: height in em keeps the wordmark
     locked to the heading through the whole clamp. The letterforms fill 90%
     of the image (the rest is glow) and Bebas caps are ~0.73em, so 0.82em of
     image puts the two at the same cap height. */
  .case-modal-heading img {
    height:.82em; width:auto; display:block;
    /* Measured, not guessed: at .82em the cap heights match exactly (54px vs
       54px at the desktop clamp), but flex centring left the mark sitting 6px
       low against the text baseline. -.04em lifts it level. */
    transform:translateY(-.04em);
  }
  /* Reading copy, not a label — 13.8px was below a comfortable body size. */
  .case-modal-intro {
    font-size:.94rem;
    line-height:1.7;
    color:rgba(240,238,232,.62);
    margin:0;
  }

  .work-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:40px 28px;
  }
  @media (min-width:640px)  { .work-grid { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1024px) { .work-grid { grid-template-columns:repeat(3,1fr); } }

  .work-card {
    display:block;
    text-decoration:none;
    color:inherit;
  }

  .work-frame {
    aspect-ratio:4 / 5;
    border:1px solid var(--border);
    background:#0a0d0a;
    margin-bottom:18px;
    transition:border-color .3s;
    /* No right angles in the lanes. The tile IS the .shot-frame
       (overflow:hidden), so the radius also clips the screenshot —
       and the dashed open-slot frame follows the same curve. */
    border-radius:14px;
    overflow:hidden;
  }
  .work-card:hover .work-frame,
  .work-card:focus-visible .work-frame { border-color:rgba(200,255,0,.45); }
  .work-card:focus-visible { outline:none; }
  .work-card:focus-visible .work-name { color:var(--acid); }

  /* "Visit site" badge — mirrors the modal's CLICK TO EXPLORE treatment
     so the two entry points feel like the same product. */
  .work-visit {
    position:absolute;
    right:14px; bottom:14px;
    z-index:3;
    display:inline-flex; align-items:center; gap:8px;
    background:var(--acid);
    color:var(--black);
    font-family:'Space Mono',monospace;
    font-size:.66rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    padding:10px 15px;
    border-radius:8px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .25s, transform .25s;
    pointer-events:none;
  }
  .work-card:hover .work-visit,
  .work-card:focus-visible .work-visit { opacity:1; transform:translateY(0); }
  .work-visit-arrow { font-size:.68rem; line-height:1; }

  .work-tags {
    font-family:'Space Mono',monospace;
    font-size:.66rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--acid);
    margin-bottom:10px;
  }
  .work-name {
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:1.5rem;
    line-height:1.05;
    letter-spacing:-.02em;
    margin:0 0 10px;
    transition:color .25s;
  }
  .work-card:hover .work-name { color:var(--acid); }
  /* Reading copy — 13.1px was too small for a paragraph people actually read. */
  .work-desc {
    font-size:.94rem;
    line-height:1.65;
    color:rgba(240,238,232,.62);
    margin:0;
    max-width:42ch;
  }

  /* Open slot — a designed placeholder rather than a gap, so the grid
     reads as deliberate while there are only two builds to show. */
  .work-frame--open {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    border:1px dashed rgba(200,255,0,.28);
    background:
      radial-gradient(circle at 50% 45%, rgba(200,255,0,.05), transparent 65%),
      #0a0d0a;
  }
  .work-open-mark {
    width:44px; height:44px;
    position:relative;
    opacity:.75;
    transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s;
  }
  .work-open-mark::before,
  .work-open-mark::after {
    content:'';
    position:absolute;
    background:var(--acid);
  }
  .work-open-mark::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
  .work-open-mark::after  { top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
  .work-card--open:hover .work-open-mark { transform:rotate(90deg); opacity:1; }
  /* Status stamp for a build that is finished but not yet deployed. Always
     visible rather than hover-revealed like .work-visit — it is a statement
     of fact about the project, not an invitation to click, and a visitor
     needs to see it without interacting. */
  .work-status {
    position:absolute;
    right:14px; bottom:14px;
    z-index:3;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(5,7,6,.82);
    border:1px solid rgba(200,255,0,.4);
    color:rgba(240,238,232,.9);
    font-family:'Space Mono',monospace;
    font-size:.66rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    padding:9px 14px;
    border-radius:8px;
    backdrop-filter:blur(6px);
    pointer-events:none;
  }
  .work-status::before {
    content:'';
    width:6px; height:6px; border-radius:50%;
    background:var(--acid);
    box-shadow:0 0 8px var(--acid);
    flex-shrink:0;
  }
  /* No pointer affordance — this tile does not navigate anywhere yet. */
  .work-card--soon { cursor:default; }
  .work-card--soon .work-frame { transition:border-color .3s; }
  .work-card--soon:hover .work-frame { border-color:rgba(200,255,0,.28); }

  /* This one genuinely failed WCAG AA: 4.05:1 against the 4.5 minimum, at
     9px. Alpha raised from .45 and the size moved up a tier with the rest. */
  .work-open-label {
    font-family:'Space Mono',monospace;
    font-size:.68rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:rgba(240,238,232,.7);
  }
  /* The open-slot tile became a <button> when it moved inside the modal
     (it books a slot rather than navigating) — strip the UA chrome back
     to the .work-card baseline so both tags render identically. */
  button.work-card {
    background:none; border:0; padding:0; margin:0;
    font:inherit; color:inherit; text-align:left;
    width:100%;
    cursor:pointer;
    /* A <button> centres its content inside an intrinsic anonymous box,
       which left this tile's .work-frame sitting ~12px lower than the <a>
       cards beside it. Laying the button out as a flex column drops that
       wrapper behaviour so its children stack from the top, in line with
       the anchor cards. */
    display:flex;
    flex-direction:column;
  }
  button.work-card:focus-visible { outline:none; }

  /* ── TWO LANES — Websites vs E-Commerce ───────────────────────────
     The modal opens on a chooser of two lane cards. Picking one swaps
     it for that lane's section: title, how-it-works, benefits, then
     the work grid. All state is the hidden attribute, driven by
     openWorkLane/closeWorkLane in faid.js — everything below is
     presentation only.
     ───────────────────────────────────────────────────────────────── */
  .work-paths {
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }
  @media (min-width:769px) { .work-paths { grid-template-columns:1fr 1fr; gap:28px; } }

  /* Echoes .service-card — same matte black, same acid-on-hover — scaled
     down for life inside the modal, so the click that opened the modal
     and the choice inside it read as one product. */
  .work-path {
    background:#0a0d0a;
    border:1px solid var(--border);
    border-radius:20px;
    padding:34px 30px 30px;
    text-align:left;
    color:inherit;
    font:inherit;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:border-color .3s, background .3s;
  }
  .work-path:hover,
  .work-path:focus-visible {
    border-color:rgba(200,255,0,.45);
    background:#0c0f0c;
    outline:none;
  }
  .work-path-tag {
    font-family:'Space Mono',monospace;
    font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--acid);
    display:flex; align-items:center; gap:10px;
    margin-bottom:20px;
  }
  .work-path-tag::before { content:''; width:22px; height:1px; background:var(--acid); flex-shrink:0; }
  .work-path-name {
    font-family:'Syne',sans-serif;
    font-weight:800;
    font-size:clamp(1.5rem, 2.4vw, 1.9rem);
    line-height:1.1;
    letter-spacing:-.01em;
    margin:0 0 12px;
    transition:color .25s;
  }
  .work-path:hover .work-path-name,
  .work-path:focus-visible .work-path-name { color:var(--acid); }
  .work-path-desc {
    font-size:.94rem; line-height:1.65;
    color:rgba(240,238,232,.62);
    margin:0 0 26px;
    max-width:46ch;
  }
  .work-path-cta {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Space Mono',monospace;
    font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
    font-weight:700;
    color:var(--acid);
  }
  .work-path-cta-arrow { transition:transform .25s; }
  .work-path:hover .work-path-cta-arrow,
  .work-path:focus-visible .work-path-cta-arrow { transform:translateX(5px); }

  /* Lane view — [hidden] is display:none by UA default, but both rules
     here make that survive any future display: on these containers. */
  .work-paths[hidden],
  .work-lane[hidden] { display:none; }

  .work-lane-back {
    display:inline-flex; align-items:center; gap:8px;
    background:none;
    border:1px solid var(--border);
    border-radius:10px;
    color:rgba(240,238,232,.75);
    font-family:'Space Mono',monospace;
    font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
    padding:10px 16px;
    cursor:pointer;
    margin-bottom:30px;
    transition:border-color .25s, color .25s;
  }
  .work-lane-back:hover,
  .work-lane-back:focus-visible {
    border-color:rgba(200,255,0,.45);
    color:var(--acid);
    outline:none;
  }
  .work-lane-tag {
    font-family:'Space Mono',monospace;
    font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--acid);
    margin-bottom:14px;
  }
  .work-lane-title {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2rem, 4.6vw, 3.4rem);
    line-height:.9;
    letter-spacing:.01em;
    margin:0 0 14px;
  }
  .work-lane-sub {
    font-size:.94rem; line-height:1.7;
    color:rgba(240,238,232,.62);
    margin:0;
    max-width:60ch;
  }
  /* The explainer — how it works beside why it wins. Each column is its
     own matte-black card (the boxes replaced the ruled band that used to
     frame this block): acid rim + a slight grow on hover, echoing the
     lane chooser so the whole modal speaks one hover language. */
  .work-lane-brief {
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    margin:30px 0 40px;
  }
  @media (min-width:900px) { .work-lane-brief { grid-template-columns:1.2fr 1fr; gap:28px; } }
  .work-lane-col {
    background:#0a0a0a;
    border:1px solid var(--border);
    border-radius:14px;
    padding:26px 28px 28px;
    /* Anchor for the injected .card-trace SVG — the same 2px acid line
       that laps the service cards draws around these boxes on hover
       (the trace IIFE in faid.js includes #caseModal .work-lane-col). */
    position:relative;
    transition:border-color .3s, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .work-lane-col:hover {
    /* The trace needs ~1s to finish its lap; brightening the resting
       border at the same time gives the rim an instant response while
       the full-strength acid line travels round. */
    border-color:rgba(200,255,0,.35);
    transform:scale(1.02);
  }
  /* Reading in the dark until you arrive — the whole box lifts to white. */
  .work-lane-col:hover .work-lane-col-title,
  .work-lane-col:hover .work-lane-col-copy,
  .work-lane-col:hover .work-lane-list li { color:#ffffff; }
  @media (prefers-reduced-motion:reduce) {
    .work-lane-col { transition:border-color .3s; }
    .work-lane-col:hover { transform:none; }
  }
  .work-lane-col-title {
    font-family:'Space Mono',monospace;
    font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(240,238,232,.62);
    margin:0 0 14px;
    transition:color .3s;
  }
  .work-lane-col-copy {
    font-size:.94rem; line-height:1.7;
    color:rgba(240,238,232,.78);
    margin:0;
    max-width:58ch;
    transition:color .3s;
  }
  .work-lane-list {
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:11px;
  }
  .work-lane-list li {
    position:relative;
    padding-left:20px;
    font-size:.9rem; line-height:1.55;
    color:rgba(240,238,232,.78);
    transition:color .3s;
  }
  .work-lane-list li::before {
    content:'';
    position:absolute; left:0; top:.58em;
    width:8px; height:1px;
    background:var(--acid);
  }
  .case-modal-iframe-click {
    position:absolute; inset:0;
    z-index:3;
    cursor:pointer;
    text-decoration:none;
    background:transparent;
    transition:background .25s;
    display:flex; align-items:flex-end; justify-content:flex-end;
    padding:18px;
  }
  .case-modal-iframe-click:hover {
    background:linear-gradient(to top, rgba(0,0,0,.45), transparent 75%);
  }
  .case-modal-iframe-cta {
    background:var(--acid);
    color:var(--black);
    font-family:'Space Mono',monospace;
    font-size:.58rem;
    letter-spacing:.25em;
    font-weight:700;
    padding:9px 16px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .25s, transform .25s;
  }
  .case-modal-iframe-click:hover .case-modal-iframe-cta {
    opacity:1; transform:translateY(0);
  }
  .case-modal-iframe-wrap::after {
    content:'';
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, rgba(200,255,0,.5), transparent);
    animation:caseModalScan 6s linear infinite;
    pointer-events:none;
    z-index:2;
  }
  @keyframes caseModalScan {
    0% { top:0; opacity:0; }
    8% { opacity:1; }
    92% { opacity:1; }
    100% { top:100%; opacity:0; }
  }

  /* MOBILE — stack vertically, simpler */
  @media (max-width:899px) {
    .case-modal { padding:14px; }
    .case-modal-frame { max-height:96vh; }
    .case-modal-info {
      padding:28px 22px 22px;
      gap:14px;
    }
    .case-modal-title { font-size:clamp(2.2rem, 8vw, 3.2rem); }
    .case-modal-desc { font-size:.7rem; }
    .case-modal-meta-row { padding:7px 0; font-size:.55rem; }
    .case-modal-qr-block { padding:12px; gap:12px; }
    .case-modal-qr { width:80px; height:80px; padding:6px; }
    .case-modal-qr-label { font-size:.78rem; }
    .case-modal-qr-sub { font-size:.58rem; }
    .case-modal-link { padding:13px 16px; }
    .case-modal-link-url { font-size:.72rem; }
    .case-modal-preview {
      min-height:280px;
      padding:14px;
    }
    .case-modal-close { width:34px; height:34px; top:12px; right:12px; }
    /* The old fixed-width iframe needed transform:scale() here (0.4, then
       0.23 below 480px) to squeeze a 1280px desktop layout into a phone.
       A responsive <img> just fits its container, so none of that is
       needed any more. */
  }
  @media (max-width:480px) {
    .case-modal-preview { min-height:240px; }
  }
  /* Mobile (≤600px): QR is pointless because the user IS on mobile.
     Drop it, reorder so the website preview sits in the middle of the
     slide and the "Click to visit" CTA lands directly underneath it.
     Uses display:contents to flatten .case-modal-info into the grid
     so flex order can reorder its children independently of preview. */
  @media (max-width:600px) {
    .case-modal-qr-block { display:none; }
    .case-modal-grid {
      display:flex;
      flex-direction:column;
      overflow:auto;
      gap:0;
    }
    .case-modal-info {
      display:contents;
    }
    /* Restore padding on the now-loose children. Vertical gap is managed
       per-element via margin-top so nothing collides. */
    .case-modal-eyebrow,
    .case-modal-title,
    .case-modal-desc,
    .case-modal-meta { padding-left:20px; padding-right:20px; }
    .case-modal-eyebrow {
      padding-top:22px;
      margin-bottom:10px;
    }
    .case-modal-title {
      font-size:clamp(1.9rem, 7.5vw, 2.6rem);
      line-height:1;
      margin-bottom:12px;
    }
    .case-modal-desc {
      font-size:.72rem;
      line-height:1.65;
      margin-bottom:12px;
    }
    .case-modal-meta {
      margin-bottom:0;
      padding-bottom:4px;
    }
    .case-modal-meta-row { padding:5px 0; font-size:.52rem; }
    /* Preview sits between meta and the link CTA. Smaller min-height so
       the CTA below is always visible above the iOS Safari bottom bar. */
    .case-modal-preview {
      order:1;
      min-height:300px;
      padding:10px 20px 8px;
    }
    /* Access (link only; QR hidden) lands directly under the preview. */
    .case-modal-access {
      order:2;
      padding:4px 20px 22px;
      display:block;
    }
    .case-modal-link { padding:14px 16px; }
    .case-modal-link-label { font-size:.55rem; }
    .case-modal-link-url { font-size:.8rem; }
    /* Hide the floating arrows + dots on mobile — they cover the
       click-to-visit URL. Both case studies are reachable from their
       own service cards so in-modal nav isn't needed on phone. */
    .case-modal-nav,
    .case-modal-dots { display:none; }
    /* Keep the counter — it tells the user there's more than one case
       study. Move it from bottom-right (which covered the CTA) to
       top-right, tucked beside the close button so it doesn't fight
       any other content. */
    .case-modal-counter {
      top:18px; right:64px;
      bottom:auto;
      font-size:.5rem;
      padding:5px 9px;
    }
  }

  /* Modal entry animation */
  .case-modal-info > * {
    opacity:0;
    transform:translateY(12px);
    transition:opacity .5s, transform .5s;
  }
  .case-modal.open .case-modal-info > * {
    opacity:1; transform:translateY(0);
  }
  .case-modal.open .case-modal-info > *:nth-child(1) { transition-delay:.15s; }
  .case-modal.open .case-modal-info > *:nth-child(2) { transition-delay:.22s; }
  .case-modal.open .case-modal-info > *:nth-child(3) { transition-delay:.29s; }
  .case-modal.open .case-modal-info > *:nth-child(4) { transition-delay:.36s; }
  .case-modal.open .case-modal-info > *:nth-child(5) { transition-delay:.43s; }

  /* ── BOOKING ── */
  .booking { padding:80px 24px; border-top:1px solid var(--border); position:relative; overflow:hidden; }
  @media (min-width:769px) { .booking { padding:120px 48px; } }
  /* Removed the giant "BOOK" background text */

  /* The section used to be a flat void with a grey card floating in it. A
     single wide acid bloom behind the console gives the panel something to
     sit in, so it reads as lit rather than pasted on. Painted on the section
     itself (which is already position:relative + overflow:hidden) and kept
     under .booking-inner's z-index:1. */
  /* Same backdrop as the What We Do section, not an approximation of it:
     the identical glow/grid recipe from .services, and the same pair of
     edge stripes. Both sections already shared --band-lift as their base;
     this artwork was the whole visible difference between them. */
  .booking {
    background-image:
      radial-gradient(ellipse 70% 50% at 50% 0%,
        rgba(200,255,0,.15) 0%,
        rgba(200,255,0,.06) 25%,
        transparent 60%),
      radial-gradient(ellipse 50% 30% at 50% 100%,
        rgba(200,255,0,.05) 0%,
        transparent 70%),
      linear-gradient(rgba(200,255,0,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.045) 1px, transparent 1px);
    background-size:
      100% 100%,
      100% 100%,
      56px 56px,
      56px 56px;
    background-position:
      center top,
      center bottom,
      center center,
      center center;
    background-repeat:no-repeat, no-repeat, repeat, repeat;
  }
  /* Top stripe — mirrors .services::before */
  .booking::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(200,255,0,.4) 30%,
      rgba(200,255,0,.4) 70%,
      transparent 100%);
    pointer-events:none; z-index:0;
  }
  /* Bottom stripe — mirrors .services::after */
  .booking::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(200,255,0,.28) 30%,
      rgba(200,255,0,.28) 70%,
      transparent 100%);
    pointer-events:none; z-index:0;
  }

  /* Three areas so mobile can reorder without touching desktop: the console
     jumps above the perks on narrow screens (intro → form → perks) while the
     desktop keeps intro + perks stacked in column one beside it. */
  .booking-inner {
    display:grid; grid-template-columns:1fr; gap:44px;
    grid-template-areas:"intro" "form" "perks";
    position:relative; z-index:1;
  }
  .booking-intro { grid-area:intro; }
  .booking-inner .qwrap { grid-area:form; }
  .perks { grid-area:perks; }
  /* The console is a stepper, so its height changes with every question —
     six budget options make it tall, four services make it short. Anything
     pinned beside it in column one therefore leaves a different-sized hole
     under it on every step. So on desktop the perks run the FULL width as a
     closing spec strip instead: no hole to chase, and the section gets a
     proper bottom edge. */
  @media (min-width:900px) {
    .booking-inner {
      grid-template-columns:minmax(0,1fr) 1.15fr;
      grid-template-areas:"intro form" "perks perks";
      column-gap:64px; row-gap:58px;
      align-items:start; align-content:start;
    }
  }

  .bpre { font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--acid); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
  .bpre::before { content:''; width:28px; height:1px; background:var(--acid); }
  .btitle { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.2rem,5vw,5rem); line-height:.9; margin-bottom:24px; }
  .btitle span { -webkit-text-stroke:1px var(--white); color:transparent; }
  /* Was .76rem at 45% — small and dim enough that the whole column read as
     grey filler. Bigger and brighter, capped so the measure stays readable. */
  .bbody { font-size:.84rem; line-height:1.85; color:rgba(240,238,232,.62); max-width:52ch; margin-bottom:0; }

  /* ── Perks: four boxes ──
     These were bare columns divided by a single hairline, which left nothing
     holding each one together — the eye couldn't tell where one stopped and
     the next began. Each is now its own box, built from a scaled-down version
     of the card material used on the console and the operate section, with
     the same acid hairline doing the separating. The container's own rule is
     gone: boxes and a divider were two devices doing one job. */
  .perks { display:flex; flex-direction:column; gap:12px; }
  .perk {
    display:grid; grid-template-columns:auto 1fr; align-items:start; gap:16px;
    padding:20px;
    background:linear-gradient(180deg,#101017 0%,#0a0a10 100%);
    /* Same neon as the console: identical keyline alpha (.38) and glow alpha
       (.34). Fin's call — these were held deliberately dimmer so the panel
       led, and he wants the section reading as one lit family instead. The
       glow RADIUS is scaled to the box (28px vs the console's 46px): the
       console's spread on something this small blooms into its neighbours. */
    border:1px solid rgba(200,255,0,.22);
    border-radius:16px;
    box-shadow:
      inset 0 1px 0 rgba(200,255,0,.08),
      0 0 30px -9px rgba(200,255,0,.24);
  }
  .pnum {
    font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.18em;
    color:rgba(200,255,0,.5); padding-top:3px; font-variant-numeric:tabular-nums;
  }
  .ptxt { font-size:.76rem; line-height:1.75; color:rgba(240,238,232,.55); }
  .ptxt strong {
    color:var(--white); font-weight:700; display:flex; align-items:center; gap:9px;
    margin-bottom:3px; font-size:.79rem;
  }
  .pglyph {
    width:15px; height:15px; flex-shrink:0;
    fill:none; stroke:var(--acid); stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
  }
  /* Desktop: the manifest turns into a spec strip across the whole section.
     MUST stay below the base rules above — same specificity, so source order
     is what decides it. auto-fit means it folds to 2×2 rather than crushing
     four 190px columns at the narrow end of the range. */
  /* Counts are pinned rather than auto-fit: four boxes need ~984px of
     viewport to hold their minimum, so auto-fit drops to 3 across the
     900–1000 band and orphans the fourth on a row of its own. 2x2 then 4-up
     never orphans anything. */
  @media (min-width:900px) {
    .perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    /* Stacked inside the box across the strip: number, then title, then line.
       The number keeps its own row so all four titles sit on one baseline
       however the copy wraps. */
    .perk { display:block; padding:24px 22px; }
    .pnum { display:block; padding-top:0; margin-bottom:12px; }
  }
  /* Wide enough for all four to hold their minimum on one row. */
  @media (min-width:1100px) {
    .perks { grid-template-columns:repeat(4,minmax(0,1fr)); }
  }

  /* Escape hatch for anyone who would rather not fill in a form at all. The
     number is the same work line the footer and the JSON-LD carry. */
  /* A bordered block rather than a trailing sentence — the column needs
     something built to finish on, and this matches the perk boxes' language
     (hairline keyline, 8px corner, acid glyph). */
  .bcall {
    margin-top:34px; display:inline-flex; align-items:center; gap:14px;
    padding:14px 18px; border:1px solid rgba(200,255,0,.22); border-radius:8px;
    background:linear-gradient(180deg, rgba(240,238,232,.03), rgba(240,238,232,.01));
    font-size:.72rem; letter-spacing:.02em; color:rgba(240,238,232,.62);
    transition:border-color .25s ease, background .25s ease;
  }
  .bcall:hover { border-color:rgba(200,255,0,.42); background:linear-gradient(180deg, rgba(200,255,0,.05), rgba(200,255,0,.015)); }
  .bcall svg { width:15px; height:15px; flex-shrink:0; fill:none; stroke:var(--acid); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .bcall a {
    color:var(--white); font-family:'Space Mono',monospace; font-size:.8rem;
    letter-spacing:.06em; text-decoration:none; border-bottom:1px solid rgba(200,255,0,.45);
    padding-bottom:2px; transition:color .2s, border-color .2s;
    /* A phone number split across two lines is unreadable and unusable. */
    white-space:nowrap;
  }
  .bcall a:hover { color:var(--acid); border-bottom-color:var(--acid); }

  /* This column used to stretch to the console's height with the call line
     pushed to the bottom on margin:auto — the theory being that two columns
     finishing on the same line would read as a deliberate gap. It didn't: it
     manufactured a 188px hole between the paragraph and the call line, with
     content bunched at the top and bottom of an empty box. The column now
     ends where its content ends. */

  /* FORM */
  .fwrap { background:var(--mid); border:1px solid var(--border); padding:32px; position:relative; }
  @media (min-width:769px) { .fwrap { padding:48px; } }
  .fwrap::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--acid),transparent); }
  .ftitle { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:800; margin-bottom:6px; }
  .fsub { font-size:.67rem; color:rgba(240,238,232,.4); margin-bottom:28px; line-height:1.6; }
  .frow { display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:500px) { .frow { grid-template-columns:1fr 1fr; } }
  .fg { margin-bottom:4px; }
  .fg.full { grid-column:1/-1; }
  .flabel { font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(240,238,232,.45); margin-bottom:7px; display:block; }
  .finput,.fsel,.ftarea { width:100%; background:rgba(240,238,232,.04); border:1px solid rgba(240,238,232,.12); color:var(--white); font-family:'Space Mono',monospace; font-size:.76rem; padding:13px 15px; outline:none; transition:border-color .2s; appearance:none; -webkit-appearance:none; border-radius:0; }
  .finput::placeholder,.ftarea::placeholder { color:rgba(240,238,232,.2); }
  .finput:focus,.fsel:focus,.ftarea:focus { border-color:var(--acid); background:rgba(200,255,0,.03); }
  /* Inputs are wells in the console too, and pick up the same soft corner. */
  .qwrap .finput, .qwrap .ftarea { background:rgba(0,0,0,.42); border-color:rgba(240,238,232,.13); border-radius:8px; }
  .qwrap .finput:focus, .qwrap .ftarea:focus { background:rgba(200,255,0,.04); border-color:var(--acid); }
  .fsel { background-color:var(--mid); cursor:pointer; }
  .fsel option { background:var(--mid); color:var(--white); }
  .ftarea { resize:vertical; min-height:100px; line-height:1.6; }
  .schecks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .chk { display:flex; align-items:center; gap:10px; cursor:pointer; }
  /* ── ADS SHOWCASE MODAL ── */
  .ads-modal { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .35s ease; }
  .ads-modal.open { display:flex; opacity:1; }
  .ads-modal-backdrop { position:absolute; inset:0; background:rgba(5,5,7,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .ads-modal-frame { position:relative; width:100%; max-width:1340px; max-height:92vh; background:linear-gradient(135deg, #08080f 0%, #0a0d0a 100%); border:1px solid rgba(200,255,0,.18); border-radius:22px; box-shadow:0 0 0 1px rgba(200,255,0,.05), 0 40px 120px rgba(0,0,0,.8), 0 0 200px rgba(200,255,0,.12); transform:scale(.96) translateY(12px); transition:transform .4s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; overflow:hidden; }
  .ads-modal.open .ads-modal-frame { transform:scale(1) translateY(0); }
  .ads-modal-frame::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(200,255,0,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(200,255,0,.025) 1px, transparent 1px); background-size:40px 40px; pointer-events:none; opacity:.6; z-index:0; }
  .ads-modal-frame::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--acid), transparent 70%); pointer-events:none; z-index:1; }

  /* ── SUBTLE BACKGROUND ENHANCEMENTS ── Case Study + Brand AI + Learn modals only.
     Ads modal keeps the minimal existing treatment as requested. ── */
  #caseModal .case-modal-frame,
  #brandAiModal .ads-modal-frame,
  #learnModal .ads-modal-frame {
    background-image:
      /* Acid glow top-right */
      radial-gradient(ellipse 60% 50% at 95% 5%, rgba(200,255,0,.07) 0%, transparent 60%),
      /* Acid glow bottom-left */
      radial-gradient(ellipse 60% 50% at 5% 95%, rgba(200,255,0,.04) 0%, transparent 60%),
      /* Soft vignette */
      radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(5,5,7,.4) 100%),
      /* Base gradient */
      linear-gradient(135deg, #08080f 0%, #0a0d0a 100%);
  }
  /* Slightly stronger grid pattern + softer/larger cells */
  #caseModal .case-modal-frame::before,
  #brandAiModal .ads-modal-frame::before,
  #learnModal .ads-modal-frame::before {
    background-image:
      linear-gradient(rgba(200,255,0,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(200,255,0,.045) 1px, transparent 1px) !important;
    background-size:60px 60px !important;
    opacity:1 !important;
    /* Fade out the grid toward the edges so it feels held within the frame */
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 50%, transparent 100%);
  }
  /* ── ANIMATED BACKGROUND FX wrapper — case study / brand AI / learn modals only ── */
  .modal-bg-fx {
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
  }
  /* Primary drifting acid glow */
  .modal-bg-fx::before {
    content:'';
    position:absolute;
    width:80%; aspect-ratio:1;
    top:-20%; left:-20%;
    background:radial-gradient(circle, rgba(200,255,0,.18) 0%, rgba(200,255,0,.06) 35%, transparent 65%);
    border-radius:50%;
    filter:blur(50px);
    animation:modalGlowDrift 28s ease-in-out infinite;
    will-change:transform, opacity;
  }
  @keyframes modalGlowDrift {
    0%   { transform:translate(-10%, -10%) scale(1);    opacity:.85; }
    25%  { transform:translate(110%, 15%)  scale(1.25); opacity:1;   }
    50%  { transform:translate(85%, 95%)   scale(.95);  opacity:.75; }
    75%  { transform:translate(-15%, 60%)  scale(1.2);  opacity:.95; }
    100% { transform:translate(-10%, -10%) scale(1);    opacity:.85; }
  }
  /* Secondary counter-drift glow — adds depth + counter-motion */
  .modal-bg-fx::after {
    content:'';
    position:absolute;
    width:60%; aspect-ratio:1;
    top:50%; left:50%;
    background:radial-gradient(circle, rgba(200,255,0,.13) 0%, rgba(200,255,0,.04) 40%, transparent 70%);
    border-radius:50%;
    filter:blur(60px);
    animation:modalGlowDriftB 34s ease-in-out infinite;
    will-change:transform, opacity;
  }
  @keyframes modalGlowDriftB {
    0%   { transform:translate(-50%, -50%) scale(1);   opacity:.7; }
    33%  { transform:translate(-110%, 20%) scale(1.3); opacity:1;  }
    66%  { transform:translate(40%, -90%)  scale(.9);  opacity:.8; }
    100% { transform:translate(-50%, -50%) scale(1);   opacity:.7; }
  }
  /* ── NEURAL CONSTELLATION ── animated SVG network of nodes + connecting lines.
     Dots breathe, lines draw themselves and fade — feels like watching the AI think. */
  .modal-network {
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:1;
    opacity:.85;
  }
  .modal-network .net-line {
    stroke:var(--acid);
    stroke-width:1;
    fill:none;
    opacity:0;
    stroke-dasharray:280;
    stroke-dashoffset:280;
    animation:netLineDraw 9s ease-in-out infinite;
    animation-delay:var(--delay, 0s);
  }
  .modal-network .net-dot {
    fill:var(--acid);
    opacity:.4;
    filter:drop-shadow(0 0 4px rgba(200,255,0,.8));
    animation:netDotPulse 4s ease-in-out infinite;
    animation-delay:var(--delay, 0s);
    transform-box:fill-box;
    transform-origin:center;
  }
  .modal-network .net-dot-large {
    r:3.5;
    opacity:.6;
    filter:drop-shadow(0 0 8px rgba(200,255,0,.95));
    animation-duration:5s;
  }
  @keyframes netDotPulse {
    0%, 100% { opacity:.25; transform:scale(.85); }
    50%      { opacity:.95; transform:scale(1.15); }
  }
  @keyframes netLineDraw {
    0%, 100%   { opacity:0; stroke-dashoffset:280; }
    18%        { opacity:.45; }
    38%        { opacity:.45; stroke-dashoffset:0; }
    55%        { opacity:.2;  stroke-dashoffset:0; }
    72%        { opacity:0;   stroke-dashoffset:-280; }
  }
  /* ── ADS MODAL — FLOATING PLATFORM ICONS ── Instagram, TikTok, Meta, Facebook, X
     drift slowly across the modal background. Each takes turns being highlighted
     in bright acid green, rotating around the modal. ── */
  /* ---------- FLOATING LOGOS — header only (JS particle field) ---------- */
  /* text sits above the logos with a dark halo so it's never obscured */
  /* z-index 2, not 1: the icon layer is also 1, and the scrim added below has
     to sit BETWEEN the two. */
  #adsModal .ads-modal-header > *:not(.ads-platforms):not(.ads-bottom-fill) { position:relative; z-index:2; text-shadow:0 1px 12px rgba(5,5,7,.92), 0 0 4px rgba(5,5,7,.85); }

  /* Held ramp over the icon mosaic. Measured, not judged: where the intro
     text crossed one of the big acid icons the contrast was 2.11:1 against a
     4.5:1 floor — fine over bare backdrop (6.46:1), unreadable over an icon.
     The ramp is HELD near-opaque across the text column and only then falls
     away, so the mosaic still reads on the right of the banner where nothing
     sits on top of it. A gradient that starts easing at x=0 is already too
     thin by the middle of the text. Alpha only — interpolating the colour as
     well travels through muddy mid-tones and reads as a dirty band. */
  #adsModal .ads-modal-header::after {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    /* Stops in px, not %: the copy is max-width:640px inside 56px of padding,
       so it always ends at ~696px regardless of how wide the modal is. In %
       the ramp held far past the text on wide screens and dimmed the mosaic
       for no reason. Hold to the end of the column, then release quickly. */
    background:linear-gradient(90deg,
      rgba(6,7,9,.93) 0,
      rgba(6,7,9,.93) 700px,
      rgba(6,7,9,.62) 780px,
      rgba(6,7,9,.30) 850px,
      rgba(6,7,9,.10) 905px,
      rgba(6,7,9,0)   950px);
  }
  /* Narrow screens: the text spans the full width, so the ramp has to hold
     the whole way rather than falling off over the copy. */
  @media (max-width:900px) {
    #adsModal .ads-modal-header::after {
      background:linear-gradient(180deg,
        rgba(6,7,9,.90) 0%,
        rgba(6,7,9,.90) 82%,
        rgba(6,7,9,.72) 100%);
    }
  }

  .ads-platforms {
    position:absolute; inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
    /* Soft fade at top + bottom edges — icons bleed into the header borders
       rather than hard-cutting at them. Feels embedded, not stamped on. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 93%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 93%, transparent 100%);
  }
  /* Mobile: the mosaic icons have hardcoded px sizes calibrated for a
     ~1200px-wide desktop modal. Without scaling, they're 3-4× too big for
     the 317px mobile container — chaotic and overlapping. Trick: make the
     container 385% of parent (so 100/0.26 = 385) and scale it 26% from
     top-left. Visual result: icons render at 26% size, distributed across
     the FULL header area (heading + body intro), exactly like desktop. */
  @media (max-width:600px) {
    #adsModal .ads-platforms {
      inset:auto;
      top:0; left:50%;
      width:1200px; height:130%;
      transform:translateX(-50%) scale(0.65);
      transform-origin:top center;
    }
  }
  /* Hand-placed icons that plug the dead space below the scaled mosaic.
     Hidden by default — only shown at narrow mobile widths. */
  .ads-bottom-fill { display:none; }
  .ads-bottom-fill svg { width:100%; height:100%; display:block; }
  @media (max-width:600px) {
    #adsModal .ads-bottom-fill {
      display:block;
      position:absolute;
      pointer-events:none;
      z-index:1;
    }
    /* Bottom-row anchors. Hand-placed so NO two icons overlap and they all
       sit in the bottom 70px — below where the scaled mosaic ends. */
    #adsModal .ads-bottom-fill-meta {
      left:4%; bottom:14px;
      width:52px; height:52px;
      color:#94B340; opacity:0.34;
      transform:rotate(-14deg);
    }
    #adsModal .ads-bottom-fill-tiktok {
      left:30%; bottom:18px;
      width:30px; height:30px;
      color:#8AA440; opacity:0.30;
      transform:rotate(-18deg);
    }
    #adsModal .ads-bottom-fill-ig {
      left:48%; bottom:14px;
      width:34px; height:34px;
      color:#7D9C36; opacity:0.28;
      transform:rotate(8deg);
    }
    #adsModal .ads-bottom-fill-x {
      left:70%; bottom:22px;
      width:28px; height:28px;
      color:#94B340; opacity:0.32;
      transform:rotate(20deg);
    }
    #adsModal .ads-bottom-fill-meta2 {
      right:4%; bottom:12px;
      width:44px; height:44px;
      color:#7D9C36; opacity:0.30;
      transform:rotate(11deg);
      filter:blur(0.3px);
    }
    /* Tighter scatter higher up — small fillers between the mosaic edge and
       the main bottom row. Sparse so the band reads as a deliberate fade. */
    #adsModal .ads-bottom-fill-snap {
      left:14%; bottom:60px;
      width:22px; height:22px;
      color:#6E8830; opacity:0.24;
      transform:rotate(-22deg);
      filter:blur(0.4px);
    }
    #adsModal .ads-bottom-fill-tt2 {
      left:40%; bottom:64px;
      width:20px; height:20px;
      color:#7A9438; opacity:0.24;
      transform:rotate(28deg);
      filter:blur(0.4px);
    }
    #adsModal .ads-bottom-fill-ig2 {
      left:62%; bottom:58px;
      width:22px; height:22px;
      color:#8AA440; opacity:0.24;
      transform:rotate(-12deg);
      filter:blur(0.4px);
    }
    #adsModal .ads-bottom-fill-x2 {
      right:14%; bottom:64px;
      width:18px; height:18px;
      color:#7D9C36; opacity:0.22;
      transform:rotate(34deg);
      filter:blur(0.5px);
    }
    #adsModal .ads-bottom-fill-snap2 {
      right:30%; bottom:54px;
      width:20px; height:20px;
      color:#94B340; opacity:0.26;
      transform:rotate(15deg);
      filter:blur(0.3px);
    }
    /* Big mid-right Meta anchor — placed where the user circled. Sits
       between the bottom-anchor row and the body copy so the right side
       has a third weight point. */
    #adsModal .ads-bottom-fill-meta3 {
      right:10%; bottom:115px;
      width:68px; height:68px;
      color:#94B340; opacity:0.34;
      transform:rotate(-8deg);
    }
  }
  /* Mosaic above stays at 100% height (not 130%) so it doesn't crash into
     the bottom-fill row — gives each layer its own clean zone. */
  @media (max-width:600px) {
    #adsModal .ads-platforms { height:100%; }
  }
  /* Base icon styles — every per-icon .adp-N rule below sets top/left/width/
     height/opacity/color/filter/transform inline. position:absolute MUST live
     here so the per-icon top/left actually positions them. */
  .adp-icon { position:absolute; }
  .adp-icon svg { width:100%; height:100%; display:block; }
  /* PACKED MOSAIC ── 144 icons. Bbox collision with rotation-aware padding
     (size × 1.05-1.32 by angle), variable gap 1.5-7px, dead-zone fills,
     exhaustive 9-18px gap-fill. Rotation forced ±11-60°. */
  .adp-1 { top:24.87%; left:47.16%; width:31px; height:31px; opacity:0.15; color:#6E8830; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-2 { top:6.47%; left:19.33%; width:29px; height:29px; opacity:0.14; color:#7D9C36; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(21deg); }
  .adp-3 { top:32.07%; left:30.08%; width:29px; height:29px; opacity:0.14; color:#7D9C36; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-26deg); }
  .adp-4 { top:91.15%; left:87.94%; width:27px; height:27px; opacity:0.13; color:#7D9C36; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(14deg); }
  .adp-5 { top:45.49%; left:30.98%; width:25px; height:25px; opacity:0.16; color:#C8FF00; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-6 { top:7.7%; left:2.49%; width:23px; height:23px; opacity:0.15; color:#7A9438; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(55deg); }
  .adp-7 { top:26.04%; left:37.16%; width:23px; height:23px; opacity:0.14; color:#6E8830; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-8 { top:92.03%; left:90.42%; width:23px; height:23px; opacity:0.13; color:#6E8830; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-9 { top:44.58%; left:76.75%; width:23px; height:23px; opacity:0.12; color:#7D9C36; filter:blur(1.4px); transform:translate(-50%,-50%) rotate(29deg); }
  .adp-10 { top:7.87%; left:22.32%; width:23px; height:23px; opacity:0.16; color:#6E8830; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-16deg); }
  .adp-11 { top:3.92%; left:93.03%; width:18px; height:18px; opacity:0.16; color:#7D9C36; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-12 { top:4.48%; left:16.89%; width:18px; height:18px; opacity:0.15; color:#8AA440; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(24deg); }
  .adp-13 { top:4.01%; left:87.89%; width:18px; height:18px; opacity:0.15; color:#6E8830; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(15deg); }
  .adp-14 { top:4.14%; left:90.26%; width:18px; height:18px; opacity:0.13; color:#94B340; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-15 { top:4.31%; left:96.03%; width:18px; height:18px; opacity:0.15; color:#94B340; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(15deg); }
  .adp-16 { top:4.63%; left:97.79%; width:18px; height:18px; opacity:0.13; color:#7A9438; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(22deg); }
  .adp-17 { top:20.23%; left:29.96%; width:18px; height:18px; opacity:0.13; color:#7D9C36; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(21deg); }
  .adp-18 { top:26.07%; left:73.54%; width:18px; height:18px; opacity:0.14; color:#6E8830; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-19 { top:25.9%; left:75.46%; width:18px; height:18px; opacity:0.14; color:#7A9438; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-20 { top:41.67%; left:83.73%; width:18px; height:18px; opacity:0.14; color:#6E8830; filter:blur(1.4px); transform:translate(-50%,-50%) rotate(-21deg); }
  .adp-21 { top:43.54%; left:48.05%; width:18px; height:18px; opacity:0.15; color:#94B340; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-16deg); }
  .adp-22 { top:49.57%; left:83.67%; width:18px; height:18px; opacity:0.13; color:#5C7228; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-23 { top:51.07%; left:17.78%; width:18px; height:18px; opacity:0.12; color:#7D9C36; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(28deg); }
  .adp-24 { top:51.05%; left:21.07%; width:18px; height:18px; opacity:0.16; color:#5C7228; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(13deg); }
  .adp-25 { top:51.89%; left:48.04%; width:18px; height:18px; opacity:0.15; color:#7A9438; filter:blur(1.0px); transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-26 { top:54.57%; left:1.25%; width:18px; height:18px; opacity:0.14; color:#7A9438; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(11deg); }
  .adp-27 { top:55.14%; left:3.17%; width:18px; height:18px; opacity:0.13; color:#7D9C36; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-21deg); }
  .adp-28 { top:56.78%; left:58.29%; width:18px; height:18px; opacity:0.13; color:#C8FF00; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(13deg); }
  .adp-29 { top:56.76%; left:60.59%; width:18px; height:18px; opacity:0.15; color:#7A9438; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-30 { top:56.66%; left:62.51%; width:18px; height:18px; opacity:0.13; color:#8AA440; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(15deg); }
  .adp-31 { top:74.69%; left:29.2%; width:18px; height:18px; opacity:0.14; color:#8AA440; filter:blur(1.4px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-32 { top:76.67%; left:30.86%; width:18px; height:18px; opacity:0.16; color:#5C7228; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-33 { top:82.97%; left:37.77%; width:18px; height:18px; opacity:0.14; color:#7A9438; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-26deg); }
  .adp-34 { top:86.07%; left:58.2%; width:18px; height:18px; opacity:0.14; color:#94B340; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-24deg); }
  .adp-35 { top:91.15%; left:37.71%; width:18px; height:18px; opacity:0.15; color:#5C7228; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-36 { top:93.87%; left:58.49%; width:18px; height:18px; opacity:0.12; color:#8AA440; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-37 { top:3.55%; left:86.21%; width:16px; height:16px; opacity:0.13; color:#6E8830; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-38 { top:4.53%; left:37.66%; width:16px; height:16px; opacity:0.12; color:#7A9438; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(15deg); }
  .adp-39 { top:13.03%; left:37.63%; width:16px; height:16px; opacity:0.13; color:#5C7228; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-40 { top:96.31%; left:63.55%; width:16px; height:16px; opacity:0.13; color:#7A9438; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-41 { top:96.31%; left:65.73%; width:16px; height:16px; opacity:0.16; color:#6E8830; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-42 { top:35.17%; left:47.89%; width:14px; height:14px; opacity:0.15; color:#7A9438; filter:blur(1.4px); transform:translate(-50%,-50%) rotate(11deg); }
  .adp-43 { top:51.86%; left:19.44%; width:14px; height:14px; opacity:0.15; color:#7A9438; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(11deg); }
  .adp-44 { top:53.14%; left:76.73%; width:14px; height:14px; opacity:0.13; color:#8AA440; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-45 { top:56.05%; left:54.29%; width:14px; height:14px; opacity:0.13; color:#7A9438; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-46 { top:56.13%; left:55.85%; width:14px; height:14px; opacity:0.15; color:#C8FF00; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-18deg); }
  .adp-47 { top:56.76%; left:84.04%; width:14px; height:14px; opacity:0.14; color:#5C7228; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-17deg); }
  .adp-48 { top:58.88%; left:88.86%; width:14px; height:14px; opacity:0.12; color:#7A9438; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(13deg); }
  .adp-49 { top:58.73%; left:90.72%; width:14px; height:14px; opacity:0.15; color:#7A9438; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-50 { top:58.8%; left:93.39%; width:14px; height:14px; opacity:0.13; color:#94B340; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-51 { top:64.68%; left:57.89%; width:14px; height:14px; opacity:0.16; color:#8AA440; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-52 { top:77.1%; left:57.93%; width:14px; height:14px; opacity:0.15; color:#94B340; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(14deg); }
  .adp-53 { top:3.09%; left:94.53%; width:12px; height:12px; opacity:0.14; color:#5C7228; filter:blur(2.0px); transform:translate(-50%,-50%) rotate(18deg); }
  .adp-54 { top:4.46%; left:99.35%; width:12px; height:12px; opacity:0.15; color:#7A9438; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(16deg); }
  .adp-55 { top:12.06%; left:17.08%; width:12px; height:12px; opacity:0.14; color:#8AA440; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(13deg); }
  .adp-56 { top:36.42%; left:95.84%; width:12px; height:12px; opacity:0.14; color:#5C7228; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(25deg); }
  .adp-57 { top:36.31%; left:97.8%; width:12px; height:12px; opacity:0.13; color:#7A9438; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(-24deg); }
  .adp-58 { top:36.26%; left:99.22%; width:12px; height:12px; opacity:0.13; color:#7D9C36; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-59 { top:42.35%; left:29.17%; width:12px; height:12px; opacity:0.12; color:#6E8830; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-60 { top:58.55%; left:87.36%; width:12px; height:12px; opacity:0.15; color:#94B340; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(-21deg); }
  .adp-61 { top:58.67%; left:92.03%; width:12px; height:12px; opacity:0.12; color:#6E8830; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(18deg); }
  .adp-62 { top:70.69%; left:57.95%; width:12px; height:12px; opacity:0.14; color:#7A9438; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-25deg); }
  .adp-63 { top:2.48%; left:73.27%; width:10px; height:10px; opacity:0.14; color:#5C7228; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-64 { top:2.49%; left:75.62%; width:10px; height:10px; opacity:0.15; color:#5C7228; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(11deg); }
  .adp-65 { top:2.48%; left:74.47%; width:10px; height:10px; opacity:0.12; color:#6E8830; filter:blur(1.4px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-66 { top:2.6%; left:91.63%; width:10px; height:10px; opacity:0.14; color:#7D9C36; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-67 { top:47.47%; left:29.2%; width:10px; height:10px; opacity:0.14; color:#94B340; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(17deg); }
  .adp-68 { top:58.46%; left:94.59%; width:10px; height:10px; opacity:0.13; color:#7A9438; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(21deg); }
  .adp-69 { top:58.72%; left:47.7%; width:10px; height:10px; opacity:0.14; color:#94B340; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-70 { top:59.5%; left:77.26%; width:10px; height:10px; opacity:0.14; color:#7D9C36; filter:blur(1.0px); transform:translate(-50%,-50%) rotate(37deg); }
  .adp-71 { top:63.97%; left:47.78%; width:10px; height:10px; opacity:0.13; color:#6E8830; filter:blur(1.0px); transform:translate(-50%,-50%) rotate(-22deg); }
  .adp-72 { top:64.76%; left:77.26%; width:10px; height:10px; opacity:0.15; color:#94B340; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(-19deg); }
  .adp-73 { top:69.4%; left:47.73%; width:10px; height:10px; opacity:0.12; color:#6E8830; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(21deg); }
  .adp-74 { top:69.37%; left:77.21%; width:10px; height:10px; opacity:0.14; color:#C8FF00; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-75 { top:74.47%; left:77.3%; width:10px; height:10px; opacity:0.13; color:#8AA440; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-76 { top:74.9%; left:47.74%; width:10px; height:10px; opacity:0.12; color:#8AA440; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(-28deg); }
  .adp-77 { top:79.61%; left:77.26%; width:10px; height:10px; opacity:0.16; color:#7D9C36; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-78 { top:84.66%; left:77.25%; width:10px; height:10px; opacity:0.13; color:#7A9438; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-79 { top:89.5%; left:77.26%; width:10px; height:10px; opacity:0.13; color:#C8FF00; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(-17deg); }
  .adp-80 { top:94.87%; left:77.26%; width:10px; height:10px; opacity:0.13; color:#7A9438; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(13deg); }
  .adp-81 { top:97.42%; left:37.46%; width:10px; height:10px; opacity:0.16; color:#6E8830; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-82 { top:3.75%; left:84.98%; width:9px; height:9px; opacity:0.16; color:#7A9438; filter:blur(1.2px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-83 { top:4.7%; left:0.49%; width:9px; height:9px; opacity:0.16; color:#7D9C36; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-84 { top:7.8%; left:65.16%; width:9px; height:9px; opacity:0.16; color:#94B340; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(19deg); }
  .adp-85 { top:9.98%; left:99.47%; width:9px; height:9px; opacity:0.14; color:#7A9438; filter:blur(1.0px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-86 { top:11.68%; left:0.49%; width:9px; height:9px; opacity:0.13; color:#5C7228; filter:blur(2.0px); transform:translate(-50%,-50%) rotate(14deg); }
  .adp-87 { top:15.68%; left:65.15%; width:9px; height:9px; opacity:0.14; color:#8AA440; filter:blur(1.8px); transform:translate(-50%,-50%) rotate(14deg); }
  .adp-88 { top:22.29%; left:65.15%; width:9px; height:9px; opacity:0.13; color:#7D9C36; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(27deg); }
  .adp-89 { top:33.24%; left:75.97%; width:9px; height:9px; opacity:0.12; color:#8AA440; filter:blur(1.9px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-90 { top:49.68%; left:16.41%; width:9px; height:9px; opacity:0.13; color:#8AA440; filter:blur(1.6px); transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-91 { top:54.25%; left:68.04%; width:9px; height:9px; opacity:0.14; color:#C8FF00; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(22deg); }
  .adp-92 { top:54.26%; left:69.25%; width:9px; height:9px; opacity:0.15; color:#5C7228; filter:blur(1.3px); transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-93 { top:54.47%; left:16.43%; width:9px; height:9px; opacity:0.15; color:#7D9C36; filter:blur(1.1px); transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-94 { top:57.82%; left:85.96%; width:9px; height:9px; opacity:0.12; color:#8AA440; filter:blur(1.5px); transform:translate(-50%,-50%) rotate(13deg); }
  .adp-95 { top:82.91%; left:43.61%; width:9px; height:9px; opacity:0.13; color:#5C7228; filter:blur(1.4px); transform:translate(-50%,-50%) rotate(12deg); }
  .adp-96 { top:87.65%; left:43.56%; width:9px; height:9px; opacity:0.12; color:#7D9C36; filter:blur(2.0px); transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-97 { top:92.82%; left:43.59%; width:9px; height:9px; opacity:0.13; color:#6E8830; filter:blur(1.7px); transform:translate(-50%,-50%) rotate(-18deg); }
  .adp-98 { top:37.21%; left:25.99%; width:55px; height:55px; opacity:0.21; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-20deg); }
  .adp-99 { top:66.75%; left:34.31%; width:55px; height:55px; opacity:0.26; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(-17deg); }
  .adp-100 { top:49.09%; left:51.14%; width:45px; height:45px; opacity:0.26; color:#9CC11A; filter:none; transform:translate(-50%,-50%) rotate(-28deg); }
  .adp-101 { top:71.6%; left:60.83%; width:45px; height:45px; opacity:0.24; color:#9CC11A; filter:none; transform:translate(-50%,-50%) rotate(-28deg); }
  .adp-102 { top:48.83%; left:80.5%; width:50px; height:50px; opacity:0.21; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(12deg); }
  .adp-103 { top:26.6%; left:33.8%; width:45px; height:45px; opacity:0.2; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(-24deg); }
  .adp-104 { top:29.67%; left:50.69%; width:45px; height:45px; opacity:0.22; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-105 { top:60.55%; left:29.64%; width:45px; height:45px; opacity:0.22; color:#98C220; filter:none; transform:translate(-50%,-50%) rotate(-23deg); }
  .adp-106 { top:41.27%; left:67.71%; width:50px; height:50px; opacity:0.23; color:#98C220; filter:none; transform:translate(-50%,-50%) rotate(28deg); }
  .adp-107 { top:78.52%; left:8.39%; width:95px; height:95px; opacity:0.23; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(-18deg); }
  .adp-108 { top:79.69%; left:82.13%; width:95px; height:95px; opacity:0.27; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-18deg); }
  .adp-109 { top:18.57%; left:80.45%; width:93px; height:93px; opacity:0.21; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(14deg); }
  .adp-110 { top:30.77%; left:19.9%; width:79px; height:79px; opacity:0.26; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-111 { top:16.15%; left:41.81%; width:77px; height:77px; opacity:0.28; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-112 { top:14.49%; left:68.78%; width:71px; height:71px; opacity:0.24; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-113 { top:83.79%; left:25.38%; width:65px; height:65px; opacity:0.23; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-114 { top:43.68%; left:72.83%; width:57px; height:57px; opacity:0.23; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(20deg); }
  .adp-115 { top:12.68%; left:26.38%; width:57px; height:57px; opacity:0.2; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-116 { top:73.6%; left:89.16%; width:53px; height:53px; opacity:0.21; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-21deg); }
  .adp-117 { top:88.87%; left:34.56%; width:51px; height:51px; opacity:0.23; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(-11deg); }
  .adp-118 { top:88.95%; left:40.96%; width:49px; height:49px; opacity:0.25; color:#9CC11A; filter:none; transform:translate(-50%,-50%) rotate(12deg); }
  .adp-119 { top:49.56%; left:97.53%; width:49px; height:49px; opacity:0.28; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(26deg); }
  .adp-120 { top:22.62%; left:97.5%; width:49px; height:49px; opacity:0.24; color:#98C220; filter:none; transform:translate(-50%,-50%) rotate(17deg); }
  .adp-121 { top:10.11%; left:51.19%; width:49px; height:49px; opacity:0.22; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(14deg); }
  .adp-122 { top:90.57%; left:2.17%; width:43px; height:43px; opacity:0.27; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(14deg); }
  .adp-123 { top:83.64%; left:65.29%; width:43px; height:43px; opacity:0.23; color:#98C220; filter:none; transform:translate(-50%,-50%) rotate(18deg); }
  .adp-124 { top:62.37%; left:65.39%; width:43px; height:43px; opacity:0.27; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-125 { top:45.0%; left:34.21%; width:41px; height:41px; opacity:0.28; color:#98C220; filter:none; transform:translate(-50%,-50%) rotate(-12deg); }
  .adp-126 { top:23.76%; left:2.14%; width:41px; height:41px; opacity:0.23; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-127 { top:13.55%; left:74.06%; width:41px; height:41px; opacity:0.26; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(11deg); }
  .adp-128 { top:68.58%; left:2.05%; width:41px; height:41px; opacity:0.25; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(-29deg); }
  .adp-129 { top:89.58%; left:46.04%; width:39px; height:39px; opacity:0.28; color:#88AA40; filter:none; transform:translate(-50%,-50%) rotate(-34deg); }
  .adp-130 { top:42.49%; left:2.35%; width:39px; height:39px; opacity:0.27; color:#9CC11A; filter:none; transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-131 { top:60.43%; left:24.64%; width:39px; height:39px; opacity:0.23; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(-29deg); }
  .adp-132 { top:90.12%; left:30.35%; width:39px; height:39px; opacity:0.23; color:#9CC11A; filter:none; transform:translate(-50%,-50%) rotate(27deg); }
  .adp-133 { top:7.72%; left:31.1%; width:37px; height:37px; opacity:0.24; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-134 { top:8.91%; left:35.22%; width:35px; height:35px; opacity:0.24; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(15deg); }
  .adp-135 { top:8.13%; left:46.78%; width:35px; height:35px; opacity:0.22; color:#B8E833; filter:none; transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-136 { top:90.52%; left:61.06%; width:35px; height:35px; opacity:0.23; color:#A8DD22; filter:none; transform:translate(-50%,-50%) rotate(24deg); }
  .adp-137 { top:30.0%; left:10.0%; width:130px; height:130px; opacity:0.44; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(18deg); }
  .adp-138 { top:27.31%; left:59.0%; width:125px; height:125px; opacity:0.34; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-18deg); }
  .adp-139 { top:32.0%; left:90.0%; width:120px; height:120px; opacity:0.4; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-15deg); }
  .adp-140 { top:55.0%; left:42.0%; width:120px; height:120px; opacity:0.38; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-141 { top:78.0%; left:18.0%; width:105px; height:105px; opacity:0.4; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(15deg); }
  .adp-142 { top:78.0%; left:72.0%; width:110px; height:110px; opacity:0.44; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-14deg); }
  .adp-143 { top:79.79%; left:52.77%; width:100px; height:100px; opacity:0.39; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(-13deg); }
  .adp-144 { top:80.52%; left:95.61%; width:95px; height:95px; opacity:0.4; color:#C8FF00; filter:none; transform:translate(-50%,-50%) rotate(15deg); }

  .ads-modal-close { position:absolute; top:18px; right:18px; width:38px; height:38px; background:rgba(5,5,7,.7); border:1px solid rgba(200,255,0,.25); border-radius:10px; color:var(--acid); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s, transform .2s, border-color .2s; }
  .ads-modal-close svg { width:18px; height:18px; }
  .ads-modal-close:hover { background:var(--acid); color:var(--black); border-color:var(--acid); transform:rotate(90deg); }

  .ads-modal-header { padding:36px 28px 24px; border-bottom:1px solid rgba(200,255,0,.10); position:relative; z-index:2; flex-shrink:0; }
  @media (min-width:769px) { .ads-modal-header { padding:48px 56px 32px; } }
  .ads-modal-eyebrow { font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--acid); margin-bottom:14px; display:flex; align-items:center; gap:12px; }
  .ads-modal-eyebrow::before { content:''; width:24px; height:1px; background:var(--acid); }
  .ads-modal-h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.5rem, 6vw, 5rem); line-height:.95; letter-spacing:-.01em; margin-bottom:14px; }
  .ads-modal-h1 span { color:var(--acid); }
  /* .55 put the dimmest text on the page over the busiest backdrop on the
     page. The halo that made this legible was scoped to <=600px only. */
  .ads-modal-sub { font-size:.82rem; line-height:1.7; color:rgba(240,238,232,.88); max-width:640px; font-family:'Space Mono',monospace; text-shadow:0 0 2px rgba(5,5,7,.95), 0 1px 10px rgba(5,5,7,.9); }
  /* Mobile: keep Space Mono's refined technical feel — weight 400, never
     bold (bold mono reads chunky). The visibility lift comes from full
     near-white color and a multi-layer halo shadow, not heavy weight. */
  @media (max-width:600px) {
    #adsModal .ads-modal-sub {
      color:rgba(248,247,243,.98);
      font-size:.86rem;
      font-weight:400;
      line-height:1.75;
      letter-spacing:.005em;
      text-shadow:
        0 0 1px rgba(5,5,7,1),
        0 0 4px rgba(5,5,7,1),
        0 0 10px rgba(5,5,7,.95),
        0 1px 18px rgba(5,5,7,.92),
        0 0 24px rgba(5,5,7,.65);
    }
  }

  /* Ads modal: header scrolls away with the content (not pinned). Align it to the
     scroll padding by zeroing its own horizontal padding. */
  /* full-bleed header: negative margins cancel the scroll padding so the banner spans edge-to-edge,
     padding re-insets the text so it still lines up with the section content */
  #adsModal .ads-modal-header { margin:0 -28px 6px; padding:6px 28px 22px; border-bottom:1px solid rgba(200,255,0,.10); overflow:hidden; }
  @media (min-width:769px) { #adsModal .ads-modal-header { margin:0 -56px 6px; padding:8px 56px 26px; } }
  .ads-modal-scroll { flex:1; overflow-y:auto; padding:14px 28px 56px; position:relative; z-index:2; }
  @media (min-width:769px) { .ads-modal-scroll { padding:16px 56px 72px; } }
  .ads-modal-scroll::-webkit-scrollbar { width:8px; }
  .ads-modal-scroll::-webkit-scrollbar-track { background:rgba(5,5,7,.4); }
  .ads-modal-scroll::-webkit-scrollbar-thumb { background:rgba(200,255,0,.18); }
  .ads-modal-scroll::-webkit-scrollbar-thumb:hover { background:rgba(200,255,0,.32); }

  .ads-section { padding:32px 0; border-bottom:1px solid rgba(200,255,0,.08); position:relative; }
  .ads-section:last-child { border-bottom:none; padding-bottom:24px; }
  .ads-section-head { display:flex; align-items:baseline; gap:18px; margin-bottom:14px; flex-wrap:wrap; position:relative; z-index:2; }
  .ads-section-num { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--acid); letter-spacing:.04em; line-height:1; }
  .ads-section-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:.95; letter-spacing:-.01em; text-transform:uppercase; }
  .ads-section-desc { font-size:.76rem; line-height:1.7; color:rgba(240,238,232,.5); max-width:560px; margin-bottom:22px; position:relative; z-index:2; }
  .ads-section > *:not(.ads-section-ghost):not(.ads-section-frame-corner) { position:relative; z-index:2; }

  /* ── SECTION VARIANTS — give each section its own visual character ── */
  /* Variant A · SPOTLIGHT — acid corner wash + giant ghost number watermark */
  .ads-section--spotlight {
    padding:48px 28px 40px;
    background:radial-gradient(ellipse 70% 60% at 95% 0%, rgba(200,255,0,.06) 0%, transparent 65%);
    border-bottom:1px solid rgba(200,255,0,.08);
    overflow:hidden;
  }
  .ads-section--spotlight .ads-section-ghost {
    position:absolute;
    top:-30px; right:-30px;
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(8rem, 18vw, 18rem);
    line-height:.82;
    color:rgba(200,255,0,.045);
    letter-spacing:-.03em;
    pointer-events:none;
    z-index:0;
    user-select:none;
  }

  /* Variant B · EDGE — acid left bar, slightly darker background, dense */
  .ads-section--edge {
    padding:36px 28px 32px 44px;
    background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 100%);
    border-top:1px solid rgba(200,255,0,.12);
    border-bottom:1px solid rgba(200,255,0,.06);
    overflow:hidden;
  }
  .ads-section--edge::before {
    content:'';
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:linear-gradient(180deg, var(--acid) 0%, rgba(200,255,0,.4) 100%);
    box-shadow:0 0 14px rgba(200,255,0,.5), 0 0 32px rgba(200,255,0,.2);
    z-index:1;
  }
  .ads-section--edge::after {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:60px;
    background:linear-gradient(180deg, rgba(200,255,0,.08), transparent);
    pointer-events:none;
    z-index:0;
  }

  /* Variant C · FRAME — cinema corner brackets, lighter bg, framed feel */
  .ads-section--frame {
    padding:44px 32px 40px;
    background:rgba(255,255,255,.015);
    border-bottom:none;
    margin-top:8px;
    overflow:hidden;
  }
  .ads-section--frame .ads-section-frame-corner {
    position:absolute;
    width:28px; height:28px;
    border-color:rgba(200,255,0,.55);
    pointer-events:none;
    z-index:1;
  }
  .ads-section--frame .ads-section-frame-corner.tl { top:12px; left:12px; border-top:1.5px solid; border-left:1.5px solid; }
  .ads-section--frame .ads-section-frame-corner.tr { top:12px; right:12px; border-top:1.5px solid; border-right:1.5px solid; }
  .ads-section--frame .ads-section-frame-corner.bl { bottom:12px; left:12px; border-bottom:1.5px solid; border-left:1.5px solid; }
  .ads-section--frame .ads-section-frame-corner.br { bottom:12px; right:12px; border-bottom:1.5px solid; border-right:1.5px solid; }

  .ads-grid { display:grid; gap:14px; }
  .ads-grid-ugc { grid-template-columns:1fr; }
  @media (min-width:600px) { .ads-grid-ugc { grid-template-columns:repeat(3, 1fr); } }
  .ads-grid-product { grid-template-columns:repeat(2, 1fr); }
  @media (min-width:600px) { .ads-grid-product { grid-template-columns:repeat(3, 1fr); } }
  /* Inline preview grid holds 4 tiles — keep it 2×2 on mobile and 4-across
     on desktop so no tile is ever left orphaned on a half-empty row. */
  .ads-grid-product-inline { grid-template-columns:repeat(2, 1fr); }
  @media (min-width:600px) { .ads-grid-product-inline { grid-template-columns:repeat(4, 1fr); } }
  /* "View all" CTA (Product Ads -> gallery) */
  .ads-viewall { display:inline-flex; align-items:center; gap:8px; margin-left:auto; align-self:center; padding:9px 18px; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acid); background:transparent; border:1px solid rgba(200,255,0,.4); border-radius:2px; cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
  .ads-viewall:hover { background:var(--acid); color:var(--black); border-color:var(--acid); }
  .ads-viewall .arw { transition:transform .25s; }
  .ads-viewall:hover .arw { transform:translateX(4px); }
  .ads-grid-static { grid-template-columns:1fr; }
  @media (min-width:600px) {
    .ads-grid-static { grid-template-columns:1fr 1fr 1fr; align-items:start; }
  }
  .ads-grid-logo { grid-template-columns:1fr; }
  @media (min-width:600px) { .ads-grid-logo { grid-template-columns:repeat(2, 1fr); } }

  .ad-tile { position:relative; overflow:hidden; background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%); border:1px solid rgba(200,255,0,.06); transition:border-color .3s, transform .4s cubic-bezier(.16,1,.3,1); cursor:pointer; }
  .ad-tile-ugc { aspect-ratio:9/16; }
  .ad-tile-product { aspect-ratio:4/5; }
  .ad-tile-static { aspect-ratio:1/1; }
  .ad-tile-logo { aspect-ratio:16/9; }
  .ad-tile:hover { border-color:var(--acid); transform:translateY(-3px); }
  .ad-tile::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(200,255,0,.10), transparent 60%); opacity:0; transition:opacity .4s; }
  .ad-tile:hover::before { opacity:1; }
  .ad-tile-glyph { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Bebas Neue',sans-serif; font-size:clamp(1.8rem, 4.5vw, 3.4rem); color:rgba(200,255,0,.10); letter-spacing:.06em; line-height:1; pointer-events:none; }
  .ad-tile-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; pointer-events:none; }
  /* Nuke every native video chrome element Safari/Chromium can render —
     the start-button overlay, the controls panel, the cast button, the
     enclosure. We drive playback ourselves so none of this is ever wanted. */
  .ad-tile-media::-webkit-media-controls,
  .ad-tile-media::-webkit-media-controls-enclosure,
  .ad-tile-media::-webkit-media-controls-panel,
  .ad-tile-media::-webkit-media-controls-start-playback-button,
  .ad-tile-media::-webkit-media-controls-overlay-play-button,
  .ad-tile-media::-webkit-media-controls-overlay-enclosure,
  .ad-tile-media::-internal-media-controls-overlay-cast-button {
    display:none !important;
    -webkit-appearance:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .ad-tile-video::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 28%, transparent 72%, rgba(0,0,0,.55) 100%); pointer-events:none; z-index:1; }
  .ad-tile-video .ad-tile-label { z-index:2; }
  /* Poster tile — embeds an iframe of poster.html and auto-scales it */
  .ad-tile-static.ad-tile-poster { aspect-ratio:9/16; }
  .ad-tile-poster .ad-tile-glyph { display:none; }
  .ad-tile-poster iframe { position:absolute; top:0; left:0; width:1290px; height:2295px; border:0; transform-origin:top left; pointer-events:none; background:var(--black); z-index:0; }
  .ad-tile-poster::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 35%); pointer-events:none; z-index:1; }
  .ad-tile-poster .ad-tile-label { z-index:2; }
  /* Square ad tile — embeds 1080×1080 iframe, contained + centered */
  .ad-tile-square-ad .ad-tile-glyph { display:none; }
  .ad-tile-square-ad iframe { position:absolute; top:0; left:0; width:1080px; height:1080px; border:0; transform-origin:top left; pointer-events:none; background:var(--black); z-index:0; }
  .ad-tile-square-ad::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 35%); pointer-events:none; z-index:1; }
  .ad-tile-square-ad .ad-tile-label { z-index:2; }
  /* Vertical 9:16 ad tile — embeds 1080×1920 iframe */
  .ad-tile-static.ad-tile-vertical-ad { aspect-ratio:9/16; }
  .ad-tile-vertical-ad .ad-tile-glyph { display:none; }
  .ad-tile-vertical-ad iframe { position:absolute; top:0; left:0; width:1080px; height:1920px; border:0; transform-origin:top left; pointer-events:none; background:var(--black); z-index:0; }
  .ad-tile-vertical-ad::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 35%); pointer-events:none; z-index:1; }
  .ad-tile-vertical-ad .ad-tile-label { z-index:2; }

  /* ── WAITING LIST MODAL ── small email-capture for Cohort One.
     Borrows the .learn-banner visual language so it feels native. */
  .waitlist-modal { position:fixed; inset:0; z-index:21000; display:none; }
  .waitlist-modal.open { display:block; }
  .waitlist-backdrop {
    position:absolute; inset:0;
    background:rgba(5,7,6,.78);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    animation:wlFade .35s ease both;
  }
  .waitlist-card {
    position:absolute; left:50%; top:50%;
    width:min(460px, calc(100vw - 32px));
    background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%);
    border:1px solid rgba(217,255,0,.22);
    border-radius:26px;
    padding:44px 36px 36px;
    color:var(--text);
    overflow:hidden;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -30px rgba(217,255,0,.4);
    animation:wlPop .45s cubic-bezier(.16,1,.3,1) both;
  }
  /* Faint top acid stripe — mirrors the service-card ::before treatment */
  .waitlist-card::before {
    content:''; position:absolute; top:0; left:26px; right:26px; height:2px;
    background:linear-gradient(90deg, var(--acid), #d8ff4d, var(--acid));
    z-index:3;
  }
  .waitlist-num {
    font-family:'Bebas Neue',sans-serif;
    position:absolute; right:-20px; bottom:-44px;
    margin:0;
    font-size:11rem; line-height:.78; letter-spacing:-.03em;
    color:transparent;
    background:linear-gradient(110deg,
      rgba(217,255,0,.07) 0%,
      rgba(217,255,0,.07) 38%,
      rgba(217,255,0,.34) 50%,
      rgba(217,255,0,.07) 62%);
    -webkit-background-clip:text; background-clip:text;
    pointer-events:none; z-index:0;
  }
  .waitlist-close {
    position:absolute; top:14px; right:14px;
    width:34px; height:34px; padding:7px;
    background:transparent; border:1px solid rgba(240,238,232,.16); color:var(--text);
    border-radius:8px;
    cursor:pointer; z-index:5;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, color .2s, transform .25s ease;
  }
  .waitlist-close:hover { border-color:var(--acid); color:var(--acid); transform:rotate(90deg); }
  .waitlist-close svg { width:100%; height:100%; }
  .waitlist-eyebrow {
    position:relative; z-index:1;
    font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase;
    color:var(--acid); margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
  }
  .waitlist-eyebrow::before { content:''; width:22px; height:1px; background:var(--acid); }
  .waitlist-title {
    position:relative; z-index:1;
    font-family:'Bebas Neue',sans-serif;
    font-size:2.4rem; line-height:.95; letter-spacing:.01em;
    margin:0 0 14px;
    color:var(--text);
  }
  .waitlist-sub {
    position:relative; z-index:1;
    font-size:.92rem; line-height:1.55;
    color:rgba(240,238,232,.78);
    margin:0 0 24px;
  }
  .waitlist-sub strong { color:var(--acid); font-weight:600; }
  .waitlist-form { position:relative; z-index:1; display:flex; flex-direction:column; }
  .waitlist-label {
    font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
    color:rgba(240,238,232,.5); margin-bottom:8px;
  }
  .waitlist-input {
    background:rgba(0,0,0,.4);
    border:1px solid rgba(240,238,232,.14);
    border-radius:8px;
    color:var(--text);
    padding:14px 16px;
    font-family:inherit; font-size:.95rem;
    outline:none;
    margin-bottom:14px;
    transition:border-color .2s ease, background .2s ease;
  }
  .waitlist-input::placeholder { color:rgba(240,238,232,.32); }
  .waitlist-input:focus { border-color:var(--acid); background:rgba(0,0,0,.55); }
  .waitlist-submit {
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    background:var(--acid); color:var(--black); border:none;
    border-radius:8px;
    padding:14px 20px;
    font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, opacity .2s ease;
  }
  .waitlist-submit:hover { transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(217,255,0,.6); }
  .waitlist-submit:disabled { opacity:.55; cursor:default; transform:none; }
  .waitlist-submit .wspin {
    display:none; width:14px; height:14px;
    border:1.5px solid rgba(5,7,6,.25); border-top-color:var(--black);
    border-radius:50%;
    animation:wlSpin .7s linear infinite;
  }
  .waitlist-submit.loading .wstxt,
  .waitlist-submit.loading .wsarr { opacity:.35; }
  .waitlist-submit.loading .wspin { display:block; position:absolute; }
  .waitlist-fineprint {
    margin:14px 0 0; font-size:.7rem; letter-spacing:.04em;
    color:rgba(240,238,232,.38); text-align:center;
  }
  .waitlist-error {
    display:none; margin:12px 0 0;
    font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
    color:#ff6b6b; text-align:center;
  }
  .waitlist-error.show { display:block; }
  .waitlist-success { display:none; position:relative; z-index:1; text-align:center; padding:8px 0 4px; }
  .waitlist-success.show { display:block; animation:wlPop .45s cubic-bezier(.16,1,.3,1) both; }
  .waitlist-success-ico {
    width:54px; height:54px; margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--acid); color:var(--acid); border-radius:50%;
    font-size:1.6rem; font-weight:700;
  }
  .waitlist-success-title {
    font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.02em;
    margin-bottom:8px; color:var(--text);
  }
  .waitlist-success-sub {
    font-size:.9rem; line-height:1.5;
    color:rgba(240,238,232,.7); margin:0;
  }
  @keyframes wlFade { from{opacity:0} to{opacity:1} }
  @keyframes wlPop {
    from{opacity:0; transform:translate(-50%, calc(-50% + 14px));}
    to  {opacity:1; transform:translate(-50%, -50%);}
  }
  @keyframes wlSpin { to{transform:rotate(360deg)} }
  .waitlist-card { transform:translate(-50%, -50%); }
  @media (max-width:480px) {
    /* Tighter corner on the smaller card, matching the console's 26 → 20 step.
       The acid stripe follows it in so its ends stay off the curve. */
    .waitlist-card { padding:36px 24px 28px; width:calc(100vw - 24px); border-radius:20px; }
    .waitlist-card::before { left:20px; right:20px; }
    .waitlist-title { font-size:2rem; }
    .waitlist-num { font-size:8rem; right:-12px; bottom:-32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .waitlist-backdrop, .waitlist-card, .waitlist-success { animation:none; }
    .waitlist-close:hover { transform:none; }
    .waitlist-submit:hover { transform:none; }
  }

  /* ── AD LIGHTBOX ── opens ads in an overlay instead of new tab */
  .ad-lightbox { position:fixed; inset:0; z-index:20000; display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .35s ease; padding:24px; }
  .ad-lightbox.open { display:flex; opacity:1; }
  .ad-lightbox-backdrop { position:absolute; inset:0; background:rgba(5,5,7,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .ad-lightbox-close { position:absolute; top:22px; right:22px; width:46px; height:46px; background:rgba(5,5,7,.85); border:1px solid rgba(200,255,0,.45); color:var(--acid); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s, transform .2s, border-color .2s; }
  .ad-lightbox-close svg { width:20px; height:20px; }
  .ad-lightbox-close:hover { background:var(--acid); color:var(--black); border-color:var(--acid); transform:rotate(90deg); }
  .ad-lightbox-frame { position:relative; width:1080px; height:1080px; transform-origin:center; transform:scale(.96); transition:transform .42s cubic-bezier(.16,1,.3,1); background:var(--black); border:1px solid rgba(200,255,0,.22); box-shadow:0 40px 120px rgba(0,0,0,.85), 0 0 200px rgba(200,255,0,.12); }
  .ad-lightbox.open .ad-lightbox-frame { transform:scale(1); }
  .ad-lightbox-frame iframe { width:100%; height:100%; border:0; display:block; background:var(--black); }

  /* ── VIDEO LIGHTBOX ── plays any ad video in-page */
  .video-lightbox { position:fixed; inset:0; z-index:20000; display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .35s ease; padding:24px; }
  .video-lightbox.open { display:flex; opacity:1; }
  .video-lightbox-backdrop { position:absolute; inset:0; background:rgba(5,5,7,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .video-lightbox-close { position:absolute; top:22px; right:22px; width:46px; height:46px; background:rgba(5,5,7,.85); border:1px solid rgba(200,255,0,.45); color:var(--acid); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s, transform .2s, border-color .2s; }
  .video-lightbox-close svg { width:20px; height:20px; }
  .video-lightbox-close:hover { background:var(--acid); color:var(--black); border-color:var(--acid); transform:rotate(90deg); }
  .video-lightbox-stage { position:relative; display:flex; transform:scale(.96); transition:transform .42s cubic-bezier(.16,1,.3,1); max-width:95vw; max-height:90vh; }
  .video-lightbox.open .video-lightbox-stage { transform:scale(1); }
  .video-lightbox-stage video { max-width:95vw; max-height:90vh; display:block; background:var(--black); border:1px solid rgba(200,255,0,.22); box-shadow:0 40px 120px rgba(0,0,0,.85), 0 0 200px rgba(200,255,0,.12); }
  .ad-tile-label { position:absolute; bottom:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-end; gap:8px; z-index:2; }
  .ad-tile-tag { font-family:'Space Mono',monospace; font-size:.48rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(240,238,232,.5); }
  .ad-tile-num { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--acid); line-height:1; }

  /* ── LEARN THE SYSTEM MODAL — course showcase ── */
  .learn-paths { display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px; }
  @media (min-width:769px) { .learn-paths { grid-template-columns:1fr 1fr; } }
  .learn-path { background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%); border:1px solid rgba(200,255,0,.10); padding:28px 26px 30px; position:relative; }
  .learn-path-tag { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.35em; text-transform:uppercase; color:var(--acid); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
  .learn-path-tag::before { content:''; width:22px; height:1px; background:var(--acid); }
  .learn-path-title { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:800; color:var(--white); margin-bottom:10px; line-height:1.15; }
  .learn-path-desc { font-size:.78rem; line-height:1.7; color:rgba(240,238,232,.55); margin-bottom:16px; }
  .learn-path-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .learn-path-list li { font-size:.74rem; line-height:1.5; color:rgba(240,238,232,.7); display:flex; gap:10px; }
  .learn-path-list li::before { content:'→'; color:var(--acid); }

  /* ── LEARN MODAL — TIMELINE LAYOUT (curriculum as a vertical journey) ── */
  .learn-hero-stats {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:rgba(200,255,0,.10);
    border:1px solid rgba(200,255,0,.10);
    margin-bottom:8px;
  }
  @media (min-width:769px) { .learn-hero-stats { grid-template-columns:repeat(4, 1fr); } }
  .learn-hero-stat {
    background:linear-gradient(165deg, #12121a 0%, #0a0a12 100%);
    padding:22px 18px;
    display:flex; flex-direction:column;
    align-items:flex-start; gap:6px;
    position:relative;
    overflow:hidden;
  }
  .learn-hero-stat::after {
    content:'';
    position:absolute; bottom:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, var(--acid), transparent 60%);
    opacity:.4;
  }
  .learn-hero-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:2.6rem;
    color:var(--acid);
    line-height:.9;
    letter-spacing:.02em;
  }
  .learn-hero-lbl {
    font-family:'Space Mono',monospace;
    font-size:.5rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(240,238,232,.55);
  }

  .learn-timeline {
    position:relative;
    padding-left:56px;
    margin-top:14px;
  }
  /* The vertical acid line itself */
  .learn-timeline::before {
    content:'';
    position:absolute;
    left:22px; top:18px; bottom:18px;
    width:2px;
    background:linear-gradient(180deg,
      var(--acid) 0%,
      rgba(200,255,0,.7) 50%,
      rgba(200,255,0,.3) 100%);
    box-shadow:0 0 10px rgba(200,255,0,.35);
  }
  .learn-timeline-item {
    position:relative;
    padding:14px 22px 18px 22px;
    margin-bottom:10px;
    background:linear-gradient(165deg, #12121a 0%, #0a0a12 100%);
    border:1px solid rgba(200,255,0,.08);
    transition:border-color .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
  }
  .learn-timeline-item:hover {
    border-color:rgba(200,255,0,.35);
    transform:translateX(4px);
  }
  /* Dot marker on the line */
  .learn-timeline-item::before {
    content:'';
    position:absolute;
    left:-41px; top:22px;
    width:16px; height:16px;
    border-radius:50%;
    background:var(--acid);
    border:3px solid #050507;
    box-shadow:0 0 0 1px var(--acid), 0 0 14px rgba(200,255,0,.55);
    z-index:2;
  }
  /* Horizontal connector from line to item */
  .learn-timeline-item::after {
    content:'';
    position:absolute;
    left:-25px; top:30px;
    width:22px; height:1px;
    background:rgba(200,255,0,.35);
  }
  .learn-timeline-meta {
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:6px;
    flex-wrap:wrap;
  }
  .learn-timeline-mid {
    font-family:'Bebas Neue',sans-serif;
    font-size:1.45rem;
    color:var(--acid);
    line-height:1;
    letter-spacing:.04em;
  }
  .learn-timeline-week {
    font-family:'Space Mono',monospace;
    font-size:.5rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(240,238,232,.4);
  }
  .learn-timeline-title {
    font-family:'Syne',sans-serif;
    font-size:1.05rem;
    font-weight:800;
    color:var(--white);
    line-height:1.15;
    margin-bottom:4px;
  }
  .learn-timeline-desc {
    font-family:'Space Mono',monospace;
    font-size:.68rem;
    line-height:1.7;
    color:rgba(240,238,232,.55);
  }

  .learn-perks { display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px; }
  @media (min-width:600px) { .learn-perks { grid-template-columns:1fr 1fr; } }
  .learn-perk { display:flex; align-items:flex-start; gap:16px; padding:18px 20px; background:linear-gradient(165deg, #15151c 0%, #0c0c14 100%); border:1px solid rgba(200,255,0,.08); }
  .learn-perk-num { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:var(--acid); line-height:1; flex-shrink:0; }
  .learn-perk-txt { display:flex; flex-direction:column; gap:4px; font-size:.7rem; line-height:1.55; color:rgba(240,238,232,.6); }
  .learn-perk-txt strong { font-family:'Syne',sans-serif; font-size:.85rem; font-weight:800; color:var(--white); }

  /* ── LEARN MODAL · EMAIL GATE ──
     Locks the curriculum + perks + CTA behind email capture.
     Two-step: email submission → PIN delivered → PIN entry → unlock. */
  .learn-locked-content {
    position:relative;
    min-height:480px;
  }
  .learn-locked-content.locked > section,
  .learn-locked-content.locked > .ads-section {
    filter:blur(12px) brightness(.5);
    pointer-events:none;
    user-select:none;
  }
  .learn-gate {
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:60px 24px 40px;
    background:linear-gradient(180deg, rgba(5,5,7,.7) 0%, rgba(5,5,7,.95) 35%, rgba(5,5,7,.97) 100%);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:opacity .55s ease;
  }
  .learn-gate.unlocked { opacity:0; pointer-events:none; }
  .learn-gate-card {
    width:100%;
    max-width:500px;
    text-align:center;
    padding:36px 32px 32px;
    background:linear-gradient(165deg, #12121a 0%, #0a0a14 100%);
    border:1px solid rgba(200,255,0,.25);
    box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 60px rgba(200,255,0,.12);
    position:relative;
  }
  .learn-gate-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--acid) 50%, transparent);
  }
  .learn-gate-eyebrow {
    font-family:'Space Mono',monospace;
    font-size:.55rem;
    letter-spacing:.4em;
    text-transform:uppercase;
    color:var(--acid);
    margin-bottom:18px;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .learn-gate-eyebrow::before,
  .learn-gate-eyebrow::after { content:''; width:24px; height:1px; background:var(--acid); opacity:.4; }
  .learn-gate-icon {
    display:flex; align-items:center; justify-content:center;
    width:54px; height:54px;
    margin:0 auto 18px;
    border:1.5px solid var(--acid);
    border-radius:50%;
    color:var(--acid);
    box-shadow:0 0 24px rgba(200,255,0,.3), inset 0 0 12px rgba(200,255,0,.1);
  }
  .learn-gate-icon svg { width:22px; height:22px; }
  .learn-gate-title {
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    line-height:.92;
    letter-spacing:-.01em;
    margin-bottom:14px;
    color:var(--white);
  }
  .learn-gate-title em {
    -webkit-text-stroke:1.5px var(--acid);
    color:transparent;
    font-style:normal;
  }
  .learn-gate-sub {
    font-family:'Space Mono',monospace;
    font-size:.72rem;
    line-height:1.7;
    color:rgba(240,238,232,.6);
    margin-bottom:24px;
    max-width:380px;
    margin-left:auto; margin-right:auto;
  }
  .learn-gate-form {
    display:flex; flex-direction:column; gap:10px;
  }
  .learn-gate-input {
    width:100%;
    padding:14px 16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(200,255,0,.15);
    color:var(--white);
    font-family:'Space Mono',monospace;
    font-size:.78rem;
    letter-spacing:.04em;
    outline:none;
    transition:border-color .25s ease, background .25s ease;
  }
  .learn-gate-input::placeholder { color:rgba(240,238,232,.3); }
  .learn-gate-input:focus {
    border-color:var(--acid);
    background:rgba(200,255,0,.04);
  }
  .learn-gate-btn {
    width:100%;
    padding:15px 18px;
    background:var(--acid);
    color:var(--black);
    border:none;
    font-family:'Space Mono',monospace;
    font-weight:700;
    font-size:.66rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s ease, padding-right .25s ease;
  }
  .learn-gate-btn:hover { background:#d8ff4d; padding-right:32px; }
  .learn-gate-meta {
    margin-top:18px;
    font-family:'Space Mono',monospace;
    font-size:.5rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:rgba(240,238,232,.35);
  }

  /* PIN entry state (replaces the email form once submitted) */
  .learn-gate-pin-view { display:none; }
  .learn-gate.pin-sent .learn-gate-lock-view { display:none; }
  .learn-gate.pin-sent .learn-gate-pin-view { display:block; }

  .learn-gate-pin-display {
    margin:0 0 22px;
    padding:14px 16px;
    background:rgba(200,255,0,.05);
    border:1px dashed rgba(200,255,0,.3);
  }
  .learn-gate-pin-display-label {
    font-family:'Space Mono',monospace;
    font-size:.45rem;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:rgba(240,238,232,.4);
    margin-bottom:8px;
  }
  .learn-gate-pin-digits {
    font-family:'Bebas Neue',sans-serif;
    font-size:2.4rem;
    line-height:1;
    letter-spacing:.18em;
    color:var(--acid);
    text-shadow:0 0 12px rgba(200,255,0,.5);
  }
  .learn-gate-pin-inputs {
    display:flex; gap:8px; justify-content:center; margin-bottom:14px;
  }
  .learn-gate-pin-input {
    width:42px; height:54px;
    text-align:center;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(200,255,0,.2);
    color:var(--acid);
    font-family:'Bebas Neue',sans-serif;
    font-size:1.7rem;
    line-height:1;
    outline:none;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .learn-gate-pin-input:focus {
    border-color:var(--acid);
    background:rgba(200,255,0,.06);
    transform:translateY(-1px);
  }
  .learn-gate-pin-form.error .learn-gate-pin-input { border-color:var(--crimson); color:var(--crimson); }
  .learn-gate-pin-form.error { animation:pinShake .5s ease-in-out; }
  @keyframes pinShake {
    0%, 100% { transform:translateX(0); }
    20%, 60% { transform:translateX(-7px); }
    40%, 80% { transform:translateX(7px); }
  }
  .learn-gate-email-shown {
    color:var(--acid);
    font-weight:700;
  }
  .learn-gate-resend {
    display:inline-block;
    margin-top:14px;
    background:none;
    border:none;
    font-family:'Space Mono',monospace;
    font-size:.55rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(240,238,232,.5);
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .learn-gate-resend:hover { color:var(--acid); }

  .learn-cta { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; background:var(--acid); color:var(--black); text-decoration:none; font-family:'Space Mono',monospace; font-weight:700; font-size:.92rem; letter-spacing:.28em; text-transform:uppercase; box-shadow:0 0 60px rgba(200,255,0,.22); transition:padding-right .25s ease; margin-top:8px; }
  .learn-cta:hover { padding-right:38px; }
  .learn-cta-arrow { font-size:1.3rem; transition:transform .25s ease; }
  .learn-cta:hover .learn-cta-arrow { transform:translateX(6px); }

  .chk input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:15px; height:15px; border:1px solid rgba(240,238,232,.2); background:rgba(240,238,232,.04); flex-shrink:0; position:relative; cursor:pointer; }
  .chk input:checked { background:var(--acid); border-color:var(--acid); }
  .chk input:checked::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); font-size:9px; color:var(--black); font-weight:700; }
  .chk label { font-size:.64rem; color:rgba(240,238,232,.5); cursor:pointer; }
  /* The primary CTA is a crafted object, not a flat slab: a lit-top-to-deep-
     bottom gradient body, an inset highlight along the top edge, and a
     grounded shadow tinted with the accent so it sits on the page. The sheen
     (::after) sweeps across on hover. */
  .fsubmit {
    position:relative; overflow:hidden; width:100%;
    background:linear-gradient(180deg,#dcff4d 0%,var(--acid) 46%,#a8d600 100%);
    color:var(--black); border:none;
    font-family:'Space Mono',monospace; font-size:.74rem; letter-spacing:.18em;
    text-transform:uppercase; font-weight:700; padding:17px 28px; cursor:pointer;
    margin-top:6px; display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(0,0,0,.22),
      0 10px 28px rgba(200,255,0,.16);
    transition:filter .2s, transform .15s, box-shadow .2s;
  }
  .fsubmit::after {
    content:''; position:absolute; top:0; bottom:0; width:45%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:translateX(-180%); pointer-events:none;
  }
  .fsubmit:hover { filter:brightness(1.07); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22), 0 14px 34px rgba(200,255,0,.24); }
  .fsubmit:hover::after { transform:translateX(340%); transition:transform .75s cubic-bezier(.16,1,.3,1); }
  .fsubmit:active { transform:translateY(0); }
  .fsubmit .stxt, .fsubmit .sarr { position:relative; z-index:1; }
  .sarr { transition:transform .2s; }
  .fsubmit:hover .sarr { transform:translateX(4px); }
  .ferr { display:none; background:rgba(255,23,68,.08); border:1px solid rgba(255,23,68,.3); padding:11px 14px; font-size:.67rem; color:#FF6688; margin-top:10px; line-height:1.5; }
  .ferr.show { display:block; }
  .spin { width:17px;height:17px;border:2px solid rgba(5,5,7,.3);border-top-color:var(--black);border-radius:50%;animation:spinA .6s linear infinite;display:none; }
  @keyframes spinA{to{transform:rotate(360deg)}}
  .fsubmit.loading .stxt,.fsubmit.loading .sarr { display:none; }
  .fsubmit.loading .spin { display:block; }
  .fsuccess { display:none; text-align:center; padding:50px 16px; }
  .fsuccess.show { display:flex; flex-direction:column; align-items:center; gap:14px; }
  .sico { width:60px;height:60px;background:rgba(200,255,0,.1);border:1px solid var(--acid);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem; }
  .stitle2 { font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800; }
  .sbody { font-size:.72rem;color:rgba(240,238,232,.5);line-height:1.8;max-width:260px; }

  /* ── FOOTER ── */
  /* ──────────── FOOTER ──────────── */
  /* ──────────── FOOTER — single tight row ──────────── */
  footer {
    position:relative;
    /* viewport-fit=cover lets the page reach the home indicator, so the last
       row needs the bottom inset or it sits under it. */
    padding:24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-wrap:wrap;
    align-items:center;
    gap:20px;
    overflow:hidden;
    background:#050706;
  }
  @media (min-width:769px) { footer { padding:28px 40px; gap:24px; } }

  /* Logo absolute left. Status sits next. IG/TT + © grouped to the right
     via margin-left:auto on the links block, which pushes both right. */
  .footer-links { margin-left:auto; }

  /* Thin acid divider at the top — replaces the muted border */
  footer::after {
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent 0%, rgba(217,255,0,.45) 50%, transparent 100%);
    z-index:2;
  }

  /* Subtle world-map echo background */
  footer::before {
    content:'';
    position:absolute; inset:0;
    background-image:url(world-map.svg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:120% auto;
    opacity:.05;
    filter:drop-shadow(0 0 60px rgba(217,255,0,.2));
    pointer-events:none;
    z-index:0;
  }

  .footer-logo, .footer-links, .footer-copy, .footer-status, .footer-cta {
    position:relative; z-index:1;
  }

  .footer-logo img {
    height:34px; width:auto; object-fit:contain;
    /* Belt-and-braces — any dark pixel below footer bg lum becomes invisible */
    mix-blend-mode:lighten;
    filter:drop-shadow(0 0 6px rgba(217,255,0,.18));
  }
  .footer-copy { font-size:.58rem; letter-spacing:.18em; color:rgba(240,238,232,.3); text-transform:uppercase; }
  .footer-links { display:flex; gap:24px; flex-wrap:wrap; }
  .footer-links a { font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(240,238,232,.4); text-decoration:none; transition:color .2s; }
  .footer-links a:hover { color:var(--acid); }

  /* Live status pill — pulsing acid dot, sits in the footer row */
  .footer-status {
    display:inline-flex; align-items:center; gap:9px;
    padding:7px 12px;
    background:rgba(217,255,0,.05);
    border:1px solid rgba(217,255,0,.28);
    font-family:'Space Mono',monospace;
    font-size:.52rem; letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(240,238,232,.65);
    white-space:nowrap;
  }
  .footer-status strong { color:var(--acid); font-weight:400; }

  /* Work line — deliberately reads as a contact point, not a nav link, so
     it carries the same weight as the status pill beside it. */
  .footer-phone {
    display:inline-flex; align-items:center; gap:9px;
    padding:7px 12px;
    border:1px solid rgba(217,255,0,.28);
    font-family:'Space Mono',monospace;
    font-size:.52rem; letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(240,238,232,.65);
    text-decoration:none;
    white-space:nowrap;
    transition:color .2s, border-color .2s, background-color .2s;
  }
  .footer-phone svg { width:11px; height:11px; flex-shrink:0; color:var(--acid); }
  .footer-phone:hover,
  .footer-phone:focus-visible { color:var(--acid); border-color:rgba(217,255,0,.6); background:rgba(217,255,0,.05); }
  /* On a phone this is the highest-intent action on the page, and it is the
     one footer item that is actually tappable — so give it a proper 44px
     target rather than matching the (non-interactive) status pill's 28px. */
  /* Was padding:14px 16px / .58rem / 44px min-height — twice the status pill
     beside it, and the loudest thing in the footer. Matched to the pill.
     38px is still a usable target; the full 44px cost more than it was worth. */
  @media (max-width:768px) {
    .footer-phone { padding:9px 12px; font-size:.52rem; min-height:38px; box-sizing:border-box; }
    .footer-phone svg { width:11px; height:11px; }
    .footer-status { min-height:38px; box-sizing:border-box; }
  }
  /* Phones: the footer was a wrapping flex row, so the pills each took a line
     of their own and the whole block read as a ragged left-aligned stack.
     A two-column grid puts them side by side; everything else spans. Their
     tracking also comes in — at .22em the status pill alone was 200px of a
     342px row, which is what made them impossible to pair. */
  @media (max-width:600px) {
    footer { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; align-items:center; }
    .footer-logo   { grid-column:1 / -1; }
    .footer-status { grid-column:1; justify-content:center; font-size:.44rem; letter-spacing:.1em; padding:9px 8px; }
    .footer-phone  { grid-column:2; justify-content:center; font-size:.46rem; letter-spacing:.1em; padding:9px 8px; }
    /* Centred on phones: left-aligned they trailed off under a centred pair
       of pills and read as leftovers rather than a closing line. */
    /* margin-left:auto on the base rule right-aligns this in the desktop row;
       in the mobile grid that same auto pushed it 73px off centre. */
    .footer-links  { grid-column:1 / -1; justify-content:center; gap:20px; margin-left:0; }
    .footer-copy   { grid-column:1 / -1; text-align:center; line-height:1.7; }
    .footer-logo   { justify-self:center; }
  }
  .footer-status-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--acid);
    box-shadow:0 0 8px var(--acid);
    animation:footerStatusPulse 2s infinite ease-in-out;
    flex-shrink:0;
  }
  @keyframes footerStatusPulse {
    0%,100% { opacity:1; }
    50% { opacity:.4; }
  }

  /* Book-a-call CTA pill */
  .footer-cta {
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 16px;
    background:var(--acid); color:var(--black);
    font-family:'Space Mono',monospace;
    font-size:.55rem; letter-spacing:.24em;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    transition:transform .25s ease, padding-right .3s ease, box-shadow .25s ease;
  }
  .footer-cta:hover {
    transform:translateY(-2px);
    padding-right:22px;
    box-shadow:0 6px 18px -4px rgba(217,255,0,.45);
  }
  .footer-cta-arrow { font-size:.7rem; transition:transform .3s ease; }
  .footer-cta:hover .footer-cta-arrow { transform:translateX(3px); }

  /* Three-column info row */
  .footer-cols {
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:36px;
    border-bottom:1px solid var(--border-soft, rgba(255,255,255,.06));
    margin-bottom:24px;
  }
  @media (min-width:769px) {
    .footer-cols { grid-template-columns:1fr 1fr 1fr; gap:48px; }
  }
  .footer-col-label {
    font-family:'Space Mono', monospace;
    font-size:.55rem; letter-spacing:.35em;
    text-transform:uppercase;
    color:var(--acid);
    opacity:.8;
    margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
  }
  .footer-col-label::before {
    content:''; width:22px; height:1px; background:var(--acid);
  }
  .footer-col-body {
    font-family:'Space Mono', monospace;
    font-size:.78rem; line-height:1.7;
    color:rgba(240,238,232,.7);
  }
  .footer-col-body a {
    color:rgba(240,238,232,.7);
    text-decoration:none;
    transition:color .2s ease;
  }
  .footer-col-body a:hover { color:var(--acid); }
  .footer-col-body strong { color:var(--white); font-weight:400; }
  .footer-col-coord {
    font-family:'Space Mono', monospace;
    font-size:.65rem;
    color:var(--acid);
    margin-top:6px;
    opacity:.7;
  }

  /* Social pill links */
  .footer-socials {
    display:flex; flex-direction:column; gap:8px;
  }
  .footer-social {
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Mono', monospace;
    font-size:.7rem; letter-spacing:.18em;
    color:rgba(240,238,232,.7);
    text-transform:uppercase;
    text-decoration:none;
    transition:color .25s ease, padding-left .25s ease;
  }
  .footer-social::before {
    content:'→';
    color:var(--acid);
    font-size:.85rem;
    transition:transform .25s ease;
  }
  .footer-social:hover { color:var(--acid); padding-left:4px; }
  .footer-social:hover::before { transform:translateX(2px); }

  /* CTA-style email link */
  .footer-cta-mail {
    display:inline-flex; align-items:center; gap:10px;
    margin-top:10px;
    padding:9px 14px;
    background:transparent;
    border:1px solid rgba(217,255,0,.4);
    color:var(--acid);
    font-family:'Space Mono', monospace;
    font-size:.6rem; letter-spacing:.22em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .25s ease, color .25s ease;
  }
  .footer-cta-mail:hover { background:var(--acid); color:var(--black); }

  /* Bottom strip: copyright + live status */
  .footer-bottom {
    display:flex; flex-wrap:wrap; justify-content:space-between;
    align-items:center; gap:14px;
    font-family:'Space Mono', monospace;
    font-size:.55rem; letter-spacing:.28em;
    text-transform:uppercase;
    color:rgba(240,238,232,.35);
  }
  .footer-status {
    display:inline-flex; align-items:center; gap:8px;
  }
  .footer-status-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--acid);
    box-shadow:0 0 8px var(--acid);
    animation:footerPulse 2s ease-in-out infinite;
  }
  @keyframes footerPulse {
    0%,100% { opacity:1; }
    50% { opacity:.4; }
  }
  .footer-status strong {
    color:var(--acid);
    font-weight:400;
  }

  /* ── REVEAL ── */
  .reveal { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal.visible { opacity:1; transform:translateY(0); }
  /* `.visible` is only ever added by the observer in faid.js, so with
     scripting off every .reveal block stays at opacity:0 — the content is
     there but unreadable. This restores it without an inline script (which
     the CSP would have to allow) or a class the page has to boot to remove.
     Scoped to #booking for now; the same hole exists section-wide. */
  @media (scripting: none) {
    .booking .reveal { opacity:1; transform:none; }
  }

  /* ── STATUS ── */
  .status-chip { display:inline-flex;align-items:center;gap:8px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,238,232,.5);border:1px solid var(--border);padding:7px 14px;margin-bottom:40px; }
  .sdot { width:6px;height:6px;border-radius:50%;background:var(--acid);animation:bl 2s ease-in-out infinite; }
  @keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}

  /* ══════════════════════════════════════════════════════════════════
     CONVERSATION FORM — one question at a time (#booking)

     Polarity matters here: the DEFAULT styles show every question
     stacked, exactly like the old form. The stepping behaviour only
     switches on once faid.js adds `.js-steps` to `.qwrap`. So if the
     script fails to load, a visitor still gets a working form rather
     than a card with six invisible questions in it.
  ══════════════════════════════════════════════════════════════════ */

  /* ── The console ──
     This panel used to be a #1A1A22 blue-grey card, a tone that appears
     nowhere else on the site, so it read as a stock form dropped onto a neon
     page. It is now the site's own black with an acid grid wash, a hairline
     keyline and corner brackets — a piece of FAID hardware. */
  .qwrap {
    position:relative; isolation:isolate;
    /* Built from the SAME material as the operate/service cards rather than a
       third surface of its own: their gradient, their corner, their inset
       hairline. The first pass took this panel down to near-black, which read
       as no panel at all — the top of this ramp is a genuine lift off the
       #050507 page, which is what makes it an object. Their ramp reaches
       page-black by 44%, right for a ~400px card but flat across the bottom
       half of a 570px console, so this one falls more shallowly. */
    background:linear-gradient(180deg,#16161f 0%,#111119 50%,#0d0d15 100%);
    border:0;
    border-radius:26px;
    /* Corner + overflow together mean the progress strip, the grid wash and
       the step sweep all follow the curve with no extra masking. */
    overflow:hidden;
    box-shadow:
      inset 0 0 0 1px rgba(200,255,0,.38),
      0 26px 60px -30px rgba(0,0,0,.95),
      0 0 46px -14px rgba(200,255,0,.34);
  }
  @media (max-width:768px) { .qwrap { border-radius:20px; } }
  /* The base .fwrap paints a 3px acid bar across the top. Here that
     space belongs to the progress track instead. */
  .qwrap::before { display:none; }
  /* Grid wash. Sized in px so it stays a fixed technical grid rather than
     stretching with the panel, and faded out downward so it never competes
     with the questions. */
  .qwrap::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      repeating-linear-gradient(90deg, rgba(200,255,0,.045) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(0deg,  rgba(200,255,0,.045) 0 1px, transparent 1px 34px);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 55%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 55%);
  }

  /* The square corner brackets went with the square panel — L-shapes on a
     26px curve read as a mistake. The console cue now comes from the
     segmented readout, the live dot and the grid, not from hard corners. */

  /* Everything real sits above the wash. */
  .qform, .fsuccess { position:relative; z-index:1; }

  /* ── Progress: a segmented readout, not a plain bar ──
     `--qtotal` is written by faid.js on every paint so the segment count
     follows the live path (the learn branch is six questions, not seven).
     The gaps are painted over the fill by ::after, so the fill itself is
     still one cheap scaleX transform. */
  /* z-index keeps the track above .qwrap::after's grid wash. Inset by the
     corner radius so the strip lives on the straight part of the top edge —
     pinned to left:0 the curve would eat the first and last segments. */
  .qprog { position:absolute; top:0; left:26px; right:26px; height:3px; background:rgba(240,238,232,.07); overflow:hidden; z-index:2; --qtotal:7; }
  @media (max-width:768px) { .qprog { left:20px; right:20px; } }
  .qprog-fill { display:block; width:100%; height:100%; background:linear-gradient(90deg,rgba(200,255,0,.55),var(--acid)); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s cubic-bezier(.16,1,.3,1); box-shadow:0 0 10px rgba(200,255,0,.5); }
  .qprog::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(100% / var(--qtotal) - 3px),
      #12121b  calc(100% / var(--qtotal) - 3px),
      #12121b  calc(100% / var(--qtotal)));
  }
  .qwrap:not(.js-steps) .qprog { display:none; }

  /* ── Header: step counter + back ── */
  .qhead { display:flex; align-items:center; gap:14px; margin-bottom:22px; min-height:20px; }
  .qcount { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(200,255,0,.7); display:flex; align-items:center; gap:9px; font-variant-numeric:tabular-nums; }
  /* Live indicator — the same blink the status chip uses elsewhere, so the
     console reads as part of the same system. */
  .qcount::before { content:''; width:5px; height:5px; background:var(--acid); box-shadow:0 0 8px rgba(200,255,0,.8); animation:bl 2s ease-in-out infinite; flex-shrink:0; }
  .qcount.is-tick { animation:qTick .4s ease; }
  @keyframes qTick { 0%{opacity:.35} 100%{opacity:1} }
  /* Fills the gap the old space-between left, and ties the counter to the
     back button as one instrument strip. */
  .qrule { flex:1; height:1px; background:linear-gradient(90deg, rgba(200,255,0,.28), rgba(240,238,232,.06)); }
  .qback { background:none; border:none; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,238,232,.35); cursor:pointer; padding:4px 0; transition:color .2s,opacity .25s; }
  .qback:hover { color:var(--acid); }
  .qback[hidden], .qwrap:not(.js-steps) .qhead { display:none; }

  /* ── Stage + steps ── */
  .qstage { position:relative; transition:height .42s cubic-bezier(.16,1,.3,1); }
  .qwrap:not(.js-steps) .qstage { height:auto !important; }
  .qwrap:not(.js-steps) .qstep + .qstep { margin-top:34px; }

  .js-steps .qstep {
    position:absolute; top:0; left:0; width:100%;
    opacity:0; visibility:hidden; transform:translateY(16px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .js-steps .qstep.is-active {
    position:relative; opacity:1; visibility:visible; transform:none;
    transition:opacity .34s ease .08s, transform .46s cubic-bezier(.16,1,.3,1) .08s, visibility 0s;
  }
  /* A scan sweeps the new question as it lands — the console "reading" the
     next step. Transform + opacity only, and the keyframes restart on their
     own each time .is-active is applied, so no JS drives it. */
  .js-steps .qstep::after {
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:linear-gradient(100deg, transparent 42%, rgba(200,255,0,.09) 50%, transparent 58%);
  }
  .js-steps .qstep.is-active::after { animation:qSweep .9s ease .06s; }
  @keyframes qSweep { 0%{opacity:0;transform:translateX(-45%)} 28%{opacity:1} 100%{opacity:0;transform:translateX(45%)} }

  /* Leaving upward reads as "done and moving on"; going back reverses it. */
  .js-steps .qstep.is-out { transform:translateY(-16px); }
  .js-steps.is-rewind .qstep { transform:translateY(-16px); }
  .js-steps.is-rewind .qstep.is-out { transform:translateY(16px); }
  .js-steps.is-rewind .qstep.is-active { transform:none; }

  /* ── The question itself ── */
  .qq { font-family:'Syne',sans-serif; font-size:1.18rem; font-weight:800; line-height:1.3; letter-spacing:-.01em; margin-bottom:8px; }
  @media (min-width:769px) { .qq { font-size:1.42rem; } }
  .qq #qHello { color:var(--acid); }
  .qhint { font-size:.66rem; line-height:1.7; color:rgba(240,238,232,.55); margin-bottom:22px; }
  /* The brief router's one-line reflection of what they typed on 01 —
     proof the form listened, sitting above the question like a reply. */
  .qecho { font-size:.72rem; line-height:1.6; color:var(--acid); margin-bottom:14px; padding-left:14px; border-left:2px solid var(--acid); }

  /* ── Choice chips ── */
  .qopts { display:grid; grid-template-columns:1fr; gap:9px; }
  @media (min-width:560px) { .qopts-tight { grid-template-columns:1fr 1fr; } }

  .qchip {
    position:relative; display:flex; align-items:center; gap:13px;
    padding:15px 16px; min-height:52px; cursor:pointer; overflow:hidden;
    /* Cut INTO the panel rather than sitting on it. A near-transparent white
       fill worked when the panel was near-black; on the lifted surface it
       vanished. Darker than the panel + a brighter hairline gives each option
       a real edge. Radius stays small — the house rounds panels, not controls
       (see .nav-cta), so 8px only softens the corner inside a 26px card. */
    background:rgba(0,0,0,.42); border:1px solid rgba(240,238,232,.13);
    border-radius:8px;
    transition:border-color .18s, background .18s, transform .18s;
    opacity:0; transform:translateY(10px);
  }
  /* Directional fill-wipe — the site's hover system, applied here so the
     console isn't the one component with a plain colour swap. Transform-only,
     so it costs nothing to run. */
  .qchip::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(200,255,0,.11), rgba(200,255,0,.015));
    transform:scaleX(0); transform-origin:0 50%;
    transition:transform .42s cubic-bezier(.16,1,.3,1);
  }
  /* Left-edge status rule: grows out of the middle on hover, full on pick. */
  .qchip::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--acid); transform:scaleY(0); transform-origin:50% 50%;
    transition:transform .34s cubic-bezier(.16,1,.3,1);
  }
  .qchip > * { position:relative; z-index:1; }
  .is-active .qchip { opacity:1; transform:none; transition:border-color .18s, background .18s, transform .38s cubic-bezier(.16,1,.3,1) calc(.12s + var(--i,0) * .045s), opacity .34s ease calc(.12s + var(--i,0) * .045s); }
  .qwrap:not(.js-steps) .qchip { opacity:1; transform:none; }
  .qchip:hover { border-color:rgba(200,255,0,.45); }
  .qchip:hover::after { transform:scaleX(1); }
  .qchip:hover::before { transform:scaleY(.55); }
  .qchip:focus-within { border-color:var(--acid); box-shadow:0 0 0 1px var(--acid); }
  .qchip input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

  /* Number-key affordance — pointless on touch, so it's hidden there. */
  .qchip-key { flex-shrink:0; width:21px; height:21px; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:.56rem; color:rgba(240,238,232,.28); border:1px solid rgba(240,238,232,.12); transition:color .18s, border-color .18s, background .18s; }
  @media (hover:none) { .qchip-key { display:none; } }
  .qchip:hover .qchip-key { color:rgba(200,255,0,.8); border-color:rgba(200,255,0,.4); }
  .qchip-txt { font-family:'Space Mono',monospace; font-size:.75rem; line-height:1.5; color:rgba(240,238,232,.78); transition:color .18s; }

  .qchip.is-picked { border-color:var(--acid); background:rgba(200,255,0,.06); }
  .qchip.is-picked::before { transform:scaleY(1); }
  .qchip.is-picked::after { transform:scaleX(1); }
  .qchip.is-picked .qchip-txt, .qchip input:checked ~ .qchip-txt { color:var(--white); }
  .qchip.is-picked .qchip-key, .qchip input:checked ~ .qchip-key { background:var(--acid); border-color:var(--acid); color:var(--black); font-weight:700; }
  .qchip.is-flash { animation:qFlash .34s ease; }
  @keyframes qFlash { 0%{transform:none} 35%{transform:translateX(5px)} 100%{transform:none} }

  /* ── Text steps ── */
  .qfields { display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:500px) { .qfields-2 { grid-template-columns:1fr 1fr; } }
  .qfields .fg { margin-bottom:0; }
  .qfields .fg.full { grid-column:1/-1; }
  .flabel em { font-style:normal; letter-spacing:.14em; color:rgba(240,238,232,.25); }
  .qstep .ftarea { min-height:104px; }

  /* ── Nav ── */
  .qnav { display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:24px; }
  .qnext[hidden], .qsubmit[hidden], .qskip[hidden], .qneed[hidden] { display:none; }

  /* A 30%-opacity acid slab rendered as a dead olive block — the loudest
     thing in the panel, and it read as broken. A "not ready yet" control
     should be a ghost of the real one, with the reason sat next to it. */
  .fsubmit:disabled {
    background:transparent; color:rgba(240,238,232,.35);
    border:1px solid rgba(240,238,232,.14);
    box-shadow:none; opacity:1; cursor:not-allowed; transform:none;
  }
  .fsubmit:disabled:hover { background:transparent; filter:none; transform:none; box-shadow:none; }
  .fsubmit:disabled::after { display:none; }
  .fsubmit { border-radius:8px; }
  .qneed {
    text-align:center;
    font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.2em;
    text-transform:uppercase; color:rgba(200,255,0,.55);
  }
  .qskip { align-self:center; background:none; border:none; font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,238,232,.3); cursor:pointer; padding:4px 8px; transition:color .2s; }
  .qskip:hover { color:rgba(240,238,232,.65); }

  .qlegal { margin-top:16px; font-family:'Space Mono',monospace; font-size:.58rem; line-height:1.7; letter-spacing:.04em; color:rgba(240,238,232,.52); text-align:center; }
  .qlegal a { color:var(--acid); text-decoration:underline; text-underline-offset:2px; }

  @media (prefers-reduced-motion: reduce) {
    .qstage, .qprog-fill { transition-duration:.01ms; }
    .js-steps .qstep, .js-steps .qstep.is-active, .is-active .qchip { transition-duration:.01ms !important; transition-delay:0s !important; transform:none !important; }
    .qchip.is-flash { animation:none; }
    /* Every added effect switches off too — the sweep, the sheen, the wipes
       and the blinking live dot. */
    .js-steps .qstep.is-active::after, .qcount::before, .qcount.is-tick { animation:none; }
    .js-steps .qstep::after { display:none; }
    .qchip::after, .qchip::before, .fsubmit::after { transition:none; }
    .fsubmit:hover::after { display:none; }
    .fsubmit:hover { transform:none; }
  }

  /* Steps take focus on advance so screen readers announce the new
     question; the ring would just be noise on a full-width container. */
  .qstep:focus { outline:none; }

  /* The ring is for keyboard navigation. After a mouse click focus parks
     on the chip's hidden radio, and a permanent ring there just reads as
     an inconsistent border. */
  /* Guarded: without :has() the override below would strip the ring and
     leave nothing in its place, so old browsers keep :focus-within. */
  @supports selector(:has(*)) {
    .qchip:focus-within { border-color:rgba(240,238,232,.11); box-shadow:none; }
    .qchip:has(input:focus-visible) { border-color:var(--acid); box-shadow:0 0 0 1px var(--acid); }
    .qchip.is-picked:focus-within { border-color:var(--acid); }
  }
  .qlegal[hidden] { display:none; }

  /* Choice questions hide every nav button, which would otherwise leave a
     block of empty card under the last option. */
  .qnav:not(:has(> *:not([hidden]))) { margin-top:0; }
  .flabel em { text-transform:lowercase; letter-spacing:.08em; margin-left:6px; }

  /* "Something else" — the free-text escape hatch on question 01. Hidden
     until the chip is ticked, but only when the stepper is running; with JS
     off it renders as a plain optional input alongside the checkboxes. */
  .qother { margin-top:12px; }
  .js-steps .qother { display:none; }
  .js-steps .qother.is-open { display:block; animation:qOtherIn .34s cubic-bezier(.16,1,.3,1); }
  @keyframes qOtherIn { from { opacity:0; transform:translateY(-8px); } }
  @media (prefers-reduced-motion: reduce) {
    .js-steps .qother.is-open { animation:none; }
  }

  /* Branching variants for questions 02–04. All three live in the DOM so
     Netlify registers every field; faid.js switches one on. With JS off the
     build path shows — the others would just stack three versions of the
     same question on top of each other. */
  .qvariant { display:none; }
  .js-steps .qvariant.is-on { display:block; }
  .qwrap:not(.js-steps) .qvariant[data-path="build"] { display:block; }

  /* ══════════════════════════════════════════════════════════════════
     SECTION BANDS

     Without these every section is background:transparent and the page
     reads as one unbroken --black field from hero to footer. Sections
     alternate IN ORDER down the page:

       1 hero      dark
       2 services  lifted
       3 process   dark
       4 booking   lifted
       5 footer    its own header-matching panel (NOT set here)

     Placed at the END of the stylesheet on purpose: .services and
     .booking both re-declare backgrounds and borders further up, and at
     equal specificity source order decides. Placed first, the bands lose.

     COLOUR ONLY, never background-image — .services paints its acid glow
     and grid through background-image, so this is the base tone beneath
     it and that artwork rides on top untouched.

     `footer` is deliberately absent. It carries the header's panel
     treatment (rgba(5,5,7,.92) + var(--border) edge); naming it here
     would silently repaint it, which is exactly what went wrong before.
     ══════════════════════════════════════════════════════════════════ */
  .hero, .process { background-color:var(--black); }
  .services, .booking {
    background-color:var(--band-lift);
    border-top:1px solid rgba(200,255,0,.20);
    border-bottom:1px solid rgba(200,255,0,.20);
  }