
    /* ============================================================================
   reset.css — global reset + reduced-motion guard for the C-Arrow marketing
   site. Injected at build time via the reset injection marker in source pages.

   Carries zero brand color — that is tokens.css's sole job. This file only
   normalizes the box model, kills default margins, clips horizontal overflow
   (the recurring mobile-overflow footgun), and forces images to behave.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
html{overflow-x:clip}
body{overflow-x:clip}
img{display:block;max-width:100%}

/* Custom scrollbar — token-bound brand accent, applies to the page AND any
   scrollable panel (modal, embeds). WebKit/Blink get the full treatment; the
   scrollbar-color fallback is gated to engines WITHOUT ::-webkit-scrollbar,
   because a set scrollbar-color makes Chrome ignore the pseudo styling. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 45%, var(--bg-2)));
    border-radius:8px;border:2px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover{background:var(--blue-light)}
::-webkit-scrollbar-corner{background:var(--bg-2)}
@supports not selector(::-webkit-scrollbar){
    html{scrollbar-color:var(--blue) var(--bg-2);scrollbar-width:thin}
    .th-modal-panel,.th-modal-frame{scrollbar-color:var(--blue) var(--bg-2);scrollbar-width:thin}
}

/* Respect the user's reduced-motion preference: freeze decorative motion.
   Applies to the shared decorative class vocabulary (particle canvas, geo
   accent shapes, scroll-reveal entrances, accent lines). Functional focus
   transitions are left intact where authored per component. */
@media (prefers-reduced-motion:reduce){
    .particle-canvas,
    .geo-shape,
    .geo-shape-1,
    .accent-line,
    .reveal,
    [data-reveal]{
        animation:none!important;
        transition:none!important;
    }
}

    /* ==========================================================================
   NAV MENU + FOOTER SITEMAP (shared authority — injected into every page's
   <style>, so one edit here reaches all 24 pages incl. the 3 inline source
   pages). New class-namespaces only (nav-menu, nav-links, nav-dd, nav-toggle,
   footer-cols, footer-col, footer-bar) — zero overlap with the per-page inline
   navbar/nav-cta/footer-brand rules, so cascade order is irrelevant. All
   reveal state is driven by [aria-expanded] on the controlling button, so the
   JS only flips that one attribute and the ARIA state can never desync from what
   is visible. Motion is opacity/transform only; a no-JS / reduced-motion visitor
   keeps a usable menu (links are real anchors; the drawer is a plain panel).
   ========================================================================== */

/* Sticky-nav fix: each page's inline `body{overflow-x:hidden}` turns <body> into
   a scroll container, which breaks `position:sticky` on #navbar (it scrolls away
   instead of pinning). reset.css already uses overflow-x:clip (clips WITHOUT
   creating a scroll container); this higher-specificity rule re-asserts clip over
   the inline body rule so the sticky nav actually sticks. `clip` still contains
   horizontal overflow — the original footgun stays fixed. */
html body{overflow-x:clip}

/* ---- desktop menu row ---- */
.nav-menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);margin:0;padding:0;list-style:none}
.nav-links > li{position:relative}
.nav-link{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-body);font-size:.82rem;font-weight:500;letter-spacing:.2px;
    color:var(--white);opacity:.82;text-decoration:none;
    background:none;border:0;cursor:pointer;padding:8px 2px;line-height:1;
    transition:opacity .25s var(--ease),color .25s var(--ease);
}
.nav-link:hover,.nav-dd-toggle[aria-expanded="true"]{opacity:1;color:var(--blue-light)}

/* ---- services dropdown (click-disclosure) ---- */
.nav-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid currentColor;opacity:.7;transition:transform .25s var(--ease)}
.nav-dd-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
.nav-dd-menu{
    display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
    min-width:230px;margin:0;padding:8px;list-style:none;z-index:60;
    background:color-mix(in srgb, var(--bg-card) 94%, transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--blue-a12);border-radius:14px;
    box-shadow:0 24px 60px -22px rgba(0,0,0,.6);
}
.nav-dd-toggle[aria-expanded="true"] + .nav-dd-menu{display:block}
.nav-dd-menu a{
    display:block;padding:10px 14px;border-radius:9px;
    font-family:var(--font-body);font-size:.84rem;color:var(--white);opacity:.85;
    text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),opacity .2s var(--ease);
}
.nav-dd-menu a:hover{background:var(--blue-a08);opacity:1;color:var(--blue-light)}

/* ---- hamburger (mobile only) ---- */
.nav-toggle{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;margin:0;
    background:none;border:0;cursor:pointer;border-radius:10px;
}
.nav-toggle-bar{display:block;width:100%;height:2px;border-radius:2px;background:var(--white);
    transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* shared focus ring for the new interactive controls */
.nav-link:focus-visible,.nav-toggle:focus-visible,.nav-dd-menu a:focus-visible,
.footer-col a:focus-visible,.footer-legal a:focus-visible,.footer-brand:focus-visible{
    outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;opacity:1;
}

/* ---- mobile: hamburger + slide-in drawer (<=860px) ---- */
@media (max-width:860px){
    /* #navbar's backdrop-filter (glass) creates a containing block for
       position:fixed descendants — it would anchor the drawer to the ~64px nav
       instead of the viewport. Drop it on mobile so the fixed drawer fills the
       screen. `nav#navbar` (element+id) outranks the per-page inline `#navbar`
       rule that is injected ABOVE this shared block, so cascade order can't undo
       it; a near-solid background keeps the bar legible over scrolled content. */
    nav#navbar{backdrop-filter:none;-webkit-backdrop-filter:none;
        background:color-mix(in srgb, var(--bg) 96%, transparent)}
    nav#navbar.scrolled{background:color-mix(in srgb, var(--bg) 98%, transparent)}
    .nav-toggle{display:flex}
    .nav-menu{
        position:fixed;top:0;right:0;bottom:0;left:auto;width:min(84vw,340px);
        flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
        padding:88px 22px 32px;z-index:55;overflow-y:auto;
        background:color-mix(in srgb, var(--bg) 97%, transparent);
        backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
        border-left:1px solid var(--blue-a12);
        /* CLOSED state: off-canvas AND visibility:hidden so the drawer's links
           are out of the tab order + accessibility tree while collapsed (a bare
           translate leaves them keyboard-focusable off-screen). The delayed
           visibility transition lets the slide-out animation finish first. */
        transform:translateX(100%);visibility:hidden;
        transition:transform .34s var(--ease), visibility 0s .34s;
    }
    .nav-toggle[aria-expanded="true"] ~ .nav-menu{
        transform:none;visibility:visible;transition:transform .34s var(--ease);
    }
    .nav-links{flex-direction:column;align-items:stretch;gap:2px;width:100%}
    .nav-links > li{width:100%}
    .nav-link{width:100%;padding:13px 4px;font-size:1rem;opacity:.92;border-bottom:1px solid var(--gray-line)}
    .nav-dd-menu{
        position:static;transform:none;display:none;min-width:0;margin:2px 0 6px;padding:2px 0 2px 12px;
        background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;
    }
    .nav-dd-toggle[aria-expanded="true"] + .nav-dd-menu{display:block}
    .nav-dd-menu a{padding:11px 10px;font-size:.94rem;border-bottom:1px solid var(--gray-line)}
    .nav-cta{width:100%;margin-top:16px;font-size:.8rem}
    /* dimming backdrop behind the open drawer. .nav-menu's own backdrop-filter
       makes it the containing block for this fixed pseudo, so right:0 + width:100vw
       already spans the whole viewport leftward from the drawer edge — no transform
       (a translateX pushed it fully off-screen). z-index:-1 keeps it behind the
       drawer's opaque panel; the page under it is also inert (set in JS). */
    .nav-toggle[aria-expanded="true"] ~ .nav-menu::before{
        content:"";position:fixed;inset:0;left:auto;width:100vw;
        background:rgba(0,0,0,.5);z-index:-1;
    }
}

/* ==========================================================================
   FOOTER SITEMAP
   ========================================================================== */
.footer-cols{
    max-width:1080px;margin:0 auto;display:grid;
    grid-template-columns:1.4fr repeat(4, 1fr);gap:clamp(24px,3vw,48px);
    padding-bottom:40px;border-bottom:1px solid var(--gray-line);
}
.footer-brand-col{min-width:0}
.footer-brand{display:inline-flex;border-radius:8px}
.footer-tagline{margin:16px 0 0;max-width:26ch;font-family:var(--font-body);
    font-size:.86rem;line-height:1.6;color:var(--gray)}
.footer-col{min-width:0}
.footer-col-title{margin:0 0 14px;font-family:var(--font-data);font-size:.7rem;
    letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:600}
.footer-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
/* padding gives each footer link a >=24px tap target (SC 2.5.8) — links are
   block list items, so the WCAG inline-text exception does not apply. */
.footer-col a{display:inline-block;padding:6px 0;font-family:var(--font-body);font-size:.86rem;
    color:var(--white);opacity:.72;text-decoration:none;transition:opacity .25s var(--ease),color .25s var(--ease)}
.footer-col a:hover{opacity:1;color:var(--blue-light)}
.footer-bar{
    max-width:1080px;margin:24px auto 0;display:flex;align-items:center;justify-content:space-between;
    gap:18px;flex-wrap:wrap;
}
.footer-legal{display:flex;gap:22px}
.footer-legal a{display:inline-block;padding:6px 0;font-family:var(--font-body);font-size:.76rem;
    color:var(--white);opacity:.7;text-decoration:none;transition:opacity .25s var(--ease)}
.footer-legal a:hover{opacity:1}

/* Nav/menu motion honours prefers-reduced-motion (the GSAP reveals already do;
   these CSS transitions are separate). Reveal state stays correct — only the
   easing time collapses, so the drawer/dropdown still open, just instantly. */
@media (prefers-reduced-motion:reduce){
    .nav-menu,.nav-toggle-bar,.nav-caret,.nav-logo img,#navbar{transition-duration:.01ms}
}
@media (max-width:860px){
    .footer-cols{grid-template-columns:1fr 1fr;gap:28px 20px}
    .footer-brand-col{grid-column:1 / -1}
}
@media (max-width:520px){
    .footer-cols{grid-template-columns:1fr}
    .footer-bar{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ==========================================================================
   MOBILE STICKY CALL/TEXT BAR — conversion-first. Phones only (<=768px): a fixed
   bottom bar for one-tap Call + Text to the business line. Hidden on desktop (the
   nav CTA covers it). z-index sits below the drawer's stacking context so an open
   menu covers it; <body> gets bottom padding on mobile so the bar never hides the
   last footer row. safe-area-inset keeps it clear of the iOS home indicator.
   ========================================================================== */
.mobile-cta-bar{display:none}
@media (max-width:768px){
    .mobile-cta-bar{
        display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;
        padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background:color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
        border-top:1px solid var(--blue-a20);
    }
    .mcta{
        flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
        min-height:48px;border-radius:12px;font-family:var(--font-body);font-weight:700;
        font-size:.92rem;letter-spacing:.3px;text-decoration:none;
        transition:filter .2s var(--ease),background .2s var(--ease);
    }
    .mcta svg{width:18px;height:18px;flex:0 0 auto}
    .mcta-call{background:var(--blue);color:#0A0A0A}
    .mcta-call:active{filter:brightness(.94)}
    .mcta-text{background:transparent;color:var(--white);border:1px solid var(--blue-a20)}
    .mcta-text:active{background:var(--blue-a08)}
    .mcta:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
    html body{padding-bottom:76px}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
    .mcta{transition-duration:.01ms}
}

/* ==========================================================================
   TH-FX PRIMITIVE SUPPORT (revamp Ph0) — structural CSS for the shared
   animation library (assets js th-fx). LAW: every hidden or transformed state
   is JS-applied (gsap.fromTo) under the guarded seam, NEVER declared here, so
   reduced-motion and no-JS visitors always see finished static content. These
   rules are layout scaffolding only: line clip masks, sticky-stack geometry,
   device frames, marquee track, brush underline, and the modal shell.
   ========================================================================== */

/* ---- 2a mask-split text: block clip wrapper per measured line. Padding slack
   keeps descenders unclipped; negative margins cancel the layout shift. */
.th-line{display:block;clip-path:inset(0 -.2em);padding:.08em 0 .16em;margin:-.08em 0 -.16em}
.th-word,.th-char{display:inline-block}
/* Isolated inline-block glyphs drop kerning-pair adjustments the unsplit text had;
   turn kerning off on split chars so Bebas at mega size doesn't shift spacing. */
[data-split="chars"] .th-char{font-kerning:none;text-rendering:optimizeSpeed}
[data-split]{overflow-wrap:normal}

/* MEGA display helpers — Bebas tier binds the headline tokens */
.th-mega,.th-giant,.th-title{font-family:var(--font-headline);font-weight:400;letter-spacing:.01em;text-transform:uppercase}
.th-mega{font-size:var(--text-mega);line-height:.92}
.th-giant{font-size:var(--text-giant);line-height:.94}
.th-title{font-size:var(--text-title);line-height:1}

/* ---- 2c stacked cards: CSS sticky is the engine. JS adds .th-stack-on only
   under the motion guard (and only at >=768px width / >=620px height), so
   reduced-motion, no-JS, and small screens read a plain card column.
   --stack-peek = the visible lip each settled card keeps above the next one;
   Ph0.1 raised it (14px -> 24px) so the pile reads as context, not a curtain. */
.th-stack{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px)}
.th-stack-on>*{position:sticky;top:calc(var(--stack-top,12vh) + var(--i,0)*var(--stack-peek,24px))}

/* ---- 2f work showcase: pure-CSS monitor bezel + phone chassis. The tall
   capture sits inside .th-screen and is scrolled by a scrubbed y tween whose
   travel is DERIVED from the real rendered image height (Ph0.1 — the fixed
   +=170% pin scrubbed past single-viewport captures into the empty frame).
   Multi-client: one device pair; prev/next arrows + dots swap the active
   client's captures, testimonial, and URL. The swap controls are a FUNCTIONAL
   layer (self-wired, reduced-motion safe) like the modal open/close. */
.th-showcase-pin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.6vh,28px);min-height:100vh;padding:3vh 0}
.th-showcase-stage{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,56px)}
.th-device{flex:0 0 auto}
.th-monitor{width:min(680px,54vw)}
.th-monitor .th-screen{aspect-ratio:16/10;border-radius:14px;border:10px solid var(--black);outline:1px solid var(--gray-line);background:var(--bg-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.65)}
.th-monitor .th-stand{width:18%;height:44px;margin:0 auto;background:linear-gradient(180deg,var(--bg-card-hover),var(--bg-2));border-radius:0 0 10px 10px}
.th-monitor .th-base{width:32%;height:10px;margin:0 auto;background:var(--bg-card-hover);border-radius:6px}
.th-phone{width:min(210px,24vw)}
.th-phone .th-screen{aspect-ratio:390/780;border-radius:34px;border:8px solid var(--black);outline:1px solid var(--gray-line);background:var(--bg-2);box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.th-phone .th-screen::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:14px;border-radius:8px;background:var(--black);z-index:2}
.th-screen{position:relative;overflow:hidden}
.th-screen img{display:block;width:100%;height:auto;will-change:transform}
/* the hidden per-client source list the swap layer reads */
.th-showcase-clients{display:none}
/* testimonial foot — quote slot (distinct serif voice), client URL, pagination */
.th-showcase-foot{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:660px;padding:0 16px}
.th-testimonial{margin:0;font-family:var(--font-testimonial);font-style:italic;font-weight:400;font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.55;color:var(--white);opacity:.92;quotes:"\201C" "\201D"}
.th-showcase-src{display:flex;align-items:center;gap:10px;font-family:var(--font-data);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray)}
.th-showcase-src cite{font-style:normal;color:var(--blue)}
/* face slot — hidden until a real headshot lands; a one-line src swap turns it on */
.th-showcase-face{display:none;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid var(--blue-a20)}
.th-showcase-face img{width:100%;height:100%;object-fit:cover;display:block}
.th-showcase-face.has-face{display:block}
/* pagination — 44px targets, keyboard-first */
.th-showcase-nav{display:flex;align-items:center;gap:4px;margin-top:2px}
.th-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:transparent;border:1px solid var(--gray-line);color:var(--white);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.th-arrow:hover{border-color:var(--blue);background:var(--blue-a08);color:var(--blue-light)}
.th-arrow svg{width:16px;height:16px}
.th-dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:44px;background:transparent;border:0;cursor:pointer;padding:0}
.th-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gray-dark);transition:background .2s var(--ease),transform .2s var(--ease)}
.th-dot:hover::after{background:var(--gray)}
.th-dot[aria-current="true"]::after{background:var(--blue);transform:scale(1.25)}
.th-arrow:focus-visible,.th-dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}
@media (max-width:767px){
    /* phone-only on mobile: the desktop capture never renders (lazy img inside
       a display-none frame is not fetched), pin travel shortens in JS. */
    .th-monitor{display:none}
    .th-phone{width:min(280px,68vw)}
    .th-showcase-pin{min-height:92vh}
}

/* ---- 2g brush underline: inline SVG, fixed shape, currentColor via the accent
   token. No hidden CSS state — JS clips and draws it; static = fully drawn. */
.th-underline{position:relative;display:inline-block}
.th-brush{position:absolute;left:-.04em;right:-.06em;bottom:-.12em;width:calc(100% + .1em);height:.16em;color:var(--blue);pointer-events:none}

/* ---- 2h trust marquee: single authored row; JS clones it (aria-hidden) and
   scrubs xPercent. Reduced-motion or no-JS = one static row, overflow hidden. */
.th-marquee{overflow:hidden}
.th-marquee-track{display:inline-flex;align-items:center;gap:clamp(28px,6vw,72px);width:max-content;white-space:nowrap}
.th-marquee-rail{display:inline-flex;width:max-content;will-change:transform}

/* ---- 2e dolly-zoom modal shell: MUST be a direct child of body (any
   transformed or filtered ancestor would re-anchor position:fixed). */
.th-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px)}
.th-modal[hidden]{display:none}
.th-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.th-modal-panel{position:relative;width:min(720px,100%);max-height:min(84vh,760px);overflow:auto;background:var(--bg-card);border:1px solid var(--blue-a20);border-radius:20px;padding:clamp(22px,4vw,40px);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.th-modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--blue-a20);border-radius:12px;color:var(--white);font-size:1.1rem;line-height:1;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);z-index:2}
.th-modal-x:hover{border-color:var(--blue);background:var(--blue-a08)}
/* quiz-housing variant: the panel becomes a tall column — slim header, then a
   same-origin iframe (created lazily on first open by the functional layer,
   from the panel's data-modal-src) filling the rest. */
.th-modal-panel.th-modal-quiz{width:min(920px,100%);height:min(88vh,960px);max-height:none;padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
/* header — brand surface, not the grey card tone: near-black with a soft blue
   wash rising from the accent corner, sealed by a blue hairline. */
.th-modal-quiz .th-modal-head{
    flex:0 0 auto;padding:16px 68px 14px clamp(18px,3vw,28px);
    background:
        radial-gradient(30rem 8rem at 0% 100%, var(--blue-a12), transparent 70%),
        var(--bg);
    border-bottom:1px solid var(--blue-a20);
}
.th-modal-quiz .th-modal-head h3{margin:0}
.th-modal-embed{flex:1 1 auto;min-height:0;display:flex}
.th-modal-frame{flex:1 1 auto;width:100%;border:0;background:var(--bg)}
/* no-GSAP and reduced-motion open: a .15s fade applied by the functional layer */
.th-modal.th-modal-fade .th-modal-panel,.th-modal.th-modal-fade .th-modal-backdrop{animation:thModalFade .15s var(--ease) both}
@keyframes thModalFade{from{opacity:0}to{opacity:1}}
.th-modal-x:focus-visible,[data-modal-open]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---- 3 hero WebGL orbs: the canvas cross-fades in over the retained CSS
   orbs; .gl-live pauses the CSS orb drift so the two never fight. Any GL
   failure removes both classes and the CSS orbs simply continue. */
.orbs-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease)}
.orbs-gl.on{opacity:1}
.gl-live .orb{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
    .th-modal.th-modal-fade .th-modal-panel,.th-modal.th-modal-fade .th-modal-backdrop{animation-duration:.01ms}
}


    /* ---- style-guide page CSS: token-bound only, zero hardcoded brand hex ---- */
    body{
        background:var(--bg);
        color:var(--white);
        font-family:var(--font-body);
        line-height:1.7;
        -webkit-font-smoothing:antialiased;
        overflow-x:hidden;
    }

    /* Reveal — visible by default, CSS-only entrance (no JS dependency for content) */
    .reveal{animation:sgFade .6s var(--ease) backwards}
    .reveal:nth-child(2){animation-delay:.06s}
    .reveal:nth-child(3){animation-delay:.12s}
    @keyframes sgFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

    /* NAV — sits outside the main element */
    #navbar{
        position:sticky;top:0;z-index:50;
        display:flex;align-items:center;justify-content:space-between;
        gap:20px;padding:18px clamp(20px,5vw,56px);
        background:color-mix(in srgb, var(--bg) 86%, transparent);
        backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
        border-bottom:1px solid var(--gray-line, rgba(255,255,255,.07));
    }
    .nav-logo{display:inline-flex;align-items:center;text-decoration:none;border-radius:8px}
    .nav-logo img{height:26px;width:auto}
    .nav-cta{
        display:inline-flex;align-items:center;justify-content:center;
        min-height:44px;padding:11px 22px;border-radius:10px;
        font-family:var(--font-body);font-weight:600;font-size:.74rem;
        letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;
        color:var(--white);border:1px solid var(--blue-a20);
        background:transparent;transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .nav-cta:hover{background:var(--blue-a08);border-color:var(--blue);box-shadow:0 6px 20px var(--blue-a12)}

    /* Layout */
    main{display:block}
    .wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
    .masthead{padding:clamp(72px,12vw,140px) 0 clamp(40px,6vw,72px)}
    .eyebrow{
        font-family:var(--font-data);font-size:.72rem;letter-spacing:3px;
        text-transform:uppercase;color:var(--blue);margin-bottom:1.4rem;display:block;
    }
    .masthead h1{
        font-family:var(--font-display);font-weight:700;
        font-size:clamp(2.6rem,7vw,5.5rem);line-height:1.02;letter-spacing:-2px;
        max-width:14ch;
    }
    .masthead h1 em{font-style:normal;color:var(--blue)}
    .masthead .lede{
        margin-top:1.6rem;max-width:52ch;color:var(--gray, #8a8a8a);
        font-size:clamp(1rem,1.4vw,1.15rem);font-weight:300;
    }
    .rule{height:1px;background:linear-gradient(90deg,var(--blue),transparent);margin:0;border:0}

    /* Section scaffolding — editorial, mono kicker + generous rhythm */
    .section{padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--gray-line, rgba(255,255,255,.07))}
    .kicker{
        display:flex;align-items:baseline;gap:14px;margin-bottom:2.4rem;
    }
    .kicker .n{font-family:var(--font-data);font-size:.72rem;color:var(--blue);letter-spacing:2px}
    .kicker h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.4rem);letter-spacing:-.6px}
    .token-tag{
        font-family:var(--font-data);font-size:.68rem;letter-spacing:.4px;
        color:var(--gray, #8a8a8a);
    }

    /* Type specimens — bento of three families */
    .specimens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .specimen{
        min-width:0;padding:26px;border-radius:16px;
        background:var(--bg-2, #121212);border:1px solid var(--gray-line, rgba(255,255,255,.07));
    }
    .specimen .glyph{font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;margin-bottom:.8rem}
    .specimen .glyph.d{font-family:var(--font-display);font-weight:700}
    .specimen .glyph.b{font-family:var(--font-body);font-weight:600}
    .specimen .glyph.m{font-family:var(--font-data);font-weight:600}
    .specimen h3{font-size:.92rem;font-weight:600;margin-bottom:.3rem}
    .specimen p{font-size:.86rem;color:var(--gray, #8a8a8a)}
    .specimen .tag{margin-top:1rem;display:block}

    /* Type scale ramp */
    .scale{display:flex;flex-direction:column;gap:14px}
    .scale-row{display:flex;align-items:baseline;gap:18px;min-width:0}
    .scale-row .size{flex:0 0 4.5ch;font-family:var(--font-data);font-size:.7rem;color:var(--blue);letter-spacing:.5px}
    .scale-row .demo{font-family:var(--font-display);font-weight:700;letter-spacing:-.5px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

    /* Color & surface swatches */
    .swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .swatch{min-width:0;border-radius:14px;overflow:hidden;border:1px solid var(--gray-line, rgba(255,255,255,.07))}
    .swatch .chip{height:96px}
    .swatch .meta{padding:12px 14px;background:var(--bg-2, #121212)}
    .swatch .meta .name{font-size:.82rem;font-weight:600}
    .swatch .meta .tag{font-family:var(--font-data);font-size:.66rem;color:var(--gray, #8a8a8a);letter-spacing:.3px}
    .chip-bg{background:var(--bg)}
    .chip-surface{background:var(--bg-2, #121212)}
    .chip-white{background:var(--white)}
    .chip-accent{background:var(--blue)}
    .chip-accent-light{background:var(--blue-light)}
    .chip-a08{background:var(--blue-a08)}
    .chip-a12{background:var(--blue-a12)}
    .chip-a20{background:var(--blue-a20)}

    /* Light-theme demo region — flips via the token system */
    .theme-demo{
        border-radius:20px;padding:clamp(24px,4vw,40px);
        background:var(--bg);border:1px solid var(--gray-line, rgba(255,255,255,.07));
        color:var(--white);
    }
    .theme-demo h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-bottom:.5rem}
    .theme-demo p{color:var(--gray, #8a8a8a);font-size:.92rem;max-width:46ch}
    .theme-demo .mini-swatches{display:flex;gap:10px;margin-top:1.4rem}
    .theme-demo .mini{width:48px;height:48px;border-radius:10px;border:1px solid var(--gray-line, rgba(255,255,255,.12))}

    /* Controls */
    .controls{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1.6rem}
    .btn{
        display:inline-flex;align-items:center;justify-content:center;
        min-height:48px;padding:14px 30px;border-radius:11px;cursor:pointer;
        font-family:var(--font-body);font-weight:700;font-size:.8rem;
        letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;
        border:1px solid transparent;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .btn-primary{background:var(--white);color:var(--bg)} /* fg/surface role pair — legible in both themes */
    .btn-primary:hover{box-shadow:0 12px 32px var(--blue-a20)}
    .btn-secondary{background:transparent;color:var(--white);border-color:var(--gray-line, rgba(255,255,255,.18))}
    .btn-secondary:hover{border-color:var(--blue);background:var(--blue-a08)}
    .btn-ghost{background:transparent;color:var(--blue);font-weight:600;letter-spacing:.6px;text-transform:none;padding:14px 12px}
    .btn-ghost:hover{color:var(--blue-light)}
    @media(hover:hover){.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}}

    /* Blue "moment" — high-value, used sparingly */
    .moment{
        margin-top:1rem;border-radius:20px;padding:clamp(26px,4vw,44px);
        background:var(--blue-a08);border:1px solid var(--blue-a20);
        box-shadow:inset 0 1px 0 var(--blue-a12);
    }
    .moment .m-kicker{font-family:var(--font-data);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:.8rem}
    .moment h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.4px;color:var(--blue-light);max-width:22ch}
    .moment p{margin-top:.7rem;color:var(--gray, #8a8a8a);max-width:52ch}

    /* Focus rings — every bespoke interactive class, keyboard-only, blue */
    .nav-logo:focus-visible,.nav-cta:focus-visible,.btn:focus-visible,.footer-meta a:focus-visible,.footer-brand:focus-visible{
        outline:2px solid var(--blue);outline-offset:3px;border-radius:10px;
    }

    /* Footer — sits outside the main element */
    footer{padding:44px clamp(20px,5vw,56px) 30px;border-top:1px solid var(--gray-line, rgba(255,255,255,.07))}
    .footer-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .footer-brand{display:inline-flex;border-radius:8px}
    .footer-brand img{height:24px;width:auto;opacity:.7}
    /* Dark wordmark logo: white on dark surfaces, black on light — a fixed invert vanishes in light theme */
    .logo-invert,.footer-brand img{filter:brightness(0) invert(1)}
    [data-theme="light"] .logo-invert,[data-theme="light"] .footer-brand img{filter:brightness(0)}
    .footer-meta{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-size:.74rem;color:var(--gray, #8a8a8a)}
    .footer-meta a{color:var(--white);opacity:.75;text-decoration:none;transition:opacity .3s}
    .footer-meta a:hover{opacity:1}

    /* Responsive — mobile is a rethink (Sawtooth breakpoint ladder) */
    @media(max-width:980px){
        .specimens{grid-template-columns:repeat(3,1fr)}
        .swatches{grid-template-columns:repeat(4,1fr)}
    }
    @media(max-width:720px){
        .specimens{grid-template-columns:1fr}
        .swatches{grid-template-columns:1fr 1fr}
    }
    @media(max-width:560px){
        .kicker{flex-direction:column;gap:6px}
        .scale-row{gap:12px}
        .controls .btn{width:100%}
    }
    @media(max-width:380px){
        .swatches{grid-template-columns:1fr}
    }

    /* ==================================================================
       MOTION LAB (revamp Ph0 — Blake's review artifact). Lab-only layout
       CSS; the primitive structural rules (th-line, th-stack, device
       frames, marquee, modal shell) are shared via the injected tokens.
       LAW: no hidden states here — reduced motion sees everything static.
       ================================================================== */
    #scroll-progress{
        position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
        background:linear-gradient(90deg, var(--blue), var(--blue-light));
        transform:scaleX(0);transform-origin:left;opacity:.85;
    }
    .lab-divider .th-mega{max-width:12ch}
    .lab-divider .lede{margin-top:1.6rem;max-width:56ch;color:var(--gray);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:300}
    .lab-note{font-family:var(--font-data);font-size:.7rem;letter-spacing:.4px;line-height:1.9;color:var(--gray);margin-top:1.6rem;max-width:72ch}
    .lab-note em{font-style:normal;color:var(--blue)}

    /* 06 — Bebas type ramp */
    .ramp-row{display:flex;flex-direction:column;gap:6px;margin-bottom:2.4rem;min-width:0}
    .ramp-row .size{font-family:var(--font-data);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}

    /* 07 — mask panel */
    .mask-panel{
        position:relative;min-height:min(52vh,520px);display:flex;flex-direction:column;justify-content:center;gap:1rem;
        margin:0;padding:clamp(26px,5vw,72px);
        background:
            radial-gradient(42rem 26rem at 84% 0%, var(--blue-a12), transparent 62%),
            radial-gradient(36rem 24rem at 8% 100%, color-mix(in srgb, var(--ambient-indigo) 12%, transparent), transparent 66%),
            var(--bg-2);
        border:1px solid var(--gray-line);
    }
    .mask-panel .panel-kicker{font-family:var(--font-data);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}
    .mask-panel blockquote{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.6px;line-height:1.15;max-width:26ch;margin:0}
    .mask-panel blockquote em{font-style:normal;color:var(--blue)}
    .mask-panel figcaption{font-size:.88rem;color:var(--gray)}

    /* 08 — stacked cards */
    .stack-card{
        min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
        padding:clamp(26px,5vw,72px);border-radius:24px;
        background:linear-gradient(180deg, var(--bg-card-hover), var(--bg-2));
        border:1px solid var(--gray-line);
        box-shadow:0 -18px 60px -30px rgba(0,0,0,.8);
    }
    .stack-card .sc-k{font-family:var(--font-data);font-size:.7rem;letter-spacing:2px;color:var(--blue);text-transform:uppercase}
    .stack-card h3{max-width:14ch}
    .stack-card p{color:var(--gray);max-width:56ch;font-size:clamp(.95rem,1.2vw,1.1rem)}
    .stack-card .btn-ghost{align-self:flex-start;padding-left:0}

    /* 09 — directional fly grid */
    .lab-fly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .lab-card{min-width:0;padding:26px;border-radius:16px;background:var(--bg-2);border:1px solid var(--gray-line);transition:transform .45s var(--ease-spring),border-color .3s var(--ease)}
    @media(hover:hover){.lab-card:hover{transform:translateY(-3px);border-color:var(--blue-a20)}}
    .lab-card .n{font-family:var(--font-data);font-size:.7rem;color:var(--blue);letter-spacing:1.5px}
    .lab-card h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin:.6rem 0 .4rem}
    .lab-card p{font-size:.88rem;color:var(--gray)}

    /* 10 — work showcase: structural rules (stage, foot, testimonial,
       pagination) are shared via the injected tokens; nothing lab-only left. */

    /* 11 — trust marquee */
    .lab-marquee{padding:clamp(12px,2.4vw,24px) 0;border-top:1px solid var(--gray-line);border-bottom:1px solid var(--gray-line)}
    .mq-item{font-family:var(--font-headline);font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:.02em;text-transform:uppercase;color:var(--white);opacity:.8}
    .mq-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.85;flex:0 0 auto}

    /* 12 — modal head content (the body is the embedded quiz iframe) */
    .mp-kicker{display:block;font-family:var(--font-data);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:.5rem}
    .th-modal-panel h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.4px;max-width:26ch}

    /* 13 — shader hero mock: token-bound CSS orbs (the permanent fallback)
       under the lazily cross-faded WebGL canvas */
    .orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
    .orb{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
    .orb-1{width:460px;height:460px;top:-6%;right:2%;
        background:radial-gradient(circle, color-mix(in srgb, var(--blue) 34%, transparent) 0%, color-mix(in srgb, var(--blue) 12%, transparent) 42%, transparent 70%);
        animation:orbFloat 22s ease-in-out infinite}
    .orb-2{width:360px;height:360px;bottom:-4%;left:0;
        background:radial-gradient(circle, color-mix(in srgb, var(--ambient-indigo) 26%, transparent) 0%, color-mix(in srgb, var(--ambient-indigo) 9%, transparent) 42%, transparent 70%);
        animation:orbFloat 26s ease-in-out -8s infinite}
    .orb-3{width:300px;height:300px;top:34%;left:48%;
        background:radial-gradient(circle, color-mix(in srgb, var(--ambient-violet) 20%, transparent) 0%, color-mix(in srgb, var(--ambient-violet) 7%, transparent) 42%, transparent 70%);
        animation:orbFloat 30s ease-in-out -15s infinite}
    @keyframes orbFloat{
        0%,100%{transform:translate(0,0) scale(1)}
        33%{transform:translate(26px,-32px) scale(1.06)}
        66%{transform:translate(-20px,22px) scale(.96)}
    }
    .lab-hero{position:relative;min-height:min(82vh,780px);display:flex;align-items:center;border-radius:24px;border:1px solid var(--gray-line);overflow:hidden;background:var(--bg)}
    .lab-hero-inner{position:relative;z-index:1;padding:clamp(26px,6vw,72px)}
    .lab-hero-inner .th-mega{max-width:13ch}
    .lab-hero-inner .lede{margin-top:1.4rem;max-width:46ch;color:var(--gray);font-weight:300}

    /* 14 — the sign-off preview (editorial finale, filled accent box retired) */
    .signoff{position:relative;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(30px,6vw,72px) 0}
    .signoff::before{content:"";position:absolute;top:-8%;left:28%;width:min(560px,60vw);height:72%;border-radius:50%;pointer-events:none;
        background:radial-gradient(closest-side, var(--blue-a08), transparent 72%)}
    .so-kicker{display:block;font-family:var(--font-data);font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:1.2rem}
    .so-title{position:relative}
    .so-title em{font-style:normal;color:var(--blue)}
    .so-cta{position:relative;display:flex;flex-direction:column;gap:12px;align-items:stretch}
    .so-tel{margin-top:.4rem;font-size:.92rem;color:var(--gray);text-align:center}
    .so-tel a{color:var(--blue-light);text-decoration:none;font-weight:600}
    .so-tel a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

    @media(max-width:860px){
        .signoff{grid-template-columns:1fr}
    }
    @media(max-width:720px){
        .lab-fly-grid{grid-template-columns:1fr}
    }

    @media(prefers-reduced-motion:reduce){
        .reveal{animation:none!important}
        .btn-primary:hover,.btn-secondary:hover{transform:none!important}
        .orb{animation:none!important}
        .lab-card:hover{transform:none!important}
    }
    