:root{
    --bg:#0a0a0a;
    --bg-alt:#050505;
    --fg:#f4f4f2;
    --fg-dim:#8c8c88;
    --fg-faint:#4a4a47;
    --line:rgba(244,244,242,0.12);
    --line-strong:rgba(244,244,242,0.28);
    --paper:#f4f4f2;
    --paper-dim:#0a0a0a;
    --display:'Clash Display', 'Satoshi', sans-serif;
    --body:'Satoshi', sans-serif;
    --mono:'JetBrains Mono', monospace;
    --ease:cubic-bezier(.16,1,.3,1);

    /* theme-aware surfaces (used instead of hardcoded rgba throughout) */
    --surface-1:rgba(10,10,10,.5);
    --surface-2:rgba(5,5,5,.55);
    --surface-3:rgba(5,5,5,.75);
    --glass-tint-a:rgba(255,255,255,.09);
    --glass-tint-b:rgba(255,255,255,.02);
    --glass-border:rgba(255,255,255,.14);
    --glass-sheen:rgba(255,255,255,.18);
    --glass-shadow:rgba(0,0,0,.35);
    --nav-glass-a:rgba(255,255,255,.07);
    --nav-glass-b:rgba(255,255,255,.015);
    --nav-border:rgba(255,255,255,.12);
    --hero-overlay-1:rgba(5,5,5,.85);
    --hero-overlay-2:rgba(5,5,5,.1);
    --hero-overlay-3:rgba(5,5,5,.3);
    --hero-overlay-4:rgba(5,5,5,.6);
    --hero-overlay-5:rgba(5,5,5,.25);
    --bgfx-a1:#050505; --bgfx-a2:#333333; --bgfx-a3:#050505; --bgfx-a4:#3d3d3d; --bgfx-a5:#0a0a0a;
    --bgfx-b1:#000000; --bgfx-b2:#262626; --bgfx-b3:#000000; --bgfx-b4:#2e2e2e;
    --bgfx-base:#0a0a0a;
    --scrollbar-track:#0a0a0a;
    --scrollbar-thumb:#333;
    --dot-fill:#0a0a0a;
    --theme-toggle-icon-transition:.5s var(--ease);
  }

  html[data-theme="light"]{
    --bg:#f4f4f2;
    --bg-alt:#ffffff;
    --fg:#0a0a0a;
    --fg-dim:#5c5c58;
    --fg-faint:#9b9b96;
    --line:rgba(10,10,10,0.1);
    --line-strong:rgba(10,10,10,0.22);
    --paper:#0a0a0a;
    --paper-dim:#f4f4f2;

    --surface-1:rgba(244,244,242,.6);
    --surface-2:rgba(255,255,255,.7);
    --surface-3:rgba(255,255,255,.85);
    --glass-tint-a:rgba(10,10,10,.05);
    --glass-tint-b:rgba(10,10,10,.01);
    --glass-border:rgba(10,10,10,.1);
    --glass-sheen:rgba(255,255,255,.6);
    --glass-shadow:rgba(10,10,10,.08);
    --nav-glass-a:rgba(255,255,255,.55);
    --nav-glass-b:rgba(255,255,255,.25);
    --nav-border:rgba(10,10,10,.08);
    --hero-overlay-1:rgba(244,244,242,.85);
    --hero-overlay-2:rgba(244,244,242,.1);
    --hero-overlay-3:rgba(244,244,242,.3);
    --hero-overlay-4:rgba(244,244,242,.6);
    --hero-overlay-5:rgba(244,244,242,.25);
    --bgfx-a1:#f4f4f2; --bgfx-a2:#d4d4d0; --bgfx-a3:#f9f9f7; --bgfx-a4:#e2e2de; --bgfx-a5:#ffffff;
    --bgfx-b1:#ffffff; --bgfx-b2:#e8e8e4; --bgfx-b3:#ffffff; --bgfx-b4:#dcdcd8;
    --bgfx-base:#f4f4f2;
    --scrollbar-track:#f4f4f2;
    --scrollbar-thumb:#ccc;
    --dot-fill:#f4f4f2;
  }

  html{ transition:background .5s var(--ease); }
  body, #bg-fx, #nav, .glass, #hero::before, #final::before{
    transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{background:#0a0a0a;}
  html,body{overflow-x:hidden;}
  body{
    background:transparent;
    color:var(--fg);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
    line-height:1.4;
    cursor:none;
  }
  @media (max-width:900px){ body{cursor:auto;} }

  ::selection{ background:var(--fg); color:var(--bg); }

  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; background:none; border:none; color:inherit; cursor:none; }
  @media (max-width:900px){ button{cursor:pointer;} }

  img{ display:block; max-width:100%; }

  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-dim);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background:var(--fg-dim);
    display:inline-block;
  }

  .wrap{ max-width:1400px; margin:0 auto; padding:0 48px; }
  @media (max-width:900px){ .wrap{padding:0 24px;} }

  section{ position:relative; }

  /* ===================== CURSOR ===================== */
  #cursor-dot, #cursor-ring{
    position:fixed; top:0; left:0;
    pointer-events:none;
    z-index:9999;
    border-radius:50%;
    transform:translate(-50%,-50%);
    mix-blend-mode:difference;
    will-change:transform;
  }
  /* NOTE: cursor color is intentionally a fixed white, not var(--fg).
     mix-blend-mode:difference only auto-inverts against any background
     (dark or light theme) if the cursor's own source color stays constant.
     Tying it to a theme variable that itself flips light/dark cancels the
     invert out on the light theme (white-on-white becomes invisible). */
  #cursor-dot{
    width:6px; height:6px;
    background:#ffffff;
  }
  #cursor-ring{
    width:36px; height:36px;
    border:1px solid #ffffff;
    transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
  }
  #cursor-ring.grow{ width:80px; height:80px; background:#ffffff; mix-blend-mode:difference;}
  #cursor-ring.hide, #cursor-dot.hide{ opacity:0; }
  @media (max-width:900px){ #cursor-dot,#cursor-ring{ display:none; } }

  /* ===================== LIQUID GLASS ===================== */
  .glass{
    background:linear-gradient(135deg, var(--glass-tint-a), var(--glass-tint-b));
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-sheen), inset 0 -1px 12px var(--glass-tint-b), 0 12px 34px var(--glass-shadow);
    position:relative;
    overflow:hidden;
  }
  .glass::before{
    content:'';
    position:absolute; top:-80%; left:-40%;
    width:50%; height:260%;
    background:linear-gradient(115deg, transparent, var(--glass-sheen), transparent);
    transform:rotate(18deg) translateX(-40%);
    transition:transform 1.1s var(--ease);
    pointer-events:none;
  }
  .glass:hover::before{ transform:rotate(18deg) translateX(260%); }

  /* ===================== NAV ===================== */
  #nav{
    position:fixed; top:0; left:0; right:0;
    z-index:500;
    padding:28px 48px;
    display:flex; align-items:center; justify-content:space-between;
    transition:padding .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  }
  #nav.scrolled{
    padding:16px 48px;
    background:linear-gradient(135deg, var(--nav-glass-a), var(--nav-glass-b));
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-bottom:1px solid var(--nav-border);
    box-shadow:inset 0 -1px 0 var(--glass-sheen), 0 12px 30px var(--glass-shadow);
  }
  @media (max-width:900px){ #nav, #nav.scrolled{ padding:20px 24px; } }

  .nav-logo{
    font-family:var(--display);
    font-weight:600;
    font-size:18px;
    letter-spacing:-.01em;
    display:flex; align-items:center; gap:10px;
  }
  .nav-logo .mark{
    width:26px; height:26px;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative; flex-shrink:0;
  }
  /* Both logo variants (dark-theme + light-theme) sit absolutely inside a
     fixed-size box with object-fit:contain, so they occupy the exact same
     footprint even though the two source images have different intrinsic
     aspect ratios — otherwise the plain width:100%;height:auto approach lets
     each image take on its own height, and swapping between them on a
     theme toggle visibly jumps the logo up/down. */
  .nav-logo .mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
  .footer-logo{ display:flex; align-items:center; gap:10px; }
  .footer-mark-wrap{ display:inline-flex; align-items:center; justify-content:center; position:relative; width:20px; height:20px; flex-shrink:0; }
  .footer-logo img{ width:22px; height:auto; display:block; }

  /* Theme-aware logo: the brand mark is a light color by default (for the
     dark theme's dark backgrounds) and swaps to a solid dark version on the
     light theme, where the light mark would otherwise be invisible. */
  .nav-logo .mark img.logo-for-light,
  .footer-mark.logo-for-light{ display:none; }
  html[data-theme="light"] .nav-logo .mark img.logo-for-dark,
  html[data-theme="light"] .footer-mark.logo-for-dark{ display:none; }
  html[data-theme="light"] .nav-logo .mark img.logo-for-light,
  html[data-theme="light"] .footer-mark.logo-for-light{ display:block; }

  .nav-links{
    display:flex; align-items:center; gap:40px;
    font-size:14px;
    color:var(--fg-dim);
  }
  .nav-links a{ position:relative; padding:4px 0; display:inline-flex; align-items:center; }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0;
    width:0; height:1px; background:var(--fg);
    transition:width .4s var(--ease);
  }
  .nav-links a:hover{ color:var(--fg); }
  .nav-links a:hover::after{ width:100%; }
  @media (max-width:900px){ .nav-links{ display:none; } }

  /* ===================== NAV SERVICES DROPDOWN ===================== */
  .nav-services{ position:relative; display:flex; align-items:center; }
  .services-dropdown{
    position:absolute; top:calc(100% + 20px); left:50%;
    transform:translateX(-50%) translateY(-6px);
    width:300px;
    background:linear-gradient(160deg, rgba(20,20,20,.92), rgba(8,8,8,.96));
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 24px 50px rgba(0,0,0,.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
    z-index:50;
  }
  .services-dropdown.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear 0s;
  }
  .services-dropdown::before{
    content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:12px; height:12px; background:rgb(12,12,12);
    border-left:1px solid rgba(255,255,255,.12); border-top:1px solid rgba(255,255,255,.12);
  }
  /* Must be scoped under .services-dropdown. These links sit inside .nav-links, and
     `.nav-links a { display:inline-flex; padding:4px 0 }` (specificity 0,1,1) outranks
     a bare `.dropdown-item` (0,1,0) — which made every service inline-level, so they
     flowed onto shared lines with the tag jammed against the name. (0,2,0) wins. */
  .services-dropdown .dropdown-item{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    width:100%; padding:12px 14px; border-radius:9px;
    font-size:13.5px; color:var(--fg-dim);
    opacity:0; transform:translateY(8px);
    transition:background .25s var(--ease), color .25s var(--ease);
  }
  .services-dropdown .dropdown-item:hover{ background:rgba(255,255,255,.08); color:var(--fg); }
  .services-dropdown .dropdown-item .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint); white-space:nowrap; }
  .services-dropdown .dropdown-viewall{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    width:100%; margin-top:6px; padding:12px 14px 8px;
    border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--fg);
    opacity:0; transform:translateY(8px);
  }
  /* the .nav-links underline sweep would draw across each row on hover */
  .services-dropdown a::after{ display:none; }

  /* mobile services accordion */
  .mobile-services{ border-bottom:1px solid var(--line); }
  .mobile-services-toggle{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    font-family:var(--display); font-size:38px; padding:14px 0;
    color:var(--fg); text-align:left;
  }
  .mobile-services-toggle .chev{ font-size:20px; transition:transform .35s var(--ease); color:var(--fg-dim); }
  .mobile-services-toggle.open .chev{ transform:rotate(180deg); }
  /* The scroll container exists from the start rather than being switched on by
     `.open`. Creating an overflow container in the same frame as the inline
     max-height change is what iOS momentum scrolling trips over. `overflow-x`
     must be stated too: setting only `overflow-y` computes `overflow-x:visible`
     up to `auto`, which would add a stray horizontal scrollbar.
     The height cap itself is applied in JS (see servicesMaxHeight).
     Scrolling here also needs `data-lenis-prevent` on the element in the HTML —
     without it Lenis swallows the touchmove and nothing moves. */
  .mobile-services-list{
    max-height:0;
    overflow-y:auto; overflow-x:hidden;
    transition:max-height .4s var(--ease);
  }
  /* Deliberately NOT `overscroll-behavior:contain` here. On a small phone the menu
     itself also overflows, and containing the list would leave a finger that
     started inside it unable to reach Contact. Chaining is wanted; it stops at
     #mobile-menu, which does contain, so it still never reaches the page. */
  /* Must be ID-scoped: `#mobile-menu a` (specificity 1,0,1) outranks a plain
     `.mobile-services-list a` (0,1,1) and would render these as 38px display links. */
  #mobile-menu .mobile-services-list a{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:var(--body); font-size:17px; font-weight:400;
    padding:12px 0 12px 8px; border-bottom:none; color:var(--fg-dim);
  }
  #mobile-menu .mobile-services-list a .tag{ font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--fg-faint); }

  .btn{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:14px 26px;
    border:1px solid var(--line-strong);
    border-radius:100px;
    display:inline-flex; align-items:center; gap:10px;
    transition:border-color .4s var(--ease), background .4s var(--ease);
    white-space:nowrap;
  }
  .btn:hover{ border-color:var(--fg); }
  .btn-solid{
    background:var(--fg); color:var(--bg);
    border-color:var(--fg);
  }
  .btn-glass{
    background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  }
  .btn-glass:hover{ background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }
  .nav-cta{ display:inline-flex; }
  @media (max-width:900px){ .nav-cta{ display:none; } }

  .nav-right{ display:flex; align-items:center; gap:20px; }

  /* ===================== THEME TOGGLE ===================== */
  .theme-toggle{ display:flex; align-items:center; }
  .toggle-track{
    position:relative; width:50px; height:27px; border-radius:100px;
    background:var(--line); border:1px solid var(--line-strong);
    transition:background .4s var(--ease), border-color .4s var(--ease);
  }
  .toggle-thumb{
    position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%;
    background:var(--fg); color:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition:transform .5s var(--ease), background .4s var(--ease);
  }
  html[data-theme="light"] .toggle-thumb{ transform:translateX(23px); }
  .toggle-thumb svg{ position:absolute; transition:opacity .4s var(--ease), transform .55s var(--ease); }
  .icon-moon{ opacity:1; transform:rotate(0deg) scale(1); }
  .icon-sun{ opacity:0; transform:rotate(80deg) scale(.3); }
  html[data-theme="light"] .icon-moon{ opacity:0; transform:rotate(-80deg) scale(.3); }
  html[data-theme="light"] .icon-sun{ opacity:1; transform:rotate(0deg) scale(1); }

  .menu-btn{ display:none; }
  @media (max-width:900px){
    .menu-btn{ display:flex; flex-direction:column; gap:5px; width:26px; z-index:600; }
    .menu-btn span{ height:1px; width:100%; background:var(--fg); transition:transform .3s var(--ease), opacity .3s; }
  }

  #mobile-menu{
    position:fixed; inset:0; background:var(--bg);
    z-index:400;
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:0 32px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translateY(-100%);
    transition:transform .6s var(--ease);
  }
  /* Flexible spacers centre the menu when it fits and collapse when it doesn't.
     `justify-content:center` would clip the top overflow with no way to scroll
     back up to it, which made menu items look like they had vanished. */
  #mobile-menu::before,
  #mobile-menu::after{ content:''; flex:1 0 0; }
  #mobile-menu::before{ min-height:84px; }  /* clears the fixed nav bar */
  #mobile-menu::after{ min-height:32px; }
  #mobile-menu > *{ flex:0 0 auto; }        /* items must never be squashed */
  #mobile-menu.open{ transform:translateY(0); }
  #mobile-menu a{ font-family:var(--display); font-size:38px; padding:14px 0; border-bottom:1px solid var(--line); }

  /* background must not scroll behind the open menu */
  body.menu-open{ overflow:hidden; }
  /* hamburger becomes an X so there is a visible way back out */
  body.menu-open .menu-btn span:first-child{ transform:translateY(3px) rotate(45deg); }
  body.menu-open .menu-btn span:last-child{ transform:translateY(-3px) rotate(-45deg); }

  @media (max-width:420px){
    #mobile-menu a, .mobile-services-toggle{ font-size:28px; padding:11px 0; }
    #mobile-menu .mobile-services-list a{ font-size:15.5px; padding:10px 0 10px 8px; }
    .nav-logo{ font-size:15px; gap:8px; }
    .nav-logo .mark{ width:22px; }
    .nav-right{ gap:12px; }
    .toggle-track{ width:44px; height:24px; }
    .toggle-thumb{ width:19px; height:19px; }
    html[data-theme="light"] .toggle-thumb{ transform:translateX(20px); }
  }

  /* ===================== HERO ===================== */
  #hero{
    height:100svh; min-height:640px;
    display:flex; flex-direction:column; justify-content:flex-end;
    position:relative;
    overflow:hidden;
    background:transparent;
  }
  #hero::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(to top, var(--hero-overlay-1) 0%, var(--hero-overlay-2) 45%, var(--hero-overlay-3) 100%),
      linear-gradient(100deg, var(--hero-overlay-4) 0%, var(--hero-overlay-5) 38%, transparent 62%);
    pointer-events:none;
  }
  #hero-canvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    opacity:0;
    z-index:0;
  }
  .hero-top{
    position:relative; z-index:2;
    padding:140px 48px 0;
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:24px;
  }
  .hero-bottom{
    position:relative; z-index:2;
    padding:0 48px 64px;
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:40px;
  }
  @media (max-width:900px){ .hero-top{padding:120px 24px 0;} .hero-bottom{padding:0 24px 48px; flex-direction:column; align-items:flex-start; gap:28px;} }

  /* rotating corner badge */
  .hero-badge{
    position:relative;
    width:112px; height:112px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:badgespin 16s linear infinite; }
  .hero-badge svg text{
    font-family:var(--mono); font-size:9.4px; letter-spacing:.05em;
    fill:var(--fg-dim); text-transform:uppercase;
  }
  .hero-badge .badge-center{
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-badge .badge-center span{ width:6px; height:6px; border-radius:50%; background:var(--fg); }
  @keyframes badgespin{ to{ transform:rotate(360deg); } }
  @media (max-width:640px){ .hero-badge{ width:78px; height:78px; } .hero-badge .badge-center{ width:26px; height:26px; } }

  .headline{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(48px, 8.4vw, 128px);
    line-height:.94;
    letter-spacing:-.02em;
    text-transform:uppercase;
  }
  .headline .line{ overflow:hidden; }
  .headline .line span{ display:block; will-change:transform; }

  .hero-sub{
    max-width:380px;
    font-size:16px;
    color:var(--fg-dim);
    line-height:1.6;
  }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

  .hero-stat{
    font-family:var(--mono); font-size:12px; letter-spacing:.04em;
    color:var(--fg-dim); margin-top:14px; text-transform:uppercase;
  }
  .hero-stat b{ color:var(--fg); font-weight:500; }

  .play-btn{
    position:relative;
    width:56px; height:56px; border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    color:var(--fg);
    flex-shrink:0;
    transition:border-color .4s var(--ease), background .4s var(--ease);
  }
  .play-btn svg{ margin-left:2px; }
  .play-btn:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
  .play-ring{
    position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--line);
    animation:playpulse 2.4s ease-out infinite;
  }
  @keyframes playpulse{ 0%{ transform:scale(0.85); opacity:.9; } 100%{ transform:scale(1.25); opacity:0; } }

  /* ===================== CLIENTS MARQUEE ===================== */
  #clients{ padding:44px 0; background:rgba(5,5,5,.6); border-bottom:1px solid var(--line); }
  .clients-inner{ display:flex; align-items:center; gap:40px; }
  .clients-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--fg-faint); white-space:nowrap; padding-left:48px;
  }
  @media (max-width:900px){ .clients-label{ padding-left:24px; } }
  #clients .marquee{ flex:1; border:none; padding:0; margin:0; -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
  .client-name{
    font-family:var(--display); font-weight:500; font-size:20px;
    color:var(--fg-faint); text-transform:uppercase; letter-spacing:.02em;
    white-space:nowrap; padding:0 32px; border-right:1px solid var(--line);
  }
  /* The label is white-space:nowrap so it holds ~238px of the row; at 390px that
     leaves the flex:1 marquee about 112px while one .client-name needs ~163px —
     hence the single clipped, mask-faded logo. Stack below 900px, matching the
     breakpoint where the nav switches to the hamburger. */
  @media (max-width:900px){
    #clients{ padding:30px 0; }
    .clients-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
    /* flex:1 must be reset: in a column its flex-basis:0 resolves to zero HEIGHT,
       and .marquee is an overflow:hidden scroll container, so the automatic
       min-height:auto floor does not apply and it would collapse to nothing. */
    #clients .marquee{ flex:0 0 auto; width:100%; }
    #clients .marquee-track{ gap:24px; }
    #clients .client-name{ font-size:17px; padding:0 18px; }
  }

  .scroll-cue{
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--fg-faint);
    text-transform:uppercase;
  }
  .scroll-cue .line-anim{ width:1px; height:36px; background:var(--line-strong); position:relative; overflow:hidden; }
  .scroll-cue .line-anim::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
    background:var(--fg); animation:scrollcue 2s ease-in-out infinite;
  }
  @keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

  /* ===================== INTRO PIN ===================== */
  #intro{
    height:280vh;
    background:var(--surface-1);
  }
  .intro-pin{
    height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:0 48px;
  }
  .intro-text{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(30px, 6.4vw, 84px);
    line-height:1.06;
    letter-spacing:-.02em;
    text-transform:uppercase;
    text-align:center;
    max-width:1100px;
  }
  .intro-text .word{
    color:var(--fg-faint);
    display:inline-block;
    transition:color .1s linear;
  }

  /* ===================== SERVICES ===================== */
  #services{ padding:160px 0 120px; background:var(--surface-1); }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:40px; margin-bottom:80px;
    padding-bottom:32px;
    border-bottom:1px solid var(--line);
  }
  @media (max-width:900px){ .section-head{ flex-direction:column; align-items:flex-start; gap:20px; } }
  .section-title{
    font-family:var(--display); font-weight:600;
    font-size:clamp(36px,5.6vw,72px);
    letter-spacing:-.02em; text-transform:uppercase; line-height:1;
  }
  .section-note{ max-width:320px; font-size:14px; color:var(--fg-dim); text-align:right; }
  @media (max-width:900px){ .section-note{ text-align:left; } }

  .service-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:40px 8px;
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
    cursor:none;
    transition:padding .5s var(--ease);
  }
  @media (max-width:900px){ .service-row{ cursor:auto; flex-wrap:wrap; gap:16px; padding:28px 4px;} }
  .service-row .bg-fill{
    position:absolute; left:0; top:0; bottom:0; width:100%;
    background:var(--fg);
    transform:translateX(-101%);
    transition:transform .55s var(--ease);
    z-index:0;
  }
  .service-row:hover .bg-fill{ transform:translateX(0%); }
  .service-row-inner{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:32px; width:100%; justify-content:space-between;
  }
  .service-num{
    font-family:var(--mono); font-size:12px; color:var(--fg-faint);
    transition:color .4s var(--ease);
  }
  .service-row:hover .service-num{ color:var(--bg-alt); opacity:.5; }
  .service-name{
    font-family:var(--display); font-weight:500;
    font-size:clamp(24px,3.6vw,46px);
    letter-spacing:-.01em;
    transition:color .4s var(--ease), transform .5s var(--ease);
    flex:1;
    padding-left:32px;
  }
  .service-row:hover .service-name{ color:var(--bg); transform:translateX(14px); }
  @media (max-width:900px){ .service-row:hover .service-name{ transform:none; } .service-name{padding-left:16px;} }
  .service-tag{
    font-family:var(--mono); font-size:11px; color:var(--fg-dim);
    letter-spacing:.08em; text-transform:uppercase;
    transition:color .4s var(--ease);
    display:flex; align-items:center; gap:10px;
  }
  .service-row:hover .service-tag{ color:var(--bg-alt); opacity:.65; }
  .service-arrow{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
  }
  .service-row:hover .service-arrow{ transform:rotate(45deg); border-color:var(--bg); background:var(--bg); color:var(--fg); }

  /* ===================== GROWTH GRAPHIC ===================== */
  #growth{ padding:160px 0; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .growth-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center; }
  @media (max-width:960px){ .growth-grid{ grid-template-columns:1fr; gap:56px; } }
  .growth-labels{ display:flex; flex-direction:column; gap:36px; }
  .growth-label{
    display:flex; align-items:center; gap:16px;
    opacity:.3; transition:opacity .4s;
  }
  .growth-label.active{ opacity:1; }
  .growth-label .dot{ width:8px; height:8px; border-radius:50%; background:var(--fg); flex-shrink:0; }
  .growth-label .txt{ font-family:var(--display); font-size:clamp(20px,2.4vw,32px); text-transform:uppercase; letter-spacing:-.01em; }
  .growth-svg-wrap{ position:relative; }
  .growth-svg-wrap svg{ width:100%; height:auto; overflow:visible; }
  #growth-path{ fill:none; stroke:var(--fg); stroke-width:2; stroke-linecap:round; }
  .growth-point{ fill:var(--bg-alt); stroke:var(--fg); stroke-width:2; opacity:0; }
  .growth-figure{
    font-family:var(--mono); font-size:34px; fill:var(--fg);
  }

  /* ===================== SHOWCASE (horizontal) ===================== */
  #showcase-pin{ background:var(--surface-1); }
  .showcase-sticky{ height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
  .showcase-head{ padding:0 48px; margin-bottom:56px; }
  @media (max-width:900px){ .showcase-head{ padding:0 24px; } }
  .showcase-track{
    display:flex; gap:40px; padding-left:48px; will-change:transform;
  }
  .project-card{
    flex-shrink:0;
    width:min(72vw, 760px);
  }
  .project-frame{
    width:100%; aspect-ratio:16/10;
    border-radius:6px;
    overflow:hidden;
    position:relative;
  }
  .project-frame .bar{
    height:34px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:6px; padding:0 14px;
  }
  .project-frame .bar span{ width:8px; height:8px; border-radius:50%; background:var(--fg-faint); }
  .project-frame .content{ padding:36px; display:flex; flex-direction:column; gap:14px; height:calc(100% - 34px); justify-content:center; }
  .project-frame .content .ph-line{ height:10px; background:var(--line-strong); border-radius:2px; }
  .project-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:22px; }
  .project-title{ font-family:var(--display); font-weight:500; font-size:24px; }
  .project-num{ font-family:var(--mono); font-size:12px; color:var(--fg-dim); }

  /* ---- live client card: the shot scrolls behind fake browser chrome ---- */
  /* This one `.project-card` is an <a>. It blockifies anyway as a flex item of
     `.showcase-track`, but say it out loud so the rule survives being moved. */
  .project-card.is-live{ display:block; transition:transform .5s var(--ease); }
  .project-card.is-live:hover{ transform:translateY(-6px); }
  .project-card.is-live:focus-visible{ outline:1px solid var(--fg); outline-offset:10px; }
  .project-card.is-live .project-frame{
    display:flex; flex-direction:column;
    transition:border-color .45s var(--ease);
  }
  .project-card.is-live:hover .project-frame{ border-color:var(--fg-faint); }
  /* `.bar` has no flex-shrink of its own, and in a column the default 1 would let
     it squash. Pin it so only the viewport below absorbs the height. */
  .project-card.is-live .bar{ flex:0 0 auto; }

  /* Address bar. A <div>, not a <span> — `.project-frame .bar span` (0,2,1) turns
     every span in here into an 8px traffic-light dot and would beat any class. */
  .bar-url{
    margin-left:12px; display:flex; align-items:center; gap:6px;
    font-family:var(--mono); font-size:10px; letter-spacing:.02em;
    color:var(--fg-dim); white-space:nowrap; overflow:hidden;
  }
  .bar-url svg{ width:9px; height:10px; flex-shrink:0; opacity:.75; }

  /* The window the page travels behind. `flex:1 1 0` resolves to a real height
     because `.project-frame` has a definite one from `aspect-ratio`; `min-height:0`
     stops the image's intrinsic height from forcing the frame open instead. */
  .shot-view{ flex:1 1 0; min-height:0; position:relative; overflow:hidden; }
  .site-shot{
    position:absolute; top:0; left:0;
    display:block; width:100%; height:auto;
    /* Fast eased return, slow linear travel — a 6s reverse on mouseleave feels
       broken, so the hover state overrides duration and timing rather than the
       base rule carrying one setting for both directions. */
    transition:transform 1.1s var(--ease);
  }
  /* `--shot-shift` and `--shot-dur` are measured in main.js so the travel stops
     exactly at the foot of the page and the speed stays constant whatever the card
     or screenshot size. The fallbacks keep the effect alive if JS never runs. */
  .project-card.is-live:hover .site-shot,
  .project-card.is-live:focus-visible .site-shot{
    transform:translateY(var(--shot-shift, -74%));
    transition-duration:var(--shot-dur, 6s);
    transition-timing-function:linear;
  }

  .shot-cta{
    position:absolute; left:0; right:0; bottom:0; height:58%;
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:26px;
    /* `--hero-overlay-*` are this file's theme-aware scrim tints — near-black in the
       dark theme, near-paper in the light one — so reusing them makes the scrim flip
       with the theme for free. The top stop is the .1 alpha rather than `transparent`
       because fading a colour to `transparent` is the classic grey-halo trap. */
    background:linear-gradient(to top, var(--hero-overlay-1) 0%, var(--hero-overlay-4) 36%, var(--hero-overlay-2) 100%);
    opacity:0; transition:opacity .5s var(--ease);
    pointer-events:none;
  }
  .project-card.is-live:hover .shot-cta,
  .project-card.is-live:focus-visible .shot-cta{ opacity:1; }
  .shot-pill{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 22px; border-radius:999px;
    background:var(--fg); color:var(--bg);
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em;
    transform:translateY(14px);
    transition:transform .55s var(--ease);
  }
  .shot-pill svg{ width:11px; height:11px; }
  .project-card.is-live:hover .shot-pill,
  .project-card.is-live:focus-visible .shot-pill{ transform:translateY(0); }

  .project-card.is-live .project-meta{ align-items:center; }
  .project-card.is-live .project-num{ display:inline-flex; align-items:center; gap:7px; }
  .live-dot{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--fg);
    animation:live-pulse 2.4s var(--ease) infinite; }
  @keyframes live-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

  @media (hover:none), (max-width:900px){
    /* Nothing to hover on a phone, so the pill is the only affordance and stays put;
       the shot rests at the top of the page rather than travelling. */
    .shot-cta{ opacity:1; height:46%; }
    .shot-pill{ transform:translateY(0); padding:11px 18px; font-size:10px; }
    .project-card.is-live:hover{ transform:none; }
    .project-card.is-live:hover .site-shot,
    .project-card.is-live:focus-visible .site-shot{ transform:none; }
  }
  @media (prefers-reduced-motion:reduce){
    /* The blanket `*{ transition-duration:.001ms !important }` further down this
       file is not enough on its own here — it would collapse the travel to zero
       time and make the shot *snap* to the foot of the page on hover, which is a
       worse thing to show someone who asked for less motion than no movement at
       all. Killing the transform is what actually stills it. */
    .project-card.is-live:hover .site-shot,
    .project-card.is-live:focus-visible .site-shot{ transform:none; transition:none; }
    .live-dot{ animation:none; }
  }

  /* ===================== CASE STUDY ===================== */
  #case{ padding:120px 0; background:var(--surface-1); overflow:hidden; }

  .case-carousel{ position:relative; margin-top:56px; }
  .case-track-wrap{ overflow:hidden; }
  .case-track{ display:flex; transition:transform .6s var(--ease); will-change:transform; }
  .case-slide{
    flex:0 0 100%; width:100%;
    display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center;
  }
  @media (max-width:960px){ .case-slide{ grid-template-columns:1fr; gap:36px; } }

  .case-slide-visual{
    border-radius:12px; overflow:hidden;
    height:520px;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  @media (max-width:600px){ .case-slide-visual{ height:380px; } }
  .case-slide-visual img{
    max-width:100%; max-height:100%; width:auto; height:auto;
    object-fit:contain; border-radius:4px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }

  .case-eyebrow{ margin-bottom:20px; }
  .case-title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,42px); text-transform:uppercase; line-height:1.1; letter-spacing:-.02em; margin-bottom:28px; }
  .case-block{ margin-bottom:24px; }
  .case-block h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:8px; }
  .case-block p{ font-size:15px; line-height:1.7; color:var(--fg); max-width:480px; }
  .case-results{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .case-result-tag{
    font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--fg); padding:9px 15px; border:1px solid var(--line-strong); border-radius:100px;
    white-space:nowrap;
  }

  .case-controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:44px; }
  .case-arrow{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .case-arrow:hover{ border-color:var(--fg); background:rgba(255,255,255,.04); }
  .case-dots{ display:flex; gap:10px; }
  .case-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); transition:background .3s var(--ease), transform .3s var(--ease); }
  .case-dot.active{ background:var(--fg); transform:scale(1.2); }


  /* ===================== PROCESS ===================== */
  #process{ padding:140px 0; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .process-list{ position:relative; margin-top:40px; }
  .process-line{ position:absolute; left:19px; top:0; bottom:0; width:1px; background:var(--line); }
  .process-line-fill{ position:absolute; left:19px; top:0; width:1px; background:var(--fg); height:0%; }
  .process-step{ display:flex; gap:36px; padding:40px 0; position:relative; opacity:.35; transition:opacity .4s; }
  .process-step.active{ opacity:1; }
  .process-dot{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg-alt); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; z-index:1; transition:border-color .4s, background .4s, color .4s; }
  .process-step.active .process-dot{ border-color:var(--fg); background:var(--fg); color:var(--bg); }
  .process-body h3{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,38px); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:10px; }
  .process-body p{ color:var(--fg-dim); max-width:520px; font-size:15px; }
  /* Teaser link through to the full process page. No `transform` here — `.reveal`
     owns transform/opacity on this element, so the hover nudge moves the arrow. */
  .process-more{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; margin-left:76px;
    font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--fg-dim); border-bottom:1px solid var(--line-strong); padding-bottom:6px;
    transition:color .3s var(--ease), border-color .3s var(--ease); }
  .process-more svg{ transition:transform .3s var(--ease); }
  .process-more:hover{ color:var(--fg); border-color:var(--fg); }
  .process-more:hover svg{ transform:translateX(4px); }
  @media (max-width:900px){ .process-more{ margin-left:0; } }

  /* ===================== RESULTS ===================== */
  /* ===================== INLINE CTA STRIP ===================== */
  .cta-strip{ padding:52px 0; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cta-strip-inner{
    display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
  }
  .cta-strip-text{
    font-family:var(--display); font-weight:500; font-size:clamp(19px,2.4vw,27px);
    letter-spacing:-.01em; color:var(--fg); max-width:600px;
    position:relative; padding-bottom:16px;
  }
  .cta-strip-text::after{
    content:''; position:absolute; left:0; bottom:0; height:2px;
    background:linear-gradient(90deg, var(--fg), transparent);
    animation:ctaLineGrow 3.2s ease-in-out infinite alternate;
  }
  @keyframes ctaLineGrow{ from{ width:28px; opacity:.45; } to{ width:72px; opacity:1; } }

  .cta-strip .btn-solid{ position:relative; overflow:hidden; }
  .cta-strip .btn-solid::after{
    content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(0,0,0,.22), transparent);
    animation:ctaShimmer 4.8s ease-in-out infinite;
  }
  @keyframes ctaShimmer{
    0%{ left:-60%; } 30%{ left:130%; } 100%{ left:130%; }
  }
  @media (prefers-reduced-motion: reduce){
    .cta-strip-text::after{ animation:none; width:56px; opacity:.8; }
    .cta-strip .btn-solid::after{ animation:none; display:none; }
  }
  @media (max-width:700px){
    .cta-strip-inner{ flex-direction:column; align-items:flex-start; }
  }

  /* ===================== BACK TO TOP ===================== */
  .back-to-top{
    position:fixed; right:26px; bottom:26px; z-index:300;
    width:54px; height:54px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--nav-glass-a), var(--nav-glass-b));
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid var(--nav-border);
    color:var(--fg);
    opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s, border-color .3s, background .3s;
  }
  .back-to-top.show{
    opacity:1; visibility:visible; transform:translateY(0) scale(1);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear 0s, border-color .3s, background .3s;
  }
  .back-to-top:hover{ border-color:var(--fg); }
  .back-to-top .ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
  .back-to-top .ring-track{ fill:none; stroke:var(--line); stroke-width:2; }
  .back-to-top .ring-progress{
    fill:none; stroke:var(--fg); stroke-width:2; stroke-linecap:round;
    stroke-dasharray:157; stroke-dashoffset:157;
    transition:stroke-dashoffset .1s linear;
  }
  .back-to-top .arrow{ position:relative; z-index:1; transition:transform .35s var(--ease); }
  .back-to-top:hover .arrow{ transform:translateY(-3px); }
  @media (max-width:640px){ .back-to-top{ right:16px; bottom:16px; width:48px; height:48px; } }

  #results{ padding:180px 0 100px; background:var(--surface-1); text-align:center; }
  .results-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:80px; }
  @media (max-width:900px){ .results-stats{ grid-template-columns:repeat(2,1fr); gap:48px 24px; } }
  .stat{ display:flex; flex-direction:column; gap:8px; }
  .stat b{ font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.01em; text-transform:uppercase; }
  .stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }

  .marquee{ margin-top:120px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
  .marquee-track{ display:flex; width:max-content; gap:40px; will-change:transform; }
  .marquee-track span{ font-family:var(--display); font-size:26px; text-transform:uppercase; color:var(--fg-faint); white-space:nowrap; letter-spacing:-.01em; }

  /* ===================== FINAL CTA ===================== */
  #final{
    height:100vh; min-height:600px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; position:relative; overflow:hidden;
    background:transparent;
  }
  #final::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:radial-gradient(90% 70% at 50% 100%, var(--hero-overlay-2) 0%, var(--hero-overlay-4) 100%);
    pointer-events:none;
  }
  #final-canvas{ position:absolute; inset:0; opacity:0; z-index:0; }
  .final-inner{ position:relative; z-index:2; }
  .final-title{ font-family:var(--display); font-weight:600; font-size:clamp(40px,8vw,110px); text-transform:uppercase; line-height:.96; letter-spacing:-.02em; margin-bottom:44px; }
  .magnetic-cta{
    position:relative; width:200px; height:200px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  }
  .magnetic-cta:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
  .magnetic-cta:hover::before{ display:none; }
  @media (max-width:600px){ .magnetic-cta{ width:150px; height:150px; font-size:11px; } }

  /* ===================== ABOUT BRIEF (homepage) ===================== */
  #about-brief{ padding:140px 0; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-brief-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
  @media (max-width:960px){ .about-brief-grid{ grid-template-columns:1fr; gap:40px; } }
  .about-brief-visual{
    aspect-ratio:1/1; border-radius:12px; position:relative; overflow:hidden;
  }
  .about-brief-visual::after{
    content:''; position:absolute; inset:0;
    background-image:url('../images/about-brief.webp');
    background-repeat:no-repeat; background-position:center; background-size:cover;
  }
  .about-brief-text{
    font-family:var(--display); font-weight:600; font-size:clamp(24px,2.6vw,34px);
    line-height:1.3; letter-spacing:-.01em; max-width:560px; margin:18px 0 20px;
  }
  .about-brief-sub{ color:var(--fg-dim); font-size:15px; line-height:1.7; max-width:520px; margin-bottom:32px; }

  /* ===================== ABOUT PAGE ===================== */
  #our-story{ padding:100px 0; }
  .story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:flex-start; }
  @media (max-width:960px){ .story-grid{ grid-template-columns:1fr; gap:40px; } }
  .story-visual{ aspect-ratio:4/5; border-radius:12px; position:relative; overflow:hidden; align-self:stretch; }
  .story-visual::after{
    content:''; position:absolute; inset:0;
    background-image:url('../images/about-story.webp');
    background-repeat:no-repeat; background-position:center; background-size:cover;
  }
  .story-copy p{ font-size:16px; line-height:1.85; color:var(--fg-dim); margin-bottom:22px; max-width:560px; }
  .story-copy p:last-child{ margin-bottom:0; }

  #about-statement{ padding:160px 0; background:rgba(5,5,5,.6); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
  .statement-text{
    font-family:var(--display); font-weight:500; font-size:clamp(20px,2.6vw,32px);
    line-height:1.6; color:var(--fg-dim); max-width:820px; margin:0 auto 36px;
  }
  .statement-highlight{
    font-family:var(--display); font-weight:600; font-size:clamp(28px,4vw,48px);
    text-transform:uppercase; letter-spacing:-.01em; color:var(--fg); max-width:760px; margin:0 auto; line-height:1.2;
  }

  #vision-mission{ padding:120px 0; }
  .vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:48px; }
  @media (max-width:800px){ .vm-grid{ grid-template-columns:1fr; } }
  .vm-card{ padding:44px; border-radius:14px; }
  .vm-card .eyebrow{ margin-bottom:20px; }
  .vm-card h3{ font-family:var(--display); font-weight:600; font-size:clamp(26px,2.8vw,34px); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:18px; }
  .vm-card p{ color:var(--fg-dim); font-size:15px; line-height:1.8; }

  /* ===================== TEAM MESSAGE (About page) ===================== */
  #team-message{ padding:0 0 120px; }
  .message-card{ display:grid; grid-template-columns:0.75fr 1.25fr; gap:64px; align-items:center; }
  @media (max-width:860px){ .message-card{ grid-template-columns:1fr; gap:36px; } }
  .message-photo{
    aspect-ratio:4/5; border-radius:14px; overflow:hidden; position:relative;
  }
  .message-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .message-content .eyebrow{ margin-bottom:22px; }
  .message-quote p{
    font-family:var(--display); font-weight:500; font-size:clamp(18px,2.2vw,24px);
    line-height:1.55; letter-spacing:-.01em; color:var(--fg); margin-bottom:20px; max-width:600px;
  }
  .message-quote p:last-child{ margin-bottom:0; }
  .message-sign{ display:flex; flex-direction:column; gap:4px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
  .message-sign .name{ font-family:var(--display); font-weight:600; font-size:18px; text-transform:uppercase; letter-spacing:-.01em; }
  .message-sign .title{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); }

  #social-links{ padding:120px 0 160px; background:var(--surface-2); border-top:1px solid var(--line); }
  .social-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
  @media (max-width:860px){ .social-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .social-grid{ grid-template-columns:1fr; } }
  .social-card{
    display:flex; flex-direction:column; gap:26px; padding:32px 26px;
    border:1px solid var(--line-strong); border-radius:14px;
    transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  }
  .social-card:hover{ border-color:var(--fg); transform:translateY(-6px); background:rgba(255,255,255,.03); }
  .social-card .icon{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; transition:background .4s var(--ease), border-color .4s var(--ease);
  }
  .social-card:hover .icon{ background:var(--fg); border-color:var(--fg); }
  .social-card:hover .icon svg{ stroke:var(--bg); }
  .social-card .name{ font-family:var(--display); font-weight:500; font-size:20px; text-transform:uppercase; }
  .social-card .handle{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:8px; margin-top:-14px; }
  .social-card .handle svg{ transition:transform .4s var(--ease); }
  .social-card:hover .handle svg{ transform:translate(3px,-3px); }

  /* ===================== INNER PAGE HERO (services / blog / contact) ===================== */
  .page-hero{
    padding:180px 0 90px;
    position:relative;
    background:var(--surface-1);
    border-bottom:1px solid var(--line);
  }
  @media (max-width:900px){ .page-hero{ padding:150px 0 64px; } }
  .breadcrumb{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--fg-dim); margin-bottom:28px; display:flex; align-items:center; gap:8px;
  }
  .breadcrumb a{ color:var(--fg-dim); transition:color .3s; }
  .breadcrumb a:hover{ color:var(--fg); }
  .page-title{
    font-family:var(--display); font-weight:600;
    font-size:clamp(36px,6vw,84px); line-height:1; letter-spacing:-.02em;
    text-transform:uppercase; max-width:900px; margin-bottom:24px;
  }
  .page-lede{ max-width:560px; font-size:17px; color:var(--fg-dim); line-height:1.7; }
  .page-hero-ctas{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }

  /* ===================== INCLUDES / FEATURE GRID ===================== */
  #includes{ padding:100px 0; }
  .includes-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:760px){ .includes-grid{ grid-template-columns:1fr; } }
  .includes-item{ background:var(--bg); padding:44px; }
  .includes-item .num{ font-family:var(--mono); font-size:12px; color:var(--fg-faint); display:block; margin-bottom:18px; }
  .includes-item h3{ font-family:var(--display); font-weight:500; font-size:24px; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:12px; }
  .includes-item p{ font-size:14px; color:var(--fg-dim); line-height:1.7; max-width:400px; }

  /* ===================== RELATED SERVICES ===================== */
  #related{ padding:100px 0; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
  @media (max-width:900px){ .related-grid{ grid-template-columns:1fr; } }
  .related-card{
    display:block; padding:32px; border:1px solid var(--line-strong); border-radius:6px;
    transition:border-color .4s var(--ease), transform .4s var(--ease);
  }
  .related-card:hover{ border-color:var(--fg); transform:translateY(-4px); }
  .related-card .tag{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:.08em; }
  .related-card h4{ font-family:var(--display); font-weight:500; font-size:22px; text-transform:uppercase; margin:14px 0 10px; }
  .related-card .arrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:.08em; }

  /* ===================== SERVICES HUB GRID ===================== */
  #services-hub{ padding:100px 0 160px; }
  .hub-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
  @media (max-width:760px){ .hub-grid{ grid-template-columns:1fr; } }

  /* ===================== WORK HUB PAGE ===================== */
  #work-hub{ padding:100px 0 160px; }
  .work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px 40px; margin-top:56px; }
  @media (max-width:860px){ .work-grid{ grid-template-columns:1fr; } }
  .work-grid .project-card{ width:100%; }
  .hub-card{
    background:var(--bg); padding:48px; display:flex; flex-direction:column; gap:18px;
    position:relative; overflow:hidden; transition:background .4s var(--ease);
  }
  .hub-card:hover{ background:rgba(255,255,255,.03); }
  .hub-card .num{ font-family:var(--mono); font-size:12px; color:var(--fg-faint); }
  .hub-card h3{ font-family:var(--display); font-weight:600; font-size:clamp(24px,2.6vw,34px); text-transform:uppercase; letter-spacing:-.01em; }
  .hub-card p{ font-size:14px; color:var(--fg-dim); line-height:1.7; max-width:380px; }
  .hub-card .arrow-link{ margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--fg); }
  .hub-card .arrow-link svg{ transition:transform .4s var(--ease); }
  .hub-card:hover .arrow-link svg{ transform:translate(4px,-4px); }

  /* ===================== BLOG ===================== */
  #blog-grid{ padding:100px 0 200px; }
  .blog-coming-soon{
    max-width:640px; margin-top:40px; padding:64px 0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .blog-coming-soon .eyebrow{ margin-bottom:24px; }
  .blog-coming-soon h2{
    font-family:var(--display); font-weight:600; font-size:clamp(24px,3.2vw,38px);
    line-height:1.3; letter-spacing:-.01em; margin-bottom:16px;
  }
  .blog-coming-soon p{ color:var(--fg-dim); font-size:15px; }

  /* ===================== FAQ ACCORDION ===================== */
  #faqs{ padding:100px 0; }
  #faqs.faqs-inline{ padding:80px 0 0; }
  .faq-list{ margin-top:32px; border-top:1px solid var(--line); max-width:760px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    list-style:none; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    padding:26px 4px;
    font-family:var(--display); font-weight:500; font-size:clamp(16px,2vw,19px);
    letter-spacing:-.01em;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ color:var(--fg-dim); }
  .faq-icon{
    width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative;
  }
  .faq-icon::before, .faq-icon::after{
    content:''; position:absolute; background:var(--fg); transition:transform .3s var(--ease);
  }
  .faq-icon::before{ width:10px; height:1px; }
  .faq-icon::after{ width:1px; height:10px; }
  .faq-item[open] .faq-icon::after{ transform:scaleY(0); }
  .faq-answer{ padding:0 32px 26px 4px; color:var(--fg-dim); font-size:15px; line-height:1.75; max-width:680px; }

  /* ===================== LEGAL PAGES (Privacy / Terms) ===================== */
  #legal-content{ padding:20px 0 140px; }
  .legal-copy{ max-width:760px; }
  .legal-copy p{ font-size:15px; line-height:1.8; color:var(--fg-dim); margin-bottom:20px; }
  .legal-copy h2{
    font-family:var(--display); font-weight:600; font-size:22px; text-transform:uppercase;
    letter-spacing:-.01em; color:var(--fg); margin:40px 0 14px;
  }
  .legal-copy h2:first-child{ margin-top:0; }
  .legal-copy a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

  /* ===================== CONTACT PAGE ===================== */
  #contact-section{ padding:60px 0 160px; }
  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:flex-start; }
  @media (max-width:960px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }

  .contact-info h2{
    font-family:var(--display); font-weight:600; font-size:clamp(28px,3.4vw,42px);
    text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; margin-bottom:20px;
  }
  .contact-info p{ color:var(--fg-dim); font-size:15px; line-height:1.75; max-width:420px; margin-bottom:36px; }
  .contact-detail{ display:flex; flex-direction:column; gap:22px; margin-bottom:44px; }
  .contact-detail-item .label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:6px; display:block; }
  .contact-detail-item a, .contact-detail-item span.value{ font-family:var(--display); font-size:19px; color:var(--fg); }
  .contact-detail-item a{ transition:opacity .3s; }
  .contact-detail-item a:hover{ opacity:.7; }
  .contact-socials{ display:flex; gap:14px; }
  .contact-socials a{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s;
    font-family:var(--mono); font-size:11px;
  }
  .contact-socials a:hover{ border-color:var(--fg); background:rgba(255,255,255,.06); }

  .contact-form-panel{
    border-radius:16px; padding:44px;
  }
  @media (max-width:600px){ .contact-form-panel{ padding:28px; } }

  .field{ position:relative; margin-bottom:26px; }
  .field input, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
    color:var(--fg); font-family:var(--body); font-size:16px; padding:14px 2px 12px;
    transition:border-color .3s var(--ease);
  }
  .field textarea{ resize:vertical; min-height:90px; }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--fg); }
  .field label{
    position:absolute; left:2px; top:14px;
    font-family:var(--body); font-size:16px; color:var(--fg-faint);
    pointer-events:none;
    transition:transform .25s var(--ease), font-size .25s var(--ease), color .25s var(--ease);
    transform-origin:left top;
  }
  .field input:focus + label,
  .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label,
  .field textarea:not(:placeholder-shown) + label{
    transform:translateY(-20px);
    font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--fg-dim);
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

  .field-group{ margin-bottom:30px; }
  .field-group > .group-label{
    display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--fg-dim); margin-bottom:14px;
  }
  .pill-options{ display:flex; flex-wrap:wrap; gap:10px; }
  .pill-options input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
  .pill-options label{
    padding:10px 18px; border:1px solid var(--line-strong); border-radius:100px;
    font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--fg-dim);
    cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  }
  .pill-options input[type="radio"]:checked + label{
    background:var(--fg); color:var(--bg); border-color:var(--fg);
  }
  .pill-options input[type="radio"]:focus-visible + label{ outline:2px solid var(--fg); outline-offset:2px; }

  .char-count{ text-align:right; font-family:var(--mono); font-size:10px; color:var(--fg-faint); margin-top:-16px; margin-bottom:20px; }

  .form-submit-row{ display:flex; align-items:center; gap:20px; margin-top:8px; }
  .form-submit-row .btn{ border:none; }
  .form-note{ font-family:var(--mono); font-size:10.5px; color:var(--fg-faint); letter-spacing:.02em; }

  #contact-form{ position:relative; }
  #contact-success{
    display:none; text-align:center; padding:40px 10px;
  }
  #contact-success.show{ display:block; }
  #contact-form.hide-form{ display:none; }
  .success-check{
    width:64px; height:64px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
  }
  #contact-success h3{ font-family:var(--display); font-weight:600; font-size:26px; text-transform:uppercase; margin-bottom:10px; }
  #contact-success p{ color:var(--fg-dim); font-size:14px; }

  /* ===================== FOOTER ===================== */
  footer{ padding:64px 0 0; background:var(--surface-3); border-top:1px solid var(--line); overflow:hidden; }

  .footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding-bottom:40px; }
  .footer-clock{ display:flex; align-items:baseline; gap:10px; }
  .footer-clock .label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }
  .footer-clock .value{ font-family:var(--mono); font-size:15px; color:var(--fg); letter-spacing:.02em; }
  .footer-clock .tz-tag{ font-family:var(--mono); font-size:10px; color:var(--fg-faint); }
  .footer-zones{ display:flex; gap:32px; flex-wrap:wrap; }
  .zone{ display:flex; flex-direction:column; gap:4px; }
  .zone-city{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); }
  .zone-time{ font-family:var(--mono); font-size:13px; color:var(--fg-dim); }
  @media (max-width:700px){ .footer-top{ flex-direction:column; align-items:flex-start; } }

  .footer-divider{ height:1px; background:var(--line); }

  .footer-columns{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:48px 0; }
  @media (max-width:860px){ .footer-columns{ grid-template-columns:repeat(2,1fr); gap:40px 24px; } }
  @media (max-width:480px){ .footer-columns{ grid-template-columns:1fr; } }
  .footer-col{ display:flex; flex-direction:column; gap:13px; }
  .footer-col .col-title{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:6px; }
  .footer-col a{ font-size:14px; color:var(--fg-dim); transition:color .3s; width:fit-content; }
  .footer-col a:hover{ color:var(--fg); }
  .footer-text{ font-size:13px; color:var(--fg-faint); line-height:1.6; max-width:220px; }

  .footer-network-wrap{ position:relative; height:200px; margin-top:8px; opacity:.8; pointer-events:none; }
  #footer-network{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(1000px, 130%); height:auto; }
  .net-ring{ fill:none; stroke:var(--line-strong); stroke-width:1; }
  .net-dot{ fill:var(--fg-faint); }
  .net-node{ fill:none; stroke:var(--fg-dim); stroke-width:1.4; }
  .net-arc{
    fill:none; stroke:var(--fg-dim); stroke-width:1.4;
    stroke-dasharray:60 400; stroke-dashoffset:0;
    animation:netarc 4.5s ease-in-out infinite;
  }
  @keyframes netarc{
    0%{ stroke-dashoffset:460; opacity:0; }
    12%{ opacity:1; }
    55%{ stroke-dashoffset:0; opacity:1; }
    80%{ opacity:.3; }
    100%{ stroke-dashoffset:-460; opacity:0; }
  }

  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    padding:24px 0; border-top:1px solid var(--line);
  }
  .footer-copy{ font-family:var(--mono); font-size:11px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.04em; }
  .footer-legal{ display:flex; gap:20px; }
  .footer-legal a{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); text-transform:uppercase; letter-spacing:.06em; transition:color .3s; }
  .footer-legal a:hover{ color:var(--fg); }
  .footer-mark{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.6; }

  .reveal{ opacity:0; transform:translateY(40px); }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  /* ===================== CONTINUOUS BG GRADIENT ===================== */
  #bg-fx{
    position:fixed; inset:0; z-index:-1;
    overflow:hidden;
    background:var(--bgfx-base);
  }
  #bg-fx .layer{
    position:absolute; inset:-35%;
    will-change:transform;
  }
  #bg-fx .layer-a{
    background:conic-gradient(from 0deg at 32% 38%, var(--bgfx-a1), var(--bgfx-a2), var(--bgfx-a3), var(--bgfx-a4), var(--bgfx-a5), var(--bgfx-a1));
    filter:blur(90px);
    opacity:.85;
    animation:bgspin 42s linear infinite;
  }
  #bg-fx .layer-b{
    background:conic-gradient(from 200deg at 72% 68%, var(--bgfx-b1), var(--bgfx-b2), var(--bgfx-b1), var(--bgfx-b4), var(--bgfx-b1));
    filter:blur(110px);
    opacity:.6;
    mix-blend-mode:screen;
    animation:bgspin 58s linear infinite reverse;
  }
  #bg-fx .grain{
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(244,244,242,.04) 1px, transparent 1px);
    background-size:3px 3px;
    opacity:.5;
  }
  @keyframes bgspin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    #bg-fx .layer{ animation:none !important; }
  }

  /* ===================== PROCESS PAGE — "FOLD SHEET" =====================
     Its own .fold-* namespace on purpose. The homepage teaser uses
     #process / .process-step / #process-fill, and reusing those names here
     would both inherit that section's padding and hand this page's markup to
     the homepage's #process-fill ScrollTrigger. Nothing below reuses a class
     that already exists in this file. */

  /* --- hero: the flat sheet, before anything is folded --- */
  /* .page-hero already sets padding + a bottom border, and both selectors are
     one class each — so this is scoped to (0,2,0) rather than relying on being
     later in the file. */
  .page-hero.fold-hero{ padding-bottom:76px; }
  @media (max-width:900px){ .page-hero.fold-hero{ padding-bottom:56px; } }

  .fold-sheet-wrap{ margin-top:64px; }
  #fold-sheet{ display:block; width:100%; height:auto; overflow:visible; }
  #fold-sheet .fs-edge{ fill:none; stroke:var(--fg); stroke-width:1.25; }
  #fold-sheet .fs-crease{ stroke:var(--fg-dim); stroke-width:1; }
  #fold-sheet .is-valley{ stroke-dasharray:5 4; }
  /* Mountain is solid. Stated rather than left to the default so the pair reads as
     a deliberate convention, and so a future .fs-crease dash rule can't leak in. */
  #fold-sheet .is-mountain{ stroke-dasharray:none; }
  #fold-sheet .fs-num{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em;
    fill:var(--fg-faint); stroke:none;
  }
  #fold-sheet .fs-chev{ fill:none; stroke:var(--fg-faint); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }

  /* the notation legend carries real information: which folds you help decide */
  .fold-legend{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:30px; }
  .fold-legend-item{
    display:flex; align-items:center; gap:11px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--fg-dim);
  }
  .fold-legend-item .key{ width:32px; height:0; border-top:1px solid var(--fg-dim); flex:0 0 auto; }
  .fold-legend-item .key.dashed{ border-top-style:dashed; }

  /* --- hero title block, borrowed from an engineering drawing sheet --- */
  .fold-titleblock{
    display:grid; grid-template-columns:repeat(4,1fr);
    border:1px solid var(--line); margin-top:60px;
  }
  .fold-titleblock > div{ padding:20px 22px; border-right:1px solid var(--line); }
  .fold-titleblock > div:last-child{ border-right:none; }
  .fold-tb-key{
    display:block; margin-bottom:9px;
    font-family:var(--mono); font-size:10px; letter-spacing:.15em;
    text-transform:uppercase; color:var(--fg-faint);
  }
  .fold-tb-val{
    display:block;
    font-family:var(--mono); font-size:12px; letter-spacing:.03em;
    text-transform:uppercase; color:var(--fg); line-height:1.55;
  }
  @media (max-width:900px){
    .fold-titleblock{ grid-template-columns:1fr 1fr; margin-top:44px; }
    .fold-titleblock > div{ border-bottom:1px solid var(--line); }
    .fold-titleblock > div:nth-child(2n){ border-right:none; }
    .fold-titleblock > div:nth-last-child(-n+2){ border-bottom:none; }
  }
  @media (max-width:480px){
    .fold-titleblock{ grid-template-columns:1fr; }
    .fold-titleblock > div{ border-right:none; }
    .fold-titleblock > div:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
    .fold-titleblock > div:last-child{ border-bottom:none; }
  }

  /* --- the pipeline: six panels threaded by one routed crease --- */
  #fold-pipeline{
    padding:130px 0 140px;
    background:var(--surface-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  @media (max-width:900px){ #fold-pipeline{ padding:80px 0 90px; } }

  .fold-stage{ position:relative; margin-top:20px; }
  /* width/height/viewBox are set from JS once the real panel positions are known */
  #fold-crease{
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    overflow:visible; pointer-events:none; z-index:0;
  }
  #fold-crease-path{
    fill:none; stroke:var(--fg); stroke-width:1;
    stroke-linejoin:miter; vector-effect:non-scaling-stroke;
  }

  .fold-phase{
    position:relative; z-index:1;
    width:45%;
    padding:34px 34px 32px;
    margin-bottom:56px;
    border:1px solid var(--line);
    background:var(--surface-3);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:.4;
    transition:opacity .6s var(--ease), border-color .6s var(--ease);
  }
  .fold-phase.is-right{ margin-left:55%; }
  .fold-phase:last-child{ margin-bottom:0; }
  .fold-phase.is-active{ opacity:1; border-color:var(--line-strong); }

  /* a real element, not a pseudo, so the crease path can measure it from JS
     and stay aligned at any breakpoint */
  .fold-node{
    position:absolute; top:50%; margin-top:-5px;
    width:9px; height:9px; border-radius:50%;
    background:var(--bg-alt); border:1px solid var(--line-strong);
    z-index:2;
    transition:background .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease);
  }
  .fold-phase.is-left .fold-node{ right:-5px; }
  .fold-phase.is-right .fold-node{ left:-5px; }
  .fold-phase.is-active .fold-node{ background:var(--fg); border-color:var(--fg); transform:scale(1.25); }

  .fold-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:26px; }
  .fold-code{
    font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    padding:4px 9px; border:1px solid var(--line-strong); color:var(--fg);
    transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
  }
  .fold-phase.is-active .fold-code{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
  .fold-type{
    display:flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:10px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--fg-dim);
  }
  .fold-type::before{ content:''; width:22px; height:0; border-top:1px solid var(--fg-dim); flex:0 0 auto; }
  .fold-type.is-valley::before{ border-top-style:dashed; }
  .fold-type.is-mountain::before{ border-top-style:solid; }
  .fold-lead{
    margin-left:auto;
    font-family:var(--mono); font-size:10px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--fg-faint);
  }

  /* the glyph progresses flat sheet -> creased -> folded -> formed -> expanding */
  .fold-glyph{ width:46px; height:46px; margin-bottom:22px; }
  .fold-glyph svg{ display:block; width:100%; height:100%; overflow:visible; }
  .fold-glyph svg rect,
  .fold-glyph svg path,
  .fold-glyph svg line{
    fill:none; stroke:var(--fg-dim); stroke-width:1.4;
    stroke-linecap:round; stroke-linejoin:round;
    transition:stroke .6s var(--ease);
  }
  .fold-phase.is-active .fold-glyph svg rect,
  .fold-phase.is-active .fold-glyph svg path,
  .fold-phase.is-active .fold-glyph svg line{ stroke:var(--fg); }
  .fold-glyph .g-dash{ stroke-dasharray:3 3; }

  .fold-phase h3{
    font-family:var(--display); font-weight:600;
    font-size:clamp(26px,3.1vw,40px);
    text-transform:uppercase; letter-spacing:-.02em; line-height:1;
    margin-bottom:16px;
  }
  .fold-phase > p{ font-size:15px; line-height:1.75; color:var(--fg-dim); margin-bottom:28px; }

  /* two halves on one crease — the whole studio pitch, as a layout */
  .fold-split{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .fold-half{ background:var(--bg-alt); padding:20px 20px 22px; }
  .fold-half > .k{
    display:block; margin-bottom:15px;
    font-family:var(--mono); font-size:10px; letter-spacing:.15em;
    text-transform:uppercase; color:var(--fg-faint);
  }
  .fold-half ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
  .fold-half li{
    position:relative; padding-left:17px;
    font-size:13px; line-height:1.55; color:var(--fg-dim);
  }
  .fold-half li::before{
    content:''; position:absolute; left:0; top:9px;
    width:8px; height:0; border-top:1px solid var(--fg-faint);
  }
  @media (max-width:620px){ .fold-split{ grid-template-columns:1fr; } }

  @media (max-width:900px){
    /* .fold-phase.is-right is (0,2,0), so it has to be named again here or the
       55% offset survives the stack */
    .fold-phase,
    .fold-phase.is-right{
      width:auto; margin-left:36px; margin-bottom:30px;
      padding:26px 22px 24px;
    }
    /* same story: both node rules are (0,3,0) */
    .fold-phase.is-left .fold-node,
    .fold-phase.is-right .fold-node{ left:-24.5px; right:auto; }
    .fold-meta{ margin-bottom:20px; }
    .fold-lead{ margin-left:0; }
    .fold-glyph{ width:40px; height:40px; margin-bottom:18px; }
  }

  /* --- the small print, as a datasheet --- */
  #fold-spec{ padding:120px 0; background:var(--surface-1); border-bottom:1px solid var(--line); }
  @media (max-width:900px){ #fold-spec{ padding:80px 0; } }
  .fold-spec-table{ border-top:1px solid var(--line); }
  .fold-spec-row{
    display:grid; grid-template-columns:230px 1fr; gap:40px;
    align-items:baseline;
    padding:28px 4px; border-bottom:1px solid var(--line);
  }
  .fold-spec-row .k{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--fg);
  }
  .fold-spec-row .v{ max-width:760px; font-size:15px; line-height:1.75; color:var(--fg-dim); }
  @media (max-width:760px){
    .fold-spec-row{ grid-template-columns:1fr; gap:12px; padding:24px 2px; }
  }

  /* --- what we don't do --- */
  #fold-exclusions{ padding:120px 0 140px; }
  @media (max-width:900px){ #fold-exclusions{ padding:80px 0 90px; } }
  .fold-nope{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:760px){ .fold-nope{ grid-template-columns:1fr; } }
  .fold-nope-item{ display:flex; align-items:flex-start; gap:16px; background:var(--bg); padding:28px 30px; }
  .fold-nope-item .x{
    flex:0 0 auto; padding-top:2px;
    font-family:var(--mono); font-size:11px; color:var(--fg-faint);
  }
  .fold-nope-item .t{ font-size:15px; line-height:1.6; color:var(--fg-dim); }

  @media (prefers-reduced-motion: reduce){
    .fold-phase{ opacity:1; }
  }