:root{
    --bg:#05100E;
    --bg-2:#081A17;
    --card:#0B211E;
    --card-2:#0E2A26;
    --ink:#ECF3F1;
    --ink-2:#9DB2AD;
    --ink-3:#6A7F7B;
    --accent:#16C4AE;
    --accent-2:#0D5C57;
    --highlight:#E7B23C;
    --on-accent:#04120F;
    --line:rgba(255,255,255,.10);
    --line-2:rgba(255,255,255,.055);
    --glass:rgba(255,255,255,.028);
    --nav-scrim:rgba(5,16,14,.72);
    --veil-a:rgba(5,16,14,.86);
    --veil-b:rgba(5,16,14,.55);
    --frame-bg:#0a1614;
    --frame-bar-bg:rgba(255,255,255,.02);
    --sans:"Inter Tight","Segoe UI",system-ui,-apple-system,sans-serif;
    --display:"Bricolage Grotesque","Inter Tight","Segoe UI",system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
    --wrap:1200px;
    --nav-h:70px;
    --ease:cubic-bezier(.22,1,.36,1);
  }
  /* ---- LIGHT THEME (the previous white look, as a toggle) ---- */
  :root[data-theme="light"]{
    --bg:#F4F6F6;
    --bg-2:#FFFFFF;
    --card:#FFFFFF;
    --card-2:#FFFFFF;
    --ink:#0B1416;
    --ink-2:#46545A;
    --ink-3:#6C7A79;
    --accent:#0D5C57;
    --accent-2:#0A413D;
    --highlight:#B7860F;
    --on-accent:#FFFFFF;
    --line:rgba(11,20,22,.13);
    --line-2:rgba(11,20,22,.07);
    --glass:#FFFFFF;
    --nav-scrim:rgba(244,246,246,.85);
    --veil-a:rgba(244,246,246,.92);
    --veil-b:rgba(244,246,246,.42);
    --frame-bg:#FFFFFF;
    --frame-bar-bg:#F1F4F3;
  }
  /* 3D hero runs in both themes on desktop; only the no-3d gate (mobile /
     no-WebGL / reduced-motion) swaps in the static aura fallback. */
  html.no-3d .hero-canvas{display:none}
  html.no-3d .hero-fallback{display:block}
  html{color-scheme:dark}
  :root[data-theme="light"]{color-scheme:light}

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--sans);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  ::selection{background:rgba(22,196,174,.28);color:#fff}

  .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 40px}
  .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:12px 18px;font-family:var(--mono);font-size:13px;z-index:300;font-weight:600}
  .skip:focus{left:0}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  .label{
    font-family:var(--mono);font-size:11.5px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent);display:inline-flex;align-items:center;gap:10px;
  }
  .label::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.7}

  h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.05}

  /* ============ INTRO CURTAIN ============ */
  .intro{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
    background:var(--bg);flex-direction:column;gap:20px}
  .has-motion .intro{display:flex}
  .intro-mark{display:flex;align-items:center;gap:13px;opacity:0;transform:translateY(14px);
    font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
  .intro-mark .mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;
    background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--on-accent);font-family:var(--mono);font-size:17px;font-weight:600}
  .intro-mark .co{color:var(--accent)}
  .intro-bar{width:0;height:2px;max-width:220px;background:linear-gradient(90deg,var(--accent),var(--highlight));border-radius:2px}

  /* ============ NAV ============ */
  .nav{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
    display:flex;align-items:center;
    background:transparent;transition:background-color .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
    border-bottom:1px solid transparent}
  .nav.scrolled{background:var(--nav-scrim);backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--line)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
  .wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
  .wordmark .mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;
    background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--on-accent);font-family:var(--mono);font-size:13px;font-weight:600}
  .wordmark .co{color:var(--accent)}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;position:relative;padding:4px 0;transition:color .2s var(--ease)}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right .3s var(--ease)}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after,.nav-links a.active::after{right:0}
  .nav-links a.active{color:var(--ink)}
  .nav-cta{font-size:14px;font-weight:600;color:var(--on-accent);background:var(--accent);
    padding:11px 20px;border-radius:8px;text-decoration:none;white-space:nowrap;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 0 0 rgba(22,196,174,0)}
  .nav-cta:hover{box-shadow:0 8px 30px -8px rgba(22,196,174,.6)}
  .nav-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
    background:linear-gradient(90deg,var(--accent),var(--highlight))}
  .nav-actions{display:flex;align-items:center;gap:14px}
  .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;
    border:1px solid var(--line);border-radius:9px;background:var(--glass);color:var(--ink);cursor:pointer;
    transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)}
  .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .theme-toggle svg{width:18px;height:18px;display:block}
  .theme-toggle .ic-sun{display:none}.theme-toggle .ic-moon{display:block}
  :root[data-theme="light"] .theme-toggle .ic-sun{display:block}
  :root[data-theme="light"] .theme-toggle .ic-moon{display:none}

  /* ============ HERO ============ */
  .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
  .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
  .hero-fallback{position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(50% 55% at 68% 42%, rgba(22,196,174,.28), transparent 68%),
      radial-gradient(40% 45% at 80% 20%, rgba(231,178,60,.16), transparent 70%),
      radial-gradient(60% 60% at 30% 80%, rgba(13,92,87,.30), transparent 72%),
      var(--bg)}
  .has-motion .hero-fallback{display:none}
  .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,var(--veil-a) 0%,var(--veil-a) 30%,var(--veil-b) 60%,transparent 88%),
               linear-gradient(0deg,var(--bg) 0%,transparent 34%)}
  @media (max-width:760px){
    .hero-veil{background:linear-gradient(180deg,transparent 0%,var(--veil-b) 42%,var(--bg) 90%)}
  }
  .hero-inner{position:relative;z-index:2;padding-top:var(--nav-h)}
  .hero .label{margin-bottom:30px}
  .hero-title{font-size:clamp(2.9rem,8vw,6.4rem);line-height:.98;letter-spacing:-.04em;margin:0 0 30px;font-weight:700;text-wrap:balance}
  .hero-title .hl{background:linear-gradient(120deg,var(--accent),var(--highlight));-webkit-background-clip:text;background-clip:text;color:transparent}
  .lede{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.6;color:var(--ink-2);max-width:52ch;margin:0 0 40px}
  .lede strong{color:var(--ink);font-weight:600}
  .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
    padding:15px 28px;border-radius:10px;text-decoration:none;border:1px solid transparent;
    transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
  .btn-solid{background:var(--accent);color:var(--on-accent)}
  .btn-solid:hover{box-shadow:0 14px 40px -12px rgba(22,196,174,.65)}
  .btn-line{border-color:var(--line);color:var(--ink);background:var(--glass)}
  .btn-line:hover{border-color:var(--accent);color:var(--ink)}
  .btn .ar{transition:transform .25s var(--ease)}
  .btn:hover .ar{transform:translateX(4px)}
  .scroll-cue{position:absolute;left:40px;bottom:30px;z-index:2;display:flex;align-items:center;gap:12px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
  .scroll-cue .track{width:26px;height:40px;border:1px solid var(--line);border-radius:14px;position:relative}
  .scroll-cue .dot{position:absolute;left:50%;top:8px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);animation:cue 1.9s var(--ease) infinite}
  @keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateY(16px);opacity:0}}

  /* ============ SECTION SHELL ============ */
  section{position:relative}
  .band{padding:120px 0;position:relative}
  .band-line{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);transform-origin:50% 50%}
  .rule-draw{display:block;height:1px;width:100%;background:linear-gradient(90deg,var(--accent),transparent);transform-origin:0 50%;margin:0 0 54px}
  .has-motion .rule-draw{transform:scaleX(0)}
  .sec-head{display:grid;grid-template-columns:1.3fr 1fr;gap:0 72px;align-items:end;margin-bottom:20px}
  .sec-head .label{margin-bottom:20px}
  h2.sec{font-size:clamp(1.9rem,4vw,3rem);margin:0;max-width:16ch}
  .sec-note{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin:0;padding-bottom:6px}

  .has-motion [data-reveal]{opacity:0}
  .line-mask{display:block;overflow:hidden;padding-bottom:.06em}
  .line-in{display:block;will-change:transform}

  /* glow chrome */
  .glow-top{position:absolute;left:50%;top:-1px;width:min(760px,80%);height:1px;transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}

  /* ============ SPEC / ENGAGEMENT ============ */
  .spec-band{padding:96px 0}
  .spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
    border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .spec-cell{background:var(--bg);padding:30px 28px;transition:background-color .3s var(--ease)}
  .spec-cell:hover{background:var(--card)}
  .spec-cell dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
  .spec-cell dd{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
  .spec-cell dd small{display:block;font-weight:400;font-size:13.5px;color:var(--ink-2);letter-spacing:0;margin-top:6px;line-height:1.5}

  /* ============ METRICS ============ */
  .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
  .metric{border-top:1px solid var(--line);padding-top:24px}
  .metric .n{display:block;font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.5rem);font-weight:600;letter-spacing:-.03em;
    line-height:1;margin-bottom:12px;
    background:linear-gradient(120deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
  .metric .t{font-size:14px;line-height:1.5;color:var(--ink-2)}

  /* ============ CAPABILITY CARDS ============ */
  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .card{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:30px 26px 32px;
    overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
  .card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;pointer-events:none;opacity:0;
    background:linear-gradient(140deg,var(--accent),transparent 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    transition:opacity .35s var(--ease)}
  .card:hover{transform:translateY(-6px);background:var(--card);border-color:transparent}
  .card:hover::before{opacity:1}
  .card .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:20px}
  .card h3{font-size:1.28rem;margin:0 0 12px}
  .card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

  /* ============ WORK (horizontal) ============ */
  .work{position:relative;background:linear-gradient(180deg,var(--bg),var(--bg-2) 40%,var(--bg))}
  .work-pin{position:relative}
  .work-head{padding:110px 0 46px}
  .work-track{display:flex;flex-direction:column;gap:70px;padding:0 40px 110px}
  .has-motion .work-pin{height:100vh;overflow:hidden;display:flex;align-items:center}
  .has-motion .work-track{flex-direction:row;flex-wrap:nowrap;gap:0;padding:0;align-items:center}
  .work-panel{flex:0 0 auto;width:100%}
  .has-motion .work-panel{width:88vw;max-width:1100px;padding:0 clamp(24px,6vw,90px)}
  .case-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:0 60px;align-items:center}

  .frame{display:block;position:relative;text-decoration:none;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    background:var(--frame-bg);box-shadow:0 50px 90px -50px rgba(0,0,0,.55),0 0 0 1px var(--line-2);
    transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
  .frame:hover{transform:translateY(-4px);border-color:rgba(22,196,174,.5);box-shadow:0 60px 100px -50px rgba(0,0,0,.9),0 20px 60px -30px rgba(22,196,174,.4)}
  .frame-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--frame-bar-bg)}
  .frame-bar .dot{width:10px;height:10px;border-radius:50%;background:#25332f}
  .frame-bar .dot:nth-child(1){background:#e0736a}.frame-bar .dot:nth-child(2){background:#e0b34a}.frame-bar .dot:nth-child(3){background:#5cbf87}
  .frame-url{margin-left:12px;flex:1;font-family:var(--mono);font-size:11px;color:var(--ink-3);background:transparent;
    border:1px solid var(--line-2);border-radius:6px;padding:6px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frame-body{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#F4F6F6}
  .scene{position:absolute;inset:0;width:100%;height:100%;display:block}

  .case-meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 20px}
  .case-meta .rule{flex:0 0 40px;height:1px;background:var(--line)}
  .status{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
  .status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
  .status.wip::before{background:var(--highlight);box-shadow:0 0 12px var(--highlight)}
  .case-inner h3{font-size:clamp(1.9rem,3vw,2.6rem);margin:0 0 18px}
  .case-inner h3 a{text-decoration:none;transition:color .2s var(--ease)}
  .case-inner h3 a:hover{color:var(--accent)}
  .case-inner h3 a .ar{font-size:.5em;vertical-align:super;color:var(--ink-3);margin-left:6px}
  .case-desc{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0 0 16px;max-width:46ch}
  .case-desc strong{color:var(--ink);font-weight:600}
  .outcome{display:inline-flex;flex-direction:column;gap:4px;border-left:2px solid var(--highlight);padding:2px 0 2px 16px;margin:6px 0 22px}
  .outcome b{font-size:16px;color:var(--ink);font-weight:600}
  .outcome small{font-size:13px;color:var(--ink-3)}
  .stack{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
  .stack li{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);background:var(--glass);border:1px solid var(--line);border-radius:6px;padding:6px 10px}

  /* ============ NOW ============ */
  .now{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .now-item{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:30px 28px;position:relative;overflow:hidden;
    transition:transform .35s var(--ease),border-color .35s var(--ease)}
  .now-item::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent),transparent)}
  .now-item:hover{transform:translateY(-4px);border-color:rgba(22,196,174,.4)}
  .now-item .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
  .now-item h3{font-size:1.2rem;margin:0 0 10px}
  .now-item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
  .updated{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:32px 0 0}

  /* ============ CONTACT ============ */
  .contact{padding:130px 0;position:relative;overflow:hidden}
  .contact::before{content:"";position:absolute;left:50%;top:-30%;width:900px;height:900px;transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(circle,rgba(22,196,174,.16),transparent 62%)}
  .contact .inner{position:relative;z-index:1}
  .contact .label{margin-bottom:22px}
  .contact h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:0 0 20px;max-width:16ch}
  .contact .intro{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--ink-2);max-width:54ch;margin:0 0 52px;line-height:1.6}
  .contact .intro strong{color:var(--ink);font-weight:600}
  .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .channel{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:26px 24px;text-decoration:none;overflow:hidden;
    transition:transform .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
  .channel:hover{transform:translateY(-5px);border-color:rgba(22,196,174,.45);background:var(--card)}
  .channel .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:16px}
  .channel .v{font-size:15px;font-weight:600;color:var(--ink);display:block;word-break:break-word}
  .channel .s{font-size:13px;color:var(--ink-3);display:block;margin-top:6px}
  .channel .ar{position:absolute;right:22px;top:24px;color:var(--accent);opacity:0;transform:translate(-6px,6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .channel:hover .ar{opacity:1;transform:none}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--line);padding:46px 0 56px}
  .foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;align-items:baseline}
  .foot-grid p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:40ch}
  .foot-grid p strong{display:block;color:var(--ink);font-weight:600;font-family:var(--display);margin-bottom:4px}
  .foot-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .foot-links{display:flex;flex-wrap:wrap;gap:10px 24px}
  .foot-links a{font-size:13.5px;color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease)}
  .foot-links a:hover{color:var(--accent)}

  /* ============ CURSOR ============ */
  .cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:250;pointer-events:none;border-radius:50%;opacity:0}
  .cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(22,196,174,.6);
    transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background-color .25s var(--ease)}
  .cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent)}
  @media (pointer:fine){.has-motion .cursor,.has-motion .cursor-dot{opacity:1}}
  .has-motion.cursor-hot .cursor{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(22,196,174,.10)}
  @media (pointer:coarse){.cursor,.cursor-dot{display:none}}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1000px){
    .nav-links{display:none}
    .band{padding:92px 0}
    .spec-band{padding:80px 0}
    .contact{padding:100px 0}
    .work-head{padding:88px 0 40px}
    .sec-head{grid-template-columns:1fr;gap:26px}
    h2.sec{max-width:none}
    .cards{grid-template-columns:repeat(2,1fr)}
    .metrics-grid{grid-template-columns:repeat(2,1fr);gap:34px 28px}
    .spec-grid{grid-template-columns:repeat(2,1fr)}
    .channels{grid-template-columns:repeat(2,1fr)}
    .now{grid-template-columns:1fr}
    .case-inner{grid-template-columns:1fr;gap:34px}
    .has-motion .work-pin{height:auto;display:block;overflow:visible}
    .has-motion .work-track{flex-direction:column;min-height:0;padding:0 40px 110px;gap:70px}
    .has-motion .work-panel{width:100%;padding:0}
  }
  @media (max-width:560px){
    .wrap{padding:0 22px}
    .band{padding:84px 0}
    .spec-band{padding:64px 0}
    .contact{padding:76px 0}
    .cards,.spec-grid,.metrics-grid,.channels{grid-template-columns:1fr}
    .scroll-cue{display:none}
    .actions .btn{flex:1 1 auto;justify-content:center}
    .wordmark span:not(.mark){display:none}
    .nav-actions{gap:10px}
    .nav-cta{padding:10px 15px;font-size:13.5px}
    .hero-title{font-size:clamp(2.4rem,11vw,3.2rem)}
    .work-track,.has-motion .work-track{padding-left:22px;padding-right:22px}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .scroll-cue .dot{animation:none}
  }

  /* ============================================================================
     INNER PAGES (Approach / Work / Current focus / Contact)
     ========================================================================= */
  body.subpage .nav{background:var(--nav-scrim);backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--line)}
  .page-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 92px) 0 74px;border-bottom:1px solid var(--line)}
  .page-hero .aura{position:absolute;inset:-40% -10% auto;height:150%;z-index:0;pointer-events:none;filter:blur(72px);opacity:.55;
    background:radial-gradient(38% 50% at 80% 18%, rgba(22,196,174,.24), transparent 70%),
               radial-gradient(30% 40% at 92% 4%, rgba(231,178,60,.15), transparent 70%),
               radial-gradient(52% 60% at 58% 108%, rgba(13,92,87,.24), transparent 72%)}
  .page-hero .wrap{position:relative;z-index:1}
  .breadcrumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .breadcrumb a{color:var(--ink-3);text-decoration:none;transition:color .2s var(--ease)}
  .breadcrumb a:hover{color:var(--accent)}
  .breadcrumb .sep{opacity:.45}
  .breadcrumb .here{color:var(--ink-2)}
  .page-title{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,4.3rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 24px;max-width:17ch;text-wrap:balance}
  .page-title .hl{background:linear-gradient(120deg,var(--accent),var(--highlight));-webkit-background-clip:text;background-clip:text;color:transparent}
  .page-lede{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.62;color:var(--ink-2);max-width:60ch;margin:0}
  .page-lede strong{color:var(--ink);font-weight:600}

  .prose{max-width:70ch}
  .prose p{font-size:16.5px;line-height:1.72;color:var(--ink-2);margin:0 0 22px}
  .prose p strong{color:var(--ink);font-weight:600}
  .lead-in{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.45;letter-spacing:-.02em;color:var(--ink);margin:0}

  .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:0 76px;align-items:start}

  .steps{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .step{background:var(--bg);padding:30px 30px;display:grid;grid-template-columns:58px 1fr;gap:0 24px;align-items:start;transition:background-color .3s var(--ease)}
  .step:hover{background:var(--card)}
  .step .no{font-family:var(--mono);font-size:13px;color:var(--accent);border:1px solid var(--line);border-radius:11px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .step h3{font-size:1.24rem;margin:0 0 9px}
  .step p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}

  .faq{border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;
    font-family:var(--display);font-weight:600;font-size:1.14rem;color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .ico{color:var(--accent);transition:transform .3s var(--ease);flex:0 0 auto;font-size:1.3rem;line-height:1}
  .faq details[open] summary .ico{transform:rotate(45deg)}
  .faq details p{margin:-4px 0 26px;color:var(--ink-2);line-height:1.68;max-width:74ch;font-size:15.5px}

  .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line);padding-top:36px}
  .statrow .n{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3vw,2.7rem);letter-spacing:-.03em;line-height:1;margin-bottom:10px;
    background:linear-gradient(120deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
  .statrow .t{color:var(--ink-2);font-size:14px;line-height:1.5}

  .guide{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .guide-item{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:28px 26px}
  .guide-item .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
  .guide-item h3{font-size:1.12rem;margin:0 0 9px}
  .guide-item p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.62}

  .cta-band{position:relative;overflow:hidden;text-align:center;padding:114px 0}
  .cta-band::before{content:"";position:absolute;left:50%;top:-40%;width:820px;height:820px;transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(circle,rgba(22,196,174,.15),transparent 62%)}
  .cta-band .wrap{position:relative;z-index:1}
  .cta-band h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em;line-height:1.08;margin:0 auto 18px;max-width:20ch}
  .cta-band p{color:var(--ink-2);max-width:54ch;margin:0 auto 34px;font-size:16.5px;line-height:1.62}
  .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  /* full-width case blocks on the Work page (reuses .frame + .case-inner) */
  .case-block{padding:64px 0;border-top:1px solid var(--line)}
  .case-block:first-of-type{border-top:0}
  .case-block .case-inner{align-items:center}

  @media (max-width:1000px){
    .split{grid-template-columns:1fr;gap:34px}
    .guide,.statrow{grid-template-columns:1fr;gap:22px}
    .page-hero{padding:calc(var(--nav-h) + 58px) 0 54px}
    .case-block .case-inner{grid-template-columns:1fr;gap:32px}
  }
  @media (max-width:560px){
    .step{grid-template-columns:1fr;gap:12px}
    .step .no{width:42px;height:42px}
    .cta-band{padding:78px 0}
    .page-title{font-size:clamp(2.1rem,10vw,3rem)}
  }

  /* Prevent flash-of-unhidden line-mask headings before JS reveals them
     (home hero has the intro curtain; sub-pages need this). */
  .has-motion .line-in{transform:translateY(110%)}

  /* Multi-column footer sitemap link group (added for the multi-page nav) */
  footer .foot-links[aria-label="Pages"] a{color:var(--ink-2)}

  /* Work-page case-study headings */
  .case-inner-title{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.03em;line-height:1.06;margin:0 0 18px;color:var(--ink)}
  .case-inner-title a{transition:color .2s var(--ease)}
  .case-inner-title a:hover{color:var(--accent)}

  /* Home overview sections -> dedicated detail pages */
  .more-link{display:inline-flex;align-items:center;gap:9px;margin-top:40px;
    font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;
    transition:gap .25s var(--ease),border-color .25s var(--ease)}
  .more-link:hover{gap:15px;border-color:var(--accent)}
  .more-link .ar{font-size:1.25em;line-height:1}
  .work-head .more-link{margin-top:20px}