/* ForgeInt — shared site styles (home + subpages). Extracted from index.html. */
@view-transition { navigation: auto; }
/* page-to-page morphs: chrome + world stay put, content slides through */
nav.fi-nav { view-transition-name: fi-nav; }
#poster { view-transition-name: fi-poster; }        /* the brain glides between its hero and parked positions */
#terrain-poster { view-transition-name: fi-terrain; }
#atmo { view-transition-name: fi-atmo; }
.site-footer { view-transition-name: fi-footer; }
::view-transition-old(root) { animation: fi-vt-out 200ms cubic-bezier(0.44,0,0.56,1) both; }
::view-transition-new(root) { animation: fi-vt-in 300ms cubic-bezier(0.44,0,0.56,1) both; }
@keyframes fi-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes fi-vt-in { from { opacity: 0; transform: translateY(16px); } }
::view-transition-group(fi-poster) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.3,0.9,0.3,1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-group(*) { animation: none !important; }
}

  :root {
    --bg-void: #060606;
    --bg-panel: #0d0d0d;
    --hairline: rgba(255, 255, 255, 0.06);
  }
  html { background: var(--bg-void); }
  body {
    margin: 0;
    background: var(--bg-void);
    color: var(--ink);
    font-family: var(--font-sans);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  a { color: rgba(255,255,255,0.7); text-decoration: none; }
  a:hover { color: var(--ink); text-decoration: none; }

  /* fixed world layers */
  /* depth of field: the world field sits behind the focal plane (soft), the
     brain is in focus; #gl gains blur only as the brain recedes (rack focus) */
  #field { filter: blur(1.3px); }
  #gl, #field { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
  #worlds { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 2; pointer-events: none; }
  #gl { z-index: 1; }
  #field { z-index: 2; }

  /* full-width vertical hairline columns (4-col technical grid) */
  .grid-lines { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: flex; }
  .grid-lines span { flex: 1; border-left: 1px solid var(--hairline); }
  .grid-lines span:first-child { border-left: none; }

  .content { position: relative; z-index: 10; }

  :root { --molten: #ff5a1e; --molten-press: #C23A12; --ink: #F4F1EC; --elev: #0B0B0D; }
  /* HEAT: idle = graphite, touch = heat. #ff5a1e exists ONLY as interaction feedback. */
  /* ============ COLOR = LIGHT: ember→amber exists only as emission ============ */
  .lit {
    background: linear-gradient(115deg, #FFB65C 0%, #FF7A3C 45%, #FF5A1E 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(255,110,40,0.28)) drop-shadow(0 0 44px rgba(255,90,30,0.12));
  }
  .cases .lit, .work-band .lit { filter: drop-shadow(0 0 10px rgba(255,90,30,0.16)); }
  .stat-num, .wd-metric .n {
    background: linear-gradient(115deg, #FFB65C, #FF6A2E 75%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(255,90,30,0.2));
  }
  .svc-icon { color: #FF8A4C; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 8px rgba(255,110,40,0.35)); will-change: transform; }
  .wm-dot { box-shadow: 0 0 10px rgba(255,90,30,0.65); }
  #nav-ind { box-shadow: 0 0 8px rgba(255,90,30,0.7); }
  /* execution glints emit warm */
  .wf-node.exec { border-color: rgba(255,138,76,0.65); box-shadow: 0 0 0 1px rgba(255,90,30,0.3), 0 0 34px rgba(255,90,30,0.12); }
  .wf-node.exec .s::before { background: #FF8A4C; box-shadow: 0 0 8px rgba(255,90,30,0.8); }
  .wf-srow.hot { background: rgba(255,110,40,0.06); }
  /* mono labels stay mono — only the leading ▨ marker emits, softly lit */
  .zone-label::first-letter, .hero-label::first-letter { color: #FF8A4C; text-shadow: 0 0 9px rgba(255,110,40,0.55), 0 1px 2px rgba(0,0,0,0.6); }

  .heat-pill { position: relative; overflow: hidden; }
  .heat-pill > * { position: relative; z-index: 1; }
  .heat-pill .heat-flood { z-index: 0; }
  .heat-flood {
    position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 10px; height: 10px; border-radius: 999px; background: var(--molten);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 420ms cubic-bezier(0.3, 0.9, 0.3, 1);
    pointer-events: none;
  }
  .heat-pill.hot .heat-flood { transform: translate(-50%, -50%) scale(60); }
  .heat-pill.hot { color: var(--ink) !important; }
  .heat-pill.press { filter: brightness(1.6); }
  @media (hover: none) {
    .heat-pill:active { background: var(--molten-press) !important; color: var(--ink) !important; }
  }

  /* links + nav: molten underline sweep, warm on hover */
  .nav-link, .foot-col a, .foot-col button {
    background-image: linear-gradient(var(--molten), var(--molten));
    background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
    transition: color 240ms cubic-bezier(0.44,0,0.56,1), background-size 320ms cubic-bezier(0.44,0,0.56,1);
    padding-bottom: 3px;
  }
  .nav-link:hover, .foot-col a:hover, .foot-col button:hover { color: var(--molten) !important; background-size: 100% 1px; }
  @media (hover: none) {
    .nav-link:active, .foot-col a:active, .foot-col button:active { color: var(--molten) !important; }
  }

  /* headline ignite */
  [data-ignite] { cursor: default; }
  [data-ignite] .ig { display: inline-block; transition: color 200ms cubic-bezier(0.44,0,0.56,1), transform 200ms cubic-bezier(0.44,0,0.56,1); }
  [data-ignite].hot .ig { color: var(--molten); transform: translateY(-0.03em); }
  @media (hover: none) { [data-ignite]:active .ig { color: var(--molten); } }

  /* SOLID + OUTLINE headline word: hollow stroke at rest, fills on ignite/hover */
  .hollow {
    -webkit-text-stroke: 1.5px var(--ink); color: transparent;
    transition: color 280ms cubic-bezier(0.44,0,0.56,1), -webkit-text-stroke-color 280ms cubic-bezier(0.44,0,0.56,1);
  }
  .hero-h:hover .hollow, .final-cta h2:hover .hollow { color: var(--molten); -webkit-text-stroke-color: var(--molten); }
  .proc-step.active .pt .hollow { color: var(--ink); -webkit-text-stroke-color: var(--ink); } /* fills as the station ignites */
  @media (hover: none) { .hero:active .hollow, .final-cta:active .hollow { color: var(--molten); -webkit-text-stroke-color: var(--molten); } }

  /* heat on small interactive glyphs */
  .case-row:hover .case-arrow { color: var(--molten); }
  .faq-item.open .tog, .faq-q:hover .tog { color: var(--molten); }
  .svc-card:hover .svc-flip-chip { border-color: var(--molten); color: var(--molten); }
  .spec-line:hover .spec-tag { border-color: var(--molten); color: var(--molten); }
  .spec-line.flash .spec-flash { background: var(--molten); opacity: 0.2; }

  /* cursor warms near interactive elements */
  #cur-ring.warm { border-color: var(--molten); }
  #cur-dot.warm { background: var(--molten); }
  #cur-ring.view { background: var(--ink); border-color: var(--ink); } /* view state stays mono */

  /* ---------- atmosphere: filmic tone curve — vignette, highlight roll-off, grain ---------- */
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  #atmo {
    position: fixed; inset: 0; z-index: 55; pointer-events: none;
    background:
      linear-gradient(rgba(0,0,0,0.14), transparent 13%, transparent 87%, rgba(0,0,0,0.2)),
      radial-gradient(120% 90% at 50% 42%, transparent 50%, rgba(0,0,0,0.42) 100%);
  }
  /* CLUSTER B: barely-there chromatic-aberration edge fringe. Warm/amber only
     (no cyan — reserved for security); screen-blended so it reads as a lens
     glow at the extreme frame edges, never over centred text. */
  #atmo::before {
    content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
    background: radial-gradient(142% 112% at 50% 50%, transparent 84%, rgba(255,120,60,0.045) 96%, rgba(255,88,30,0.08) 100%);
  }
  #atmo::after {
    content: ""; position: absolute; inset: 0; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  }

  /* static 2-layer terrain poster — mobile / Save-Data (no WebGL) */
  #terrain-poster {
    position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 1; pointer-events: none;
    display: none;
    background:
      radial-gradient(90% 60% at 72% 0%, rgba(255,255,255,0.05), transparent 60%),
      linear-gradient(to bottom, transparent, #0b0b0d 55%, #060606 100%);
  }
  body.no3d #terrain-poster { display: block; }
  /* once the live 3D brain owns the frame, kill the entire poster stack outright */
  body.gl-on #poster, body.gl-on #poster-shaft, body.gl-on #terrain-poster { display: none !important; }
  /* GL tier decided: poster stack fully dark through the boot — nothing in frame
     but darkness, boot text, fragments and the forming brain */
  body.glq #poster, body.glq #poster-shaft, body.glq #terrain-poster { display: none !important; }

  /* ---------- contact overlay: brief the brain ---------- */
  #contact {
    position: fixed; inset: 0; z-index: 80; background: rgba(6,6,6,0.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.44,0,0.56,1);
  }
  #contact.open { opacity: 1; pointer-events: auto; }
  .ct-panel {
    position: relative; width: min(880px, 100%); max-height: 92vh; overflow: auto;
    background: var(--elev); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    box-shadow: 0 40px 120px rgba(0,0,0,0.65);
    display: grid; grid-template-columns: 300px 1fr; gap: 8px;
    padding: 44px 44px 40px;
    transform: translateY(16px); transition: transform 320ms cubic-bezier(0.44,0,0.56,1);
  }
  #contact.open .ct-panel { transform: translateY(0); }
  .ct-close {
    position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
    background: none; border: none; color: rgba(255,255,255,0.5);
    font: 300 22px/1 var(--font-mono); cursor: pointer; transition: color 200ms;
  }
  .ct-close:hover { color: var(--molten); }
  .ct-mascot { display: flex; align-items: flex-start; justify-content: center; }
  .ct-mascot canvas { width: 270px; height: 330px; }
  .ct-form { display: flex; flex-direction: column; gap: 22px; }
  .ct-field { display: flex; flex-direction: column; gap: 9px; position: relative; }
  .ct-field > span { font: 400 10px/1 var(--font-mono); letter-spacing: 0.16em; color: rgba(255,255,255,0.5); }
  .ct-field input, .ct-field textarea {
    background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.14);
    color: var(--ink); font: 300 16px/1.5 var(--font-sans); padding: 6px 0 10px;
    outline: none; resize: none; border-radius: 0;
    background-image: linear-gradient(var(--molten), var(--molten));
    background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
    transition: background-size 340ms cubic-bezier(0.44,0,0.56,1);
  }
  .ct-field input:focus, .ct-field textarea:focus { background-size: 100% 1px; }
  .ct-field.err > span { color: var(--molten); }
  .ct-field.err > span::after { content: " — REQUIRED"; }
  .ct-field.err input { background-size: 100% 1px; }
  .ct-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .ct-chip {
    height: 34px; padding: 0 14px; background: none;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
    font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.6);
    cursor: pointer; transition: all 200ms cubic-bezier(0.44,0,0.56,1);
  }
  .ct-chip:hover { border-color: var(--molten); color: var(--molten); }
  .ct-chip.on { background: #f2f2f0; border-color: #f2f2f0; color: #060606; }
  .ct-submit { align-self: flex-start; height: 48px; padding: 0 28px; margin-top: 6px; }
  .ct-form[hidden], .ct-done[hidden] { display: none !important; }
  .ct-done { display: flex; flex-direction: column; justify-content: center; }
  .ct-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .ct-node {
    border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; padding: 13px 16px;
    font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.35);
    transition: color 400ms, border-color 400ms;
  }
  .ct-node.lit { color: var(--ink); border-color: rgba(255,255,255,0.45); }
  .ct-strip i { width: 22px; border-top: 1px dashed rgba(255,255,255,0.25); }
  @media (max-width: 760px) {
    #contact { align-items: stretch; padding: 0; }
    .ct-panel {
      grid-template-columns: 1fr; gap: 4px; width: 100%; max-height: none;
      min-height: 100dvh; border: none; border-radius: 0;
      padding: calc(env(safe-area-inset-top,0px) + 58px) 22px calc(env(safe-area-inset-bottom,0px) + 32px);
    }
    .ct-mascot { justify-content: flex-start; }
    .ct-mascot canvas { width: 104px; height: 127px; }
    .ct-close { top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; }
    .ct-submit { width: 100%; text-align: center; justify-content: center; }
  }

  /* ---------- nav ---------- */
  nav.fi-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) max(env(safe-area-inset-right, 0px), clamp(24px, 4vw, 56px)) 22px max(env(safe-area-inset-left, 0px), clamp(24px, 4vw, 56px));
    opacity: 0; transition: opacity 800ms cubic-bezier(0.44, 0, 0.56, 1);
  }
  nav.fi-nav.on { opacity: 1; }
  nav.fi-nav.scrolled:not(.inv) {
    background: rgba(6,6,6,0.82);
    backdrop-filter: saturate(1.1) blur(14px);
    -webkit-backdrop-filter: saturate(1.1) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  nav.fi-nav { transition: opacity 800ms cubic-bezier(0.44, 0, 0.56, 1); }
  nav.fi-nav.inv { background: rgba(255,255,255,0.8); backdrop-filter: saturate(1.1) blur(14px); -webkit-backdrop-filter: saturate(1.1) blur(14px); }
  nav.fi-nav.inv .wordmark, nav.fi-nav.inv .nav-link { color: #060606; }
  nav.fi-nav.inv .nav-link:hover { color: #000; }
  /* nav pill: monochrome (white) at the top, becomes the molten anchor once scrolled */
  nav.fi-nav .pill-cta { background: var(--ink); color: #060606; transition: transform 240ms cubic-bezier(0.44,0,0.56,1), background 300ms cubic-bezier(0.44,0,0.56,1), color 300ms cubic-bezier(0.44,0,0.56,1); }
  nav.fi-nav .pill-cta:hover { transform: translateY(-1px); background: #e6e2da; }
  nav.fi-nav.scrolled .pill-cta { background: var(--molten); color: var(--ink); }
  nav.fi-nav.scrolled .pill-cta:hover { background: #e8480f; }
  nav.fi-nav.inv .pill-cta { background: var(--molten); color: var(--ink); } /* molten anchor on the white cases band */
  nav.fi-nav.inv .pill-cta:hover { background: #e8480f; }
  .wm-dot { display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: var(--molten); margin-left: 4px; vertical-align: 0.06em; }
  .wordmark { font: 500 17px/1 var(--font-sans); letter-spacing: -0.04em; font-kerning: normal; color: var(--ink); }
  .wordmark .wm-dot { will-change: transform; }
  .nav-right { display: flex; align-items: center; gap: 32px; }
  .nav-link { font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,241,236,0.72); transition: color 240ms cubic-bezier(0.44,0,0.56,1); cursor: pointer; background: none; border: none; padding: 0; text-shadow: 0 1px 14px rgba(6,6,6,0.9), 0 0 4px rgba(6,6,6,0.6); }
  .nav-link:hover { color: var(--ink); }
  .pill-cta {
    height: 42px; padding: 0 24px; border-radius: 999px;
    background: var(--molten); color: var(--ink); border: none;
    font: 500 13px/1 var(--font-sans); letter-spacing: 0;
    display: inline-flex; align-items: center; cursor: pointer;
    transition: transform 240ms cubic-bezier(0.44,0,0.56,1), background 240ms;
  }
  .pill-cta:hover { transform: translateY(-1px); background: #e8480f; }
  .pill-cta .heat-flood { background: rgba(6,6,6,0.26); } /* deepen ripple reads on the molten pill */

  /* ---------- one button system: drawn arrow, pressed sink, focus ring, ghost ---------- */
  .pill-cta { gap: 0; }
  .pill-arrow { display: inline-flex; width: 0; overflow: hidden; transition: width 300ms cubic-bezier(0.3,0.9,0.3,1), margin 300ms cubic-bezier(0.3,0.9,0.3,1); margin-left: 0; }
  .pill-arrow svg { width: 14px; height: 12px; flex: none; }
  .pill-arrow path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 320ms cubic-bezier(0.3,0.9,0.3,1) 80ms; }
  .pill-cta:hover .pill-arrow { width: 14px; margin-left: 10px; }
  .pill-cta:hover .pill-arrow path { stroke-dashoffset: 0; }
  .pill-cta:active, nav.fi-nav .pill-cta:active, nav.fi-nav.scrolled .pill-cta:active, nav.fi-nav.inv .pill-cta:active {
    background: var(--molten-press); color: var(--ink); transform: translateY(1px);
  }
  .pill-cta:focus-visible, .pill-ghost:focus-visible, .nav-link:focus-visible, .ct-chip:focus-visible, .ct-submit:focus-visible {
    outline: 2px solid var(--molten); outline-offset: 3px;
  }
  .pill-ghost {
    height: 42px; padding: 0 24px; border-radius: 999px;
    background: transparent; color: var(--ink); border: 1px solid rgba(244,241,236,0.24);
    font: 500 13px/1 var(--font-sans); display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; transition: border-color 240ms cubic-bezier(0.44,0,0.56,1), color 240ms cubic-bezier(0.44,0,0.56,1), transform 240ms cubic-bezier(0.44,0,0.56,1);
  }
  .pill-ghost:hover { border-color: var(--molten); color: var(--molten); transform: translateY(-1px); }
  .pill-ghost:active { border-color: var(--molten-press); color: var(--molten-press); transform: translateY(1px); }

  /* nav: molten dot tracking the active section */
  #nav-ind {
    position: absolute; left: 0; bottom: 13px; width: 4px; height: 4px; border-radius: 999px;
    background: var(--molten); opacity: 0; pointer-events: none;
    transition: transform 420ms cubic-bezier(0.3,0.9,0.3,1), opacity 300ms cubic-bezier(0.44,0,0.56,1);
  }

  /* headline craft: optical kerning + hanging punctuation on the big statements */
  h1.hero-h, .cases-head, #manifesto-text, .final-cta h2, .wf-caption h2 { hanging-punctuation: first allow-end last; font-kerning: normal; }
  /* the hero's outline word breathes ±15 weight — barely perceptible, alive */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hero-h .hollow { animation: wghtbreathe 4.6s ease-in-out infinite alternate; }
  }
  @keyframes wghtbreathe {
    from { font-variation-settings: "wght" 505; }
    to { font-variation-settings: "wght" 535; }
  }

  /* static brain poster — LCP-safe placeholder until WebGL is ready */
  #poster {
    position: fixed; z-index: 1; pointer-events: none;
    width: 76vh; height: 62vh; right: -14vh; top: 4vh;
    border-radius: 50%;
    background:
      radial-gradient(42% 36% at 32% 26%, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%),
      radial-gradient(60% 52% at 68% 78%, rgba(255,255,255,0.05), rgba(255,255,255,0) 70%),
      radial-gradient(closest-side, #17171a 0%, #101013 55%, #0a0a0c 78%, rgba(6,6,6,0) 100%);
    filter: blur(2px);
    opacity: 1; transition: opacity 900ms cubic-bezier(0.44,0,0.56,1);
  }
  #poster.gone { opacity: 0; }
  #poster { transform-origin: 60% 45%; will-change: transform; }
  #poster::after {
    content: ""; position: absolute; inset: 8%; border-radius: 50%;
    background: repeating-radial-gradient(circle at 40% 38%, rgba(255,255,255,0.035) 0 6px, transparent 6px 13px);
    -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%);
            mask: radial-gradient(closest-side, #000 55%, transparent 100%);
    opacity: 0.5; mix-blend-mode: screen; pointer-events: none;
  }
  /* key-light shaft (living poster, no-WebGL) */
  #poster-shaft {
    position: fixed; z-index: 1; pointer-events: none; display: none;
    right: 2vw; top: -10vh; width: 74vw; height: 84vh; transform: rotate(17deg);
    background: linear-gradient(200deg, rgba(255,255,255,0.07), transparent 46%);
    filter: blur(9px);
  }
  body.no3d #poster-shaft { display: block; }
  /* terrain poster gains a folded ridge silhouette (same fold language) */
  #terrain-poster::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background:
      radial-gradient(140% 100% at 30% 100%, rgba(255,255,255,0.055), transparent 60%),
      radial-gradient(120% 100% at 78% 100%, rgba(255,255,255,0.04), transparent 55%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 74 Q40 44 80 64 T160 57 T240 62 T320 50 T400 66 L400 120 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 74 Q40 44 80 64 T160 57 T240 62 T320 50 T400 66 L400 120 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
  }
  @media (max-width: 720px) { #poster { width: 64vh; height: 52vh; right: -14vh; top: 9vh; } }

  /* ---------- hero ---------- */
  .hero {
    height: 100svh; min-height: 560px; display: flex; align-items: flex-end;
    padding: 0 clamp(24px, 4vw, 56px) 64px;
    box-sizing: border-box; position: relative;
  }
  .hero-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; }
  h1.hero-h {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 520;
    font-size: clamp(52px, 6.8vw, 100px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .line { display: block; overflow: hidden; }
  /* S2: headline mask-rises word by word (delays inline per word) */
  .lw {
    display: inline-block; transform: translateY(115%);
    transition: transform 900ms cubic-bezier(0.44, 0, 0.56, 1);
  }
  .booted .lw { transform: translateY(0); }

  .hero-aside {
    display: flex; gap: 40px; align-items: flex-end;
    padding-bottom: 4px;
    opacity: 0; transform: translateY(24px);
    transition: opacity 800ms cubic-bezier(0.44,0,0.56,1) 650ms, transform 800ms cubic-bezier(0.44,0,0.56,1) 650ms;
  }
  .booted .hero-aside { opacity: 1; transform: translateY(0); }
  .hero-aside p { margin: 0; font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 330px; }

  .hero-label {
    position: absolute; top: 104px; left: clamp(24px, 4vw, 56px);
    font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.04em;
    color: rgba(244,241,236,0.5); text-transform: lowercase;
    opacity: 0; transition: opacity 800ms cubic-bezier(0.44,0,0.56,1) 150ms;
  }
  .booted .hero-label { opacity: 1; }

  .scroll-cue {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font: 400 10px/1 var(--font-mono); letter-spacing: 0.2em;
    color: rgba(255,255,255,0.3); text-transform: uppercase;
    opacity: 0; transition: opacity 800ms 1400ms;
  }
  .booted .scroll-cue { opacity: 1; }

  /* quiet runway between stations — part of the rhythm */
  .runway { height: 40vh; }

  /* ---------- sections ---------- */
  section.zone { position: relative; padding: 20vh clamp(24px, 4vw, 56px); }
  .zone-inner { max-width: 1240px; margin: 0 auto; }
  .zone-label {
    font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.04em;
    color: rgba(244,241,236,0.5); text-transform: lowercase;
    margin-bottom: 56px;
  }
  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.44,0,0.56,1), transform 800ms cubic-bezier(0.44,0,0.56,1); }
  [data-reveal].in { opacity: 1; transform: translateY(0); }

  /* ---------- S3: chaos enters ---------- */
  .s3-section { height: 250vh; position: relative; }
  .s3-sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .s3-chips { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
  .s3-chip {
    position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(12,12,15,0.8); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
    padding: 9px 13px; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(244,241,236,0.75);
    will-change: transform, opacity; z-index: 2;
  }
  .s3-chip::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: rgba(244,241,236,0.55); flex: none; }
  /* foreground passes: in front of the subject, softly defocused */
  .s3-chip.fg { filter: blur(2.5px); z-index: 30; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
  .s3-center { text-align: center; position: relative; z-index: 3; }
  .s3-count {
    font: 500 clamp(64px, 9vw, 150px)/1 var(--font-display); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(115deg, #FFB65C, #FF6A2E 75%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(255,90,30,0.22));
  }
  .s3-cap { font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(244,241,236,0.55); text-transform: lowercase; margin-top: 18px; }
  .s3-tags { display: flex; gap: 10px; justify-content: center; margin-top: 14px; font: 400 10px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(244,241,236,0.4); text-transform: lowercase; }
  .s3-tags span, .s3-tags i { opacity: 0; transition: opacity 700ms cubic-bezier(0.44,0,0.56,1); font-style: normal; }
  .s3-tags.in span, .s3-tags.in i { opacity: 1; }
  .s3-tags.in span:nth-of-type(2) { transition-delay: 220ms; }
  .s3-tags.in span:nth-of-type(3) { transition-delay: 440ms; }
  @media (prefers-reduced-motion: reduce) { .s3-section { height: auto; } .s3-sticky { position: static; height: 100svh; } }

  /* ---------- S4: brain fracture ---------- */
  .s4-section { height: 300vh; position: relative; }
  .s4-sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 clamp(24px, 4vw, 56px) 12vh; box-sizing: border-box; }
  .s4-cap {
    font: 520 clamp(30px, 3.6vw, 54px)/1.12 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
    opacity: 0; transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s4-cap.in { opacity: 1; transform: none; }
  /* mobile: converted from the heavy 190vh pinned scrub to a LINEAR unpinned
     pass (real-iPhone verdict). Section flows normally; the brain still
     fractures via the global-g timeline as you scroll through it into S5, so
     the beat reads without holding the scroll in the hand. */
  @media (max-width: 720px) {
    .s4-section { height: auto; }
    .s4-sticky { position: static; min-height: 118svh; align-items: center; padding-bottom: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .s4-section { height: auto; } .s4-sticky { position: static; height: 100svh; } .s4-cap { opacity: 1; transform: none; } }

  /* ---------- S5: agent reveal — UNPINNED (a breath after two long pins) ---------- */
  .s5-section { min-height: 150vh; position: relative; display: flex; }
  .s5-inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 58px; padding: 24vh clamp(24px, 4vw, 56px); box-sizing: border-box; }
  .s5-chaos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .s3-chip.s5c { transform: none; }
  .s3-chip.s5c.fly { transition: transform 640ms cubic-bezier(0.3, 0.9, 0.3, 1), opacity 240ms 520ms; }
  @media (hover: hover) { .s3-chip.s5c.fly { filter: blur(1.1px); } }   /* whisper of motion-softening */
  .s5-agents { display: flex; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }
  .s5-agent { display: flex; flex-direction: column; align-items: center; gap: 11px; opacity: 0; transform: translateY(26px) scale(1.14); filter: blur(5px); }
  .s5-agents.in .s5-agent {
    opacity: 1; transform: none; filter: none;
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.3,0.9,0.3,1), filter 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s5-agents.in .s5-agent:nth-child(2) { transition-delay: 90ms; }
  .s5-agents.in .s5-agent:nth-child(3) { transition-delay: 180ms; }
  .s5-agents.in .s5-agent:nth-child(4) { transition-delay: 270ms; }
  .s5-agents.in .s5-agent:nth-child(5) { transition-delay: 360ms; }
  .s5-chipbig {
    position: relative; width: 78px; height: 78px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background-color: rgba(14,14,17,0.66);
    background-image: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0) 40%);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 40px -14px rgba(0,0,0,0.6);
  }
  .s5-chipbig canvas { width: 48px; height: 48px; display: block; }
  .s5-agent .nm { font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(244,241,236,0.55); text-transform: uppercase; }
  .s5-agent .bd { font: 400 9px/1 var(--font-mono); letter-spacing: 0.1em; color: #FF8A4C; opacity: 0; transition: opacity 500ms; min-height: 9px; }
  .s5-agent .bd.in { opacity: 1; }
  .s5-agent.landed .s5-chipbig { animation: s5glint 900ms cubic-bezier(0.3,0.9,0.3,1); }
  @keyframes s5glint {
    0% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 0 rgba(255,110,40,0.55), 0 18px 40px -14px rgba(0,0,0,0.6); border-color: rgba(255,138,76,0.8); }
    100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 26px rgba(255,110,40,0), 0 18px 40px -14px rgba(0,0,0,0.6); }
  }
  .s5-cap {
    font: 520 clamp(26px, 3.2vw, 46px)/1.14 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
    text-align: center; position: relative; z-index: 3;
    opacity: 0; transform: translateY(18px);
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s5-cap.in { opacity: 1; transform: none; }
  @media (max-width: 720px) {
    .s5-section { min-height: auto; }
    .s5-inner { padding: 16vh 20px; gap: 40px; }
    .s5-agents { gap: 18px 22px; }
    .s5-chipbig { width: 58px; height: 58px; backdrop-filter: none; -webkit-backdrop-filter: none; background-color: #0B0B0D; }
    .s5-chipbig canvas { width: 36px; height: 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .s5-agent { opacity: 1; transform: none; filter: none; }
    .s5-cap { opacity: 1; transform: none; }
    .s5-agent.landed .s5-chipbig { animation: none; }
  }

  /* ---------- S7: system assembly (pinned) ---------- */
  .s7-section { height: 200vh; position: relative; }
  .s7-sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14vh; box-sizing: border-box; }
  .s7-cap {
    font: 520 clamp(30px, 3.6vw, 54px)/1.12 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
    text-align: center; opacity: 0; transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s7-cap.in { opacity: 1; transform: none; }
  /* the unified pulse: every emitting element glints on the same beat */
  .wm-dot, #nav-ind, .op-chip, .s5-chipbig { transition: box-shadow 320ms cubic-bezier(0.44,0,0.56,1); }
  .fi-pulse .wm-dot, .fi-pulse #nav-ind { box-shadow: 0 0 16px rgba(255,110,40,0.95); }
  .fi-pulse .lit, .fi-pulse .stat-num { filter: drop-shadow(0 0 26px rgba(255,110,40,0.5)); }
  .fi-pulse .op-chip, .fi-pulse .s5-chipbig { border-color: rgba(255,138,76,0.7); box-shadow: 0 0 22px rgba(255,110,40,0.35); }
  @media (max-width: 720px) { .s7-section { height: 150vh; } .s7-sticky { padding-bottom: 18vh; } }
  @media (prefers-reduced-motion: reduce) { .s7-section { height: auto; } .s7-sticky { position: static; height: 100svh; } .s7-cap { opacity: 1; transform: none; } }

  /* manifesto */
  #manifesto-text {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(32px, 3.4vw, 46px); line-height: 1.28; letter-spacing: -0.008em;
    max-width: 900px; margin: 0;
  }

  /* services — 3D flip cards on dotted grid */
  .svc-wrap {
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    padding: 48px; border-radius: 2px;
  }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .svc-card { position: relative; height: 280px; perspective: 1100px; cursor: pointer; outline: none; border-radius: 3px; }
  .svc-inner {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(0.3, 0.9, 0.3, 1);
  }
  .svc-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--bg-panel); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px;
    border-top: 1px solid rgba(255,255,255,0.35);
    padding: 24px; display: flex; flex-direction: column; box-sizing: border-box;
    transition: border-color 240ms cubic-bezier(0.44,0,0.56,1);
  }
  .svc-back { transform: rotateY(180deg); justify-content: space-between; }
  .svc-num { font: 400 12px/1 var(--font-mono); color: rgba(255,255,255,0.5); }
  .svc-flip-chip {
    position: absolute; top: 18px; right: 18px;
    font: 400 9px/1 var(--font-mono); letter-spacing: 0.2em;
    color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px; padding: 5px 9px;
  }
  .svc-title { font: 500 24px/1.18 var(--font-display); letter-spacing: -0.005em; color: var(--ink); margin-top: auto; }
  .svc-icon { width: 34px; height: 34px; margin-top: 22px; }
  .svc-desc { font: 400 15.5px/1.7 var(--font-sans); color: #B9BEC7; margin: 0; }
  .svc-explore { font: 400 11px/1 var(--font-mono); letter-spacing: 0.18em; color: var(--ink); }

  /* stats — corner brackets */
  .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stat { position: relative; padding: 40px 36px; text-align: left; }
  .stat i {
    position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255,255,255,0.4); font-style: normal;
  }
  .stat i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
  .stat i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
  .stat i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
  .stat i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
  .stat-num {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(56px, 6vw, 96px); line-height: 1; letter-spacing: -0.01em; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stat-num sub { font-size: 0.38em; vertical-align: baseline; color: rgba(255,255,255,0.6); font-weight: 300; }
  .stat-cap { font: 400 11px/1.5 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-top: 18px; }

  @media (max-width: 900px) {
    .svc-grid, .stat-strip { grid-template-columns: 1fr; }
  }

  /* ---------- workflow-builder mockup (pinned) ---------- */
  .wf-section { height: 340vh; position: relative; }
  .wf-sticky { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 4vw, 56px); box-sizing: border-box; perspective: 1400px; }
  /* backdrop cinema: widening key-light shaft grazing the window's edge + dust motes */
  .wf-atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .wf-sticky > .zone-inner, .wf-sticky > .wf-app, .wf-sticky > .wf-caption { position: relative; z-index: 1; }
  .wf-shaft {
    position: absolute; left: 32%; top: -14%; width: 27vw; height: 132%;
    transform: rotate(13deg); transform-origin: top center;
    background: linear-gradient(102deg, transparent, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.035) 62%, transparent);
    animation: wfshaft 26s cubic-bezier(0.44,0,0.56,1) infinite alternate;
  }
  @keyframes wfshaft {
    from { transform: rotate(12deg) scaleX(0.82); opacity: 0.75; }
    to { transform: rotate(14.5deg) scaleX(1.3); opacity: 1; }
  }
  #wf-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
  @media (prefers-reduced-motion: reduce) { .wf-shaft { animation: none; } #wf-dust { display: none; } }
  .wf-app {
    max-width: 1240px; width: 100%; margin: 0 auto; position: relative;
    background: var(--elev); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
    height: min(72vh, 660px);
    /* a physical panel hovering above the terrain: glass rim up top, floating
       drop shadow beneath, and a wide dark halo dimming the streams at its edges */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 60px 110px -18px rgba(0,0,0,0.78),
      0 22px 44px rgba(0,0,0,0.5),
      0 0 90px 26px rgba(0,0,0,0.4);
    will-change: transform;
  }
  .wf-app::before {
    content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; z-index: 8;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.55) 62%, transparent);
    pointer-events: none;
  }
  .wf-titlebar {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08); background: #0d0d0d;
  }
  .wf-dots { display: flex; gap: 6px; }
  .wf-dots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.16); }
  .wf-title { font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
  .wf-status { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 400 10px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }
  .wf-status b { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); display: inline-block; animation: wfblink 2.4s infinite; font-weight: 400; }
  @keyframes wfblink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  .wf-body { flex: 1; display: flex; min-height: 0; }
  .wf-side {
    width: 84px; border-right: 1px solid rgba(255,255,255,0.08); background: #0c0c0c;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px;
  }
  .wf-side-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0; width: 100%; color: rgba(255,255,255,0.45); }
  .wf-side-item.on { color: var(--ink); background: rgba(255,255,255,0.05); }
  .wf-side-item svg { width: 17px; height: 17px; }
  .wf-side-item span { font: 400 8px/1 var(--font-mono); letter-spacing: 0.12em; }
  .wf-canvas {
    flex: 1; position: relative; overflow: hidden;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 20px 20px; background-color: #090909;
  }
  .wf-node { 
    position: absolute; width: 218px; box-sizing: border-box;
    background: #101010; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
    padding: 12px 14px; transition: border-color 400ms cubic-bezier(0.44,0,0.56,1), box-shadow 400ms cubic-bezier(0.44,0,0.56,1);
  }
  .wf-node .k { font: 400 12px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
  .wf-node .t { font: 400 15px/1.3 var(--font-sans); color: var(--ink); margin-top: 6px; }
  .wf-node .s { font: 400 12px/1.35 var(--font-mono); letter-spacing: 0.06em; color: rgba(255,255,255,0.35); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
  .wf-node .s::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.25); }
  .wf-node.exec { border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 34px rgba(255,255,255,0.07); }
  .wf-node.exec .s { color: var(--ink); }
  .wf-node.exec .s::before { background: var(--ink); }
  .wf-node.done { border-color: rgba(255,255,255,0.3); }
  .wf-node.done .s { color: rgba(255,255,255,0.6); }
  .wf-node.done .s::before { background: rgba(255,255,255,0.7); }
  .wf-wires { position: absolute; inset: 0; pointer-events: none; }
  .wf-cursor {
    position: absolute; display: flex; align-items: center; gap: 6px; pointer-events: none;
    transition: transform 2.6s cubic-bezier(0.44,0,0.56,1); will-change: transform; z-index: 5;
  }
  .wf-cursor svg { width: 13px; height: 13px; }
  .wf-cursor span {
    font: 400 9px/1 var(--font-mono); letter-spacing: 0.1em;
    background: var(--ink); color: #060606; border-radius: 999px; padding: 4px 9px;
  }
  .wf-caption { max-width: 1240px; margin: 28px auto 0; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
  .wf-caption h2 { font: 520 clamp(26px, 2.6vw, 40px)/1.15 var(--font-display); letter-spacing: -0.008em; color: var(--ink); margin: 0; }
  .wf-caption p { font: 400 11px/1.6 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin: 0; text-transform: uppercase; }
  .wf-stamp {
    position: absolute; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.16em;
    color: #060606; background: var(--ink); border-radius: 999px; padding: 7px 12px;
    opacity: 0; transform: translateY(6px);
    transition: opacity 400ms cubic-bezier(0.44,0,0.56,1), transform 400ms cubic-bezier(0.44,0,0.56,1);
    pointer-events: none; z-index: 4;
  }
  .wf-stamp.on { opacity: 1; transform: translateY(0); }

  /* ---------- S6 mobile: inline evidence snapshots on the stacked nodes ---------- */
  .wf-node .mev { display: none; }
  @media (max-width: 700px) {
    .wf-node .mev {
      display: block; margin-top: 9px; padding: 8px 10px;
      font: 400 9px/1.5 var(--font-mono); letter-spacing: 0.06em; color: rgba(244,241,236,0.52);
      background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px;
    }
    .wf-node.done .mev, .wf-node.exec .mev { color: rgba(244,241,236,0.72); border-color: rgba(255,138,76,0.28); }
  }

  /* ---------- S6: the story's step-rail (left of the window) ---------- */
  .wf-rail { position: absolute; left: clamp(18px, 2.2vw, 40px); top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 17px; }
  .wf-rail-item { display: flex; align-items: baseline; gap: 9px; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(244,241,236,0.3); text-transform: lowercase; transition: color 300ms cubic-bezier(0.44,0,0.56,1); }
  .wf-rail-item b { font-weight: 400; font-size: 8.5px; color: rgba(244,241,236,0.26); transition: color 300ms; }
  .wf-rail-item i { font-style: normal; font-size: 8.5px; color: #FF8A4C; opacity: 0; transition: opacity 300ms; }
  .wf-rail-item.on { color: var(--ink); }
  .wf-rail-item.on b { color: #FF8A4C; }
  .wf-rail-item.done { color: rgba(244,241,236,0.45); }
  .wf-rail-item.done i { opacity: 1; }
  @media (max-width: 1200px) {
    /* mid desktops: the rail folds into a single active-caption line above the window */
    .wf-rail { position: static; transform: none; flex-direction: row; gap: 12px; justify-content: center; margin-bottom: 14px; }
    .wf-rail-item { display: none; }
    .wf-rail-item.on { display: flex; }
    .wf-rail-item i { display: none; }
  }
  @media (max-width: 900px) { .wf-rail { display: none; } }

  /* ---------- S5 → S6 bridge: docked agent strip atop the sidebar ---------- */
  .wf-agents { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; padding: 13px 8px 14px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .wf-agents .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; }
  .wf-agents canvas { width: 15px; height: 15px; opacity: 0; transform: translateY(-14px); }
  .wf-agents.dock canvas { opacity: 1; transform: none; transition: opacity 550ms cubic-bezier(0.3,0.9,0.3,1), transform 550ms cubic-bezier(0.3,0.9,0.3,1); }
  .wf-agents.dock canvas:nth-child(2) { transition-delay: 70ms; }
  .wf-agents.dock canvas:nth-child(3) { transition-delay: 140ms; }
  .wf-agents.dock canvas:nth-child(4) { transition-delay: 210ms; }
  .wf-agents.dock canvas:nth-child(5) { transition-delay: 280ms; }
  .wf-agents span { font: 400 7px/1.4 var(--font-mono); letter-spacing: 0.04em; white-space: nowrap; color: rgba(244,241,236,0.5); text-align: center; opacity: 0; transition: opacity 600ms 450ms; }
  .wf-agents.dock span { opacity: 1; }
  @media (max-width: 900px) { .wf-agents { display: none; } }

  /* ---------- living app: auto-tour tabs, panes, chat, stack, chrome ---------- */
  .wf-side-item { position: relative; cursor: pointer; transition: color 280ms cubic-bezier(0.44,0,0.56,1), background 280ms cubic-bezier(0.44,0,0.56,1); }
  .wf-prog { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; opacity: 0; }
  .wf-side-item.on .wf-prog { opacity: 0.7; }
  .wf-body { position: relative; }
  .wf-pane { flex: 1; min-width: 0; position: relative; overflow: hidden; display: none; background-color: #090909; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; }
  .wf-app[data-tab="chat"] .wf-canvas, .wf-app[data-tab="stack"] .wf-canvas { display: none; }
  .wf-app[data-tab="chat"] .wf-chat { display: flex; }
  .wf-app[data-tab="stack"] .wf-stack { display: block; }
  .wf-caret { display: inline-block; width: 6px; height: 10px; background: rgba(255,255,255,0.55); margin-left: 7px; vertical-align: -1px; animation: wfcaret 1.1s steps(1) infinite; }
  @keyframes wfcaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
  #wf-status-txt { transition: opacity 240ms cubic-bezier(0.44,0,0.56,1); }
  .wf-clock { position: absolute; left: 78px; bottom: 12px; font: 400 10px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; z-index: 6; pointer-events: none; }
  @keyframes wfdottick { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .wf-node.done .s::before, .wf-node.exec .s::before { animation: wfdottick 2.2s infinite; }
  .wf-toast { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; background: #121212; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 10px 14px; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.75); text-transform: uppercase; transform: translateY(12px); opacity: 0; transition: transform 500ms cubic-bezier(0.3,0.9,0.3,1), opacity 500ms cubic-bezier(0.3,0.9,0.3,1); z-index: 6; pointer-events: none; }
  .wf-toast.in { transform: none; opacity: 1; }
  .wf-toast::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--ink); flex: none; }
  /* chat pane */
  .wf-chat { flex-direction: column; padding: 26px 30px 22px; }
  .wf-chat-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
  .wf-msg { max-width: 64%; padding: 11px 15px; border-radius: 9px; font: 300 14px/1.5 var(--font-sans); opacity: 0; transform: translateY(8px); transition: opacity 400ms cubic-bezier(0.44,0,0.56,1), transform 400ms cubic-bezier(0.44,0,0.56,1); }
  .wf-msg.in { opacity: 1; transform: none; }
  .wf-msg.guest { align-self: flex-start; background: #141414; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.88); border-bottom-left-radius: 2px; }
  .wf-msg.agent { align-self: flex-end; background: #1b1b1b; border: 1px solid rgba(255,255,255,0.08); color: var(--ink); border-bottom-right-radius: 2px; }
  .wf-msg .who { display: block; font: 400 9px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.38); margin-bottom: 6px; text-transform: uppercase; }
  .wf-msg .body { min-height: 1em; display: block; }
  .wf-msg.typing .body::after { content: "\258d"; margin-left: 2px; color: rgba(255,255,255,0.7); animation: wfcaret 0.9s steps(1) infinite; }
  .wf-sent { align-self: flex-end; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.45); transition: color 700ms cubic-bezier(0.44,0,0.56,1); }
  .wf-sent.flash { color: var(--molten); transition: none; }
  /* stack pane */
  .wf-stack { padding: 16px 22px; }
  .wf-srow { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 4px; transition: background 700ms cubic-bezier(0.44,0,0.56,1); }
  .wf-srow:last-child { border-bottom: none; }
  .wf-srow.hot { background: rgba(255,255,255,0.05); transition: none; }
  .wf-srow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); animation: wfdottick 2.6s infinite; }
  .wf-srow .nm { font: 300 14.5px/1.3 var(--font-sans); color: var(--ink); }
  .wf-srow .nm small { display: block; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.35); margin-top: 4px; }
  .wf-srow svg { width: 84px; height: 20px; opacity: 0.6; }
  .wf-srow .sync { font: 400 10px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.45); min-width: 104px; text-align: right; font-variant-numeric: tabular-nums; }

  /* ---------- one physical language: 1px top rim-light + soft depth shadow ---------- */
  .spec-app, .svc-face { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 26px 56px -20px rgba(0,0,0,0.6); }
  #case-preview { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 80px rgba(0,0,0,0.5); }
  .op-chip, .wf-toast { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 24px -10px rgba(0,0,0,0.5); }
  /* contrast pass: mono labels stay legible over the scene */
  .wf-caption p { color: rgba(255,255,255,0.62); }
  .wf-title { color: rgba(255,255,255,0.72); }
  .op-label { color: rgba(255,255,255,0.62); }
  .op-line { color: rgba(255,255,255,0.65); }
  .proc-step .pk { color: rgba(255,255,255,0.55); }
  .wf-node .k { color: rgba(255,255,255,0.5); }
  .wf-node .s { color: rgba(255,255,255,0.48); }

  @media (max-width: 900px) {
    .wf-section { height: auto; }
    .wf-sticky { position: static; height: auto; padding-top: 18vh; padding-bottom: 18vh; }
    .wf-app { height: 480px; }
    .wf-atmo { display: none; }
    .wf-side { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-top: 0; gap: 0; }
    .wf-side-item { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 7px; padding: 11px 0; }
    .wf-side-item svg { width: 14px; height: 14px; }
    .wf-side-item span { font-size: 8px; }
    .wf-prog { left: 16%; right: 16%; bottom: 0; }
    .wf-body { flex-direction: column; }
    .wf-clock { left: auto; right: 14px; bottom: 10px; }
  }

  /* ---------- case studies — hard white inversion ---------- */
  .cases {
    background: #F7F5F1; color: #060606; position: relative; z-index: 12;
    padding: 18vh clamp(24px, 4vw, 56px);
  }
  .cases .zone-label { color: rgba(6,6,6,0.45); }
  .cases-head {
    font: 520 clamp(40px, 4.6vw, 72px)/1.08 var(--font-display);
    letter-spacing: -0.01em; color: #060606; margin: 0 0 72px; max-width: 800px;
  }
  .case-row {
    display: grid; grid-template-columns: 150px 90px 1fr auto; gap: 32px; align-items: center;
    padding: 34px 0 34px 0; border-top: 1px solid rgba(6,6,6,0.12);
    cursor: pointer; text-decoration: none; color: inherit;
    transition: padding-left 260ms cubic-bezier(0.44,0,0.56,1), background 260ms;
  }
  .case-row:last-of-type { border-bottom: 1px solid rgba(6,6,6,0.12); }
  .case-row:hover { padding-left: 18px; }
  .case-logo { font: 500 16px/1.2 var(--font-sans); letter-spacing: -0.01em; color: #060606; }
  .case-year { font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(6,6,6,0.45); }
  .case-main .case-title { font: 400 22px/1.2 var(--font-display); letter-spacing: -0.015em; color: #060606; }
  .case-main .case-desc { font: 300 14.5px/1.5 var(--font-sans); color: rgba(6,6,6,0.55); margin-top: 6px; }
  .case-arrow {
    font: 300 20px/1 var(--font-mono); color: rgba(6,6,6,0.4);
    transition: transform 260ms cubic-bezier(0.44,0,0.56,1), color 260ms;
  }
  .case-row:hover .case-arrow { transform: translateX(8px); color: #060606; }
  @media (max-width: 900px) {
    .case-row { grid-template-columns: 1fr auto; }
    .case-logo, .case-year { display: none; }
  }

  /* ---------- process — pinned cinematic stations ---------- */
  .proc-section { height: 260vh; position: relative; }
  .proc-sticky { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; padding: 0 clamp(24px,4vw,56px); box-sizing: border-box; }
  .proc-ghost {
    position: absolute; right: 4vw; top: 50%; transform: translateY(-50%);
    font: 300 30vh/1 var(--font-display); letter-spacing: -0.04em;
    color: rgba(255,255,255,0.03); pointer-events: none; user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .proc-stage { max-width: 1240px; width: 100%; margin: 0 auto; position: relative; }
  .proc-step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .proc-step .pk { font: 400 12px/1 var(--font-mono); letter-spacing: 0.18em; color: rgba(255,255,255,0.45); margin-bottom: 26px; opacity: 0; transition: opacity 400ms cubic-bezier(0.44,0,0.56,1) 120ms; }
  .proc-step.active .pk { opacity: 1; }
  .proc-step.exit .pk { opacity: 0; transition-delay: 0ms; }
  .proc-step .pt { overflow: hidden; }
  .proc-step .pt span {
    display: block; font: 520 clamp(44px, 5.4vw, 84px)/1.08 var(--font-display);
    letter-spacing: -0.03em; color: var(--ink);
    transform: translateY(112%); transition: transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .proc-step .pd {
    font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 440px; margin-top: 26px;
    opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.44,0,0.56,1) 150ms, transform 600ms cubic-bezier(0.44,0,0.56,1) 150ms;
  }
  .proc-step { visibility: hidden; }
  .proc-step.active { visibility: visible; }
  .proc-step.active .pt span { transform: translateY(0); }
  .proc-step.active .pd { opacity: 1; transform: translateY(0); }
  .proc-step.exit { visibility: visible; }
  .proc-step.exit .pt span { transform: translateY(-112%); }
  .proc-step.exit .pd { opacity: 0; transform: translateY(-14px); }

  /* progress line 01 → 04 */
  .proc-progress { position: absolute; left: clamp(24px,4vw,56px); bottom: 8vh; display: flex; align-items: center; gap: 16px; }
  .proc-progress .pp-num { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.4); }
  .proc-progress .pp-track { width: 220px; height: 1px; background: rgba(255,255,255,0.12); position: relative; }
  .proc-progress .pp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 0%; transition: width 500ms cubic-bezier(0.44,0,0.56,1); }

  /* step artifact chips */
  .proc-artifact {
    position: absolute; right: clamp(24px,4vw,56px); bottom: 8vh;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; background: rgba(13,13,13,0.7);
    padding: 14px 16px; display: flex; align-items: center; gap: 12px; min-width: 190px;
    font: 400 10px/1.5 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.6); text-transform: uppercase;
    opacity: 0; transform: translateY(10px); transition: opacity 400ms cubic-bezier(0.44,0,0.56,1), transform 400ms cubic-bezier(0.44,0,0.56,1);
  }
  .proc-artifact.on { opacity: 1; transform: translateY(0); }
  .proc-artifact svg { width: 30px; height: 30px; flex-shrink: 0; }
  .pa-live b { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--ink); margin-right: 6px; animation: wfblink 1.6s infinite; }
  @media (max-width: 900px) {
    .proc-section { height: auto; }
    .proc-sticky { position: static; height: auto; overflow: visible; padding: 18vh clamp(24px,4vw,56px); display: block; }
    .proc-stage { position: static; }
    .proc-step { position: static; transform: none; visibility: visible; margin-bottom: 64px; }
    .proc-step .pt span { transform: none; }
    .proc-step .pd { opacity: 1; transform: none; }
    .proc-ghost, .proc-progress, .proc-artifact { display: none; }
    .proc-stage { counter-reset: pstep; }
    .proc-step { counter-increment: pstep; }
    .proc-step::before {
      content: counter(pstep, decimal-leading-zero);
      display: block; font: 300 clamp(60px, 21vw, 120px)/0.85 var(--font-display);
      color: rgba(255,255,255,0.05); letter-spacing: -0.04em; margin-bottom: -4px;
    }
  }

  /* ---------- engagement spec sheet ---------- */
  .spec-app {
    max-width: 900px; margin: 0 auto;
    background: var(--elev); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  }
  .spec-titlebar {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08); background: #0d0d0d;
  }
  .spec-body { padding: 10px 0 18px; }
  .spec-line { border-bottom: 1px solid rgba(255,255,255,0.05); cursor: default; }
  .spec-line:last-child { border-bottom: none; }
  .spec-row {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center;
    padding: 17px 22px; min-height: 44px; box-sizing: border-box;
  }
  .spec-idx { font: 400 10.5px/1 var(--font-mono); color: rgba(255,255,255,0.3); }
  .spec-name { font: 400 16.5px/1.35 var(--font-sans); color: rgba(255,255,255,0.9); }
  .spec-line .typed { opacity: 0; }
  .spec-line.in .typed { opacity: 1; }
  .spec-tag {
    font: 400 10px/1 var(--font-mono); letter-spacing: 0.16em;
    border: 1px solid rgba(255,255,255,0.8); color: var(--ink); border-radius: 2px;
    padding: 6px 10px; display: inline-block;
    opacity: 0; transform: scale(2.2) rotate(-4deg);
  }
  .spec-line.stamped .spec-tag {
    opacity: 1; transform: scale(1) rotate(0deg);
    transition: transform 240ms cubic-bezier(0.2, 1.4, 0.3, 1), opacity 100ms;
  }
  .spec-line .spec-flash { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
  .spec-line { position: relative; }
  .spec-line.flash .spec-flash { opacity: 0.14; transition: none; }
  .spec-line .spec-flash { transition: opacity 260ms cubic-bezier(0.44,0,0.56,1); }
  .spec-detail {
    overflow: hidden; max-height: 0; transition: max-height 320ms cubic-bezier(0.44,0,0.56,1);
  }
  .spec-detail p { margin: 0; padding: 0 22px 16px 84px; font: 300 13.5px/1.5 var(--font-sans); color: rgba(255,255,255,0.5); }
  .spec-line:hover { background: rgba(255,255,255,0.025); }
  .spec-line:hover .spec-detail { max-height: 60px; }
  .spec-foot {
    display: flex; justify-content: space-between; padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.16em; color: rgba(255,255,255,0.35); text-transform: uppercase;
  }
  @media (max-width: 900px) {
    .spec-detail p { padding-left: 22px; }
  }

  /* ---------- FAQ ---------- */
  .faq-item { border-top: 1px solid rgba(255,255,255,0.08); }
  .faq-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: baseline;
    padding: 26px 0; color: var(--ink);
  }
  .faq-q .idx { font: 400 12px/1 var(--font-mono); color: rgba(255,255,255,0.3); }
  .faq-q .q { font: 480 21px/1.35 var(--font-display); letter-spacing: -0.005em; }
  .faq-q .tog { font: 300 20px/1 var(--font-mono); color: rgba(255,255,255,0.4); transition: transform 300ms cubic-bezier(0.44,0,0.56,1); }
  .faq-item.open .tog { transform: rotate(45deg); }
  .faq-a {
    overflow: hidden; max-height: 0; transition: max-height 400ms cubic-bezier(0.44,0,0.56,1);
  }
  .faq-a p { margin: 0; padding: 0 0 28px 80px; font: 400 16px/1.7 var(--font-sans); color: #B9BEC7; max-width: 620px; }

  /* ---------- final CTA ---------- */
  .final-cta { min-height: 90vh; display: flex; align-items: center; }
  .final-cta h2 {
    font: 520 clamp(48px, 6.4vw, 96px)/1.08 var(--font-display);
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 44px; max-width: 900px;
  }
  .pill-cta.big { height: 56px; padding: 0 34px; font-size: 15px; }

  /* ---------- footer ---------- */
  .site-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 56px clamp(24px,4vw,56px) 40px; position: relative; z-index: 10; }
  .foot-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  .foot-brand { font: 500 17px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
  .foot-line { font: 400 14px/1.7 var(--font-sans); color: #B9BEC7; max-width: 260px; margin-top: 14px; }
  .foot-col { display: flex; flex-direction: column; gap: 12px; }
  .foot-h { font: 400 10px/1 var(--font-mono); letter-spacing: 0.18em; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 6px; }
  .foot-col a, .foot-col button { font: 300 14px/1 var(--font-sans); color: rgba(255,255,255,0.65); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
  .foot-col a:hover, .foot-col button:hover { color: var(--ink); }
  .foot-bottom { max-width: 1240px; margin: 48px auto 0; display: flex; justify-content: space-between; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.16em; color: rgba(255,255,255,0.3); text-transform: uppercase; }

  @media (max-width: 900px) {
    .proc-row { grid-template-columns: 48px 1fr; }
    .proc-desc { grid-column: 2; }
    .faq-a p { padding-left: 0; }
    .foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .pill-cta { height: 44px; }
  }

  /* nav split-flap letter roll */
  .nav-link.roll .roll-in { display: inline-flex; }
  .nav-link.roll .rl { display: inline-block; position: relative; overflow: hidden; height: 1em; }
  .nav-link.roll .rl span { display: block; height: 1em; line-height: 1em; transition: transform 260ms cubic-bezier(0.44,0,0.56,1); transition-delay: inherit; }
  .nav-link.roll:hover .rl span { transform: translateY(-1em); }

  /* CTA label swap roll */
  .heat-label.swap { display: inline-block; position: relative; overflow: hidden; height: 1.05em; }
  .heat-label.swap .swap-a, .heat-label.swap .swap-b { display: block; height: 1.05em; line-height: 1.05em; transition: transform 300ms cubic-bezier(0.44,0,0.56,1); white-space: nowrap; }
  .heat-pill:hover .swap-a, .heat-pill:hover .swap-b { transform: translateY(-1.05em); }

  /* case-row cursor preview card */
  #case-preview {
    position: fixed; top: 0; left: 0; z-index: 90; width: 270px; pointer-events: none;
    background: #0d0d0d; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
    padding: 14px 16px; opacity: 0; will-change: transform;
    transition: opacity 220ms cubic-bezier(0.44,0,0.56,1), border-color 220ms;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  }
  #case-preview.on { opacity: 1; border-color: var(--molten); }
  #case-preview .cp-top { display: flex; justify-content: space-between; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: 10px; }
  #case-preview .cp-body { font: 300 13px/1.5 var(--font-sans); color: rgba(255,255,255,0.85); }
  #case-preview .cp-foot { font: 400 9px/1 var(--font-mono); letter-spacing: 0.2em; color: var(--molten); margin-top: 12px; }

  /* operator strip — agent roster: horizontal, label under each chip */
  .op-strip { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; align-items: flex-start; }
  .op-chips { display: flex; gap: 28px; flex-wrap: wrap; }
  .op-agent { display: flex; flex-direction: column; align-items: center; gap: 9px; }
  .op-chip {
    width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0;
    background: #101010; border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center; position: relative;
    transition: border-color 240ms cubic-bezier(0.44,0,0.56,1);
    cursor: default;
  }
  .op-chip:hover { border-color: var(--molten); }
  .op-chip:hover canvas { filter: drop-shadow(0 0 4px rgba(255,90,30,0.5)); }
  .op-chip canvas { width: 30px; height: 30px; display: block; }
  .op-chip b { position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 999px; background: var(--ink); border: 2px solid #060606; font-weight: 400; animation: wfblink 2.4s infinite; }
  .op-label { font: 400 9px/1.5 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.5); text-transform: uppercase; transition: color 200ms; text-align: center; }
  .op-label.hot { color: var(--molten); }
  .op-line { font: 400 10.5px/1.6 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

  /* ---------- custom cursor ---------- */
  @media (hover: hover) and (pointer: fine) {
    body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .svc-card { cursor: none; }
  }
  #cur-dot, #cur-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200;
    border-radius: 999px; will-change: transform; display: none;
  }
  body.cursor-on #cur-dot, body.cursor-on #cur-ring { display: block; }
  #cur-dot { width: 5px; height: 5px; background: var(--ink); margin: -2.5px 0 0 -2.5px; }
  #cur-ring {
    width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.5); margin: -15px 0 0 -15px;
    transition: width 220ms cubic-bezier(0.44,0,0.56,1), height 220ms cubic-bezier(0.44,0,0.56,1), margin 220ms cubic-bezier(0.44,0,0.56,1), border-color 220ms, background 220ms;
    display: none; align-items: center; justify-content: center;
  }
  body.cursor-on #cur-ring { display: flex; }
  #cur-ring span { font: 400 9px/1 var(--font-mono); letter-spacing: 0.14em; color: #060606; opacity: 0; transition: opacity 160ms; }
  #cur-ring.grow { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: rgba(255,255,255,0.85); }
  #cur-ring.view { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--ink); border-color: var(--ink); }
  #cur-ring.view span { opacity: 1; }
  nav.fi-nav.inv ~ #cur-dot { background: #060606; }

  /* ---------- loader ---------- */
  #loader {
    position: fixed; inset: 0; z-index: 100;
    /* light scrim: the docking assembly is WATCHED, not hidden — text keeps its own left band */
    background: linear-gradient(100deg, rgba(6,6,6,0.86) 0%, rgba(6,6,6,0.38) 40%, rgba(6,6,6,0.04) 100%);
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 40px clamp(24px, 4vw, 56px);
    transition: opacity 500ms cubic-bezier(0.44,0,0.56,1);
  }
  #loader.done { opacity: 0; pointer-events: none; }
  #loader .boot-wm { font: 500 clamp(30px, 3.6vw, 46px)/1 var(--font-sans); letter-spacing: -0.04em; color: var(--ink); margin-bottom: 18px; display: flex; align-items: baseline; }
  #loader .boot-wm .bl { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 480ms cubic-bezier(0.44,0,0.56,1), transform 480ms cubic-bezier(0.44,0,0.56,1); }
  #loader.wm-in .boot-wm .bl { opacity: 1; transform: none; }
  #loader .boot-wm .wm-dot { width: 7px; height: 7px; margin-left: 5px; }
  #loader .boot-log { font: 400 11px/2 var(--font-mono); letter-spacing: 0.06em; color: rgba(244,241,236,0.65); text-transform: uppercase; min-height: 110px; margin-bottom: 14px; display: flex; flex-direction: column; justify-content: flex-end; }
  #loader .bl-row i { font-style: normal; color: #FF8A4C; text-shadow: 0 0 8px rgba(255,110,40,0.5); }
  #loader .bl-row:last-child span::after { content: "\258d"; color: rgba(244,241,236,0.5); animation: wfcaret 0.9s steps(1) infinite; }
  #loader .boot-label { font: 400 12px/1.7 var(--font-mono); letter-spacing: 0.02em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
  /* returning visitors: fast 400ms fade, no ceremony */
  .returning #loader { display: none; }
  .returning .line > span, .returning .lw, .returning .hero-aside, .returning .hero-label, .returning .scroll-cue, .returning nav.fi-nav { transition-duration: 400ms !important; transition-delay: 0ms !important; }
  #loader .counter { font: 300 clamp(56px, 8vw, 110px)/0.9 var(--font-display); letter-spacing: -0.03em; color: var(--molten); font-variant-numeric: tabular-nums; }

  /* ============================================================
     MOBILE — a purpose-built 390px layout system, not scaled desktop.
     Phone rhythm: 72px vertical section padding, 20px side gutters,
     clear space below the fixed nav, content-sized cards, zero overlaps.
     ============================================================ */
  @media (max-width: 720px) {
    /* ---- global rhythm ---- */
    section.zone { padding: 72px 20px; }
    .zone-inner { max-width: 100%; }
    .runway { height: 20vh; }

    /* ---- nav: compact — page links stay reachable, pill moves to in-page CTAs ---- */
    nav.fi-nav { padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px 4px; }
    .nav-link:not(#mute) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 9px; letter-spacing: 0.1em; }
    .nav-right { gap: 14px; }
    nav.fi-nav .pill-cta { display: none; }
    #nav-ind { bottom: 8px; }
    #mute {
      min-height: 44px; min-width: 44px; font-size: 0;
      display: inline-flex; align-items: center; justify-content: center; padding: 0;
    }
    #mute::before {
      content: ""; width: 11px; height: 11px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.55);
    }
    .nav-right { gap: 10px; }
    .pill-cta { height: 44px; padding: 0 18px; font-size: 13px; white-space: nowrap; }

    /* ---- hero: brain owns the top ~45%, headline + CTA anchored below ---- */
    .hero { padding-bottom: 44px; }
    .hero-grid { gap: 26px; }
    h1.hero-h { font-size: clamp(40px, 12vw, 62px); text-wrap: balance; line-height: 1.02; }
    .hero-label { top: calc(env(safe-area-inset-top, 0px) + 76px); }
    .hero-aside { flex-direction: column; align-items: flex-start; gap: 22px; }
    .hero-aside p { font-size: 15px; max-width: none; }

    /* ---- manifesto ---- */
    #manifesto-text { font-size: clamp(24px, 6.6vw, 32px); }

    /* ---- services: compact content-sized cards, no empty middles ---- */
    .svc-wrap { padding: 18px; background-size: 20px 20px; }
    .svc-grid { gap: 12px; }
    .svc-card { height: 172px; }
    .svc-face { padding: 18px; }
    .svc-num { font-size: 11px; }
    .svc-flip-chip { top: 15px; right: 15px; }
    .svc-icon { margin-top: 14px; width: 28px; height: 28px; }
    .svc-title { font-size: 22px; }
    .svc-back { justify-content: space-between; }
    .svc-desc { font-size: 13.5px; line-height: 1.5; }

    /* ---- stats ---- */
    .stat { padding: 26px 20px; }
    .stat-num { font-size: clamp(52px, 16vw, 76px); }

    /* ---- S3 chaos: linear, lighter ---- */
    .s3-section { height: 180vh; }
    .s3-count { font-size: clamp(56px, 17vw, 84px); }
    .s3-chip { padding: 7px 10px; font-size: 8.5px; }

    /* ---- workflow: clean vertical stack, centered dashed spine ---- */
    .wf-sticky { position: static; height: auto; padding: 72px 20px 40px; display: block; }
    .wf-app { height: auto; border-radius: 6px; }
    .wf-body { display: flex; flex-direction: column; }
    .wf-chat, .wf-stack { min-height: 440px; }
    .wf-msg { max-width: 82%; }
    .wf-srow svg { display: none; }
    .wf-toast { display: none; }
    .wf-canvas {
      display: flex; flex-direction: column; gap: 16px; padding: 20px;
      background-size: 18px 18px; min-height: 0; overflow: visible;
    }
    .wf-node {
      position: relative !important; left: auto !important; top: auto !important;
      width: 100%; box-sizing: border-box;
    }
    .wf-node + .wf-node::before {
      content: ""; position: absolute; top: -16px; left: 50%; width: 0; height: 16px;
      border-left: 1px dashed rgba(255,255,255,0.28);
    }
    .wf-node .t { font-size: 15px; }
    .wf-node .k, .wf-node .s { font-size: 12px; }
    .wf-wires { display: none; }
    .wf-cursor { display: none !important; }
    .wf-stamp {
      position: static !important; align-self: flex-start; margin: 2px 0 0;
      opacity: 1; transform: none;
    }
    .wf-caption { flex-direction: column; gap: 10px; margin-top: 22px; }
    .wf-caption h2 { font-size: 28px; }

    /* ---- process: trim the pinned padding ---- */
    .proc-sticky { padding: 72px 20px !important; }

    /* ---- cases ---- */
    .cases { padding: 72px 20px; }

    /* ---- spec sheet ---- */
    .spec-app { border-left: none; border-right: none; border-radius: 0; }
    .spec-row { grid-template-columns: 32px 1fr auto; gap: 12px; padding: 16px 18px; }
    .spec-detail p { padding: 0 18px 14px 62px; }

    /* ---- final CTA + roster: real vertical spacing, single row of 5 chips ---- */
    .final-cta { min-height: auto; display: block; }
    .op-strip { gap: 18px; margin-bottom: 30px; width: 100%; }
    .op-chips { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; width: 100%; max-width: none; }
    .op-agent { flex: 1 1 0; gap: 8px; }         /* five in one row */
    .op-chip { width: 36px; height: 36px; }
    .op-chip canvas { width: 24px; height: 24px; }
    .op-chip b { width: 7px; height: 7px; }
    .op-label { font-size: 8px; letter-spacing: 0.05em; line-height: 1.4; }
    .op-line { font-size: 9px; letter-spacing: 0.05em; }
    .final-cta h2 { font-size: clamp(40px, 11vw, 60px); margin-bottom: 28px; }
    .pill-cta.big { height: 52px; }

    /* ---- footer ---- */
    .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .line > span, .lw, .hero-aside, nav.fi-nav, .hero-label, .scroll-cue { transition: none; transform: none; opacity: 1; }
    #loader { display: none; }
  }

  /* wordmark / nav links can be anchors on subpages */
  a.wordmark, a.wordmark:hover { color: var(--ink); text-decoration: none; }
  a.nav-link, a.nav-link:hover { text-decoration: none; }
  .nav-link.page-on { color: var(--ink); }

  /* ===== CLUSTER E: headline mask/clip reveal + variable-weight settle, synced
     to the reveal beat. The clip rises from the baseline (a mask, not a plain
     fade) and the weight eases from bold to settled as it lands. Layers on the
     existing [data-reveal] opacity/transform. ===== */
  .cases-head, .final-cta h2, .wf-caption h2, .page-title, .s4-cap, .s5-cap, .s7-cap {
    clip-path: inset(-6% -2% -6% -2%);
    transition: opacity 800ms cubic-bezier(0.44,0,0.56,1), transform 800ms cubic-bezier(0.44,0,0.56,1),
                clip-path 900ms cubic-bezier(0.34,0,0.2,1), font-variation-settings 1100ms cubic-bezier(0.34,0,0.2,1);
  }
  .cases-head:not(.in), .final-cta h2:not(.in), .wf-caption h2:not(.in), .page-title:not(.in),
  .s4-cap:not(.in), .s5-cap:not(.in), .s7-cap:not(.in) {
    clip-path: inset(0 0 100% 0);           /* masked from the baseline up */
    font-variation-settings: "wght" 620;    /* enters heavier… */
  }
  .cases-head.in, .final-cta h2.in, .wf-caption h2.in, .page-title.in, .s4-cap.in, .s5-cap.in, .s7-cap.in {
    font-variation-settings: "wght" 500;    /* …settles lighter as it lands */
  }
  @media (prefers-reduced-motion: reduce) {
    .cases-head, .final-cta h2, .wf-caption h2, .page-title, .s4-cap, .s5-cap, .s7-cap { clip-path: none !important; transition: none; }
  }

/* ============ FUSION PASS 3 — SURFACES: luminous glass in the world ============ */
.wf-app, .spec-app, .ct-panel {
  border-radius: 22px;
  background-color: rgba(12,12,15,0.72);
  background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0) 34%);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  border-color: rgba(255,255,255,0.13);
}
.wf-app {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 60px 110px -18px rgba(0,0,0,0.78),
    0 22px 44px rgba(0,0,0,0.5),
    0 0 90px 26px rgba(0,0,0,0.4),
    0 46px 130px -30px rgba(255,90,30,0.16); /* warm under-glow */
}
.spec-app {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 70px -24px rgba(0,0,0,0.65), 0 40px 110px -34px rgba(255,90,30,0.14);
}
.svc-face {
  border-radius: 20px;
  background-color: rgba(14,14,17,0.66);
  background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0) 36%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 54px -20px rgba(0,0,0,0.6), 0 30px 80px -30px rgba(255,90,30,0.1);
}
.wf-titlebar, .svc-vis-bar { background: rgba(255,255,255,0.03); }
.wf-side { background: rgba(255,255,255,0.02); }
.wf-canvas, .wf-pane { background-color: rgba(8,8,10,0.3); }
.wf-node { border-radius: 10px; background: rgba(18,18,21,0.85); }
.wf-toast { border-radius: 14px; background: rgba(20,20,23,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#case-preview { border-radius: 18px; background: rgba(12,12,15,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* phones: glass without the blur bill */
@media (max-width: 720px) {
  .wf-app, .spec-app, .svc-face, .ct-panel, .wf-toast, #case-preview {
    backdrop-filter: none; -webkit-backdrop-filter: none; background-color: #0B0B0D;
  }
}

/* ============ FUSION PASS 4 — living objects: warm screen glow + depth ============ */
.wf-canvas, .wf-pane {
  box-shadow:
    inset 0 26px 60px -44px rgba(255,255,255,0.05),   /* top light falls into the screen */
    inset 0 -70px 130px -70px rgba(255,90,30,0.13);   /* warm glow rising from the work */
}
.op-chip { will-change: transform; }

/* cases-cut-softener: ease the dark hall under the white cases edge (no hard cut) */
.cases#cases { position:relative; }
.cases#cases::before { content:""; position:absolute; left:0; right:0; top:0; height:240px; background:linear-gradient(to bottom,#060606 0%,rgba(6,6,6,0.55) 42%,rgba(6,6,6,0) 100%); pointer-events:none; z-index:0; }
.cases#cases > .zone-inner { position:relative; z-index:1; }

/* boot scroll-lock: keep the page pinned at hero while the brain materializes, so scrolling during the ~2.5s boot never pops the formation at a scrolled position; released when FI_FORMED */
html.boot-lock, html.boot-lock body { overflow: hidden !important; height: 100%; touch-action: none; overscroll-behavior: none; }