/* THEOS — digital headquarters. Dark luxury layer over the Theos design system tokens. */

:root {
  /* Warm blacks derived from the Stone scale via oklch (site-scoped) */
  --void: oklch(9.5% 0.004 50);        /* page black, warm */
  --void-2: oklch(11.5% 0.005 50);     /* raised panel */
  --void-3: oklch(14% 0.006 50);       /* card */
  --line: oklch(100% 0 0 / 0.08);
  --line-strong: oklch(100% 0 0 / 0.14);
  --txt: var(--stone-25);
  --txt-2: var(--stone-300);
  --txt-3: var(--stone-400);
  --ember: var(--ember-500);
  --navh: 72px;
  /* Display scale — Geist, tight tracking per DS */
  --d1: clamp(52px, 8.2vw, 138px);
  --dsec: clamp(40px, 5.4vw, 92px);
  --d2: clamp(38px, 5.2vw, 84px);
  --d3: clamp(28px, 3.4vw, 52px);
  --body-lg: clamp(17px, 1.35vw, 21px);
  --gutter: clamp(20px, 5.5vw, 80px);
}

html { scroll-behavior: smooth; background: var(--void); }
html, body { margin: 0; padding: 0; }
body {
  background: transparent;
  color: var(--txt);
  font-family: var(--font-sans, 'Geist', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--ember-700); color: var(--stone-25); }

a { color: var(--stone-200); text-decoration: none; }
a:hover { color: var(--ember-400); }

/* ---------- fixed layers ---------- */
#gl {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
}
.grain {
  position: fixed; inset: -50%; z-index: 70; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: overlay;
}
body.no-grain .grain { display: none; }

main { position: relative; z-index: 1; }
section { position: relative; }

.wrap { max-width: 1600px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- type ---------- */
.t-micro {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 500;
}
.t-micro .sq { display: inline-block; width: 8px; height: 8px; background: var(--ember); margin-right: 12px; vertical-align: baseline; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* ---------- custom cursor ---------- */
@media (pointer: fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: none; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none; will-change: transform; }
  .cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stone-25); margin: -3px 0 0 -3px; mix-blend-mode: difference; }
  .cursor-ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 1px solid oklch(100% 0 0 / 0.35);
    display: flex; align-items: center; justify-content: center;
    transition: width 0.28s var(--ease-emphasized), height 0.28s var(--ease-emphasized),
      margin 0.28s var(--ease-emphasized), background 0.28s var(--ease-emphasized),
      border-color 0.28s var(--ease-emphasized);
  }
  .cursor-ring .cl {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
    color: var(--ink-950); opacity: 0; transition: opacity 0.2s; white-space: nowrap;
  }
  .cursor-ring.label {
    width: 88px; height: 88px; margin: -44px 0 0 -44px;
    background: var(--stone-25); border-color: var(--stone-25);
  }
  .cursor-ring.label .cl { opacity: 1; }
  .cursor-ring.down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--navh);
  display: flex; align-items: center;
  transition: background var(--duration-base, 240ms) var(--ease-standard),
    border-color var(--duration-base, 240ms) var(--ease-standard),
    backdrop-filter var(--duration-base, 240ms) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: transparent;
  border-bottom-color: transparent;
}
.nav .wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; color: var(--stone-25); transition: color 0.35s var(--ease-standard); }
/* light section under nav: letters go ink, square stays ember (hardcoded fill) */
body.nav-ink .nav-logo { color: var(--ink-950); }
body.nav-ink .nav .icon-btn { color: var(--stone-700); border-color: oklch(30% 0.012 50 / 0.3); }
body.nav-ink .nav .icon-btn:hover { background: oklch(30% 0.012 50 / 0.08); color: var(--ink-950); }
body.nav-ink .nav .btn-solid { background: var(--ink-950); color: var(--stone-25); border-color: var(--ink-950); }
body.nav-ink .nav .btn-solid:hover { background: var(--stone-800); }
.nav-logo svg { height: 18px; width: auto; display: block; }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.nav-links a {
  font-size: 13.5px; letter-spacing: 0.02em; color: var(--txt-2);
  padding: 6px 2px; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ember);
  transition: right 0.32s var(--ease-emphasized);
}
.nav-links a:hover { color: var(--stone-25); }
.nav-links a:hover::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full, 999px);
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--txt-2); display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-fast, 160ms) var(--ease-standard);
}
.icon-btn:hover { background: oklch(100% 0 0 / 0.07); color: var(--stone-25); }

/* ---------- buttons (token-styled anchors) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--radius-md, 10px);
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background var(--duration-fast, 160ms) var(--ease-standard),
    color var(--duration-fast, 160ms) var(--ease-standard),
    border-color var(--duration-fast, 160ms) var(--ease-standard);
  will-change: transform;
}
.btn-solid { background: var(--stone-25); color: var(--ink-950); border-color: var(--stone-25); }
.btn-solid:hover { background: var(--stone-100); color: var(--ink-950); }
.btn-ghost { background: transparent; color: var(--stone-50); border-color: var(--line-strong); }
.btn-ghost:hover { background: oklch(100% 0 0 / 0.07); color: var(--stone-25); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; border-radius: var(--radius-sm, 8px); }
.btn .arr { transition: transform 0.28s var(--ease-emphasized); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- hero ---------- */
#hero { min-height: 100vh; display: flex; align-items: flex-end; background: transparent; }
.hero-copy { padding-top: calc(var(--navh) + 24px); padding-bottom: clamp(56px, 10vh, 120px); width: 100%; }
.hero-copy h1 { font-size: var(--d1); max-width: 11ch; }
.hero-sub {
  margin-top: 28px; max-width: 46ch; font-size: var(--body-lg);
  color: var(--txt-2); line-height: 1.55;
}
.hero-cta { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-meta {
  margin-top: 56px; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; border-top: 1px solid var(--line); padding-top: 20px;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-3);
}
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; }
.scroll-hint .tick { width: 1px; height: 28px; background: linear-gradient(var(--stone-400), transparent); }

/* intro choreography — only when JS intro is running */
body.has-js-intro .rv { opacity: 0; transform: translateY(28px); }
body.has-js-intro.intro-done .rv {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-emphasized), transform 0.9s var(--ease-emphasized);
}
body.has-js-intro.intro-done .rv1 { transition-delay: 0.05s; }
body.has-js-intro.intro-done .rv2 { transition-delay: 0.18s; }
body.has-js-intro.intro-done .rv3 { transition-delay: 0.32s; }
body.has-js-intro.intro-done .rv4 { transition-delay: 0.46s; }
body.has-js-intro .nav { opacity: 0; transform: translateY(-14px); }
body.has-js-intro.intro-done .nav {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease-emphasized) 0.5s, transform 0.8s var(--ease-emphasized) 0.5s,
    background var(--duration-base, 240ms) var(--ease-standard),
    border-color var(--duration-base, 240ms) var(--ease-standard);
}

/* ---------- section heads (shared scale) ---------- */
.sec-head {
  padding: clamp(72px, 12vh, 140px) 0 clamp(40px, 6vh, 72px);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.sec-head h2 { font-size: var(--dsec); max-width: 14ch; }
.sec-head .lede { max-width: 40ch; color: var(--txt-2); font-size: var(--body-lg); }

/* ---------- scroll reveals ---------- */
[data-reveal] .rl { opacity: 0; transform: translateY(34px); }
[data-reveal].in .rl {
  opacity: 1; transform: none;
  transition: opacity 0.85s var(--ease-emphasized), transform 0.85s var(--ease-emphasized);
}
[data-reveal].in .rl:nth-child(2) { transition-delay: 0.09s; }
[data-reveal].in .rl:nth-child(3) { transition-delay: 0.18s; }
[data-reveal].in .rl:nth-child(4) { transition-delay: 0.27s; }
[data-reveal].in .rl:nth-child(5) { transition-delay: 0.36s; }

/* ---------- philosophy ---------- */
#philosophy { background: transparent; }
.phil-track { height: 280vh; }
.phil-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
}
.phil-inner { max-width: 1100px; }
.phil-line {
  font-size: var(--d2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12;
  color: var(--stone-25);
}
.phil-line .w { opacity: 0.14; transition: opacity 0.35s var(--ease-standard); }
.phil-line .w.lit { opacity: 1; }
.phil-line .w.em.lit { color: var(--ember-400); }
.phil-foot { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }

/* ---------- services storm ---------- */
#capabilities { background: #ffffff; }
.svc-track { height: 540vh; }
.svc-pin { position: sticky; top: 0; height: 100vh; overflow: clip; background: #ffffff; }
.svc-dark {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 110%, oklch(16% 0.008 50 / 0.9), transparent 60%),
    radial-gradient(140% 100% at 50% -20%, oklch(13% 0.006 50 / 0.95), transparent 70%),
    #0c0a09;
}
.svc-smoke {
  position: absolute; inset: -18%; opacity: 0; pointer-events: none;
  filter: blur(2px);
}
.svc-smoke.a {
  background:
    radial-gradient(46% 34% at 24% 30%, oklch(38% 0.01 50 / 0.20), transparent 70%),
    radial-gradient(40% 30% at 76% 62%, oklch(34% 0.01 50 / 0.17), transparent 70%),
    radial-gradient(30% 24% at 54% 16%, oklch(42% 0.012 50 / 0.13), transparent 70%);
}
.svc-smoke.b {
  background:
    radial-gradient(44% 32% at 68% 26%, oklch(36% 0.01 50 / 0.16), transparent 70%),
    radial-gradient(36% 28% at 22% 72%, oklch(40% 0.012 50 / 0.15), transparent 70%);
}
#cap-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.svc-flash {
  position: absolute; inset: 0; background: oklch(96% 0.005 80); opacity: 0;
  pointer-events: none; mix-blend-mode: screen;
}
.svc-head { position: absolute; top: calc(var(--navh) + 18px); left: 0; right: 0; text-align: center; z-index: 4; }
.svc-foot { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; z-index: 4; }
#capabilities.storm .svc-head, #capabilities.storm .svc-foot { color: var(--stone-300); }
.svc-words {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; user-select: none; pointer-events: none;
  mix-blend-mode: difference;
}
.svc-word {
  font-size: clamp(60px, 11vw, 185px); line-height: 0.88; font-weight: 500;
  letter-spacing: -0.03em; color: #ffffff;
  white-space: nowrap;
}
.svc-word .sl { display: inline-block; will-change: transform, opacity; }
.svc-cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.svc-cards .svc-card {
  position: absolute; width: min(360px, 28vw); opacity: 0;
  transform: translateY(34px);
  padding: 24px 28px 26px; box-sizing: border-box;
  background: oklch(17% 0.007 50 / 0.68);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid oklch(100% 0 0 / 0.12);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 12px 36px oklch(0% 0 0 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.07);
  overflow: hidden; pointer-events: auto;
  transition: border-color 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard);
}
.svc-cards .svc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 40%;
  height: 2px; background: linear-gradient(90deg, var(--ember-500), transparent);
}
.svc-cards .svc-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, oklch(100% 0 0 / 0.09) 46%, transparent 60%);
  transform: translateX(-130%);
}
.svc-cards .svc-card.shine::after {
  transform: translateX(130%);
  transition: transform 1.2s var(--ease-emphasized) 0.15s;
}
.svc-cards .svc-card:hover {
  border-color: oklch(100% 0 0 / 0.24);
  box-shadow: 0 18px 48px oklch(0% 0 0 / 0.55), inset 0 1px 0 oklch(100% 0 0 / 0.1);
}
.svc-card h3 { font-size: clamp(22px, 1.9vw, 30px); color: var(--stone-25); letter-spacing: -0.02em; }
.svc-card p { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--stone-300); }
.svc-cards .svc-card.sc1 { left: var(--gutter); top: 22%; }
.svc-cards .svc-card.sc2 { left: var(--gutter); bottom: 18%; }
.svc-cards .svc-card.sc3 { right: var(--gutter); top: 22%; text-align: right; }
.svc-cards .svc-card.sc4 { right: var(--gutter); bottom: 18%; text-align: right; }
.svc-fallback { display: none; }
body.svc-static .svc-track { display: none; }
body.svc-static .svc-fallback,
.svc-static-force .svc-fallback { display: grid; }
@media (max-width: 900px) {
  .svc-track { display: none; }
  .svc-fallback { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-track { display: none; }
  .svc-fallback { display: grid; }
}
.svc-fallback {
  grid-template-columns: 1fr 1fr; gap: 20px;
  padding-top: 72px; padding-bottom: 72px;
}
.svc-fallback .svc-card {
  position: static; width: auto; opacity: 1; transform: none;
  background: var(--void-3); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 20px); padding: 24px;
}
@media (max-width: 640px) { .svc-fallback { grid-template-columns: 1fr; } }
.svc-fallback .svc-card h3 { color: var(--stone-25); }

/* ---------- work (horizontal exhibition, grey) ---------- */
#work { background: var(--stone-100); }
#work a { color: var(--ink-950); }
.wh-track { height: 560vh; }
.wh-pin { position: sticky; top: 0; height: 100vh; overflow: clip; background: var(--stone-100); }
.wh-rail {
  position: absolute; top: 0; bottom: 0; left: 0;
  display: flex; align-items: center;
  gap: clamp(40px, 5vw, 96px);
  padding: 0 var(--gutter);
  will-change: transform;
}
.wh-panel { flex: 0 0 auto; }
.wh-intro { width: min(620px, 56vw); }
.wh-intro h2 {
  font-size: var(--dsec); color: var(--ink-950); margin-top: 20px;
}
.wh-intro .t-micro, .wh-lab .t-micro { color: var(--stone-500); }
.wh-sub { margin-top: 20px; color: var(--stone-600); font-size: clamp(15px, 1.15vw, 18px); max-width: 42ch; }
.wh-hint {
  margin-top: 36px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone-500);
}
.wh-hint-arr { display: inline-block; margin-left: 8px; }
.wh-proj { width: min(540px, 40vw); }
.wh-media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-md, 12px); overflow: hidden;
  background: #ffffff; border: 1px solid var(--stone-200);
  box-shadow: 0 4px 12px oklch(20% 0.01 50 / 0.05), 0 18px 44px oklch(20% 0.01 50 / 0.09);
  will-change: transform;
}
.wh-media image-slot { width: 100%; height: 100%; }
.wh-caption { margin-top: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.wh-cat { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ember-600); letter-spacing: 0.06em; }
.wh-caption h3 { font-size: clamp(22px, 1.9vw, 32px); color: var(--ink-950); margin-top: 7px; }
.wh-desc { margin-top: 7px; color: var(--stone-600); font-size: 13.5px; max-width: 40ch; min-height: 2.9em; }
.wh-caption .case-ask {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-950); letter-spacing: 0.01em;
  background: none; font-family: inherit; padding: 0 0 3px;
  border: 0; border-bottom: 1px solid var(--stone-400);
}
.wh-caption .case-ask:hover { color: var(--ember-600); border-bottom-color: var(--ember-500); }
.wh-sep { align-self: center; height: 44vh; width: 1px; position: relative; }
.wh-sep span {
  position: absolute; inset: 0; background: var(--stone-300);
  transform: scaleY(0); transform-origin: center;
}
.wh-lab { width: min(560px, 48vw); }
.wh-lab h3 { font-size: clamp(30px, 3vw, 48px); color: var(--ink-950); margin-top: 16px; }
.lab-list { margin: 24px 0 28px; border-top: 1px solid var(--stone-300); }
.lab-row {
  display: flex; align-items: baseline; gap: 18px; width: 100%;
  padding: 12px 4px; border: 0; border-bottom: 1px solid var(--stone-300);
  background: none; font-family: inherit; text-align: left;
  transition: background var(--duration-fast, 160ms) var(--ease-standard);
}
.lab-row:hover { background: var(--stone-200); }
.lab-name { font-size: 17px; font-weight: 500; color: var(--ink-950); letter-spacing: -0.01em; }
.lab-cat { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-500); }
.lab-arr { margin-left: auto; color: var(--stone-500); }
.lab-row:hover .lab-arr { color: var(--ember-600); }
.wh-bar {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px;
  height: 1px; background: var(--stone-300); z-index: 3;
}
.wh-bar span { display: block; height: 100%; width: 0; background: var(--ember-500); }

/* services cover: slides over the finished rail, matches the white services opening */
.wh-cover {
  position: absolute; inset: 0; z-index: 5;
  background: #ffffff;
  transform: translateX(102%);
  will-change: transform;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: -30px 0 60px oklch(20% 0.01 50 / 0.12);
}
.wh-cover .t-micro { color: var(--stone-500); }

/* static fallback */
body.work-static .wh-track { height: auto; }
body.work-static .wh-pin { position: static; height: auto; }
@media (max-width: 900px) {
  .wh-track { height: auto !important; }
  .wh-pin { position: static; height: auto; overflow: visible; padding: 64px 0 40px; }
  .wh-rail { position: static; display: block; padding: 0 var(--gutter); }
  .wh-panel { width: auto !important; margin-bottom: 48px; }
  .wh-sep, .wh-bar, .wh-cover { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wh-track { height: auto !important; }
  .wh-pin { position: static; height: auto; overflow: visible; padding: 64px 0 40px; }
  .wh-rail { position: static; display: block; padding: 0 var(--gutter); }
  .wh-panel { width: auto !important; margin-bottom: 48px; }
  .wh-sep, .wh-bar, .wh-cover { display: none; }
}

/* ---------- clients (full-screen quote stage) ---------- */
#clients { position: relative; background: var(--stone-100); color: var(--ink-950); overflow: clip; }
#clients .sec-head h2 { color: var(--ink-950); font-size: var(--dsec); }
#clients .sec-head .lede { color: var(--stone-600); font-size: 16.5px; max-width: 26ch; text-align: left; }
#clients a { color: var(--ink-950); }
.client-inner {
  min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(80px, 12vh, 160px);
}
.client-head { padding: 0 0 clamp(48px, 8vh, 110px); align-items: flex-start; }
.client-rule { height: 1px; background: var(--stone-300); margin-bottom: clamp(56px, 9vh, 120px); }
.client-stage {
  flex: 1;
  display: grid; grid-template-columns: minmax(220px, 0.6fr) 1.4fr;
  gap: clamp(40px, 6vw, 120px); align-items: start;
}
.client-side { display: flex; flex-direction: column; min-height: 100%; gap: 48px; }
.client-tabs { display: flex; flex-direction: column; gap: 18px; }
.ct {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 0; border: 0; background: none; font-family: inherit; text-align: left;
  font-size: 15px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone-400);
  transition: color var(--duration-fast, 160ms) var(--ease-standard);
}
.ct:hover { color: var(--stone-700); }
.ct.on { color: var(--ink-950); }
.ct .ct-arr { opacity: 0; transform: translateX(-6px); transition: opacity 0.25s var(--ease-standard), transform 0.25s var(--ease-emphasized); }
.ct.on .ct-arr { opacity: 1; transform: none; }
.cq-nav { margin-top: auto; display: flex; align-items: center; gap: 18px; }
#clients .icon-btn { border-color: var(--stone-400); color: var(--stone-700); width: 46px; height: 46px; }
#clients .icon-btn:hover { background: var(--stone-200); color: var(--ink-950); }
.cq-idx { font-family: var(--font-mono, monospace); font-size: 12.5px; letter-spacing: 0.1em; color: var(--stone-500); }
.client-view { position: relative; display: flex; flex-direction: column; }
.cq-num {
  position: absolute; top: -0.3em; right: 0; z-index: 0;
  font-size: clamp(140px, 16vw, 280px); font-weight: 500; line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px oklch(30% 0.012 50 / 0.14);
  user-select: none; pointer-events: none;
}
.cq-text {
  position: relative; z-index: 1; margin: 0; max-width: 24ch;
  font-size: clamp(28px, 3.2vw, 52px); line-height: 1.22; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink-950); text-wrap: pretty;
}
.cq-text::before { content: "\201C"; color: var(--ember-500); }
.cq-byline { margin-top: clamp(28px, 5vh, 56px); font-size: 14.5px; color: var(--stone-600); }
.client-view.swap .cq-text, .client-view.swap .cq-byline, .client-view.swap .cq-num {
  opacity: 0; transform: translateY(12px);
}
.cq-text, .cq-byline, .cq-num {
  transition: opacity 0.32s var(--ease-standard), transform 0.32s var(--ease-standard);
}
@media (max-width: 900px) {
  .client-stage { grid-template-columns: 1fr; }
  .client-side { gap: 28px; }
  .client-tabs { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .cq-nav { margin-top: 8px; }
  .client-inner { min-height: 0; }
}

/* ---------- intelligence animated field ---------- */
.intel-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
#intelligence .wrap { position: relative; z-index: 1; }

/* ---------- strip merge entrances ---------- */
.strip-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
  z-index: 8; pointer-events: none;
}
[data-strips] { position: relative; }

/* ---------- footer clouds ---------- */
footer { overflow: clip; }
.foot-clouds {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
footer .wrap { position: relative; z-index: 1; }

/* ---------- intelligence ---------- */
#intelligence {
  background:
    radial-gradient(1100px 520px at 72% 12%, oklch(64.5% 0.176 39 / 0.07), transparent 70%),
    var(--void-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-top: clamp(32px, 7vh, 90px);
}
.intel-grid {
  display: grid; grid-template-columns: minmax(300px, 0.95fr) 1.05fr;
  gap: clamp(36px, 5vw, 88px);
  padding-bottom: clamp(80px, 13vh, 150px);
  align-items: start;
}
.intel-copy h2 { font-size: var(--dsec); }
.intel-copy .lede { margin-top: 24px; color: var(--txt-2); font-size: var(--body-lg); max-width: 40ch; }
.intel-points { margin-top: 44px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.intel-point { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; gap: 18px; align-items: baseline; }
.intel-point .k { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--ember-400); min-width: 30px; }
.intel-point .t { font-size: 15.5px; color: var(--txt-2); }
.intel-point .t strong { color: var(--stone-50); font-weight: 500; }

/* dark scope remap for DS AI components */
.companion-scope {
  --fg-primary: var(--stone-50);
  --fg-secondary: var(--stone-300);
  --fg-tertiary: var(--stone-400);
  --fg-accent: var(--ember-400);
  --surface-1: oklch(16% 0.006 50);
  --surface-2: oklch(17.5% 0.007 50);
  --surface-3: oklch(21% 0.008 50);
  --border-subtle: oklch(100% 0 0 / 0.08);
  --border-default: oklch(100% 0 0 / 0.14);
  --glass-bg: oklch(12% 0.005 50 / 0.72);
  --glass-border: oklch(100% 0 0 / 0.1);
  --ink-950: var(--ember-500);
  --stone-25: #1c1916;
  --shadow-lg: 0 18px 50px oklch(0% 0 0 / 0.5);
}
.companion-shell {
  background: oklch(12.5% 0.005 50);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 20px);
  padding: clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 16px;
  height: min(620px, 74vh);
}
.companion-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.companion-head .mark { width: 12px; height: 12px; background: var(--ember); }
.companion-head .nm { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-200); font-weight: 500; }
.companion-head .st { margin-left: auto; font-size: 12px; color: var(--txt-3); }
.companion-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 2px; min-height: 0; scrollbar-width: thin; }
.companion-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; color: var(--stone-200);
  border: 1px solid var(--line-strong); background: transparent;
  border-radius: var(--radius-full, 999px); padding: 8px 16px;
  font-family: inherit; letter-spacing: 0.01em;
  transition: background var(--duration-fast, 160ms) var(--ease-standard);
}
.chip:hover { background: oklch(100% 0 0 / 0.09); color: #ffffff; border-color: oklch(100% 0 0 / 0.3); }

/* ---------- process (conduit) ---------- */
#process { background: var(--void); border-top: 1px solid var(--line); }
.proc-track { height: 320vh; }
.proc-pin {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  display: flex; flex-direction: column;
  background:
    radial-gradient(900px 400px at 50% 118%, oklch(64.5% 0.176 39 / 0.05), transparent 70%),
    var(--void);
}
.proc-head { padding-top: calc(var(--navh) + clamp(16px, 3vh, 40px)); }
.proc-head h2 { font-size: var(--dsec); margin-top: 14px; max-width: 16ch; }
.proc-stage { position: relative; flex: 1; width: 100%; box-sizing: border-box; }
.proc-line {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 50%;
  height: 1px; background: oklch(100% 0 0 / 0.1);
}
.proc-line-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ember-700), var(--ember-500));
  transform: scaleX(0); transform-origin: left center;
}
.proc-node {
  position: absolute; top: 50%; left: 0;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--ember-400);
  box-shadow: 0 0 12px 2px oklch(64.5% 0.176 39 / 0.8);
}
.proc-glow {
  position: absolute; top: 50%; left: 0;
  width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle, oklch(64.5% 0.176 39 / 0.14), transparent 70%);
  pointer-events: none;
}
.proc-phases {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 56px);
  padding: 0 var(--gutter);
}
.proc-phase { position: relative; }
.proc-phase .pnum {
  position: absolute; left: -6px;
  font-size: clamp(70px, 7vw, 128px); font-weight: 500; line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px oklch(100% 0 0 / 0.13);
  transition: -webkit-text-stroke-color 0.6s var(--ease-standard), color 0.6s var(--ease-standard);
  user-select: none; pointer-events: none;
}
.proc-phase.p1 .pnum, .proc-phase.p3 .pnum { top: 2%; }
.proc-phase.p2 .pnum, .proc-phase.p4 .pnum { bottom: 34%; }
.proc-phase.on .pnum { -webkit-text-stroke-color: oklch(64.5% 0.176 39 / 0.55); }
.proc-phase.now .pnum { color: oklch(64.5% 0.176 39 / 0.14); }
.proc-card {
  position: absolute; left: 0; right: 0;
  padding: 18px 20px;
  background: oklch(14% 0.006 50 / 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 20px);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s var(--ease-emphasized), transform 0.7s var(--ease-emphasized),
    border-color 0.3s var(--ease-standard);
  transform-style: preserve-3d;
}
.proc-phase.p1 .proc-card, .proc-phase.p3 .proc-card { top: 16%; }
.proc-phase.p2 .proc-card, .proc-phase.p4 .proc-card { top: 58%; }
.proc-phase.on .proc-card {
  opacity: 1;
  transform: translateY(0) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
}
.proc-phase.now .proc-card { border-color: oklch(64.5% 0.176 39 / 0.4); }
.proc-phase:hover .pnum { -webkit-text-stroke-color: oklch(64.5% 0.176 39 / 0.8); }
.proc-phase.on .proc-card:hover {
  border-color: oklch(64.5% 0.176 39 / 0.55);
  box-shadow: 0 0 34px oklch(64.5% 0.176 39 / 0.12);
}
.proc-line::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.28) 0 1px, transparent 1px 25%);
  background-size: 100% 7px; top: -3px; height: 7px;
}
.proc-card h3 { font-size: clamp(19px, 1.6vw, 25px); letter-spacing: -0.02em; }
.proc-card p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--txt-3); }
.proc-card .ptags {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3);
}
.proc-phase.now .proc-card .ptags { color: var(--ember-400); }
.proc-foot { text-align: center; padding: 0 var(--gutter) 22px; z-index: 1; opacity: 0.75; }

.proc-fallback { display: none; }
@media (max-width: 900px) {
  .proc-track { display: none; }
  .proc-fallback { display: grid; grid-template-columns: 1fr; gap: 18px; padding-top: 64px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-track { display: none; }
  .proc-fallback { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 64px; padding-bottom: 64px; }
}
.proc-fallback .proc-phase .pnum { position: static; font-size: 44px; -webkit-text-stroke-color: oklch(64.5% 0.176 39 / 0.5); display: block; }
.proc-fallback .proc-card { position: static; opacity: 1; transform: none; margin-top: 8px; }

/* ---------- presence ---------- */
#presence { background: transparent; padding: clamp(90px, 16vh, 200px) 0; overflow: clip; }
.marquee { white-space: nowrap; will-change: transform; }
.marquee .mtxt {
  display: inline-block;
  font-size: clamp(70px, 11vw, 190px); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px oklch(100% 0 0 / 0.22);
  padding-right: 6vw;
}
.marquee .mtxt em { font-style: normal; -webkit-text-stroke: 0; color: var(--ember-600); }
.presence-grid {
  margin-top: clamp(56px, 9vh, 110px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px;
}
.city {
  border: 1px solid var(--line); border-radius: var(--radius-lg, 20px);
  padding: 28px 30px; background: oklch(11% 0.005 50 / 0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.city .cn { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.city .ct { font-family: var(--font-mono, monospace); font-size: clamp(26px, 2.6vw, 38px); margin-top: 18px; color: var(--stone-100); font-variant-numeric: tabular-nums; }
.city .cz { margin-top: 6px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-3); }
.founder-line { margin-top: 44px; color: var(--txt-3); font-size: 15px; }
.founder-line strong { color: var(--stone-100); font-weight: 500; }

/* ---------- cta + footer ---------- */
#cta { background: transparent; padding: clamp(100px, 20vh, 240px) 0 clamp(80px, 14vh, 180px); text-align: center; }
#cta h2 { font-size: var(--d1); max-width: 12ch; margin: 0 auto; }
#cta .sub { margin-top: 26px; color: var(--txt-2); font-size: var(--body-lg); }
#cta .hero-cta { justify-content: center; }
#cta .mail { margin-top: 28px; font-size: 15px; color: var(--txt-3); }
#cta .mail a { color: var(--stone-100); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
#cta .mail a:hover { color: var(--ember-400); border-bottom-color: var(--ember-500); }

footer { position: relative; z-index: 1; background: var(--void); border-top: 1px solid var(--line); }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(56px, 8vh, 96px) 0 clamp(40px, 6vh, 72px);
}
.foot-col .fh { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 20px; font-weight: 500; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-col a, .foot-col li { font-size: 15px; color: var(--stone-200); }
.foot-col .soon { color: var(--txt-3); font-size: 13px; margin-left: 8px; }
.foot-desc { color: var(--txt-3); font-size: 14.5px; line-height: 1.7; max-width: 30ch; }
.news-form { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md, 10px); overflow: hidden; background: var(--void-2); }
.news-form input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--stone-50); font-family: inherit; font-size: 14.5px; padding: 14px 16px;
}
.news-form input::placeholder { color: var(--txt-3); }
.news-form button {
  background: var(--stone-25); color: var(--ink-950); border: none;
  font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 0 20px;
  transition: background var(--duration-fast, 160ms) var(--ease-standard);
}
.news-form button:hover { background: var(--stone-100); }
.news-done { font-size: 14.5px; color: var(--sage-500); padding: 14px 0; }
.foot-mark { padding: 0 0 clamp(24px, 4vh, 48px); color: oklch(100% 0 0 / 0.1); }
.foot-mark svg { width: 100%; height: auto; display: block; }
.foot-legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 24px 0 32px;
  font-size: 12.5px; color: var(--txt-3); letter-spacing: 0.04em;
}

/* ---------- calm motion tweak ---------- */
body.motion-calm .rv, body.motion-calm .rl { transition-duration: 0.3s !important; }
body.motion-calm .phil-line .w { transition-duration: 0.15s; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {

  .intel-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --navh: 60px; }
  .nav-links { display: none; }
  .presence-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .phil-track { height: 220vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rl, .phil-line .w { transition: none !important; opacity: 1 !important; transform: none !important; }
  body.has-js-intro .rv, body.has-js-intro .nav { opacity: 1; transform: none; }
  .marquee { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fline { opacity: 1 !important; transform: none !important; }
}

/* ---------- headline morph + blast ---------- */
#cycle-word {
  display: inline-block;
  transition: filter 0.42s var(--ease-standard), opacity 0.42s var(--ease-standard), transform 0.42s var(--ease-standard);
}
#cycle-word.morph { filter: blur(12px); opacity: 0.12; transform: translateY(8px); }
#hero h1, #hero .hero-sub { transition: filter 0.35s var(--ease-standard), transform 0.35s var(--ease-standard); }
body.blasting #hero h1 { filter: blur(6px); transform: scale(1.015); }
body.blasting #hero .hero-sub { filter: blur(3px); }
body.blasting main { animation: theos-shake 90ms steps(2) infinite; }
body.blasting .nav { animation: theos-shake-sm 110ms steps(2) infinite; }
@keyframes theos-shake {
  0% { transform: translate(2.5px, -2px); }
  50% { transform: translate(-2px, 2.5px); }
  100% { transform: translate(2px, 1.5px); }
}
@keyframes theos-shake-sm {
  0% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #cycle-word, #cycle-word.morph { transition: none; filter: none; opacity: 1; transform: none; }
  body.blasting #hero h1, body.blasting #hero .hero-sub { filter: none; transform: none; }
  body.blasting main, body.blasting .nav { animation: none; }
}

/* ---------- sound hint ---------- */
.sound-hint {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 90; padding: 11px 22px;
  background: oklch(14% 0.006 50 / 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full, 999px);
  color: var(--stone-100); font-size: 13px; letter-spacing: 0.04em;
  animation: hint-in 0.5s var(--ease-emphasized);
  pointer-events: none;
}
.sound-hint .sq { display: inline-block; width: 7px; height: 7px; background: var(--ember-500); margin-right: 10px; }
.sound-hint.bye { opacity: 0; transition: opacity 0.5s var(--ease-standard); }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- word-mask heading reveal ---------- */
.split.rl { opacity: 1 !important; transform: none !important; transition: none !important; }
.wm { display: inline-block; overflow: clip; vertical-align: bottom; }
.wi {
  display: inline-block; transform: translateY(112%);
  transition: transform 0.75s var(--ease-emphasized);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.ws-in .wi { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wi { transform: none !important; transition: none !important; }
}

/* ---------- companion: visible send, selection, orb, ambient ---------- */
.companion-scope button[aria-label="Send"] {
  background: var(--ember-500) !important;
  color: #ffffff !important;
}
.companion-scope button[aria-label="Send"]:hover { background: var(--ember-600) !important; }
.companion-scope ::selection { background: var(--ember-600); color: #ffffff; }
.companion-scope textarea { caret-color: var(--ember-400); }
.companion-scope textarea::selection { background: var(--ember-600); color: #ffffff; }
.companion-shell { position: relative; overflow: clip; }
.companion-shell::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(38% 30% at 24% 26%, oklch(64.5% 0.176 39 / 0.09), transparent 70%),
    radial-gradient(30% 26% at 78% 72%, oklch(64.5% 0.176 39 / 0.06), transparent 70%);
  animation: companion-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes companion-drift {
  from { transform: translate(-3%, -2%) rotate(0deg); }
  to { transform: translate(3%, 3%) rotate(4deg); }
}
.companion-shell > * { position: relative; z-index: 1; }
.companion-head .orb {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, #ffb27d, var(--ember-500) 55%, var(--ember-700));
  box-shadow: 0 0 10px 1px oklch(64.5% 0.176 39 / 0.55);
  animation: orb-pulse 3.2s var(--ease-ai-pulse, ease-in-out) infinite;
}
.companion-head .orb.busy { animation-duration: 0.85s; }
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px 1px oklch(64.5% 0.176 39 / 0.4); }
  50% { transform: scale(1.18); box-shadow: 0 0 16px 3px oklch(64.5% 0.176 39 / 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .companion-shell::before, .companion-head .orb { animation: none; }
}

/* ---------- internal pages ---------- */
.pg-hero { padding: calc(var(--navh) + clamp(64px, 12vh, 140px)) 0 clamp(48px, 8vh, 100px); position: relative; }
.pg-hero h1 { font-size: var(--d1); max-width: 12ch; }
.pg-hero .lede { margin-top: 26px; max-width: 46ch; color: var(--txt-2); font-size: var(--body-lg); }
.pg-hero .t-micro { margin-bottom: 22px; }
.pg-rule { height: 1px; background: var(--line); }
.nav-logo img { height: 18px; width: auto; display: block; }
.nav-links a.now { color: var(--stone-25); }
.nav-links a.now::after { right: 0; }

/* contact */
.contact-grid {
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(36px, 5vw, 96px);
  padding: clamp(48px, 8vh, 100px) 0 clamp(90px, 14vh, 170px);
  align-items: start;
}
.cform { display: grid; gap: 22px; }
.cform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cfield { display: grid; gap: 9px; }
.cfield label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-3); font-weight: 500; }
.cfield input, .cfield textarea, .cfield select {
  background: var(--void-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 10px); color: var(--stone-50);
  font-family: inherit; font-size: 15.5px; padding: 15px 16px; outline: none;
  transition: border-color var(--duration-fast, 160ms) var(--ease-standard);
  width: 100%; box-sizing: border-box;
}
.cfield input:focus, .cfield textarea:focus, .cfield select:focus { border-color: var(--ember-500); }
.cfield textarea { min-height: 130px; resize: vertical; }
.cfield select { appearance: none; }
.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchips .chip.on { background: var(--stone-25); color: var(--ink-950); border-color: var(--stone-25); }
.cform .btn { justify-self: start; }
.cform-note { font-size: 13px; color: var(--txt-3); }
.contact-side { display: grid; gap: 36px; }
.next-steps { border-top: 1px solid var(--line); }
.nstep { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.nstep .k { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--ember-400); min-width: 26px; }
.nstep p { font-size: 14.5px; color: var(--txt-2); }
.nstep p strong { color: var(--stone-50); font-weight: 500; }
.side-block .fh { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 14px; font-weight: 500; }
.side-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-block a { font-size: 15px; }
.contact-done {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 20px);
  background: var(--void-3); padding: clamp(28px, 4vw, 48px); display: none;
}
.contact-done.show { display: block; }
.contact-done h3 { font-size: clamp(24px, 2.2vw, 34px); }
.contact-done p { margin-top: 12px; color: var(--txt-2); }
.cform.hide { display: none; }

/* services page */
.svcp-block { border-top: 1px solid var(--line); padding: clamp(40px, 7vh, 84px) 0; display: grid; grid-template-columns: 100px 0.8fr 1.2fr; gap: clamp(20px, 3vw, 56px); }
.svcp-block .idx { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--ember-400); }
.svcp-block h2 { font-size: var(--d3); }
.svcp-block .blurb { margin-top: 14px; color: var(--txt-2); font-size: 15.5px; max-width: 34ch; }
.svcp-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.svcp-item {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
  transition: background var(--duration-fast, 160ms) var(--ease-standard), padding-left var(--duration-fast, 160ms) var(--ease-emphasized);
}
.svcp-item:hover { background: var(--void-2); padding-left: 14px; }
.svcp-item .nm2 { font-size: 16.5px; font-weight: 500; color: var(--stone-100); }
.svcp-item .ds { font-size: 13px; color: var(--txt-3); text-align: right; max-width: 34ch; }
.engage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: clamp(80px, 12vh, 150px); }
.engage {
  border: 1px solid var(--line); border-radius: var(--radius-lg, 20px);
  padding: 26px; background: var(--void-2); min-height: 190px;
  display: flex; flex-direction: column;
  transition: border-color 0.25s var(--ease-standard), transform 0.35s var(--ease-emphasized);
}
.engage:hover { border-color: oklch(64.5% 0.176 39 / 0.5); transform: translateY(-4px); }
.engage .k { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--ember-400); }
.engage h3 { font-size: 20px; margin-top: auto; padding-top: 34px; }
.engage p { margin-top: 8px; font-size: 13.5px; color: var(--txt-3); line-height: 1.6; }

/* work page */
.workp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); padding-bottom: clamp(60px, 9vh, 110px); }
.workp-card { border: 1px solid var(--line); border-radius: var(--radius-lg, 20px); background: var(--void-3); padding: 16px 16px 26px; transition: border-color 0.25s var(--ease-standard), transform 0.35s var(--ease-emphasized); }
.workp-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.workp-card .media { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--void-2); border: 1px solid var(--line); }
.workp-card .media image-slot { width: 100%; height: 100%; }
.workp-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; gap: 12px; }
.workp-meta .gidx { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--ember-400); }
.workp-meta .gcat { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3); }
.workp-card h3 { font-size: 26px; margin-top: 6px; }
.workp-card p.d { margin-top: 8px; color: var(--txt-2); font-size: 14.5px; }

/* about page */
.about-statement { padding: clamp(40px, 8vh, 100px) 0; }
.about-statement p { font-size: var(--d3); line-height: 1.2; letter-spacing: -0.02em; max-width: 26ch; font-weight: 500; }
.about-statement p em { font-style: normal; color: var(--ember-400); }
.founder-grid { display: grid; grid-template-columns: minmax(260px, 0.7fr) 1.3fr; gap: clamp(32px, 5vw, 90px); padding: clamp(40px, 7vh, 90px) 0; border-top: 1px solid var(--line); align-items: start; }
.founder-photo { aspect-ratio: 4/5; border-radius: var(--radius-lg, 20px); overflow: hidden; background: var(--void-2); border: 1px solid var(--line); max-width: 380px; }
.founder-photo image-slot { width: 100%; height: 100%; }
.founder-copy h2 { font-size: var(--d3); }
.founder-copy .role { margin-top: 8px; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-400); }
.founder-copy p.b { margin-top: 22px; color: var(--txt-2); font-size: 16px; line-height: 1.7; max-width: 52ch; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: clamp(70px, 11vh, 140px); }

/* shared CTA band */
.cta-band { border-top: 1px solid var(--line); text-align: center; padding: clamp(80px, 14vh, 180px) 0; }
.cta-band h2 { font-size: var(--dsec); max-width: 14ch; margin: 0 auto; }
.cta-band .hero-cta { justify-content: center; margin-top: 36px; }

@media (max-width: 900px) {
  .contact-grid, .workp-grid, .founder-grid { grid-template-columns: 1fr; }
  .cform .frow { grid-template-columns: 1fr; }
  .svcp-block { grid-template-columns: 1fr; gap: 18px; }
  .engage-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .engage-grid { grid-template-columns: 1fr; } }

/* ---------- page transition curtain ---------- */
.pt { position: fixed; inset: 0; z-index: 200; display: flex; pointer-events: none; visibility: hidden; }
.pt span {
  flex: 1; background: var(--void-2);
  transform: scaleY(0); transform-origin: top;
}
.pt.pt-cover { visibility: visible; }
.pt.pt-cover span { transform: scaleY(1); }
.pt.pt-out span {
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.7s var(--ease-emphasized) calc(var(--i) * 55ms);
}
.pt.pt-in { pointer-events: auto; }
.pt.pt-in span {
  transform: scaleY(1); transform-origin: top;
  transition: transform 0.55s var(--ease-emphasized) calc(var(--i) * 45ms);
}

/* ---------- internal page atmosphere ---------- */
body.pg { background: var(--void); }
.pg-atmo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 82% -10%, oklch(64.5% 0.176 39 / 0.075), transparent 70%),
    radial-gradient(700px 420px at -10% 30%, oklch(40% 0.03 50 / 0.14), transparent 70%);
}
.pg-bg-word {
  position: absolute; top: calc(var(--navh) + 2vh); right: calc(var(--gutter) * 0.4);
  z-index: 0; margin: 0; user-select: none; pointer-events: none;
  font-size: clamp(120px, 17vw, 300px); font-weight: 500; line-height: 1;
  letter-spacing: -0.03em; color: transparent;
  -webkit-text-stroke: 1px oklch(100% 0 0 / 0.07);
  will-change: transform;
}
body.pg main { position: relative; z-index: 1; }
body.pg .pg-hero h1 { position: relative; }

/* page content rises with the curtain */
body.pg .pg-hero .t-micro,
body.pg .pg-hero h1,
body.pg .pg-hero .lede {
  animation: pg-rise 0.9s var(--ease-emphasized) both;
}
body.pg .pg-hero h1 { animation-delay: 0.35s; }
body.pg .pg-hero .t-micro { animation-delay: 0.28s; }
body.pg .pg-hero .lede { animation-delay: 0.48s; }
@keyframes pg-rise {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
  body.pg .pg-hero .t-micro, body.pg .pg-hero h1, body.pg .pg-hero .lede { animation: none; }
  .pg-bg-word { transform: none !important; }
}

/* ---------- internal page space canvas ---------- */
.pg-space { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.pg .grain { z-index: 70; }
body.pg nav, body.pg footer { position: relative; z-index: 2; }
body.pg .nav { position: fixed; }

/* ---------- liquid glass surfaces on internal pages ---------- */
body.pg .cform .cfield input,
body.pg .cform .cfield textarea,
body.pg .cform .cfield select {
  background: oklch(15% 0.006 50 / 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.pg .contact-done,
body.pg .engage,
body.pg .workp-card,
body.pg .city {
  background: oklch(14.5% 0.006 50 / 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: relative; overflow: hidden;
}
body.pg .engage::after,
body.pg .workp-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, oklch(100% 0 0 / 0.07) 48%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 1s var(--ease-emphasized);
}
body.pg .engage:hover::after,
body.pg .workp-card:hover::after { transform: translateX(130%); }
body.pg .engage, body.pg .workp-card {
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 14px 40px oklch(0% 0 0 / 0.3);
}
body.pg .svcp-item:hover { background: oklch(100% 0 0 / 0.05); }
body.pg .next-steps, body.pg .side-block {
  position: relative;
}

/* ---------- booking modal ---------- */
#book-modal {
  position: fixed; inset: 0; z-index: 150; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: oklch(8% 0.004 50 / 0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease-standard), visibility 0.35s;
}
#book-modal.open { opacity: 1; visibility: visible; }
body.bm-lock { overflow: hidden; }
.bm-panel {
  position: relative; width: min(640px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin;
  background: oklch(13.5% 0.006 50 / 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl, 28px);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: 0 40px 100px oklch(0% 0 0 / 0.55), inset 0 1px 0 oklch(100% 0 0 / 0.07);
  transform: translateY(26px) scale(0.98);
  transition: transform 0.45s var(--ease-emphasized);
}
#book-modal.open .bm-panel { transform: none; }
.bm-close { position: absolute; top: 18px; right: 18px; }
.bm-panel h3 { font-size: clamp(26px, 2.6vw, 38px); margin-top: 14px; }
.bm-sub { margin-top: 10px; color: var(--txt-2); font-size: 15px; }
.bm-form { margin-top: 26px; display: grid; gap: 18px; }
.bm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bm-form .btn { justify-self: start; }
.bm-done { display: none; padding: 28px 0 10px; }
.bm-done.show { display: block; }
.bm-done p { margin-top: 10px; color: var(--txt-2); }
@media (max-width: 600px) { .bm-row { grid-template-columns: 1fr; } }

/* ---------- living grain ---------- */
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-jitter 0.9s steps(3) infinite; }
}
@keyframes grain-jitter {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2.5%, 1.6%); }
  66% { transform: translate(1.8%, -2.2%); }
  100% { transform: translate(0, 0); }
}
body.pg .grain { opacity: 0.06; }

/* ---------- footer wire harp ---------- */
.foot-harp-wrap { position: relative; padding: 0 0 clamp(24px, 4vh, 48px); }
.foot-harp { display: block; width: 100%; cursor: crosshair; touch-action: pan-y; }
.harp-hint {
  position: absolute; top: 4px; right: 0;
  opacity: 0; transition: opacity 0.5s var(--ease-standard);
  pointer-events: none;
}
.foot-harp-wrap:hover .harp-hint { opacity: 0.7; }
@media (pointer: coarse) { .harp-hint { display: none; } }

/* ---------- Theos AI audit ---------- */
#audit {
  background:
    radial-gradient(900px 480px at 18% 20%, oklch(64.5% 0.176 39 / 0.06), transparent 70%),
    var(--void-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.audit-wrap { padding-bottom: clamp(72px, 12vh, 140px); }
.audit-grid {
  display: grid; grid-template-columns: 2fr 3fr; gap: clamp(20px, 2.5vw, 40px);
  height: min(760px, calc(100vh - var(--navh) - 40px));
}
.audit-console {
  position: relative; overflow: hidden;
  background: oklch(12.5% 0.005 50 / 0.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); border-radius: 32px;
  padding: clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 24px 70px oklch(0% 0 0 / 0.4);
}
.ac-orb-wrap { position: relative; width: 84px; height: 84px; margin-bottom: 26px; }
.ac-orb {
  position: absolute; inset: 18px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffb27d, var(--ember-500) 52%, var(--ember-700) 90%);
  box-shadow: 0 0 24px 4px oklch(64.5% 0.176 39 / 0.5);
  animation: orb-pulse 3.4s var(--ease-ai-pulse, ease-in-out) infinite;
}
.ac-orb.busy { animation-duration: 0.8s; }
.ac-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid oklch(64.5% 0.176 39 / 0.3); }
.ac-ring.r2 { inset: 8px; border-color: oklch(100% 0 0 / 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .ac-ring.r1 { animation: ac-spin 9s linear infinite; border-top-color: var(--ember-400); }
  .ac-ring.r2 { animation: ac-spin 14s linear infinite reverse; border-bottom-color: oklch(100% 0 0 / 0.35); }
}
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-h { font-size: clamp(26px, 2.4vw, 38px); letter-spacing: -0.02em; margin-top: 12px; }
.ac-sub { margin-top: 12px; color: var(--txt-2); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.ac-form { margin-top: 28px; display: grid; gap: 12px; }
.ac-input {
  background: oklch(9% 0.004 50 / 0.7); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 10px); padding: 15px 18px;
  color: var(--stone-50); font-family: inherit; font-size: 15px; outline: none;
  transition: border-color var(--duration-fast, 160ms) var(--ease-standard);
}
.ac-input:focus { border-color: var(--ember-500); box-shadow: 0 0 0 3px oklch(64.5% 0.176 39 / 0.18); }
.ac-input::placeholder { color: var(--txt-3); }
.ac-stages { margin-top: 24px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; }
.ac-stage {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--txt-3); padding: 5px 0;
  transition: color 0.3s var(--ease-standard);
}
.ac-stage .dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(100% 0 0 / 0.16); flex-shrink: 0; transition: background 0.3s, box-shadow 0.3s; }
.ac-stage.on { color: var(--stone-50); }
.ac-stage.on .dot { background: var(--ember-500); box-shadow: 0 0 8px var(--ember-500); }
.ac-stage.done { color: var(--stone-400); }
.ac-stage.done .dot { background: var(--sage-500, #6f8f6a); }
.ac-bar { height: 3px; background: oklch(100% 0 0 / 0.09); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.ac-bar i { display: block; height: 100%; background: var(--ember-500); border-radius: 2px; transition: width 0.5s var(--ease-standard); box-shadow: 0 0 8px var(--ember-500); }
.ac-pct { margin-top: 8px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--txt-3); }
.ac-badges { margin-top: auto; padding-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.ac-badges span {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--txt-3); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}

.audit-report {
  position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: oklch(11% 0.005 50 / 0.6);
  border: 1px solid var(--line); border-radius: 32px;
  padding: clamp(22px, 2.6vw, 40px);
}
.ar-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--txt-3); font-size: 15px; }
.ar-empty p { max-width: 34ch; }
.ar-skel { width: min(380px, 80%); display: grid; gap: 10px; margin-top: 10px; }
.ar-skel i {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, oklch(100% 0 0 / 0.05) 25%, oklch(100% 0 0 / 0.11) 50%, oklch(100% 0 0 / 0.05) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
}
.ar-skel i:nth-child(2) { width: 80%; } .ar-skel i:nth-child(3) { width: 60%; }
@keyframes skel { to { background-position: -200% 0; } }
.ar-sec { margin-bottom: 34px; opacity: 0; transform: translateY(22px); }
.ar-sec.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-emphasized), transform 0.7s var(--ease-emphasized); }
.ar-hero { display: flex; gap: 26px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.ar-verdict { flex: 1; min-width: 240px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--stone-100); }
.ar-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; margin-top: 18px; }
.gauge { position: relative; display: flex; align-items: center; justify-content: center; justify-self: center; }
.gauge-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge .gv { font-family: var(--font-mono, monospace); font-size: 19px; color: var(--stone-50); }
.gauge-big .gv { font-size: 40px; }
.gauge .gl { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-3); margin-top: 2px; }
.ar-card {
  background: oklch(14.5% 0.006 50 / 0.7); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 20px); padding: 18px 20px; margin-top: 12px;
  transition: border-color var(--duration-fast, 160ms) var(--ease-standard), transform 0.3s var(--ease-standard);
}
.ar-card:hover { border-color: oklch(64.5% 0.176 39 / 0.4); transform: translateY(-2px); }
.ar-card h4 { margin: 0; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; }
.ar-card p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--txt-2); }
.ar-card p strong { color: var(--stone-100); font-weight: 500; }
.ar-fhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ar-score { font-family: var(--font-mono, monospace); font-size: 15px; color: var(--ember-400); }
.ar-tags { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ar-tags span {
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--txt-3);
}
.ar-tags span.em { border-color: oklch(64.5% 0.176 39 / 0.5); color: var(--ember-400); }
.ar-wins { margin: 14px 0 0; padding: 0 0 0 18px; color: var(--txt-2); font-size: 14px; line-height: 2; }
.ar-cta {
  background: oklch(14.5% 0.006 50 / 0.7); border: 1px solid oklch(64.5% 0.176 39 / 0.35);
  border-radius: var(--radius-lg, 20px); padding: 24px;
}
.ar-cta h4 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.ar-cta p { margin-top: 8px; color: var(--txt-2); font-size: 14px; }
.ar-cta-row { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.ar-float {
  position: sticky; bottom: 14px; left: 100%; margin-top: 10px;
  background: var(--stone-25); color: var(--ink-950); border: 0;
  font-family: inherit; font-size: 13px; font-weight: 500;
  border-radius: 999px; padding: 10px 18px;
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.5);
}
.ar-float:hover { background: var(--stone-100); }

@media (max-width: 900px) {
  .audit-grid { grid-template-columns: 1fr; height: auto; }
  .audit-report { max-height: 74vh; }
  .audit-console { min-height: 0; }
}

/* ---------- insights ---------- */
#insights { background: var(--void); border-top: 1px solid var(--line); }
.ins-track { height: 300vh; }
.ins-pin { position: sticky; top: 0; height: 100vh; overflow: clip; }
.ins-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.ins-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding-top: calc(var(--navh) + 12px); box-sizing: border-box; }
.ins-hero { text-align: center; transform-origin: top center; }
.ins-hero h2 { font-size: var(--dsec); margin-top: 12px; }
.ins-sub { margin-top: 12px; color: var(--txt-2); font-size: var(--body-lg); }
.ins-search { margin: 22px auto 0; width: min(520px, 100%); }
.ins-search input {
  width: 100%; box-sizing: border-box;
  background: oklch(13% 0.005 50 / 0.7); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 13px 22px;
  color: var(--stone-50); font-family: inherit; font-size: 14.5px; outline: none;
  transition: border-color var(--duration-fast, 160ms) var(--ease-standard);
}
.ins-search input:focus { border-color: var(--ember-500); }
.ins-search input::placeholder { color: var(--txt-3); }
.ins-chips { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ins-chip {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-3); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-family: inherit;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ins-chip:hover { color: var(--stone-100); }
.ins-chip.on { color: var(--ember-400); border-color: oklch(64.5% 0.176 39 / 0.55); }
.ins-cards {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch; margin-top: clamp(18px, 3vh, 36px); padding-bottom: 8px;
}
.ins-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: oklch(13% 0.005 50 / 0.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: 32px;
  transform: var(--tilt, none);
  transition: border-color 0.3s var(--ease-standard), filter 0.3s;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 22px 60px oklch(0% 0 0 / 0.4);
  will-change: transform, opacity;
}
.ins-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(300px 220px at var(--lx, 50%) var(--ly, 50%), oklch(100% 0 0 / 0.05), transparent 70%);
}
.ins-card:hover { border-color: oklch(64.5% 0.176 39 / 0.45); }
.ins-card.dim { opacity: 0.18 !important; filter: grayscale(1) blur(1px) !important; pointer-events: none; }
.ins-media { flex: 1 1 auto; min-height: 90px; overflow: hidden; }
.ins-media canvas { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.7s var(--ease-emphasized); }
.ins-card:hover .ins-media canvas { transform: scale(1.05); }
.ins-copy { padding: clamp(14px, 1.5vw, 24px); display: flex; flex-direction: column; flex: 0 0 auto; }
.ins-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--txt-3); }
.ins-meta .cat { color: var(--ember-400); }
.ins-card h3 { margin-top: 12px; font-size: clamp(18px, 1.7vw, 26px); letter-spacing: -0.015em; line-height: 1.15; }
.ins-card.featured h3 { font-size: clamp(22px, 2.2vw, 34px); }
.ins-sum {
  margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--txt-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ins-read {
  margin-top: 12px; padding: 0; align-self: flex-start;
  display: inline-flex; gap: 8px; align-items: center;
  background: none; border: 0; font-family: inherit; font-size: 14px;
  color: var(--stone-100); letter-spacing: 0.01em;
}
.ins-read span { transition: transform 0.3s var(--ease-emphasized); }
.ins-read:hover { color: var(--ember-400); }
.ins-read:hover span { transform: translateX(4px); }
.ins-foot {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  margin: 18px 0 20px;
}
.ins-prog { flex: 1; height: 2px; background: oklch(100% 0 0 / 0.08); border-radius: 1px; }
.ins-prog i { display: block; height: 100%; background: var(--ember-500); transform: scaleX(0); transform-origin: left; border-radius: 1px; }

/* reading mode */
#ins-reader {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center; padding: 3vh 16px;
  background: oklch(7% 0.004 50 / 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-standard), visibility 0.4s;
}
#ins-reader.open { opacity: 1; visibility: visible; }
body.rd-lock { overflow: hidden; }
.rd-panel {
  position: relative; width: min(980px, 100%); height: min(88vh, 900px);
  display: flex; flex-direction: column;
  background: oklch(12.5% 0.005 50 / 0.92);
  border: 1px solid var(--line-strong); border-radius: 28px;
  box-shadow: 0 40px 120px oklch(0% 0 0 / 0.6);
  transform: translateY(28px) scale(0.98);
  transition: transform 0.5s var(--ease-emphasized);
  overflow: hidden;
}
#ins-reader.open .rd-panel { transform: none; }
.rd-prog { height: 2px; background: oklch(100% 0 0 / 0.08); }
.rd-prog i { display: block; height: 100%; background: var(--ember-500); transform: scaleX(0); transform-origin: left; }
.rd-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 18px 0; }
.rd-copy {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--txt-2); font-family: inherit; font-size: 12.5px; padding: 7px 16px;
}
.rd-copy:hover { color: var(--stone-25); background: oklch(100% 0 0 / 0.06); }
.rd-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; gap: 0; }
.rd-toc { padding: 20px 4px 20px 26px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line); }
.rd-toc a { font-size: 13px; line-height: 1.4; color: var(--txt-3); }
.rd-toc a:hover { color: var(--ember-400); }
.rd-scroll { overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.rd-body { padding: 20px clamp(22px, 4vw, 56px) 60px; max-width: 680px; }
.rd-body h2 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.02em; margin-top: 12px; }
.rd-body h3 { font-size: 20px; letter-spacing: -0.01em; margin: 34px 0 0; }
.rd-body p { margin-top: 16px; font-size: 15.5px; line-height: 1.75; color: var(--stone-200); }
.rd-body a { color: var(--ember-400); border-bottom: 1px solid oklch(64.5% 0.176 39 / 0.4); }
.rd-body a:hover { color: var(--ember-300, #ff9d5c); }

@media (max-width: 900px) {
  .ins-track { height: auto; }
  .ins-pin { position: static; height: auto; overflow: visible; }
  .ins-inner { height: auto; padding-bottom: 56px; }
  .ins-cards { grid-template-columns: 1fr; }
  .ins-card { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ins-prog { display: none; }
  .rd-cols { grid-template-columns: 1fr; }
  .rd-toc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-track { height: auto; }
  .ins-pin { position: static; height: auto; }
  .ins-card { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- navigation OS ---------- */
.menu-btn { position: relative; }
.menu-btn .mb-l1, .menu-btn .mb-l2 {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: currentColor; border-radius: 1px;
  transition: transform 0.4s var(--ease-emphasized), top 0.4s var(--ease-emphasized);
}
.menu-btn .mb-l1 { top: 15px; }
.menu-btn .mb-l2 { top: 21px; }
.menu-btn.x .mb-l1, #menu-ov .mo-close .mb-l1 { top: 18px; transform: rotate(45deg); }
.menu-btn.x .mb-l2, #menu-ov .mo-close .mb-l2 { top: 18px; transform: rotate(-45deg); }
.mo-close { position: relative; }
.mo-close .mb-l1, .mo-close .mb-l2 {
  position: absolute; left: 11px; right: 11px; height: 1.5px; top: 18px;
  background: currentColor; border-radius: 1px;
}

#menu-ov {
  position: fixed; inset: 0; z-index: 140; display: flex;
  visibility: hidden; pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-emphasized) 0.15s, visibility 0.6s;
}
#menu-ov.open { visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; }
.mo-strips { position: absolute; inset: 0; display: flex; }
.mo-strips i {
  flex: 1; background: oklch(9% 0.005 50 / 0.99);
  border-right: 1px solid oklch(100% 0 0 / 0.03);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.55s var(--ease-emphasized) calc(var(--si) * 60ms);
}
#menu-ov.open .mo-strips i { transform: none; }
.mo-strips i:nth-child(1) { --si: 0; } .mo-strips i:nth-child(2) { --si: 1; }
.mo-strips i:nth-child(3) { --si: 2; } .mo-strips i:nth-child(4) { --si: 3; }
.mo-strips i:nth-child(5) { --si: 4; }
.mo-stage, .mo-panel { position: relative; z-index: 1; }
.mo-stage { transform: scale(1.05); transition: opacity 0.6s var(--ease-standard) 0.25s, transform 0.9s var(--ease-emphasized) 0.25s; }
#menu-ov.open .mo-stage { transform: none; }
body.menu-open { overflow: hidden; }
body.menu-open main, body.menu-open footer {
  transform: scale(0.965);
  filter: brightness(0.45) blur(3px);
}
main, footer { transition: transform 0.8s var(--ease-emphasized), filter 0.8s var(--ease-emphasized); }
body.menu-open .nav { opacity: 0; pointer-events: none; }

.mo-stage {
  flex: 1; position: relative; overflow: hidden;
  opacity: 0; transition: opacity 0.6s var(--ease-standard) 0.25s;
}
#menu-ov.open .mo-stage { opacity: 1; }
.mo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo-cap {
  position: absolute; left: 32px; bottom: 28px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-3);
}

.mo-panel {
  width: min(60vw, 820px); height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 22px clamp(28px, 4vw, 64px) 30px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.mo-head { display: flex; justify-content: space-between; align-items: center; }
.mo-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 0; }
.mo-nav a {
  position: relative; align-self: flex-start; overflow: hidden;
  font-size: clamp(34px, 4.6vw, 66px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.22;
  color: var(--stone-200); padding: 2px 0 6px;
  text-decoration: none; border-bottom: 0;
  opacity: 0; transform: translateY(44px) rotate(2.5deg);
  transform-origin: left center;
  transition: opacity 0.65s var(--ease-emphasized), transform 0.65s var(--ease-emphasized),
    color 0.25s var(--ease-standard);
  transition-delay: 0s;
}
#menu-ov.open .mo-nav a {
  opacity: 1; transform: none;
  transition-delay: calc(0.34s + var(--i) * 70ms), calc(0.34s + var(--i) * 70ms), 0s;
}
/* letter-roll hover: top row exits up, ember row rolls in from below */
.mo-nav a .row { display: block; white-space: nowrap; }
.mo-nav a .row.r2 { position: absolute; left: 0; top: 100%; color: var(--ember-400); }
.mo-nav a .lt {
  display: inline-block;
  transition: transform 0.45s var(--ease-emphasized);
  transition-delay: calc(var(--l) * 18ms);
}
.mo-nav a:hover .lt, .mo-nav a:focus-visible .lt { transform: translateY(-100%); }
.mo-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--ember-500);
  box-shadow: 0 0 12px oklch(64.5% 0.176 39 / 0.7);
  transition: width 0.45s var(--ease-emphasized);
}
.mo-nav a:hover { color: var(--stone-25); text-decoration: none; }
.mo-nav a:hover::after { width: 100%; }
.mo-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); }
.mo-foot {
  display: grid; grid-template-columns: repeat(3, auto); gap: clamp(18px, 3vw, 56px);
  padding-top: 16px; border-top: 1px solid var(--line);
}
.mo-foot .fh { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-3); margin: 0 0 8px; }
.mo-foot a, .mo-foot span { display: block; font-size: 13.5px; color: var(--stone-300); padding: 2px 0; }
.mo-foot a:hover { color: var(--ember-400); }

@media (max-width: 900px) {
  .mo-stage { display: none; }
  .mo-panel { width: 100vw; }
  .mo-nav a { font-size: clamp(30px, 8.5vw, 44px); }
  .mo-foot { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.menu-open main, body.menu-open footer { transform: none; filter: brightness(0.5); }
  #menu-ov { transition: none; }
  .mo-strips i { transition: none; }
  .mo-nav a { transition: color 0.2s; opacity: 1; transform: none; }
  .mo-nav a .lt { transition: none; }
  .mo-stage { transform: none; transition: none; }
}

@media (max-width: 900px) { .ins-foot { flex-direction: column; } .ins-foot .ins-prog { width: 100%; flex: none; } }

/* ---------- insights page ---------- */
.inp-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.inp-prog i { display: block; height: 100%; background: var(--ember-500); transform: scaleX(0); transform-origin: left; }
.inp-search { margin-top: 28px; width: min(560px, 100%); }
.inp-search input {
  width: 100%; box-sizing: border-box;
  background: oklch(13% 0.005 50 / 0.7); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 14px 24px;
  color: var(--stone-50); font-family: inherit; font-size: 15px; outline: none;
}
.inp-search input:focus { border-color: var(--ember-500); }
.inp-search .ins-chips { justify-content: flex-start; }
.inp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 4vh, 48px) 0 clamp(72px, 12vh, 140px);
  transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard);
}
.inp-grid.hide, #inp-hero.hide { display: none; }
.inp-card {
  grid-column: span 1; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: oklch(13% 0.005 50 / 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); border-radius: 32px;
  transition: border-color 0.3s var(--ease-standard), transform 0.45s var(--ease-emphasized), opacity 0.3s;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 20px 50px oklch(0% 0 0 / 0.35);
}
.inp-card.featured { grid-column: 1 / -1; flex-direction: row; }
.inp-card.featured .inp-media { flex: 1.3; min-height: 320px; }
.inp-card.featured .inp-copy { flex: 1; align-self: center; }
.inp-card:hover { border-color: oklch(64.5% 0.176 39 / 0.5); transform: translateY(-5px); }
.inp-card:focus-visible { outline: 2px solid var(--ember-500); outline-offset: 3px; }
.inp-card.gone { display: none; }
.inp-media { overflow: hidden; aspect-ratio: 16 / 8; }
.inp-card.featured .inp-media { aspect-ratio: auto; }
.inp-media canvas { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.7s var(--ease-emphasized); }
.inp-card:hover .inp-media canvas { transform: scale(1.05); }
.inp-copy { padding: clamp(20px, 2.4vw, 36px); }
.inp-card h2 { font-size: clamp(21px, 2.1vw, 32px); letter-spacing: -0.02em; line-height: 1.14; margin-top: 12px; }
.inp-card.featured h2 { font-size: clamp(26px, 2.8vw, 44px); }
.inp-sum { margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--txt-2); }
.inp-card .ins-read { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--stone-100); }
.inp-card:hover .ins-read { color: var(--ember-400); }

.inp-detail { display: none; padding: 10px 0 clamp(72px, 12vh, 140px); }
.inp-detail.show { display: block; }
.inp-dbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0 26px; }
.inp-back, .inp-copylink {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--stone-200); font-family: inherit; font-size: 13.5px; padding: 9px 18px;
}
.inp-back:hover, .inp-copylink:hover { color: var(--stone-25); background: oklch(100% 0 0 / 0.06); }
.inp-dcols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.inp-toc { position: sticky; top: calc(var(--navh) + 20px); display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line); padding-left: 18px; }
.inp-toc a { font-size: 13.5px; line-height: 1.45; color: var(--txt-3); }
.inp-toc a:hover { color: var(--ember-400); }
.inp-article { max-width: 720px; }
.inp-article h2 { font-size: clamp(32px, 3.6vw, 54px); letter-spacing: -0.025em; line-height: 1.05; margin-top: 14px; }
.inp-article h3 { font-size: 21px; letter-spacing: -0.01em; margin: 40px 0 0; }
.inp-article p { margin-top: 18px; font-size: 16px; line-height: 1.8; color: var(--stone-200); }
.inp-article a { color: var(--ember-400); border-bottom: 1px solid oklch(64.5% 0.176 39 / 0.4); }
.inp-next { margin-top: clamp(48px, 8vh, 90px); border-top: 1px solid var(--line); padding-top: 36px; }
.inp-next h3 { font-size: clamp(24px, 2.6vw, 38px); margin-top: 12px; }
@media (max-width: 900px) {
  .inp-grid { grid-template-columns: 1fr; }
  .inp-card.featured { flex-direction: column; }
  .inp-card.featured .inp-media { min-height: 0; aspect-ratio: 16 / 8; }
  .inp-dcols { grid-template-columns: 1fr; }
  .inp-toc { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; }
}

/* ---------- insights: light editorial theme ---------- */
#insights { background: #f3f0ec; color: var(--ink-950); border-top: 0; }
#insights .ins-bg { opacity: 0.5; }
#insights .ins-hero h2 { color: var(--ink-950); }
#insights .ins-sub { color: var(--stone-600); }
#insights .t-micro { color: var(--stone-500); }
#insights .ins-search input {
  background: #ffffff; border-color: var(--stone-300);
  color: var(--ink-950); box-shadow: 0 8px 24px oklch(30% 0.012 50 / 0.06);
}
#insights .ins-search input::placeholder { color: var(--stone-500); }
#insights .ins-chip { color: var(--stone-600); border-color: var(--stone-300); }
#insights .ins-chip:hover { color: var(--ink-950); }
#insights .ins-chip.on { color: var(--ember-600); border-color: oklch(58% 0.17 39 / 0.6); }
#insights .ins-card {
  background: #ffffff;
  border-color: var(--stone-300);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 18px 50px oklch(30% 0.012 50 / 0.1), inset 0 1px 0 #ffffff;
}
#insights .ins-card::after {
  background: radial-gradient(300px 220px at var(--lx, 50%) var(--ly, 50%), oklch(30% 0.012 50 / 0.04), transparent 70%);
}
#insights .ins-card:hover { border-color: oklch(58% 0.17 39 / 0.5); }
#insights .ins-card h3 { color: var(--ink-950); }
#insights .ins-sum { color: var(--stone-600); }
#insights .ins-meta { color: var(--stone-500); }
#insights .ins-meta .cat { color: var(--ember-600); }
#insights .ins-read { color: var(--ink-950); }
#insights .ins-read:hover { color: var(--ember-600); }
#insights .ins-prog { background: oklch(30% 0.012 50 / 0.12); }
#insights .ins-foot .btn-ghost { color: var(--ink-950); border-color: var(--stone-400); flex-shrink: 0; }
#insights .ins-foot .btn-ghost:hover { background: oklch(30% 0.012 50 / 0.07); color: var(--ink-950); }

/* ---------- the origin ---------- */
main.og { position: relative; }
#origin-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
body:has(#origin-gl) .pg-space, main.og .pg-atmo, main.og .pg-bg-word { display: none; }
.og-track { position: relative; z-index: 1; }
.og-ch { min-height: 130vh; display: flex; align-items: center; }
.og-open { min-height: 100vh; }
.og-final { min-height: 120vh; }
.og-copy { max-width: 760px; }
.og-open h1 { font-size: clamp(80px, 13vw, 220px); letter-spacing: 0.04em; margin-top: 18px; }
.og-ch h2 { font-size: var(--dsec); margin-top: 18px; max-width: 15ch; }
.og-final h2 { max-width: 20ch; }
.og-body { margin-top: 22px; font-size: var(--body-lg); line-height: 1.6; color: var(--txt-2); max-width: 44ch; }
.og-hint { margin-top: 48px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-3); }
.og-ch:nth-child(even) .og-copy { margin-left: auto; text-align: right; }
.og-ch:nth-child(even) .og-body { margin-left: auto; }
@media (max-width: 768px) {
  .og-ch { min-height: 110vh; }
  .og-ch:nth-child(even) .og-copy { margin-left: 0; text-align: left; }
}

/* ---------- homepage insights: futuristic full-bleed cards ---------- */
.ins-card { border-radius: 22px; }
.ins-card .ins-media { position: absolute; inset: 0; z-index: 0; min-height: 0; }
.ins-card .ins-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,0.35) 49%, transparent 62%);
  transform: translateX(-135%) skewX(-4deg);
  transition: transform 1s var(--ease-emphasized);
}
.ins-card:hover .ins-media::after { transform: translateX(135%) skewX(-4deg); }
.ins-card:hover .ins-media canvas { transform: scale(1.09) rotate(0.6deg); }
.ins-card .ins-copy { position: relative; z-index: 1; margin-top: auto; flex: 0 0 auto; }
#insights .ins-card .ins-copy {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.94) 30%);
  padding-top: 52px;
}
#insights .ins-card { min-height: 0; }
.ins-card:hover { transform: translateY(-4px); }
#insights .ins-card:hover { box-shadow: 0 26px 60px oklch(30% 0.012 50 / 0.18); }

/* ---------- process v3: stacked phase panels ---------- */
#process { background: #17140f; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.procs { display: flex; flex-direction: column; padding: 6px 0 clamp(80px, 14vh, 160px); counter-reset: none; }
.procs-card {
  position: sticky; top: calc(var(--navh) + 3vh + var(--pi) * 16px);
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(24px, 4vw, 72px); align-items: center;
  min-height: 46vh; box-sizing: border-box;
  padding: clamp(28px, 4vw, 56px);
  margin-bottom: 20px;
  background: linear-gradient(155deg, #201b14 0%, #171310 60%);
  border: 1px solid var(--line-strong); border-radius: 24px;
  overflow: hidden;
}
.procs-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 36%, oklch(100% 0 0 / 0.05) 49%, transparent 60%);
  transform: translateX(-135%);
  transition: transform 1s var(--ease-emphasized);
}
.procs-card:hover::before { transform: translateX(135%); }
.procs-idx { display: flex; flex-direction: column; gap: 14px; }
.procs-num {
  font-size: clamp(84px, 10vw, 168px); font-weight: 500; line-height: 0.9;
  letter-spacing: -0.03em; color: transparent;
  -webkit-text-stroke: 1.5px oklch(100% 0 0 / 0.2);
  transition: -webkit-text-stroke-color 0.4s var(--ease-standard), color 0.4s var(--ease-standard);
  user-select: none;
}
.procs-card:hover .procs-num { color: var(--ember-500); -webkit-text-stroke-color: transparent; }
.procs-ph { color: var(--txt-3); }
.procs-main h3 { font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -0.02em; }
.procs-main p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--txt-2); max-width: 52ch; }
.procs-tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.procs-tags span {
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--txt-3); border: 1px solid var(--line-strong);
  padding: 7px 14px; border-radius: 999px;
  transition: color 0.25s var(--ease-standard), border-color 0.25s var(--ease-standard), transform 0.35s var(--ease-emphasized);
}
.procs-card:hover .procs-tags span { color: var(--stone-100); }
.procs-card:hover .procs-tags span:nth-child(odd) { transform: translateY(-2px); }
.procs-tags span:hover { border-color: var(--ember-500); color: var(--ember-400); }
.procs-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(100% 0 0 / 0.07); }
.procs-meter i {
  display: block; height: 100%; width: calc(var(--pf) * 100%);
  background: var(--ember-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-emphasized) 0.25s;
}
.procs-card.in .procs-meter i { transform: none; }
@media (max-width: 800px) {
  .procs-card { grid-template-columns: 1fr; min-height: 0; gap: 18px; position: static; }
  .procs-num { font-size: 64px; }
}

/* ---------- insights page: card + detail redesign ---------- */
.inp-grid { counter-reset: inp; }
.inp-card { counter-increment: inp; position: relative; border-radius: 24px; }
.inp-card .inp-copy::before {
  content: "0" counter(inp);
  font-family: var(--font-mono, monospace); font-size: 12.5px; letter-spacing: 0.14em;
  color: var(--ember-400); display: block; margin-bottom: 10px;
}
.inp-card .crn { display: none; }
.inp-card::before, .inp-card::after {
  content: ""; position: absolute; width: 22px; height: 22px; z-index: 2;
  opacity: 0; transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-emphasized);
  pointer-events: none;
}
.inp-card::before { top: 14px; left: 14px; border-top: 1.5px solid var(--ember-500); border-left: 1.5px solid var(--ember-500); transform: translate(6px, 6px); }
.inp-card::after { bottom: 14px; right: 14px; border-bottom: 1.5px solid var(--ember-500); border-right: 1.5px solid var(--ember-500); transform: translate(-6px, -6px); }
.inp-card:hover::before, .inp-card:hover::after { opacity: 1; transform: none; }
.inp-media { position: relative; }
.inp-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,0.09) 49%, transparent 62%);
  transform: translateX(-135%);
  transition: transform 0.95s var(--ease-emphasized);
}
.inp-card:hover .inp-media::after { transform: translateX(135%); }
.inp-detail { padding-top: calc(var(--navh) + 18px); }
.inp-rail {
  position: sticky; top: calc(var(--navh) + 18px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.inp-rail .inp-toc { position: static; margin-top: 16px; }
@media (max-width: 900px) {
  .inp-rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .inp-rail .inp-toc { margin-top: 0; }
}

/* ---------- homepage insights: light art + interactive cards v2 ---------- */
#insights .ins-card .ins-copy {
  background: linear-gradient(180deg, rgba(253,251,248,0), rgba(253,251,248,0.96) 34%);
  padding-top: 58px;
}
#insights .ins-card { border-radius: 22px; }
.ins-card .crn-tl, .ins-card .crn-br { display: none; }
#insights .ins-card::before {
  content: ""; position: absolute; top: 12px; left: 12px; width: 22px; height: 22px; z-index: 2;
  border-top: 1.5px solid var(--ember-500); border-left: 1.5px solid var(--ember-500);
  opacity: 0; transform: translate(6px, 6px); pointer-events: none;
  transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-emphasized);
}
#insights .ins-card:hover::before { opacity: 1; transform: none; }
#insights .ins-card .ins-meta .cat {
  border: 1px solid oklch(58% 0.17 39 / 0.45); border-radius: 999px; padding: 4px 11px;
  transition: background 0.25s var(--ease-standard), color 0.25s var(--ease-standard);
}
#insights .ins-card:hover .ins-meta .cat { background: var(--ember-500); color: #ffffff; }
#insights .ins-media canvas { will-change: transform; }

/* ---------- selected work: intersection-grid light theme ---------- */
.wh-pin {
  background: linear-gradient(180deg, #f7f6f4 0%, #eceae6 100%);
}
/* horizontal hairlines across the stage */
.wh-pin::before, .wh-pin::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: oklch(30% 0.01 50 / 0.14); z-index: 3; pointer-events: none;
}
.wh-pin::before, .wh-pin::after { display: none; }
/* vertical hairlines between panels, with crosshair marks at intersections */
.wh-sep {
  position: relative; flex: 0 0 1px; width: 1px; align-self: stretch;
  background: oklch(30% 0.01 50 / 0.14);
  margin: 0 clamp(36px, 4.5vw, 84px);
}
.wh-sep span { position: absolute; inset: 0; }
.wh-sep span::before, .wh-sep span::after {
  content: "+"; position: absolute; left: 0.5px;
  transform: translate(-50%, -50%);
  color: oklch(30% 0.01 50 / 0.55);
  font-size: 17px; font-weight: 300; line-height: 1;
  background: none; width: auto; height: auto;
}
.wh-sep span::before, .wh-sep span::after { display: none; }
/* media: soft radius + inset hairline frame, like a mounted print */
.wh-media {
  border-radius: 14px; overflow: hidden;
  border: 1px solid oklch(30% 0.01 50 / 0.12);
  background: #e6e3df;
  box-shadow: 0 22px 50px oklch(30% 0.012 50 / 0.1);
  position: relative;
}
.wh-media::after {
  content: ""; position: absolute; inset: 14px; z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 5px;
  pointer-events: none;
}
/* mono uppercase link language */
#work .case-ask, .wh-viewall {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-950);
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--ink-950); padding-bottom: 6px;
  background: none; border-top: 0; border-left: 0; border-right: 0;
}
#work .case-ask:hover, .wh-viewall:hover { color: var(--ember-600); border-bottom-color: var(--ember-600); }
#work .case-ask span, .wh-viewall span { transition: transform 0.3s var(--ease-emphasized); }
#work .case-ask:hover span, .wh-viewall:hover span { transform: translateX(4px); }
.wh-viewall { margin-top: 34px; }
.wh-hint { color: oklch(30% 0.01 50 / 0.45); }
.wh-cat {
  font-family: var(--font-mono, monospace); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone-500);
}
#work .wh-proj h3 { color: var(--ink-950); }
.wh-desc { color: var(--stone-600); }
/* lab rows pick up the same hairline language */
.lab-row { border-bottom: 1px solid oklch(30% 0.01 50 / 0.16); }
.lab-row .lab-cat { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 900px) {
  .wh-pin::before, .wh-pin::after { display: none; }
  .wh-viewall { margin-top: 24px; }
}

/* static top-to-bottom separators, no scroll animation */
.wh-sep { align-self: stretch !important; height: auto !important; }
.wh-sep span { transform: none !important; }
.wh-caption .case-ask { margin-top: 8px; }

/* ---------- audit: scan-line boot entrance ---------- */
#audit .audit-wrap { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  #audit:not(.scan) .audit-wrap { clip-path: inset(0 0 100% 0); }
  #audit.scan .audit-wrap { animation: aud-reveal 1.1s var(--ease-emphasized) both; }
  #audit .audit-wrap::after {
    content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 2px; z-index: 9;
    background: linear-gradient(90deg, transparent, var(--ember-500) 30%, var(--ember-400) 50%, var(--ember-500) 70%, transparent);
    box-shadow: 0 0 26px 4px oklch(64.5% 0.176 39 / 0.45);
    opacity: 0; pointer-events: none;
  }
  #audit.scan .audit-wrap::after { animation: aud-scan 1.1s var(--ease-emphasized) both; }
}
@keyframes aud-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -2% 0); }
}
@keyframes aud-scan {
  0% { top: 0; opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* selected work: vertical lines only, inset from edges */
.wh-sep { margin-top: 10vh !important; margin-bottom: 10vh !important; }
.wh-panel { will-change: transform, opacity; }
/* closing message panel */
.wh-outro {
  width: min(760px, 62vw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; align-self: center;
}
.wh-outro-line {
  font-size: clamp(26px, 2.7vw, 46px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.28; color: var(--ink-950);
  max-width: 24ch; text-wrap: balance;
}
.wh-outro .wh-viewall { margin-top: 44px; }
@media (max-width: 900px) { .wh-outro { width: auto; text-align: left; align-items: flex-start; } }

/* section subhead consistency */
.svc-headwrap { position: absolute; top: calc(var(--navh) + 18px); left: 0; right: 0; z-index: 4; text-align: center; pointer-events: none; }
.svc-headwrap .svc-head { position: static; }
.svc-sub { margin-top: 10px; font-size: clamp(14px, 1.1vw, 17px); color: var(--stone-500); mix-blend-mode: difference; color: #9a938c; }
.svc-words { padding-top: clamp(120px, 16vh, 170px); box-sizing: border-box; }
#presence { padding-top: clamp(40px, 8vh, 100px); }
#presence .sec-head { padding-top: 0; padding-bottom: clamp(24px, 4vh, 48px); }