@layer tokens, reset, base, layout, components, utilities;

/* ---------- Fonts: self-hosted WOFF2, latin subset, metric-matched fallback ---------- */
@font-face {
  font-family: "Instrument Sans Variable";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 97%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; }
  h1, h2, h3, h4 { font-weight: inherit; text-wrap: balance; }
  p { text-wrap: pretty; }
  ul { list-style: none; padding: 0; }
  :focus-visible { outline: 2px solid var(--s-focus); outline-offset: 3px; border-radius: 4px; }
  :focus:not(:focus-visible) { outline: none; }
}

@layer base {
  html { background: var(--s-bg); }
  body {
    background: var(--s-bg);
    color: var(--s-text);
    font: var(--t-copy-17);
    font-family: var(--p-font-sans), "Instrument Fallback", sans-serif;
    font-synthesis: none;
    overflow-x: clip;
  }
  /* Film grain: one tiny SVG, fixed, never intercepts input. */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
    opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  ::selection { background: var(--s-text); color: var(--s-bg); }

  .eyebrow {
    font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--s-text-muted);
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .display   { font: var(--t-display-72); letter-spacing: var(--track-display); }
  .h2        { font: var(--t-display-56); letter-spacing: var(--track-display); }
  .h3        { font: var(--t-heading-36); letter-spacing: var(--track-heading); }
  .h4        { font: var(--t-heading-20); letter-spacing: var(--track-heading); }
  .lede      { font: var(--t-copy-20); color: var(--s-text-muted); max-inline-size: var(--prose-max); }
  .copy      { color: var(--s-text-muted); max-inline-size: var(--prose-max); }
  .small     { font: var(--t-copy-15); color: var(--s-text-muted); }
  .mono      { font: var(--t-label-13); font-family: var(--p-font-mono); }
  .dim       { color: var(--s-text-subtle); }
}

@layer layout {
  .wrap { max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: clamp(80px, 12vw, 168px); position: relative; }
  .stack > * + * { margin-block-start: var(--sp-6); }
  .stack-tight > * + * { margin-block-start: var(--sp-4); }
}

@layer components {
  /* ---------- Mark ---------- */
  .mark { inline-size: 1.5rem; block-size: 1.5rem; color: var(--s-text); flex: none; }
  .lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--s-text); }
  .emark { block-size: 17px; inline-size: auto; flex: none; display: block; }
  .lockup__word { font: var(--t-label-15); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

  /* ---------- Header: floats over the hero, glass once scrolled ---------- */
  .header {
    position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 50;
    block-size: var(--header-h);
    transition: background-color var(--d-3) var(--ease-standard), border-color var(--d-3) var(--ease-standard);
    border-block-end: 1px solid transparent;
  }
  .header.is-scrolled, .header--solid {
    background: var(--s-header-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-block-end-color: var(--s-border-subtle);
  }
  .header__inner { display: flex; align-items: center; justify-content: space-between; block-size: var(--header-h); gap: var(--sp-6); }
  .nav { display: flex; align-items: center; gap: var(--sp-8); }
  .nav a { font: var(--t-label-15); color: var(--s-text-muted); text-decoration: none; transition: color var(--d-1) var(--ease-standard); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--s-text); }
  .header__right { display: flex; align-items: center; gap: var(--sp-3); }
  @media (max-width: 899px) { .nav { display: none; } }
  @media (max-width: 380px) {
    .lockup__word { font-size: .75rem; letter-spacing: .1em; }
    .header .btn--sm .label-long { display: none; }
  }
  main { display: block; }
  .page-offset { padding-block-start: var(--header-h); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    block-size: 48px; padding-inline: var(--sp-6);
    border-radius: var(--r-button); font: var(--t-label-15); font-weight: 600;
    text-decoration: none; white-space: nowrap; position: relative;
    transition: background-color var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard),
                color var(--d-2) var(--ease-standard), box-shadow var(--d-3) var(--ease-standard), transform var(--d-2) var(--ease-standard);
  }
  .btn--primary { background: var(--s-action-bg); color: var(--s-action-text); box-shadow: 0 0 0 0 var(--s-glow); }
  .btn--primary:hover { background: var(--s-action-bg-hover); box-shadow: 0 0 36px 4px oklch(0.9648 0.0127 86.8 / .22); }
  .btn--primary:active { transform: translateY(1px); }
  .btn--secondary { border: 1px solid var(--s-border-strong); color: var(--s-text); background: oklch(0.9648 0.0127 86.8 / .03); backdrop-filter: blur(8px); }
  .btn--secondary:hover { background: oklch(0.9648 0.0127 86.8 / .08); border-color: var(--s-text-muted); }
  .btn--sm { block-size: 38px; padding-inline: var(--sp-4); font: var(--t-label-13); font-weight: 600; }
  .btn .arrow { transition: transform var(--d-2) var(--ease-standard); }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ---------- Hero: full-bleed cinematic image, centred type ---------- */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-block-size: max(700px, 100svh);
    display: grid; place-items: center; text-align: center;
    padding-block: calc(var(--header-h) + 40px) 110px;
  }
  .hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #0d0a08; }
  .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--pos, 62% 50%);
    transform-origin: 66% 58%; animation: drift 32s ease-in-out infinite alternate; will-change: transform; }
  @keyframes drift { from { transform: scale(1.03); } to { transform: scale(1.13) translate3d(-1.2%, -.8%, 0); } }
  .hero__light { position: absolute; inset: -10%; z-index: -2; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(34% 30% at 86% 64%, rgba(255,190,110,.26), transparent 70%), radial-gradient(60% 40% at 40% 110%, rgba(255,170,90,.12), transparent 70%);
    animation: breathe 10s ease-in-out infinite; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(62% 52% at 50% 50%, rgba(8,6,5,.62), rgba(8,6,5,.18) 72%, rgba(8,6,5,.05)),
      linear-gradient(180deg, rgba(8,6,5,.7) 0%, transparent 18%, transparent 62%, var(--s-bg) 100%); }
  .hero__content { position: relative; inline-size: 100%; max-inline-size: 1100px; margin-inline: auto; display: grid; justify-items: center; }
  .hero__title { font: 560 clamp(2.25rem, 1rem + 4.3vw, 5.1rem)/1.03 var(--p-font-sans); letter-spacing: -.035em;
    margin-block-start: var(--sp-6); max-inline-size: 19ch; color: var(--s-text-strong); text-shadow: 0 2px 40px rgba(0,0,0,.35); }
  .hero__lede { margin: var(--sp-6) auto 0; max-inline-size: 46ch; color: oklch(0.9648 0.0127 86.8 / .84); }
  .hero__actions { margin-block-start: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  /* Hero badge: product name + state, in a glass capsule with a slow sheen */
  .badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px;
    background: rgba(18,14,11,.46); border: 1px solid rgba(247,243,234,.2);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07); }
  .badge::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,240,214,.16) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 7s ease-in-out 1.2s infinite; }
  @keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
  .badge__mark { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--s-text); color: #15120f; flex: none; }
  .badge__mark svg { inline-size: 14px; block-size: auto; }
  .badge__name { font: 600 .9375rem/1 var(--p-font-sans); letter-spacing: .01em; color: var(--s-text-strong); }
  .badge__sep { inline-size: 1px; block-size: 14px; background: rgba(247,243,234,.25); }
  .badge__state { font: 500 .8125rem/1 var(--p-font-sans); color: rgba(247,243,234,.72); }
  @media (max-width: 400px) { .badge__sep, .badge__state { display: none; } .badge { padding-inline-end: 14px; } }
  .hero--page { min-block-size: max(620px, 92svh); }
  .hero--page .hero__actions { justify-content: center; }

  /* Prompt bar: describe a space, request access with it */
  .prompt { margin-block-start: clamp(28px, 4vw, 40px); inline-size: min(660px, 100%); display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 22px; border-radius: 999px; text-align: start;
    background: rgba(18,14,11,.52); border: 1px solid rgba(247,243,234,.22);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 24px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
    transition: border-color var(--d-3) var(--ease-standard), box-shadow var(--d-3) var(--ease-standard); }
  .prompt:focus-within { border-color: rgba(247,243,234,.55); box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 4px rgba(247,243,234,.08); }
  .prompt input { flex: 1; min-inline-size: 0; background: none; border: 0; outline: none; color: var(--s-text); font: var(--t-copy-17); block-size: 44px; }
  .prompt input::placeholder { color: rgba(247,243,234,.58); }
  .prompt .btn { flex: none; }
  .chips { margin-block-start: 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .chips button { font: var(--t-label-13); padding: 9px 14px; border-radius: 999px; color: rgba(247,243,234,.86);
    border: 1px solid rgba(247,243,234,.18); background: rgba(18,14,11,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: border-color var(--d-2), color var(--d-2), background-color var(--d-2); }
  .chips button:hover { border-color: rgba(247,243,234,.5); color: #fff; background: rgba(18,14,11,.55); }
  .hero__note { margin-block-start: 16px; font: var(--t-label-13); color: rgba(247,243,234,.62); }
  .hero__cue { position: absolute; inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
    font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(247,243,234,.55); }
  .hero__cue i { inline-size: 1px; block-size: 34px; background: linear-gradient(rgba(247,243,234,.7), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
  @keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
  @media (max-width: 640px) {
    .prompt { padding-inline-start: 16px; }
    .prompt .btn .label-long { display: none; }
    .hero__cue { display: none; }
  }

  /* Entrance: content rises once on load. Starts visible enough to never read as blank. */
  .rise { animation: rise var(--d-4) var(--ease-out-expo) both; }
  .rise-2 { animation-delay: 90ms; } .rise-3 { animation-delay: 180ms; } .rise-4 { animation-delay: 270ms; }
  @keyframes rise { from { opacity: .001; transform: translateY(18px); filter: blur(6px); } }

  /* ---------- Section heads ---------- */
  .head { display: grid; gap: var(--sp-6); max-inline-size: 900px; }
  .head .h2 { color: var(--s-text-strong); }

  /* ---------- Flow: three animated panels ---------- */
  .flow { margin-block-start: clamp(48px, 7vw, 88px); display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .panel {
    position: relative; overflow: hidden; border-radius: var(--r-card);
    background: linear-gradient(180deg, var(--s-bg-card), var(--s-bg-raised));
    border: 1px solid var(--s-border-subtle);
    padding: var(--sp-6); display: grid; gap: var(--sp-6); align-content: start;
    transition: border-color var(--d-3) var(--ease-standard), transform var(--d-3) var(--ease-standard);
  }
  .panel:hover { border-color: var(--s-border-strong); transform: translateY(-4px); }
  .panel__art { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--s-bg);
    border: 1px solid var(--s-border-subtle); overflow: hidden; display: grid; place-items: center; }
  .panel__art svg { inline-size: 100%; block-size: 100%; }
  .panel__num { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--s-text-subtle); }
  .panel h3 { font: var(--t-heading-24); letter-spacing: var(--track-heading); color: var(--s-text-strong); margin-block-start: var(--sp-2); }
  .panel p { font: var(--t-copy-15); color: var(--s-text-muted); margin-block-start: var(--sp-2); }

  /* Panel 1: plan lines draw */
  .draw path, .draw rect, .draw line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 6s var(--ease-standard) infinite; }
  .draw .d2 { animation-delay: .35s; } .draw .d3 { animation-delay: .7s; } .draw .d4 { animation-delay: 1.05s; } .draw .d5 { animation-delay: 1.4s; }
  @keyframes draw { 0% { stroke-dashoffset: 400; } 40%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

  /* Panel 2: massing variants cycle */
  .variants g { opacity: 0; animation: variant 9s var(--ease-standard) infinite; }
  .variants g:nth-of-type(2) { animation-delay: 3s; } .variants g:nth-of-type(3) { animation-delay: 6s; }
  @keyframes variant { 0% { opacity: 0; transform: translateY(8px); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-6px); } }

  /* Panel 3: revision timeline ticks light in step with the scenes */
  .revs .tick { opacity: .2; animation: tick 9s steps(1) infinite; }
  .revs .tick:nth-of-type(2) { animation-delay: 3s; } .revs .tick:nth-of-type(3) { animation-delay: 6s; }
  @keyframes tick { 0% { opacity: 1; } 33.3%, 100% { opacity: .2; } }

  /* ---------- Marquee ---------- */
  .marquee { overflow: hidden; border-block: 1px solid var(--s-border-subtle); padding-block: clamp(20px, 3vw, 36px);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .marquee__track { display: flex; inline-size: max-content; animation: marquee 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__track span {
    font: var(--t-display-72); letter-spacing: var(--track-display); white-space: nowrap;
    padding-inline-end: .6em; color: transparent; -webkit-text-stroke: 1px var(--s-border-strong);
  }
  .marquee__track span:nth-child(odd) { color: var(--s-text); -webkit-text-stroke: 0; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- Statement ---------- */
  .statement { font: var(--t-display-56); letter-spacing: var(--track-display); max-inline-size: 22ch; color: var(--s-text-subtle); }
  .statement b { color: var(--s-text-strong); font-weight: inherit; }

  /* ---------- Feature (inner pages) ---------- */
  .feature { display: grid; gap: var(--sp-6); align-items: start; padding-block: var(--sp-8); border-block-start: 1px solid var(--s-border-subtle); }
  @media (min-width: 860px) { .feature { grid-template-columns: 1fr 1.2fr; gap: var(--sp-16); } }
  .feature .num { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--s-text-subtle); display: block; margin-block-end: var(--sp-3); }

  /* ---------- CTA band ---------- */
  .band { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
  .band::before {
    content: ""; position: absolute; z-index: -1; inset: -20% 10% auto; block-size: 140%;
    background: radial-gradient(50% 45% at 50% 50%, oklch(0.9648 0.0127 86.8 / .11), transparent 70%);
    animation: breathe 7s ease-in-out infinite;
  }
  @keyframes breathe { 50% { opacity: .55; transform: scale(1.06); } }
  .band .mark-xl { inline-size: 72px; block-size: 72px; margin-inline: auto; color: var(--s-text); }
  .band .h2 { margin-block-start: var(--sp-8); margin-inline: auto; max-inline-size: 16ch; color: var(--s-text-strong); }
  .band .lede { margin-inline: auto; margin-block-start: var(--sp-6); }
  .band .hero__actions { justify-content: center; }

  /* ---------- Footer ---------- */
  .footer { padding-block: var(--sp-16) var(--sp-12); border-block-start: 1px solid var(--s-border-subtle); }
  .footer__grid { display: grid; gap: var(--sp-12); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .footer h2 { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--s-text-subtle); margin-block-end: var(--sp-4); }
  .footer li + li { margin-block-start: var(--sp-3); }
  .footer a { font: var(--t-copy-15); color: var(--s-text-muted); text-decoration: none; transition: color var(--d-1) var(--ease-standard); }
  .footer a:hover { color: var(--s-text); }
  .footer__base { margin-block-start: var(--sp-16); padding-block-start: var(--sp-6); border-block-start: 1px solid var(--s-border-subtle);
    display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }

  /* ---------- Inner page head ---------- */
  .page-head { padding-block: calc(var(--header-h) + clamp(56px, 9vw, 120px)) clamp(32px, 5vw, 64px); position: relative; isolation: isolate; }
  .page-head::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; block-size: 520px;
    background: radial-gradient(50% 60% at 30% 0%, oklch(0.9648 0.0127 86.8 / .07), transparent 70%); }
  .page-head .display { color: var(--s-text-strong); }
  .page-head .lede { margin-block-start: var(--sp-6); }

  /* ---------- Legal ---------- */
  .note { margin-block-start: var(--sp-8); padding: var(--sp-4) var(--sp-6); border: 1px solid var(--s-border); border-radius: 12px;
    font: var(--t-copy-15); color: var(--s-text-muted); max-inline-size: var(--prose-max); }
  .legal { border-block-start: 1px solid var(--s-border); }
  .legal > li { display: grid; gap: var(--sp-3) var(--sp-8); padding-block: var(--sp-8); border-block-end: 1px solid var(--s-border-subtle); }
  @media (min-width: 760px) { .legal > li { grid-template-columns: 56px 1fr; } }
  .legal .num { font: var(--t-label-13); font-family: var(--p-font-mono); color: var(--s-text-subtle); }
  .legal h2 { font: var(--t-heading-20); letter-spacing: var(--track-heading); margin-block-end: var(--sp-4); }
  .legal p, .legal ul { font: var(--t-copy-15); color: var(--s-text-muted); max-inline-size: 68ch; }
  .legal p + p, .legal ul + p, .legal p + ul { margin-block-start: var(--sp-3); }
  .legal ul li { padding-inline-start: var(--sp-4); position: relative; }
  .legal ul li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--s-text-subtle); }
  .legal a { color: var(--s-text); text-underline-offset: 3px; }

  /* ---------- Cards grid (contact, team) ---------- */
  .channels { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .channels > li { background: linear-gradient(180deg, var(--s-bg-card), var(--s-bg-raised)); border: 1px solid var(--s-border-subtle);
    border-radius: var(--r-card); padding: var(--sp-6); transition: border-color var(--d-3) var(--ease-standard); }
  .channels > li:hover { border-color: var(--s-border-strong); }
  .channels h3 { font: var(--t-heading-20); }
  .channels p { margin-block-start: var(--sp-2); font: var(--t-copy-15); color: var(--s-text-muted); }
  .channels a { display: inline-block; margin-block-start: var(--sp-4); font: var(--t-label-13); font-family: var(--p-font-mono); color: var(--s-text); text-underline-offset: 3px; }
}


@layer components {
  /* ---------- Wordmark + footer signature (founder artwork) ---------- */
  .wordmark { block-size: 15px; inline-size: auto; color: var(--s-text); display: block; }
  .signature { margin-block-start: clamp(64px, 9vw, 120px); display: grid; justify-items: center; gap: clamp(18px, 2.4vw, 30px); padding-block-end: 8px; }
  .signature__lockup { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); color: var(--s-text); }
  .signature__e { block-size: calc(min(70vw, 780px) * .108); inline-size: auto; }
  .signature__mark { inline-size: min(70vw, 780px); block-size: auto; }
  .signature__line { inline-size: min(42vw, 440px); block-size: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(201,164,92,.7) 28%, #fff3d6 50%, rgba(201,164,92,.7) 72%, transparent);
    box-shadow: 0 0 18px rgba(232,190,110,.55); }

  /* ---------- Process: sketch -> model -> render -> live ---------- */
  .stages { margin-block-start: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: st; }
  @media (max-width: 960px) { .stages { grid-template-columns: repeat(2, 1fr); } }
  .stage { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; border: 1px solid var(--s-border-subtle); background: #0d0a08; }
  .stage img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out-expo); }
  .stage:hover img { transform: scale(1.05); }
  .stage figcaption { position: absolute; inset: auto 0 0 0; padding: clamp(14px, 2vw, 22px); background: linear-gradient(0deg, rgba(8,6,5,.9), rgba(8,6,5,.4) 60%, transparent); }
  .stage .n { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: #e2c07d; }
  .stage b { display: block; font: var(--t-heading-24); letter-spacing: var(--track-heading); color: var(--s-text-strong); margin-block-start: 6px; }
  .stage span.t { display: block; font: var(--t-copy-15); color: oklch(0.9648 0.0127 86.8 / .72); margin-block-start: 4px; }
  .caption { margin-block-start: var(--sp-4); font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--s-text-subtle); }

  /* ---------- Pillars: create / understand / develop ---------- */
  .pillars { margin-block-start: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-block-start: 1px solid var(--s-border); }
  .pillars li { padding: clamp(28px, 3.5vw, 44px) clamp(20px, 3vw, 40px) clamp(28px, 3.5vw, 44px) 0; position: relative; }
  .pillars li + li { padding-inline-start: clamp(20px, 3vw, 40px); border-inline-start: 1px solid var(--s-border-subtle); }
  @media (max-width: 860px) { .pillars li + li { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--s-border-subtle); } }
  .pillars .n { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: var(--s-text-subtle); }
  .pillars h3 { font: var(--t-display-56); letter-spacing: var(--track-display); color: var(--s-text-strong); margin-block-start: var(--sp-6); }
  .pillars p { font: var(--t-copy-17); color: var(--s-text-muted); margin-block-start: var(--sp-4); max-inline-size: 34ch; }

  /* ---------- Capabilities grid ---------- */
  .caps { margin-block-start: clamp(40px, 6vw, 64px); display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    background: var(--s-border-subtle); border: 1px solid var(--s-border-subtle); border-radius: var(--r-card); overflow: hidden; }
  .caps li { background: var(--s-bg); padding: clamp(24px, 3vw, 36px); transition: background-color var(--d-3); }
  .caps li:hover { background: oklch(0.18 0.01 70); }
  .caps h3 { font: var(--t-heading-20); color: var(--s-text-strong); }
  .caps p { font: var(--t-copy-15); color: var(--s-text-muted); margin-block-start: var(--sp-3); }

  /* ---------- Story: real frames crossfade as you scroll ---------- */
  .story { position: relative; block-size: 380vh; }
  .story__sticky { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    gap: clamp(32px, 6vw, 96px); max-inline-size: var(--page-max); margin-inline: auto; padding: var(--header-h) var(--gutter) 0; }
  .story__frames { position: relative; justify-self: center; inline-size: min(100%, 500px); aspect-ratio: 4 / 5; max-block-size: 74svh;
    border-radius: 24px; overflow: hidden; border: 1px solid var(--s-border); background: #0d0a08; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
  .story__frames img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.08);
    transition: opacity .9s var(--ease-standard), transform 1.8s var(--ease-out-expo); }
  .story__frames::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,6,5,.35), transparent 40%); }
  .story__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(18px, 2.4vw, 28px); }
  .story__steps li { opacity: .28; transition: opacity var(--d-4) var(--ease-out-expo), transform var(--d-4) var(--ease-out-expo); transform: translateX(-6px); }
  .story__steps .n { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); color: #e2c07d; }
  .story__steps h3 { font: var(--t-heading-36); letter-spacing: var(--track-heading); color: var(--s-text-strong); margin-block-start: 6px; }
  .story__steps p { font: var(--t-copy-17); color: var(--s-text-muted); margin-block-start: 6px; max-inline-size: 36ch; }
  .story[data-step="1"] .story__frames picture:nth-child(1) img, .story[data-step="2"] .story__frames picture:nth-child(2) img,
  .story[data-step="3"] .story__frames picture:nth-child(3) img, .story[data-step="4"] .story__frames picture:nth-child(4) img { opacity: 1; transform: none; }
  .story[data-step="1"] .story__steps li:nth-child(1), .story[data-step="2"] .story__steps li:nth-child(2),
  .story[data-step="3"] .story__steps li:nth-child(3), .story[data-step="4"] .story__steps li:nth-child(4) { opacity: 1; transform: none; }
  @media (max-width: 860px) {
    .story__sticky { grid-template-columns: 1fr; align-content: center; gap: 22px; }
    .story__frames { inline-size: min(100%, 360px); max-block-size: 52svh; }
    .story__steps { grid-template-areas: "s"; }
    .story__steps li { grid-area: s; opacity: 0; text-align: center; }
    .story__steps p { margin-inline: auto; }
  }

  /* ---------- Stats + beliefs (company) ---------- */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-block: 1px solid var(--s-border-subtle); }
  .stats div { padding-block: var(--sp-8); padding-inline-end: var(--sp-6); }
  .stats dt { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--s-text-subtle); }
  .stats dd { font: var(--t-heading-24); color: var(--s-text-strong); margin-block-start: 8px; }
  .beliefs { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-block-start: var(--sp-12); }
  .beliefs li { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); border: 1px solid var(--s-border-subtle);
    background: linear-gradient(160deg, oklch(0.24 0.02 60 / .55), var(--s-bg-raised) 60%); }
  .beliefs h3 { font: var(--t-heading-24); color: var(--s-text-strong); letter-spacing: var(--track-heading); }
  .beliefs p { margin-block-start: var(--sp-3); font: var(--t-copy-15); color: var(--s-text-muted); }
  .brand-swatches { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .brand-swatches li { border-radius: var(--r-card); padding: var(--sp-6); min-block-size: 160px; display: grid; align-content: end; border: 1px solid var(--s-border); }
  .brand-swatches b { font: var(--t-heading-20); } .brand-swatches span { font: var(--t-label-13); font-family: var(--p-font-mono); opacity: .75; margin-block-start: 4px; }
}


@layer components {
  /* ---------- 3D build: the model on the mat, scroll-driven ---------- */
  .build3d { position: relative; block-size: 520vh; }
  .build3d__sticky { position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden; isolation: isolate; background: #0c0a08; }
  .build3d__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease-standard); }
  .build3d.is-3d .build3d__canvas { opacity: 1; }
  .build3d.is-3d .build3d__fallback { display: none; }
  .build3d__fallback { position: absolute !important; inset-block-start: 50%; inset-inline-end: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    transform: translateY(-46%); inline-size: min(38vw, 460px) !important; }
  .build3d__sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, rgba(10,8,6,.72) 0%, rgba(10,8,6,.3) 32%, transparent 52%), linear-gradient(180deg, var(--s-bg) 0%, transparent 16%, transparent 84%, var(--s-bg) 100%); }
  .build3d__ui { position: absolute; z-index: 2; inset-inline-start: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    inset-block: calc(var(--header-h) + 7vh) 9vh; inline-size: min(440px, 38vw); display: flex; flex-direction: column; }
  .build3d__title { margin-block-start: var(--sp-4); max-inline-size: 11ch; color: var(--s-text-strong); }
  .build3d .build3d__steps { margin-block-start: auto; display: grid; gap: 0; padding: clamp(20px, 2.4vw, 28px); border-radius: 22px;
    background: rgba(16,13,10,.5); border: 1px solid rgba(247,243,234,.14); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0,0,0,.35); }
  .build3d .build3d__steps li { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); text-align: start; }
  .build3d[data-step="1"] .build3d__steps li:nth-child(1), .build3d[data-step="2"] .build3d__steps li:nth-child(2),
  .build3d[data-step="3"] .build3d__steps li:nth-child(3), .build3d[data-step="4"] .build3d__steps li:nth-child(4) { opacity: 1; transform: none; }
  .build3d__steps .n { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: #e2c07d; }
  .build3d__steps h3 { font: var(--t-heading-36); letter-spacing: var(--track-heading); color: var(--s-text-strong); margin-block-start: 10px; }
  .build3d__steps p { font: var(--t-copy-17); color: oklch(0.9648 0.0127 86.8 / .76); margin-block-start: 8px; margin-inline: 0; max-inline-size: 34ch; }
  .build3d__meter { display: flex; gap: 6px; margin-block-start: 14px; }
  .build3d__meter i { flex: 1; block-size: 2px; border-radius: 2px; background: rgba(247,243,234,.16); transition: background-color var(--d-4) var(--ease-standard); }
  .build3d[data-step="1"] .build3d__meter i:nth-child(-n+1), .build3d[data-step="2"] .build3d__meter i:nth-child(-n+2),
  .build3d[data-step="3"] .build3d__meter i:nth-child(-n+3), .build3d[data-step="4"] .build3d__meter i { background: #e2c07d; }
  .build3d__hint { position: absolute; z-index: 2; inset-block-end: 26px; inset-inline-end: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: rgba(247,243,234,.55); transition: opacity var(--d-4); }
  .build3d:not([data-step="1"]) .build3d__hint { opacity: 0; }
  @media (max-width: 860px) {
    .build3d__sticky::after { background: linear-gradient(180deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.55) 30%, transparent 50%, transparent 86%, var(--s-bg) 100%); }
    .build3d__ui { inset-block: calc(var(--header-h) + 18px) auto; inset-inline: var(--gutter); inline-size: auto; }
    .build3d__title { font: var(--t-heading-36); max-inline-size: 16ch; }
    .build3d .build3d__steps { margin-block-start: 14px; padding: 16px 18px; }
    .build3d__steps h3 { font: var(--t-heading-24); }
    .build3d__steps p { font: var(--t-copy-15); }
    .build3d__fallback { inset-block-start: auto; inset-block-end: 6vh; transform: none; inline-size: min(70vw, 300px) !important; inset-inline-end: 50%; translate: 50% 0; }
  }
}

/* Scroll-linked entrance, only where the browser supports it natively.
   Starts at 35% opacity, so a frame captured mid-scroll is never blank. */
@supports (animation-timeline: view()) {
  @layer utilities {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes reveal { from { opacity: .35; transform: translateY(28px); } }
  }
}

@layer utilities {
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip {
    position: fixed; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-4); z-index: 300;
    background: var(--s-bg); color: var(--s-text); padding: var(--sp-3) var(--sp-4);
    font: var(--t-label-15); text-decoration: none; border: 1px solid var(--s-border-strong); border-radius: 8px;
    transform: translateY(calc(-100% - var(--sp-12))); transition: transform var(--d-1) var(--ease-standard);
  }
  .skip:focus { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .draw path, .draw rect, .draw line { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .reveal, .rise { opacity: 1 !important; transform: none !important; filter: none !important; }
  .story { block-size: auto; } .story__sticky { position: relative; block-size: auto; padding-block: 64px; } .story__steps li { opacity: 1 !important; transform: none !important; grid-area: auto !important; }
  .build3d { block-size: auto; } .build3d__sticky { position: relative; block-size: 100svh; } .build3d .build3d__steps li:not(:last-child) { display: none; } .build3d .build3d__steps li:last-child { opacity: 1 !important; }
  .story__frames picture:last-child img { opacity: 1 !important; transform: none !important; } .hero__media img { animation: none !important; }
}