/* Geist (variable, 400–800), served from this site: no third-party font requests. Latin first; the extended set
   (₹ and accented letters) loads only if a page uses those characters. SIL Open Font License 1.1, see assets/fonts/README.md */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/geist-latin.woff2?v=ee4b1e53db") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../assets/fonts/geist-latin-ext.woff2?v=68bb93eba7") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Nervure Partners — colours and fonts carried over from the current site */
:root {
  --navy: #090E31;
  --muted: #5A6188;
  --muted-strong: #3D4566;
  --line: #D9DFF0;
  --white: #FFFFFF;
  --soft: #F6F8FD;
  --tint: #E2EAFF;
  --cream: #FFF8E4;
  --yellow: #FFC91C;
  --blue: #005FFC;
  --orange: #FF6500;

  /* one typeface for everything: Geist (Vercel) */
  --font-head: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;

  /* motion: every transition is a spring. The curves below are sampled from a
     damped spring (mass 1; stiffness 170 / damping 20 for --spring, 260 / 15 for
     --spring-pop) so things overshoot a little and settle. Fallback first. */
  --spring: cubic-bezier(0.3, 1.25, 0.5, 1);
  --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.7s;
  --dur-fast: 0.45s;
  --dur-slow: 0.8s;

  --shadow-1: 0 1px 2px rgba(9, 14, 49, 0.04), 0 8px 24px rgba(9, 14, 49, 0.06);
  --shadow-2: 0 2px 6px rgba(9, 14, 49, 0.05), 0 22px 48px rgba(9, 14, 49, 0.12);

  --r: 24px;
  --r-sm: 14px;
  --pad: clamp(20px, 5vw, 40px);
  --section: clamp(88px, 14vw, 168px);
  --wrap: 1120px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.046, 0.153, 0.288, 0.429, 0.562, 0.679, 0.776, 0.854, 0.913, 0.956, 0.986, 1.005, 1.016, 1.021, 1.023, 1.022, 1.019, 1.016, 1.013, 1.01, 1.007, 1.005, 1.003, 1.002, 1.001, 1, 1, 1);
    --spring-pop: linear(0, 0.06, 0.203, 0.395, 0.594, 0.784, 0.941, 1.062, 1.14, 1.181, 1.191, 1.178, 1.148, 1.112, 1.073, 1.038, 1.008, 0.986, 0.972, 0.965, 0.964, 0.967, 0.972, 0.98, 0.987, 0.994, 0.999, 1.003, 1.006, 1.007, 1.007, 1.006, 1.005, 1.004, 1.002, 1.001, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, blockquote, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(44px, 11vw, 104px); line-height: 0.95; }
h2 { font-size: clamp(34px, 6.4vw, 68px); }
h2.long { font-size: clamp(28px, 4.6vw, 50px); line-height: 1.06; }
h3 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.015em; line-height: 1.15; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: var(--muted-strong); text-wrap: pretty; }
.muted { color: var(--muted); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: calc(720px + 2 * var(--pad)); }
.section { padding-block: var(--section); }
.bg-soft { background: var(--soft); }
.bg-tint { background: var(--tint); }
.bg-cream { background: var(--cream); }
.head { text-align: center; max-width: 880px; margin: 0 auto clamp(48px, 7vw, 88px); }
.head .eyebrow { margin-bottom: 20px; }
.head:has(> .eyebrow:only-child) { margin-bottom: 28px; }
.head:has(> .eyebrow:only-child) .eyebrow { margin-bottom: 0; }
.head .lede { margin-top: 24px; }
.grid { display: grid; gap: 16px; }

/* ---------- buttons, links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(9, 14, 49, 0.1);
  transition: transform var(--dur-slow) var(--spring-pop), box-shadow var(--dur) var(--spring);
}
.btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(0, 95, 252, 0.3); }
.btn:active { transform: scale(1.07, 0.9); transition-duration: var(--dur-fast); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.link { color: var(--blue); font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link .arrow { display: inline-block; transition: transform var(--dur-fast) var(--spring); }
.link:hover .arrow, .card:hover .link .arrow { transform: translateX(4px); }

/* ---------- cards ---------- */
.card {
  display: block; background: var(--soft); border-radius: var(--r); padding: clamp(24px, 3.4vw, 36px);
  text-decoration: none; color: inherit;
}
.bg-soft .card, .bg-tint .card, .bg-cream .card { background: var(--white); box-shadow: var(--shadow-1); }
.lift { transition: transform var(--dur-slow) var(--spring-pop), box-shadow var(--dur) var(--spring), opacity var(--dur) var(--spring); }
.lift:hover, .js [data-stagger].in > .lift:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-2); }
.lift:active, .js [data-stagger].in > .lift:active { transform: translateY(-1px) scale(1.02, 0.975); transition-duration: var(--dur-fast); }

/* ---------- header: full-width bar that morphs into a floating capsule ---------- */
.site-header {
  position: fixed; top: 0; left: 50%; translate: -50% 0; z-index: 50;
  width: 100%; max-width: 100vw; height: 64px;
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--pad);
  color: var(--navy); border-radius: 0; background: rgba(255, 255, 255, 0);
  transition: max-width var(--dur-slow) var(--spring-pop), top var(--dur-slow) var(--spring-pop), height var(--dur) var(--spring),
    padding var(--dur) var(--spring), border-radius var(--dur) var(--spring), background-color var(--dur) var(--spring), box-shadow var(--dur) var(--spring);
}
.site-header.solid {
  top: 10px; max-width: min(640px, calc(100vw - 20px)); height: 56px; padding-inline: 14px 8px; border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; transition: transform var(--dur-slow) var(--spring-pop); }
.brand:hover .brand-mark { transform: scale(1.18) rotate(-6deg); }
.brand-word {
  display: block; height: 11px; aspect-ratio: 815 / 56; background: currentColor;
  -webkit-mask: url("../assets/logo-nervure-wordmark.png?v=9609b250f6") center / contain no-repeat;
  mask: url("../assets/logo-nervure-wordmark.png?v=9609b250f6") center / contain no-repeat;
}
.site-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: 14px; }
.site-nav a:not(.btn) { text-decoration: none; opacity: 0.75; transition: opacity var(--dur-fast) var(--spring); }
.site-nav a:not(.btn):hover { opacity: 1; }
@media (max-width: 480px) { .site-header .brand-word { display: none; } }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 132px 0 88px; }
.hero .eyebrow { margin-bottom: 28px; }
.hero-title { max-width: 20ch; margin-inline: auto; font-family: var(--font-head); font-weight: 800; font-size: clamp(44px, 9vw, 96px); line-height: 0.98; letter-spacing: -0.025em; }
/* fixed break after "partner" so the line never re-wraps when the slot eases to its final width */
@media (min-width: 600px) { .hero-l1 { display: block; } }
/* The cycling word. All three words share one grid cell, so the slot is as wide as the widest word
   from the very first frame (no reflow). Hidden words wait below / leave above, clipped vertically. */
.slot { display: inline-grid; justify-items: start; text-align: left; clip-path: inset(-0.06em -0.5em -0.16em -0.1em); transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
/* the cycling word is filled with the blue-to-yellow gradient. The yellow end is the brand yellow darkened to #B07E00:
   #FFC91C itself is 1.5:1 on the page and would fail AA for the headline (large text needs 3:1); #B07E00 is 3.4:1 */
.slot-word { grid-area: 1 / 1; padding-inline: 0.05em; padding-bottom: 0.06em; background: linear-gradient(90deg, var(--blue) 0%, #B07E00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(140%); transition: transform 240ms cubic-bezier(0.65, 0, 0.35, 1); }
.slot-word.is-current { transform: none; }
.slot-word.is-out { transform: translateY(-140%); }
.slot-word.no-anim { transition: none; }
/* without the sequence (no JS / reduced motion) only "live." exists, so the slot hugs it */
html:not(.js) .slot-word:not(.is-current) { display: none; }
.caret { display: inline-block; width: 0.07em; height: 0.78em; margin-left: 0.08em; vertical-align: -0.05em; border-radius: 0.04em; background: var(--blue); }
.hero .caret.alive { animation: caret-blink 1.3s ease-in-out infinite; }
@keyframes caret-blink { 0%, 42% { opacity: 1; } 58%, 100% { opacity: 0; } }
.hero .hero-sub { max-width: 52ch; margin: 32px auto 40px; }
.hero-sub strong { color: var(--navy); font-weight: 500; }
.hero-micro { margin-top: 16px; font-size: 14px; color: var(--muted); }
/* Hero = two layers. Background (.hero-bg): two floating agent pods, a human form and a swarm of dots in open space
   over the page colour (js/three/hero.js); no ground, no platform, nothing a section boundary can cut. The hero sizes
   to its copy plus the scene band below it; the background layer runs 240px into the next section and fades out over
   its last 160px. That overlap takes no pointer events. Nothing in the scene enters the copy's zone (the copy plus
   80px). Below 768px, without WebGL, without JS or if the GPU fails, the background is a static picture of the 10.5s
   frame (assets/hero-scene*.webp), with the same bleed and fade. The copy never depends on the scene. */
.hero { --scene: clamp(150px, 42vw, 260px); --bleed: 240px; position: relative; isolation: isolate; overflow-x: clip; text-align: center; padding: 112px 0 var(--scene); background: linear-gradient(to bottom, var(--soft) 0%, var(--soft) 60%, var(--white) 100%); }
.hero-title { text-wrap: wrap; }
.hero-bg { position: absolute; inset: 0 0 calc(-1 * var(--bleed)); z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent); }
#hero-3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.hero-bg.is-ready #hero-3d { opacity: 1; }
/* the static picture (phones: a tighter crop of the human and the locked lattice, under the copy, ending at the hero's edge) */
.hero-bg::before { content: ""; position: absolute; inset: auto 0 var(--bleed); height: calc(var(--scene) - 6px); background: url("../assets/hero-scene-m.webp?v=ef7b46afda") 50% 100% / auto 100% no-repeat; }
.hero-grid { position: relative; z-index: 2; pointer-events: none; }
.hero-copy { pointer-events: auto; }
.hero-copy { max-width: 820px; margin-inline: auto; }
.hero-copy .hero-sub { margin-inline: auto; }
/* "Drag to look around.": only where the scene can actually be dragged */
.hero-hint { display: none; margin-top: 6px; font-size: 12px; color: #a3a8bd; }
.hero.has-orbit .hero-hint { display: block; }
/* what each figure is doing: a small glass bubble over its head (placed by hero.js; inside the aria-hidden .hero-bg) */
.hero-bubble { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--navy); white-space: nowrap; opacity: 0; pointer-events: none; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 18px rgba(9, 14, 49, 0.1); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); will-change: transform, opacity; }
.hero-bubble::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 95, 252, 0.15); }
.hero-bubble--human::before { background: #E0A800; box-shadow: 0 0 0 3px rgba(255, 201, 28, 0.25); }
.hero-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); background: inherit; border-right: 1px solid rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.9); }
.hero-bubble.is-done { color: #6b4e00; }
/* the drag surface: the hero (the copy's own text and controls stay on top and keep working), never the next section */
.hero-drag { position: absolute; inset: var(--drag-top, 50%) 0 0; z-index: 1; cursor: grab; touch-action: pan-y; }
.hero-drag.is-dragging { cursor: grabbing; }
/* the next section starts inside the tail of the scene: its eyebrow sits on the fade */
.hero + .section { position: relative; z-index: 1; padding-top: clamp(72px, 9vw, 120px); }
@media (min-width: 768px) {
  /* the scene band under the copy: just the human and the lattice it holds (the robots float beside the text) */
  .hero { --scene: clamp(140px, 9vw + 20px, 180px); padding: 0 0 var(--scene); }
  .hero-grid { display: flex; align-items: center; justify-content: center; padding-top: clamp(104px, 12vh, 140px); padding-bottom: 4px; }
  .hero-copy .hero-title { font-size: clamp(44px, 5vw, 80px); }
  .hero .eyebrow { margin-bottom: 18px; }
  .hero .hero-sub { margin: 20px auto 24px; }
  .hero-micro { margin-top: 10px; }
  /* with the live scene the picture is not used (and never downloaded): it only applies without WebGL/JS or on failure */
  .hero-bg::before { inset: 0; height: auto; background: none; }
  html:not(.webgl) .hero-bg::before, .hero-bg.is-static::before { background: url("../assets/hero-scene.webp?v=8bd716814f") 50% 100% / cover no-repeat; }
}
@media (max-width: 767px) { #hero-3d, .hero-drag { display: none; } .hero.has-orbit .hero-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero.has-orbit .hero-hint { display: none; } }

/* ---------- where you are: four stuck states ---------- */
.stuck-grid { display: grid; grid-template-columns: 1fr; }
.stuck-grid li + li { border-top: 1px solid var(--line); }
.stuck-link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 32px 4px; color: inherit; text-decoration: none; }
.stuck-link > * { transition: transform var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1); }
.stuck-link:hover > * { transform: translateY(-2px); }
.stuck-label { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2vw, 23px); line-height: 1.2; letter-spacing: -0.015em; }
.stuck-body { color: var(--muted-strong); font-size: 16px; }
.stuck-aside { margin-top: clamp(40px, 6vw, 64px); text-align: center; color: var(--muted); font-weight: 400; }
.stuck-grid li { --rise-step: 80ms; }
@media (min-width: 720px) {
  .stuck-grid { grid-template-columns: repeat(2, 1fr); }
  .stuck-grid li + li { border-top: 0; }
  .stuck-grid li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stuck-grid li:nth-child(even) { border-left: 1px solid var(--line); }
  .stuck-link { padding: 36px 28px; }
}
@media (min-width: 1024px) {
  .stuck-grid { grid-template-columns: repeat(4, 1fr); }
  .stuck-grid li:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); }
  .stuck-grid li:first-child { border-left: 0; }
  .stuck-grid li:first-child .stuck-link { padding-left: 0; }
}

/* Glyphs: each tries, fails to finish, restarts. Only stroke-dashoffset and opacity animate.
   The resting (non-animated) styles are the still frame used for reduced motion: visibly incomplete. */
.glyph-stuck { flex: none; width: 64px; height: 64px; margin-bottom: 14px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.glyph-stuck .g-faint { opacity: 0.3; }
.glyph-stuck .g-run { stroke-dasharray: 100; }
.g-branch .g-run { stroke-dashoffset: 42; }
.g-bar .g-run { stroke-width: 6; stroke-dashoffset: 30; }
.g-funnel .g-dot { stroke-width: 5; stroke-dasharray: 0.1 200; stroke-dashoffset: -38; }
.g-funnel .g-dot:nth-of-type(3) { stroke-dashoffset: -30; opacity: 0.6; }
.g-funnel .g-dot:nth-of-type(4) { stroke-dashoffset: -55; opacity: 0.35; }
.g-graph .g-link { stroke-dashoffset: 0; }
.g-graph .g-fail { stroke-dashoffset: 50; stroke-dasharray: 100 100; }
@media (prefers-reduced-motion: no-preference) {
  .glyph-stuck .g-run { animation: 3s cubic-bezier(0.45, 0, 0.25, 1) infinite both paused; animation-delay: calc(0.4s + var(--n, 0) * 400ms); }
  .g-branch .g-run { animation-name: g-branch; }
  .g-branch .g-run:nth-of-type(2) { animation-delay: calc(0.55s + var(--n, 0) * 400ms); }
  .g-branch .g-run:nth-of-type(3) { animation-delay: calc(0.7s + var(--n, 0) * 400ms); }
  .g-branch .g-run:nth-of-type(4) { animation-delay: calc(0.85s + var(--n, 0) * 400ms); }
  .g-bar .g-run { animation-name: g-bar; }
  .g-funnel .g-dot { animation-name: g-dot; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  .g-funnel .g-dot:nth-of-type(3) { animation-delay: calc(1.4s + var(--n, 0) * 400ms); }
  .g-funnel .g-dot:nth-of-type(4) { animation-delay: calc(2.4s + var(--n, 0) * 400ms); }
  .g-graph .g-link { animation-name: g-link; }
  .g-graph .g-link:nth-of-type(2) { animation-delay: calc(0.7s + var(--n, 0) * 400ms); }
  .g-graph .g-fail { animation-name: g-fail; }
  /* run only once the card has revealed, and only while the section is on screen */
  .stuck-where.in-view li.in .g-run { animation-play-state: running; }
}
@keyframes g-branch { 0% { stroke-dashoffset: 100; } 45%, 60% { stroke-dashoffset: 42; } 90%, 100% { stroke-dashoffset: 100; } }
@keyframes g-bar { 0% { stroke-dashoffset: 100; opacity: 1; } 40%, 80% { stroke-dashoffset: 30; opacity: 1; } 90% { stroke-dashoffset: 30; opacity: 0; } 91% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 1; } }
@keyframes g-dot { 0% { stroke-dashoffset: 0; opacity: 0; } 10%, 70% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes g-link { 0% { stroke-dashoffset: 100; opacity: 1; } 25%, 85% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes g-fail { 0%, 35% { stroke-dashoffset: 100; } 55%, 63% { stroke-dashoffset: 50; } 82%, 100% { stroke-dashoffset: 100; } }

/* ---------- story: "can't AI just do this?" ----------
   Base styles are a still list of scenes (no JS, or reduced motion).
   .story-live (added by JS) turns it into one auto-playing scene at a time, one screen tall. */
.story { padding: var(--section) var(--pad); }
.story-panel { max-width: var(--wrap); margin-inline: auto; background: var(--yellow); border-radius: clamp(24px, 4vw, 40px); padding: clamp(40px, 8vw, 88px) clamp(20px, 5vw, 56px); display: grid; gap: clamp(64px, 10vw, 112px); }
.scene { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vh, 44px); text-align: center; }
.scene-line { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 6vw, 60px); line-height: 1.03; letter-spacing: -0.025em; text-wrap: balance; max-width: 18ch; }
.story-ui { display: none; }

.bubble { background: var(--white); border-radius: 32px 32px 32px 10px; padding: clamp(22px, 4vw, 40px) clamp(24px, 5vw, 48px); box-shadow: var(--shadow-2); transform-origin: 0 100%; }
.bubble .scene-line { font-size: clamp(26px, 5vw, 52px); max-width: 12ch; text-align: left; min-height: 2.06em; }
.type-caret { display: none; width: 0.07em; height: 0.8em; margin-left: 0.08em; vertical-align: -0.06em; border-radius: 0.04em; background: var(--blue); }

.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2.4vw, 24px); width: min(100%, 600px); }
.prop { display: grid; gap: 14px; justify-items: center; }
.prop-card { width: 100%; aspect-ratio: 4 / 5; margin: 0; background: var(--white); border-radius: 18px; box-shadow: var(--shadow-1); padding: 12%; overflow: hidden; }
.mock { display: flex; flex-direction: column; gap: 9%; }
.mock span { display: block; border-radius: 99px; transform-origin: 0 50%; }
.m-top { width: 44%; height: 8%; background: var(--navy); }
.m-hero { flex: 1; border-radius: 10px !important; background: var(--tint); }
.m-line { width: 78%; height: 7%; background: var(--orange); }
.m-btn { width: 56%; height: 16%; background: var(--blue); }
.code { font: 500 clamp(7px, 1.55vw, 12px) / 1.9 var(--font-body); color: var(--navy); text-align: left; white-space: pre; }
.code span { display: block; }
.code b { font-weight: 500; color: var(--blue); }
.code i { font-style: normal; color: var(--orange); }
.flowmap { width: 100%; height: 100%; overflow: visible; }
.flowmap path { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.flowmap rect { transform-box: fill-box; transform-origin: center; }
.flowmap .n1 { fill: var(--blue); }
.flowmap .n2 { fill: var(--tint); stroke: var(--blue); stroke-width: 2.5; }
.flowmap .n3 { fill: var(--orange); }
.tag { padding: 6px 14px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 500; }

.race { position: relative; width: min(100%, 640px); height: 26px; border-radius: 13px; background: var(--white); box-shadow: var(--shadow-1); }
.race-fill { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 60%; border-radius: 9px; background: var(--blue); transform-origin: 0 50%; }
.race.hit .race-fill { width: calc(72% - 4px); }
.race.hit { margin-block: 56px; }
.wall { position: absolute; left: 72%; top: 50%; width: 22px; height: 132px; margin-top: -66px; border-radius: 7px; background: var(--navy); box-shadow: var(--shadow-2); }
.spark { position: absolute; left: 72%; top: 50%; }
.spark i { position: absolute; right: 6px; top: -1.5px; width: 22px; height: 3px; border-radius: 3px; background: var(--orange); transform-origin: 100% 50%; opacity: 0; }
.spark i:nth-child(1) { rotate: 38deg; }
.spark i:nth-child(3) { rotate: -38deg; }

.flips { display: grid; gap: 12px; width: min(100%, 880px); }
.flip { height: 92px; perspective: 900px; border-radius: 20px; }
.flip-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--dur-slow) var(--spring-pop); }
.flip[aria-pressed="true"] .flip-in { transform: rotateX(180deg); }
.flip:hover .flip-in { transform: rotateX(12deg); }
.flip[aria-pressed="true"]:hover .flip-in { transform: rotateX(168deg); }
.face { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px 44px 14px 22px; border-radius: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 2.1vw, 22px); line-height: 1.18; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.front { background: var(--white); box-shadow: var(--shadow-1); }
.front::after { content: ""; position: absolute; right: 16px; top: 16px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--blue); border-left-color: transparent; }
.back { background: var(--blue); color: var(--white); transform: rotateX(180deg); }

.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(100%, 520px); padding: 14px; background: var(--white); border-radius: 22px; box-shadow: var(--shadow-1); }
.day { display: flex; flex-direction: column; gap: 6px; height: clamp(170px, 30vh, 230px); }
.day::before { content: attr(data-d); padding-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--muted); text-align: center; }
.blk { flex: var(--f, 1) 1 0; display: grid; place-items: center; border-radius: 9px; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--white); }
.blk.m { background: var(--blue); }
.blk.n { background: var(--navy); }
.blk.q { background: var(--orange); }
.blk.t { background: var(--tint); }

.take { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; --fx: 0px; --fy: -150px; }
.week.calm { width: min(72%, 300px); padding: 10px; border-radius: 18px; }
.week.calm .day { height: 78px; }
.week.calm .blk { opacity: 0; }
.me { display: flex; align-items: center; gap: 14px; }
.me img { height: clamp(130px, 22vh, 220px); width: auto; filter: drop-shadow(0 14px 24px rgba(9, 14, 49, 0.2)); }
.took { display: grid; gap: 8px; justify-items: start; }
.took li { padding: 9px 14px; border-radius: 13px; background: var(--white); box-shadow: var(--shadow-1); font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.took li:nth-child(1) { rotate: -3deg; }
.took li:nth-child(2) { rotate: 2deg; margin-left: 10px; }
.took li:nth-child(3) { rotate: -1.5deg; }

@media (min-width: 720px) {
  .flips { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .flip { height: 200px; }
  .flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
  .flip:hover .flip-in { transform: rotateY(14deg); }
  .flip[aria-pressed="true"]:hover .flip-in { transform: rotateY(166deg); }
  .back { transform: rotateY(180deg); }
  .face { padding: 24px; }
}
@media (min-width: 860px) {
  .take { flex-direction: row; justify-content: center; gap: 56px; --fx: -300px; --fy: 0px; }
  .week.calm { width: 300px; }
  .week.calm .day { height: 120px; }
  .took li { font-size: 17px; padding: 11px 18px; }
}

/* live mode */
.story-live { padding: clamp(24px, 4vw, 48px) 10px; }
/* one screen tall (not pinned, no extra scroll): the scenes play in place */
.story-live .story-stage { position: relative; height: clamp(560px, 86svh, 820px); }
.story-live .story-panel { position: relative; display: block; max-width: none; height: 100%; padding: 0; overflow: hidden; }
.story-live .scene {
  position: absolute; inset: 0 0 68px; justify-content: center; padding: 20px clamp(18px, 5vw, 56px);
  opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity var(--dur-fast) var(--spring), transform var(--dur) var(--spring), visibility 0s var(--dur-fast);
}
.story-live .scene.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.12s, 0.12s, 0s; }
/* the controls: replay and the progress dots together, centred on a small white pill */
.story-live .story-ui { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--white); box-shadow: 0 6px 20px rgba(9, 14, 49, 0.12); }
.story-live .story-ui .story-replay { width: 36px; height: 36px; box-shadow: none; }
.story-replay { width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-1); display: grid; place-items: center; transition: transform var(--dur-slow) var(--spring-pop); }
.story-replay svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.story-replay:hover { transform: rotate(-40deg) scale(1.1); }
.story-replay:active { transform: rotate(-180deg) scale(0.92); }
.story-dots { display: flex; align-items: center; gap: 4px; }
.story-dots button { width: 20px; height: 28px; display: grid; place-items: center; }
.story-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--navy); opacity: 0.25; transition: width var(--dur) var(--spring-pop), opacity var(--dur-fast) var(--spring); }
.story-dots button[aria-current="true"] { width: 34px; }
.story-dots button[aria-current="true"]::before { width: 24px; opacity: 1; background: linear-gradient(var(--navy), var(--navy)) 0 0 / 0% 100% no-repeat, rgba(9, 14, 49, 0.25); animation: story-fill var(--hold, 5s) linear forwards; }
/* the active dot is the scene's timeline: it fills over the scene's length (and stops while the story is off screen) */
@keyframes story-fill { to { background-size: 100% 100%, auto; } }
.story.is-paused .story-dots button[aria-current="true"]::before { animation-play-state: paused; }
.story-live .type-caret { display: inline-block; }
.story-live .s-ask.active .type-caret { animation: caret-blink 1.3s ease-in-out infinite; }

/* scene animations: only ever run on the active scene; the resting styles above are the end state */
.story-live .scene.active .a { animation: s-in var(--dur) var(--spring) var(--d, 0.12s) both; }
.story-live .scene.active .pop { animation: s-pop var(--dur-slow) var(--spring-pop) var(--d, 0.12s) both; }
.story-live .scene.active .grow { animation: s-grow var(--dur) var(--spring) var(--d, 0s) both; }
.story-live .scene.active .wipe { animation: s-wipe var(--dur) var(--spring) var(--d, 0s) both; }
.story-live .scene.active .draw { animation: s-draw var(--dur) var(--spring) var(--d, 0s) both; }
@keyframes s-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes s-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes s-grow { from { transform: scaleX(0); } }
@keyframes s-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -5% 0 0); } }
@keyframes s-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* the bar races… */
.story-live .s-far.active .race-fill { animation: s-grow var(--dur-slow) cubic-bezier(0.12, 0.85, 0.2, 1) 0.4s both; }
/* …and hits the wall: accelerate in, rebound, settle, then stillness */
.story-live .s-wall.active .race-fill { animation: s-ram 0.8s 0.25s both; }
.story-live .s-wall.active .wall { animation: s-jolt 0.6s var(--spring-pop) 0.47s both; }
.story-live .s-wall.active .race { animation: s-shake 0.6s var(--spring-pop) 0.47s both; }
.story-live .s-wall.active .spark i { animation: s-spark 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.47s both; }
@keyframes s-ram {
  0% { transform: scaleX(0.82); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  28% { transform: scaleX(1.012) scaleY(1.25); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  52% { transform: scaleX(0.955) scaleY(0.94); animation-timing-function: ease-in-out; }
  74% { transform: scaleX(1) scaleY(1.04); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes s-jolt { from { transform: translateX(9px) rotate(2.5deg); } }
@keyframes s-shake { from { transform: translateX(7px); } }
@keyframes s-spark { 0% { opacity: 1; transform: translateX(8px) scaleX(0.2); } 100% { opacity: 0; transform: translateX(-14px) scaleX(1); } }
/* the week fills… */
.story-live .s-week.active .blk { animation: s-drop var(--dur) var(--spring-pop) calc(0.45s + var(--i, 0) * 80ms) both; }
@keyframes s-drop { from { opacity: 0; transform: translateY(-26px) scale(0.7, 0.85); } }
/* …then clears, and the three things land next to me */
.story-live .s-take.active .calm .blk { animation: s-clear var(--dur) var(--spring) calc(0.25s + var(--i, 0) * 28ms) both; }
@keyframes s-clear { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(0.6); } }
.story-live .s-take.active .took li { animation: s-land var(--dur-slow) var(--spring-pop) calc(0.75s + var(--i, 0) * 130ms) both; }
@keyframes s-land { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(-14deg) scale(0.75); } }
@media (max-height: 640px) { .story-live .scene { gap: 16px; } .week.calm { display: none; } }

/* ---------- how we help: five chapters, one 3D world ----------
   Stacked chapters by default (phones, no WebGL, no JS). From 900px with WebGL, the chapters scroll on the left and a
   sticky stage on the right holds the three.js world (js/three/journey.js); the chapter being read is highlighted. */
.journey { padding-block: var(--section); background: linear-gradient(to bottom, var(--white), #FAF8F3 14%, #FAF8F3 86%, var(--white)); }
.journey-body { display: grid; gap: 32px; }
.journey-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: chapter; }
.chapter { position: relative; padding: 28px 24px 28px 68px; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-1); }
.chapter::before { counter-increment: chapter; content: counter(chapter, decimal-leading-zero); position: absolute; left: 22px; top: 27px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--blue); background: var(--tint); }
.chapter-name { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.chapter h3 { margin: 10px 0 14px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.chapter > p:not(.chapter-name) { color: var(--muted-strong); text-wrap: pretty; }
.chapter-gets { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.chapter-gets li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--navy); background: var(--soft); border: 1px solid var(--line); }
.chapter-fit { margin-top: 16px; font-size: 14px; color: var(--muted) !important; }
.journey-stage { display: none; }
.journey-outro { margin-top: clamp(32px, 5vw, 56px); text-align: center; font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--navy); }
@media (min-width: 900px) {
  html.webgl .journey-body { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  html.webgl .journey-chapters { gap: 0; }
  html.webgl .chapter { min-height: min(78vh, 720px); display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 64px; background: none; box-shadow: none; border-radius: 0; }
  /* a quiet line connecting the chapters, like a path */
  html.webgl .chapter::after { content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: -1; }
  html.webgl .chapter::before { top: 50%; margin-top: -15px; transition: background-color 0.4s, color 0.4s; }
  html.webgl .journey.is-live .chapter { opacity: 0.32; transition: opacity 0.5s var(--spring); }
  html.webgl .journey.is-live .chapter.is-active { opacity: 1; }
  html.webgl .journey.is-live .chapter.is-active::before { background: var(--blue); color: var(--white); }
  /* the stage: sticky; the world fades in once its first frame is drawn */
  html.webgl .journey-stage { display: block; position: sticky; top: max(84px, 10vh); height: min(80vh, 720px); } /* no panel: the world floats on the page, like the hero */
  html.webgl .journey-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
  html.webgl .journey-stage.is-ready canvas { opacity: 1; }
}

/* if the 3D world cannot load, the chapters fall back to one centred column */
html.webgl .journey.is-flat .journey-body { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
html.webgl .journey.is-flat .journey-stage { display: none; }

/* ---------- work on your terms ---------- */
.terms { background: var(--soft); }
.terms-grid { display: grid; gap: clamp(32px, 5vw, 48px); max-width: 1120px; margin: clamp(8px, 2vw, 24px) auto 0; }
.terms-models { list-style: none; margin: 0; padding: 0; }
.terms-models li { padding: 22px 4px; border-top: 1px solid var(--line); outline-offset: 4px; border-radius: 2px; }
.terms-models li:last-child { border-bottom: 1px solid var(--line); }
.terms-models h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.015em; transition: color 1.2s cubic-bezier(0.32, 0.72, 0, 1); }
.terms-models p { margin-top: 6px; max-width: 48ch; color: var(--muted-strong); }
.terms.is-live .terms-models h3 { color: var(--muted); }
.terms.is-live .terms-models li.is-on h3 { color: var(--navy); }
.terms-stage { display: none; }
.terms-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; }
.terms.is-live .terms-stage canvas { opacity: 1; }
@media (min-width: 768px) {
  html.webgl .terms-stage { display: block; order: -1; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .terms-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
  html.webgl .terms-stage { order: 0; width: 100%; max-width: 560px; }
}
/* the commitments: a hairline, then the five promises in one row, each a small icon over its line (70% of the old size) */
.terms-commit { margin-top: clamp(48px, 6vw, 64px); padding-top: clamp(48px, 6vw, 64px); border-top: 1px solid var(--line); text-align: center; }
.terms-sub { font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.015em; }
.terms-commit .team-commit { margin-top: 28px; }
.terms-commit .team-commit li { gap: 12px; }
.terms-commit .team-commit p { max-width: 22ch; font-size: 14.5px; }
.terms-commit .commit-icon { width: 50px; height: 50px; }
.terms-commit .team-commit .icon3d { width: 78px; height: 78px; }
.js .terms-commit li { opacity: 0; transform: translateY(10px); transition: opacity 520ms cubic-bezier(0.32, 0.72, 0, 1) var(--t, 0ms), transform 520ms cubic-bezier(0.32, 0.72, 0, 1) var(--t, 0ms); }
.js .terms-commit.in li { opacity: 1; transform: none; }
.terms-cta { margin-top: clamp(48px, 6vw, 64px); text-align: center; }

/* ---------- founder ---------- */
.founder-grid { display: grid; gap: 40px; align-items: start; }
.founder-photo { margin: 0; width: min(78%, 300px); }
.founder-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--soft); box-shadow: var(--shadow-2); }
.founder-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.founder-photo figcaption { display: grid; gap: 2px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.founder-photo figcaption strong { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); letter-spacing: -0.01em; }
.founder-copy { max-width: 60ch; }
.founder-copy .eyebrow { margin-bottom: 20px; }
.founder-copy h2 { font-size: clamp(34px, 5vw, 56px); }
.founder-copy > p { color: var(--muted-strong); }
.founder-copy > p + p { margin-top: 16px; }
.founder-copy .founder-lead { margin: 28px 0 24px; color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; }

/* stat bar: 2x2 on phones, one row from tablet up. Rules are pseudo-elements so they can draw in. */
.founder-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 48px 0 0; --rule: rgba(9, 14, 49, 0.16); }
.founder-stats div { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 20px 20px 20px 0; }
.founder-stats div:nth-child(even) { padding-left: 20px; }
.founder-stats div::before, .founder-stats div::after { content: ""; position: absolute; display: none; background: var(--rule); transition: transform var(--dur) var(--spring) calc(0.15s + var(--k, 0) * 90ms); }
.founder-stats div::after { top: 0; bottom: 0; right: 0; width: 1px; transform-origin: 50% 0; }
.founder-stats div::before { left: 0; right: 0; bottom: 0; height: 1px; transform-origin: 0 50%; }
.founder-stats div:nth-child(odd)::after, .founder-stats div:nth-child(-n + 2)::before { display: block; }
.founder-stats dd { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; transform-origin: 0 100%; }
.founder-stats dt { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.founder-stats dd, .founder-stats dt { transition: opacity var(--dur) var(--spring), transform var(--dur-slow) var(--spring-pop); transition-delay: calc(0.1s + var(--k, 0) * 90ms); }
.founder-stats dt { transition-delay: calc(0.22s + var(--k, 0) * 90ms); }

.founder-copy .founder-close { position: relative; margin-top: 48px; padding-top: 28px; color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.015em; }
.founder-close::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(9, 14, 49, 0.16); transform-origin: 0 50%; transition: transform var(--dur-slow) var(--spring); }
.founder-close::after { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; border-radius: 2px; background: var(--blue); transform-origin: 0 50%; transition: transform var(--dur-slow) var(--spring-pop) 0.3s; }

@media (min-width: 768px) {
  .founder-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .founder-photo { width: 100%; }
  .founder-stats { grid-template-columns: repeat(4, 1fr); }
  .founder-stats div:nth-child(n) { padding: 4px 16px; }
  .founder-stats div:nth-child(1) { padding-left: 0; }
  .founder-stats div:nth-child(n)::before { display: none; }
  .founder-stats div:nth-child(n)::after { display: block; }
  .founder-stats div:nth-child(4)::after { display: none; }
}
@media (min-width: 1024px) {
  .founder-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 80px; justify-content: center; }
  /* the face stays put while the bio scrolls; sticky is bounded by the grid, so it stops at the section's end */
  .founder-photo { position: sticky; top: 96px; }
}

/* reveal: text fades and rises 12px, staggered 60ms (index set in JS) */
.js [data-rise] { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--spring), transform 0.7s var(--spring); transition-delay: calc(var(--rise-i, 0) * var(--rise-step, 60ms)); }
.js [data-rise].in { opacity: 1; transform: none; }
/* photo: the frame unmasks upward while the picture settles from a slight zoom */
.js .founder-photo[data-rise] { opacity: 1; transform: none; }
.js .founder-photo .founder-frame { clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path var(--dur-slow) cubic-bezier(0.16, 1, 0.3, 1); }
.js .founder-photo img { transform: scale(1.18); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.js .founder-photo figcaption { opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--spring) 0.45s, transform var(--dur) var(--spring) 0.45s; }
.js .founder-photo.in .founder-frame { clip-path: inset(0 0 0 0 round var(--r)); }
.js .founder-photo.in img { transform: none; }
.js .founder-photo.in figcaption { opacity: 1; transform: none; }
/* stats: the bar stays put; numbers pop up, labels follow, rules draw in */
.js .founder-stats[data-rise] { opacity: 1; transform: none; }
.js .founder-stats:not(.in) dd { opacity: 0; transform: translateY(18px) scale(0.9); }
.js .founder-stats:not(.in) dt { opacity: 0; transform: translateY(8px); }
.js .founder-stats:not(.in) div::after { transform: scaleY(0); }
.js .founder-stats:not(.in) div::before { transform: scaleX(0); }
/* closing line: the rule draws across, then a short blue accent snaps in */
.js .founder-close:not(.in)::before, .js .founder-close:not(.in)::after { transform: scaleX(0); }

/* ---------- team: centred, type-led, no boxes. One settled motion: the pills assemble. ---------- */
.team { --team-ease: cubic-bezier(0.32, 0.72, 0, 1); padding-block: clamp(120px, 15vw, 176px); text-align: center; }
.team .eyebrow { margin-bottom: 20px; }
.team h2 { max-width: 18ch; margin-inline: auto; font-size: clamp(38px, 7vw, 76px); letter-spacing: -0.032em; line-height: 1; }
/* capability map: six disciplines on one shared hairline, each a node with its capabilities clustered beneath */
.team-map { display: grid; grid-template-columns: 1fr; max-width: 1080px; margin: clamp(48px, 7vw, 80px) auto 0; text-align: left; list-style: none; }
@media (min-width: 620px) { .team-map { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .team-map { grid-template-columns: repeat(3, 1fr); } }
.tm-group { position: relative; padding: 30px clamp(16px, 2.4vw, 32px) 40px 0; border-top: 1px solid var(--line); }
.tm-group::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); transition: background 360ms var(--team-ease), box-shadow 360ms var(--team-ease), transform 360ms var(--team-ease); }
.tm-group::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 640ms var(--team-ease); }
.tm-name { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--navy); }
.tm-num { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
/* each capability carries its separator in front; the list is pulled 20px left and clipped there, so the separator that
   starts each wrapped line is hidden and dots only ever sit between two capabilities */
.tm-caps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; list-style: none; max-width: calc(34ch + 20px); margin-left: -20px; clip-path: inset(-4px -4px -4px 20px); }
.tm-caps li { display: inline-flex; align-items: baseline; font-size: 15px; line-height: 1.55; color: var(--muted-strong); transition: color 280ms var(--team-ease), opacity 280ms var(--team-ease); }
.tm-caps li:first-child { font-size: 16.5px; font-weight: 500; color: var(--navy); }
.tm-caps li::before { content: ""; flex: none; width: 3px; height: 3px; margin: 0 8.5px; border-radius: 50%; background: var(--line); align-self: center; }
@media (hover: hover) {
  .tm-group:hover::before { background: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); transform: scale(1.3); }
  .tm-group:hover::after { transform: scaleX(1); }
  .tm-group:hover .tm-caps li { color: var(--navy); }
  .tm-caps:hover li:not(:hover) { opacity: 0.45; }
  .tm-caps li:hover { color: var(--blue); }
}
.team-body { max-width: 56ch; margin: 40px auto 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--muted-strong); }
.team-sub { margin-top: clamp(72px, 9vw, 104px); font-size: clamp(22px, 2.6vw, 28px); }
/* commitments: one row. Five columns on desktop; on smaller screens the same row scrolls sideways. */
.team-commit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62vw); gap: 20px; margin: 40px calc(var(--pad) * -1) 0; padding: 4px var(--pad) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; list-style: none; text-align: center; }
.team-commit::-webkit-scrollbar { display: none; }
.team-commit li { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.team-commit p { max-width: 24ch; font-size: 16px; line-height: 1.5; color: var(--navy); }
@media (min-width: 720px) { .team-commit { grid-auto-columns: minmax(200px, 30vw); } }
@media (min-width: 1024px) {
  .team-commit { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); gap: 28px; max-width: 1120px; margin-inline: auto; padding-inline: 0; overflow: visible; }
}

/* commitment icons: each plays its message once, as the item arrives, then rests in the "done" state.
   The base styles below ARE the done state (no JS / reduced motion). */
.commit-icon { width: 72px; height: 72px; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.commit-icon * { transform-box: fill-box; }
.ci-demo .ci-play { stroke: var(--orange); fill: var(--orange); transform-origin: center; }
.ci-demo .ci-day { fill: var(--blue); stroke: none; }
.ci-date .ci-cell { fill: var(--muted); stroke: none; opacity: 0.5; }
.ci-date .ci-ring { stroke: var(--orange); stroke-dasharray: 100; stroke-dashoffset: 0; transform-origin: center; rotate: -90deg; }
.ci-lock .ci-dot { fill: var(--blue); stroke: none; }
.ci-lock .ci-shackle { stroke: var(--orange); transform-origin: 0% 100%; transform: translateY(-5px) rotate(-28deg); }
.ci-own .ci-line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ci-own .ci-seal { fill: var(--white); stroke: var(--orange); transform-origin: center; }
.ci-own .ci-tick { stroke: var(--orange); stroke-dasharray: 100; stroke-dashoffset: 0; }
.ci-honest .ci-arrow { stroke: var(--orange); stroke-dasharray: 100; stroke-dashoffset: 0; }
.ci-honest .ci-person { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .team li.in .commit-icon * { animation-timing-function: var(--team-ease); animation-fill-mode: both; }
  /* weekly demos: the week's days tick by, then the demo plays */
  .js .team li.in .ci-demo .ci-day { animation: ci-day 320ms; }
  .js .team li.in .ci-demo .ci-day:nth-of-type(1) { animation-delay: calc(var(--t) + 250ms); }
  .js .team li.in .ci-demo .ci-day:nth-of-type(2) { animation-delay: calc(var(--t) + 400ms); }
  .js .team li.in .ci-demo .ci-day:nth-of-type(3) { animation-delay: calc(var(--t) + 550ms); }
  .js .team li.in .ci-demo .ci-day:nth-of-type(4) { animation-delay: calc(var(--t) + 700ms); }
  .js .team li.in .ci-demo .ci-day:nth-of-type(5) { animation-delay: calc(var(--t) + 850ms); }
  .js .team li.in .ci-demo .ci-play { animation: ci-pop 600ms calc(var(--t) + 1100ms); }
  /* ship date: the date gets circled */
  .js .team li.in .ci-date .ci-ring { animation: ci-draw 900ms calc(var(--t) + 350ms); }
  /* no lock-in: the shackle lifts open */
  .js .team li.in .ci-lock .ci-shackle { animation: ci-unlock 900ms calc(var(--t) + 450ms); }
  /* you own it: the work fills the page, then it's sealed yours */
  .js .team li.in .ci-own .ci-line { animation: ci-draw 420ms; }
  .js .team li.in .ci-own .ci-line:nth-of-type(3) { animation-delay: calc(var(--t) + 250ms); }
  .js .team li.in .ci-own .ci-line:nth-of-type(4) { animation-delay: calc(var(--t) + 400ms); }
  .js .team li.in .ci-own .ci-line:nth-of-type(5) { animation-delay: calc(var(--t) + 550ms); }
  .js .team li.in .ci-own .ci-seal { animation: ci-pop 600ms calc(var(--t) + 850ms); }
  .js .team li.in .ci-own .ci-tick { animation: ci-draw 420ms calc(var(--t) + 1150ms); }
  /* honesty: the advice points you elsewhere, to the person you should hire */
  .js .team li.in .ci-honest .ci-arrow { animation: ci-draw 600ms calc(var(--t) + 350ms); }
  .js .team li.in .ci-honest .ci-person { animation: ci-fade 600ms calc(var(--t) + 850ms); }
}
@keyframes ci-day { from { opacity: 0.18; } }
@keyframes ci-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ci-draw { from { stroke-dashoffset: 100; } }
@keyframes ci-unlock { from { transform: none; } }
@keyframes ci-fade { from { opacity: 0; transform: translateX(-6px); } }
/* motion (JS only, so the section is finished without it). Offsets and delays come from JS as custom properties. */
.js .team [data-team] { transition-timing-function: var(--team-ease); transition-delay: var(--t, 0ms); }
.js .team [data-team] { transition-property: opacity, transform; transition-duration: 520ms; }
.js .team .tm-group { transition: opacity 620ms var(--team-ease) calc(var(--k) * 80ms), transform 620ms var(--team-ease) calc(var(--k) * 80ms); }
.js .team [data-team]:not(.in) { opacity: 0; transform: translateY(10px); }
.js .team .team-map:not(.in) .tm-group { opacity: 0; transform: translateY(14px); }

/* ---------- credentials / logos ---------- */
.logo-tray { background: var(--white); border-radius: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-1); padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); }
.logo-block + .logo-block { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line); }
.logo-block .eyebrow { text-align: center; margin-bottom: 28px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px clamp(32px, 6vw, 72px); }
.logos li { display: flex; align-items: center; height: 28px; }
.logos img, .logo-word { height: 28px; width: auto; opacity: 0.55; transform: scale(var(--mag, 1)); transition: opacity var(--dur-fast) var(--spring), transform var(--dur) var(--spring-pop); }
.logos li:hover img, .logos li:hover .logo-word { opacity: 1; }
/* typeset stand-in until the real Zoukloans logo file is supplied */
.logo-word { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: -0.04em; color: var(--navy); }
@media (min-width: 720px) { .logos li, .logos img, .logo-word { height: 32px; } .logo-word { font-size: 30px; } }


/* ---------- work ---------- */
.cases { display: grid; gap: clamp(20px, 3vw, 32px); }
.case { border-radius: clamp(24px, 4vw, 40px); padding: clamp(28px, 6vw, 72px); display: grid; gap: clamp(32px, 5vw, 64px); }
.case.c-tint { background: var(--tint); }
.case.c-cream { background: var(--cream); }
.case.c-soft { background: var(--soft); }
.case-name { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.case-tag { color: var(--muted); font-size: 15px; }
.case h3 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.025em; line-height: 1.02; margin-top: 28px; }
.stats { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 36px; }
.stat b { display: block; transform-origin: 0 100%; font-family: var(--font-head); font-weight: 800; font-size: clamp(44px, 7vw, 76px); line-height: 1; letter-spacing: -0.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.case-body { display: grid; gap: 24px; align-content: start; }
.case-body dt { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 6px; }
.case-body dd { margin: 0; color: var(--muted-strong); }
.case-body dl { margin: 0; display: grid; gap: 24px; }
.case-foot { font-size: 14px; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { grid-template-columns: 1fr; }
.review { display: flex; flex-direction: column; gap: 28px; }
.review blockquote { font-family: var(--font-head); font-weight: 600; font-size: clamp(21px, 2.5vw, 27px); line-height: 1.28; letter-spacing: -0.015em; text-wrap: pretty; }
.review figcaption { margin-top: auto; color: var(--muted); font-size: 15px; }
.review-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.review-links a { padding: 10px 20px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-1); text-decoration: none; font-size: 15px; font-weight: 500; }


/* ---------- book ---------- */
.calendly { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; min-height: 720px; max-width: 1000px; margin-inline: auto; }
.calendly iframe { display: block; width: 100%; height: 720px; border: 0; opacity: 0; transition: opacity var(--dur-slow) var(--spring); }
.calendly iframe.loaded { opacity: 1; }
@media (max-width: 700px) { .calendly, .calendly iframe { min-height: 0; height: 1040px; } }

/* ---------- calm reveal (FAQ, what we build): fade + 10px rise, staggered, once. Delays come from JS. ---------- */
.js [data-calm-group] [data-calm] { transition: opacity 480ms cubic-bezier(0.32, 0.72, 0, 1) var(--t, 0ms), transform 480ms cubic-bezier(0.32, 0.72, 0, 1) var(--t, 0ms); }
.js [data-calm-group]:not(.calm-in) [data-calm] { opacity: 0; transform: translateY(10px); }

/* ---------- faq: ask-and-filter ---------- */
.faq-col { max-width: calc(720px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.faq-search { position: relative; height: 56px; }
.faq-search-icon { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.faq-search input { width: 100%; height: 100%; padding: 0 20px 0 52px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--navy); font: inherit; font-size: 17px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 200ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.faq-search input::placeholder { color: var(--muted); }
/* focus: weight and contrast only — the inset shadow thickens the border without moving anything */
.faq-search input:focus { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; margin: 16px 0 40px; }
.faq-chip { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted-strong); transition: border-color 200ms cubic-bezier(0.32, 0.72, 0, 1), color 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.faq-chip:hover { border-color: var(--muted); color: var(--navy); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item[hidden] { display: none; }
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -0.015em; line-height: 1.25; }
.faq-q mark { background: rgba(255, 201, 28, 0.55); color: inherit; border-radius: 3px; padding-inline: 1px; }
.faq-q .plus { flex: none; position: relative; width: 20px; height: 20px; }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; border-radius: 2px; background: var(--navy); }
.faq-q .plus::after { transform: rotate(90deg); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.faq-q[aria-expanded="true"] .plus::after { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 40px 24px 0; color: var(--muted-strong); opacity: 0; transition: opacity 120ms cubic-bezier(0.32, 0.72, 0, 1); }
.faq-q[aria-expanded="true"] + .faq-a, .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a p { opacity: 1; transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1) 140ms; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a p { opacity: 1; }
html:not(.js) .faq-q .plus::after { transform: rotate(180deg); }
.faq-empty { padding: 40px 0 8px; border-top: 1px solid var(--line); animation: faq-empty-in 240ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.faq-empty h3 { font-size: clamp(22px, 2.6vw, 28px); }
.faq-empty p { margin-top: 12px; max-width: 52ch; color: var(--muted-strong); }
.faq-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.faq-clear { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@keyframes faq-empty-in { from { opacity: 0; } }

/* ---------- what we build: four categories, twelve intents, verb sequences ---------- */
.what { --calm: cubic-bezier(0.32, 0.72, 0, 1); }
/* align-items: start keeps an opened column from stretching its neighbours */
.what-grid { display: grid; grid-template-columns: 1fr; align-items: start; }
.what-col + .what-col { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.what-col h3 { font-size: clamp(21px, 2vw, 24px); }
.what-desc { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.what-value { margin-top: 6px; color: var(--navy); font-size: 14px; font-weight: 500; line-height: 1.45; }
/* category glyphs, 54px. The plain styles are each glyph's final, resting state (no JS / reduced motion). */
.cat-glyph { display: block; width: 54px; height: 54px; margin-bottom: 20px; overflow: visible; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; --gd: calc(540ms + var(--c, 0) * 180ms); }
.cat-glyph * { transform-box: view-box; }
.cat-glyph.replay { --gd: 0ms; }
.cat-glyph .g-faint { opacity: 0.32; }
.cat-glyph .g-back { opacity: 0.2; }
.cat-glyph .g-grid { opacity: 0.16; }
.cat-glyph .g-token, .cat-glyph .g-core, .cat-glyph .g-in, .cat-glyph .g-out, .cat-glyph .g-dot { fill: currentColor; stroke: none; }
/* workflow automation: a record leaves one tool, crosses on its own, and lands as a new line in the next */
.g-flow .g-token { transform: translateX(30px); }
.g-flow .g-write { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* task agents: the same row, done the same way, three times */
.g-task .g-check { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* customer-facing: something comes in, the assistant lights, something goes back */
.g-assist .g-halo { opacity: 0.22; }
/* keeping it alive: drift pulled back flat onto the baseline */
.g-alive .g-drift { transform-origin: 0 38px; transform: scaleY(0.01); vector-effect: non-scaling-stroke; }

.cat-glyph.play .g-token { animation: g-carry 1400ms linear var(--gd) both; }
.cat-glyph.play .g-write { animation: g-draw 360ms var(--calm) calc(var(--gd) + 1040ms) both; }
.cat-glyph.play .g-row { animation: g-appear 420ms var(--calm) both; }
.cat-glyph.play .g-check { animation: g-draw 300ms var(--calm) both; }
.cat-glyph.play .g-row:nth-of-type(1) { animation-delay: var(--gd); }
.cat-glyph.play .g-row:nth-of-type(2) { animation-delay: calc(var(--gd) + 330ms); }
.cat-glyph.play .g-row:nth-of-type(3) { animation-delay: calc(var(--gd) + 660ms); }
.cat-glyph.play .g-row:nth-of-type(1) .g-check { animation-delay: calc(var(--gd) + 260ms); }
.cat-glyph.play .g-row:nth-of-type(2) .g-check { animation-delay: calc(var(--gd) + 590ms); }
.cat-glyph.play .g-row:nth-of-type(3) .g-check { animation-delay: calc(var(--gd) + 920ms); }
.cat-glyph.play .g-in { animation: g-in 1400ms var(--calm) var(--gd) both; }
.cat-glyph.play .g-node, .cat-glyph.play .g-core { animation: g-node 1400ms var(--calm) var(--gd) both; }
.cat-glyph.play .g-halo { animation: g-halo 1400ms var(--calm) var(--gd) both; }
.cat-glyph.play .g-out { animation: g-out 1400ms var(--calm) var(--gd) both; }
.cat-glyph.play .g-drift { animation: g-drift 1400ms var(--calm) var(--gd) both; }
.cat-glyph.play .g-dot { animation: g-ride 1400ms var(--calm) var(--gd) both; }
@keyframes g-carry { 0% { opacity: 0; transform: translateX(0); } 12%, 20% { opacity: 1; transform: translateX(0); } 74%, 100% { opacity: 1; transform: translateX(30px); } }
@keyframes g-draw { from { stroke-dashoffset: 1; } }
@keyframes g-appear { from { opacity: 0; } }
@keyframes g-in { 0% { opacity: 0; transform: translateX(-6px); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes g-node { 0%, 35% { opacity: 0.45; } 55%, 100% { opacity: 1; } }
@keyframes g-halo { 0%, 35% { opacity: 0.22; } 52% { opacity: 0.6; } 75%, 100% { opacity: 0.22; } }
@keyframes g-out { 0%, 55% { opacity: 0; transform: translateX(-8px); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes g-drift { 0% { opacity: 0; transform: translateY(-9px) scaleY(1); } 18% { opacity: 1; transform: translateY(-9px) scaleY(1); } 40% { transform: translateY(-7px) scaleY(1.15); } 58% { transform: translateY(-9px) scaleY(0.9); } 100% { opacity: 1; transform: translateY(0) scaleY(0.01); } }
@keyframes g-ride { 0% { opacity: 0; transform: translateY(-9px); } 18% { opacity: 1; transform: translateY(-9px); } 40% { transform: translateY(-7px); } 58% { transform: translateY(-9px); } 100% { opacity: 1; transform: none; } }
.what.is-paused .cat-glyph * { animation-play-state: paused; }

/* "Something else in mind?": a form that hands the typed job to the booking link */
/* focus: weight and contrast only */
@media (min-width: 768px) {
  .what-grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; background: linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat; }
  .what-col + .what-col { margin-top: 0; padding-top: 0; border-top: 0; }
  .what-col { padding-inline: 0 28px; }
  .what-col:nth-child(even) { padding-inline: 28px 0; }
}
@media (min-width: 1024px) {
  /* four equal columns; the hairlines are drawn on the grid so they run full height whatever opens */
  .what-grid { grid-template-columns: repeat(4, 1fr); row-gap: 0;
    background: linear-gradient(var(--line), var(--line)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 75% 0 / 1px 100% no-repeat; }
  .what-col, .what-col:nth-child(even) { padding-inline: 24px; }
  .what-col:first-child { padding-left: 0; }
  .what-col:last-child { padding-right: 0; }
}

/* ---------- sectors ---------- */
/* a horizontal carousel: scroll-snap track that bleeds to the page edge, arrow buttons (from JS) under the head */
/* pills: glyph beside the name. Without JS (or with reduced motion) the row scrolls sideways by hand; with JS it is
   wrapped in .sector-track, duplicated, and drifts on a seamless loop that pauses on hover or keyboard focus */
.sectors { display: flex; gap: 12px; margin-inline: calc(var(--pad) * -1); padding: 16px var(--pad); overflow-x: auto; scrollbar-width: none; }
.sectors::-webkit-scrollbar { display: none; }
.sectors:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sectors.is-auto { display: block; overflow: hidden; padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sector-track { display: flex; gap: 12px; width: max-content; animation: sector-drift var(--drift, 45s) linear infinite; }
.sectors.is-auto:hover .sector-track, .sectors.is-auto:focus-within .sector-track { animation-play-state: paused; }
@keyframes sector-drift { to { transform: translateX(calc(-50% - 6px)); } }
.sector { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 6px 22px 6px 8px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px rgba(9, 14, 49, 0.05), 0 4px 14px rgba(9, 14, 49, 0.06); white-space: nowrap; }
.sector .glyph { flex: none; width: 48px; height: 48px; padding: 9px; border-radius: 50%; stroke-width: 3; }
.sector .icon3d { flex: none; width: 48px; height: 48px; } /* the isometric 3D icon, 50% larger than the old 32px glyph */
.sector:hover .glyph { transform: rotate(-8deg) scale(1.08); }
.sector h3 { font-size: 16.5px; font-weight: 600; line-height: 1; letter-spacing: -0.005em; }
.sector .link { font-size: 14.5px; }
.sector .link .arrow { margin-left: 2px; }
.glyph { grid-row: span 2; width: 60px; height: 60px; padding: 11px; border-radius: 18px; background: var(--tint); fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-slow) var(--spring-pop); }
.glyph .o { stroke: var(--orange); }
.glyph .dot { fill: var(--orange); stroke: none; }

/* ---------- 3D vignettes (js/three): only shown when WebGL is available; a fixed box from first paint ---------- */
.scene3d { display: none; }
html.js.webgl .scene3d { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; }
.scene3d canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1); }
.scene3d.is-ready canvas { opacity: 1; }
.scene3d.is-interactive { cursor: pointer; }
html.js.webgl .case-scene { max-width: 340px; margin-top: 28px; }
html.js.webgl .closing-scene { max-width: 560px; margin: 0 auto 28px; aspect-ratio: 16 / 7; }

/* ---------- section icons in three.js (js/three/icons.js) ----------
   A fixed box from first paint holds the SVG icon; when the 3D version has drawn its first frame the box gets
   .is-ready, the SVG steps aside and the canvas (drawn a little larger than the box, so nothing clips) fades in.
   Without WebGL or JavaScript the SVG simply stays. */
.icon3d { position: relative; flex: none; display: block; }
.icon3d > svg { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; }
.icon3d > canvas { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; pointer-events: none; opacity: 0; transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1); }
.icon3d.is-ready > canvas { opacity: 1; }
.icon3d.is-ready > svg { display: none; }
.stuck-link .icon3d { width: 104px; height: 104px; margin-bottom: 6px; }
.what-col .icon3d { width: 92px; height: 92px; margin-bottom: 16px; }
.team-commit .icon3d { width: 112px; height: 112px; }

/* ---------- closing + footer ---------- */
.closing { text-align: center; padding-block: clamp(120px, 18vw, 220px); }
.closing h2 { font-size: clamp(44px, 9vw, 104px); line-height: 0.95; }
.closing .lede { max-width: 560px; margin: 32px auto 40px; }
.closing .btn.alive { animation: breathe 2.8s ease-in-out infinite; }
.site-footer { background: var(--soft); color: var(--muted-strong); padding: 0 0 40px; font-size: 15px; }
.footer-grid { display: grid; gap: 40px; padding-top: 56px; }
.footer-grid .about { display: grid; gap: 16px; max-width: 460px; }
.site-footer .brand { color: var(--navy); animation: none; opacity: 1; }
.footer-tag { font-size: 12px; letter-spacing: 0.16em; color: var(--blue); }
.footer-grid h2 { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 14px; }
.footer-grid ul { display: grid; gap: 10px; }
.site-footer a, .site-footer button { color: var(--navy); text-decoration: none; opacity: 0.85; transition: opacity var(--dur-fast) var(--spring); }
.site-footer a:hover, .site-footer button:hover { opacity: 1; }
.legal { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.legal span { margin-right: auto; }

/* ---------- legal dialogs ---------- */
dialog { border: 0; padding: 0; border-radius: var(--r); width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 760px); color: var(--navy); background: var(--white); box-shadow: var(--shadow-2); }
dialog::backdrop { background: rgba(246, 248, 253, 0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
dialog[open] { animation: dialog-in var(--dur-slow) var(--spring-pop); }
dialog[open]::backdrop { animation: fade-in var(--dur-fast) var(--spring); }
dialog.closing-out { animation: dialog-out var(--dur-fast) var(--spring) forwards; }
dialog.closing-out::backdrop { animation: fade-out var(--dur-fast) var(--spring) forwards; }
.dialog-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; background: var(--white); border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; }
.dialog-close { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); font-size: 22px; line-height: 1; text-align: center; }
.dialog-body { padding: 28px; display: grid; gap: 14px; font-size: 15px; color: var(--muted-strong); }
.dialog-body h3 { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--navy); margin-top: 10px; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(0.92); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- motion: reveal on scroll ---------- */
main { transition: opacity var(--dur-fast) var(--spring); }
main.fading { opacity: 0; }
.js [data-reveal] { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity var(--dur) var(--spring), transform var(--dur) var(--spring); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="zoom"] { transform: scale(1.06); transition-duration: var(--dur-slow); }
.js [data-stagger] > * { opacity: 0; transform: translateY(28px) scale(0.97); transition: opacity var(--dur) var(--spring), transform var(--dur-slow) var(--spring-pop), box-shadow var(--dur) var(--spring); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-stagger].in > * { opacity: 1; transform: none; }
.js [data-stagger].done > * { transition-delay: 0s; }
.js [data-stagger="logos"] > * { transform: translateY(12px) scale(0.8); transition-delay: calc(var(--i, 0) * 120ms); }
/* headings and ledes: split into words by JS, revealed line by line */
.js [data-lines] { opacity: 0; }
.js [data-lines].split, .js [data-lines].done { opacity: 1; }
.w { display: inline-block; opacity: 0; transform: translateY(0.5em) scale(1, 0.9); transform-origin: 50% 100%; transition: opacity var(--dur) var(--spring), transform var(--dur-slow) var(--spring-pop); transition-delay: calc(var(--l, 0) * 110ms); }
.in > .w, .in .w { opacity: 1; transform: none; }
.brand { animation: brand-in var(--dur-slow) var(--spring-pop) both; }
@keyframes brand-in { from { opacity: 0; transform: scale(1.06); } }

/* ---------- tablet ---------- */
@media (min-width: 720px) {
  body { font-size: 18px; }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr; }
}
/* ---------- desktop ---------- */
@media (min-width: 1000px) {
  .site-header { height: 68px; }
  .brand-word { height: 13px; }
  .case { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- reduced motion: no animation at all ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js [data-stagger] > *, .js [data-lines], .js [data-rise], .js [data-calm-group] [data-calm], .js .team [data-team], .js .team .tm-group, .js .terms-commit li, .w { opacity: 1 !important; transform: none !important; }
  .js .founder-photo .founder-frame { clip-path: none; }
  .js .founder-photo img, .js .founder-photo figcaption, .founder-stats dd, .founder-stats dt { opacity: 1 !important; transform: none !important; }
  .founder-stats div::before, .founder-stats div::after, .founder-close::before, .founder-close::after { transform: none !important; }
  .slot-word:not(.is-current) { display: none; }
  .logos img, .logo-word { transform: none; }
  .calendly iframe { opacity: 1; }
}

/* ---------- story as a floating card + modal (JS moves .story into dialog.story-modal) ---------- */
.story-launch { position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 40; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 10px 8px 8px; border-radius: 20px; background: var(--white); color: var(--navy); text-align: left; box-shadow: 0 1px 2px rgba(9, 14, 49, 0.06), 0 12px 32px rgba(9, 14, 49, 0.14); opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98); transition: opacity 420ms cubic-bezier(0.32, 0.72, 0, 1), transform 420ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 420ms, box-shadow 280ms ease; }
.story-launch.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.story-launch:hover { box-shadow: 0 1px 2px rgba(9, 14, 49, 0.06), 0 18px 40px rgba(9, 14, 49, 0.18); transform: translateY(-2px); }
.story-launch:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sl-thumb { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); display: grid; place-items: center; }
.sl-thumb svg { width: 28px; height: 28px; }
.sl-thumb path { fill: var(--white); }
.sl-thumb circle { fill: var(--navy); }
.sl-text { display: grid; gap: 2px; min-width: 0; }
.sl-text strong { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.sl-text span { font-size: 12.5px; color: var(--muted); }
.sl-play { flex: none; width: 34px; height: 34px; margin-left: 4px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); }
.sl-play svg { width: 14px; height: 14px; fill: var(--white); }
.story-launch:hover .sl-play { transform: scale(1.08); }
@media (max-width: 480px) { .sl-text span { display: none; } .sl-thumb { width: 44px; height: 44px; } }

dialog.story-modal { width: min(1080px, calc(100vw - 32px)); height: min(780px, calc(100svh - 32px)); max-height: none; border-radius: clamp(24px, 4vw, 40px); background: var(--yellow); overflow: hidden; transform-origin: 100% 100%; }
dialog.story-modal::backdrop { background: rgba(9, 14, 49, 0.42); }
.story-modal .story { height: 100%; padding: 0; overflow: auto; }
.story-modal .story-live { overflow: hidden; }
.story-modal .story-live .story-stage { height: 100%; }
.story-modal .story-panel { border-radius: 0; }
.story-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; background: var(--white); color: var(--navy); box-shadow: 0 4px 14px rgba(9, 14, 49, 0.12); }

/* ---------- founder as a floating card (bottom left) + bottom sheet (JS moves #founder into dialog.founder-sheet) ---------- */
.founder-launch { position: fixed; left: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--white); color: var(--navy); text-align: left; box-shadow: 0 1px 2px rgba(9, 14, 49, 0.06), 0 12px 32px rgba(9, 14, 49, 0.14); opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98); transition: opacity 420ms cubic-bezier(0.32, 0.72, 0, 1), transform 420ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 420ms, box-shadow 280ms ease; }
.founder-launch.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.founder-launch:hover { box-shadow: 0 1px 2px rgba(9, 14, 49, 0.06), 0 18px 40px rgba(9, 14, 49, 0.18); transform: translateY(-2px); }
.founder-launch:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.founder-launch img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.fl-text { display: grid; gap: 1px; }
.fl-text span { font-size: 12px; color: var(--muted); }
.fl-text strong { font-size: 14.5px; font-weight: 600; line-height: 1.2; }
@media (max-width: 600px) {
  .founder-launch { padding: 4px; }
  .fl-text { display: none; }
  .story-launch { max-width: calc(100vw - 104px); }
  .story-launch .sl-play { display: none; }
}

dialog.founder-sheet { margin: auto auto 0; width: min(1040px, 100vw); max-width: 100vw; height: auto; max-height: min(88svh, 900px); border-radius: 28px 28px 0 0; background: var(--tint); overflow: hidden; }
dialog.founder-sheet[open] { display: flex; flex-direction: column; animation: sheet-in 520ms cubic-bezier(0.32, 0.72, 0, 1); }
dialog.founder-sheet.closing-out { animation: sheet-out 380ms cubic-bezier(0.32, 0.72, 0, 1) forwards; }
dialog.founder-sheet::backdrop { background: rgba(9, 14, 49, 0.42); }
dialog.founder-sheet::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(9, 14, 49, 0.18); z-index: 2; }
.founder-sheet .founder { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(48px, 6vw, 72px) var(--pad) clamp(40px, 5vw, 64px); }
.sheet-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; background: var(--white); color: var(--navy); box-shadow: 0 4px 14px rgba(9, 14, 49, 0.12); }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }

.journey-cta { margin-top: 24px; text-align: center; }

/* ---------- Capabilities: Apple-style tiles. Soft grey tiles, big type first, the preview below inset in its own
   rounded frame; a gentle lift on hover. Every preview rests on its final frame; hover or focus plays it. ---------- */
.caps { --tile: #f5f5f7; --tile-ink: #1d1d1f; --tile-sub: #6e6e73; }
.caps-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1200px; }
@media (min-width: 768px) { .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cap--feature, .cap--cta { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .caps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cap--feature { grid-column: 1 / 3; grid-row: 1 / 3; }
  .cap--cta { grid-column: 3 / 5; }
}
.cap { position: relative; display: flex; flex-direction: column; border-radius: 28px; background: var(--tile); color: var(--tile-ink); overflow: hidden; outline-offset: 4px; transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 500ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (hover: hover) { .cap:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 24px 48px -20px rgba(9, 14, 49, 0.22); } }
.cap:focus-visible { outline: 2px solid var(--blue); }
.cap-name { order: 1; margin: 28px 28px 0; font-size: clamp(21px, 1.9vw, 24px); font-weight: 700; line-height: 1.12; letter-spacing: -0.022em; }
.cap-name a { color: inherit; text-decoration: none; }
.cap-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* the whole tile opens; the name is the link text */
.cap-name a:focus-visible { outline: none; }
.cap:has(.cap-name a:focus-visible) { outline: 2px solid var(--blue); }
.cap > p { order: 2; margin: 8px 28px 0; font-size: 15.5px; line-height: 1.45; color: var(--tile-sub); max-width: 34ch; }
.cap-media { order: 3; position: relative; margin: 22px 18px 18px; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #fff; }
.cap-media img, .cap-media video, .cap-media > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (hover: hover) { .cap:hover .cap-media > img { transform: scale(1.03); } }
.cap-media video { opacity: 0; transition: opacity 300ms ease; }
.cap.is-playing .cap-media video { opacity: 1; }
/* the feature: a dark tile, the live city filling it */
.cap--feature { background: #0b0f2a; color: #f5f5f7; }
.cap--feature .cap-name { font-size: clamp(28px, 3vw, 40px); margin: 36px 36px 0; }
.cap--feature > p { color: #a1a1b5; font-size: 17px; margin: 10px 36px 0; max-width: 40ch; }
.cap--feature .cap-media { margin: 28px 22px 22px; }
@media (min-width: 1024px) { .cap--feature .cap-media { flex: 1; aspect-ratio: auto; min-height: 0; } }
.cap-open { position: absolute; right: 14px; bottom: 14px; z-index: 1; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px; font-weight: 600; color: #1d1d1f; }
/* a plain typographic poster where there is no real asset yet */
.cap-type { display: flex; align-items: flex-end; padding: 20px; background: linear-gradient(160deg, #ffffff, #eef1f8); }
.cap-type span { font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); max-width: 12ch; }
/* the CTA tile */
.cap--cta { background: var(--blue); color: #fff; }
.cap--cta a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 140px; padding: 30px 34px; color: inherit; text-decoration: none; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; }
.cap-arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--blue); font-size: 22px; transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1); }
.cap--cta a:hover .cap-arrow { transform: translateX(6px); }
.cap-lightbox { width: min(1000px, calc(100vw - 32px)); max-height: calc(100svh - 32px); }
.cap-lightbox-body { padding: 20px; display: grid; gap: 14px; }
.cap-lightbox video { width: 100%; height: auto; border-radius: 12px; background: var(--soft); }
.cap-lightbox p { font-size: 15px; color: var(--muted-strong); }

/* ---- card 5: motion design. Dots gather into the Nervure mark (canvas), then the wordmark writes itself ---- */
.mo { background: radial-gradient(120% 90% at 50% 40%, #ffffff, #eef1f8); }
.mo-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo-lockup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4%; padding: 0 8%; }
.mo-mark { position: static !important; width: 22% !important; height: auto !important; aspect-ratio: 1; border-radius: 6px; transition: opacity 400ms ease; }
.mo-word { width: 58%; aspect-ratio: 815 / 56; background: var(--navy); -webkit-mask: url("../assets/logo-nervure-wordmark.png?v=9609b250f6") left center / contain no-repeat; mask: url("../assets/logo-nervure-wordmark.png?v=9609b250f6") left center / contain no-repeat; clip-path: inset(0 0 0 0); }
.mo.is-dots .mo-mark { opacity: 0; }
.mo.is-hideword .mo-word { clip-path: inset(0 100% 0 0); }
.mo.is-writing .mo-word { clip-path: inset(0 0 0 0); transition: clip-path 1300ms steps(16, end); }


.what-cta { margin-top: clamp(48px, 6vw, 72px); text-align: center; }

/* ---- the animated previews: everything inside is sized in cqw (1% of the preview's width), so each one scales as a
   single picture at any card size and never overflows. Motion is quiet: opacity and small moves only. ---- */
.cap-anim { container-type: inline-size; background: linear-gradient(180deg, #ffffff, #f4f6fb); }
.cap-anim i, .cap-anim s { display: block; font-style: normal; text-decoration: none; }

/* card 4: product experience design. A Claude-built component library beside a Figma frame: a card and two inputs
   appear, then a button is dragged from the library into the frame */
.pd-win { position: absolute; inset: 5cqw; display: flex; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px #e6e9f1; font-size: 2.1cqw; color: #3b4060; }
.pd-lib { flex: none; width: 30%; padding: 3cqw 2.6cqw; display: flex; flex-direction: column; gap: 2.4cqw; border-right: 1px solid #edf0f6; }
.pd-lib b { font-weight: 700; color: #1d1d1f; font-size: 2.2cqw; }
.pd-comp { display: flex; align-items: center; gap: 1.4cqw; font-weight: 500; }
.pd-comp i { flex: none; width: 4.6cqw; height: 2.6cqw; border-radius: 0.6cqw; background: #eef1f8; box-shadow: inset 0 0 0 1px #dfe4f0; }
.pd-comp .sw-btn { background: var(--blue); box-shadow: none; }
.pd-canvas { position: relative; flex: 1; background: #f4f5f9 radial-gradient(#dfe3ee 1px, transparent 1px) 0 0 / 2.4cqw 2.4cqw; border-radius: 0 1.6cqw 1.6cqw 0; }
.pd-file { position: absolute; left: 3cqw; top: 2.4cqw; font-weight: 600; color: #8a8fa6; font-size: 1.9cqw; }
.pd-frame { position: absolute; left: 25%; right: 25%; top: 16%; bottom: 8%; border-radius: 1cqw; background: #fff; box-shadow: 0 0 0 1px #e3e6ef; }
.pd-frame i { position: absolute; left: 10%; right: 10%; border-radius: 0.7cqw; }
.pd-card { top: 9%; height: 30%; background: var(--tint); }
.pd-in { height: 11%; background: #fff; box-shadow: inset 0 0 0 1px #d9dfee; }
.pd-in.in1 { top: 46%; } .pd-in.in2 { top: 61%; }
.pd-btn { top: 78%; height: 12%; background: var(--blue); }
.pd-ghost { position: absolute; left: 30%; top: 76.8%; width: 40%; height: 9%; border-radius: 0.7cqw; background: rgba(0, 95, 252, 0.25); opacity: 0; }
.pd-cursor { position: absolute; left: 62%; top: 82%; width: 0; height: 0; border-left: 1.5cqw solid #1d1d1f; border-top: 1cqw solid transparent; border-bottom: 1cqw solid transparent; transform: rotate(-35deg); }
.cap.is-playing .pd-card { animation: pd-a 6s infinite both; }
.cap.is-playing .pd-in.in1 { animation: pd-b 6s infinite both; }
.cap.is-playing .pd-in.in2 { animation: pd-c 6s infinite both; }
.cap.is-playing .pd-btn { animation: pd-d 6s infinite both; }
.cap.is-playing .pd-ghost { animation: pd-ghost 6s infinite both; }
.cap.is-playing .pd-cursor { animation: pd-cursor 6s infinite both; }
@keyframes pd-a { 0%, 8% { opacity: 0; } 14%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-b { 0%, 18% { opacity: 0; } 24%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-c { 0%, 24% { opacity: 0; } 30%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-d { 0%, 58% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-ghost { 0%, 34% { opacity: 0; left: -38%; top: 22%; } 38% { opacity: 1; left: -38%; top: 22%; } 58% { opacity: 1; left: 30%; top: 76.8%; } 62%, 100% { opacity: 0; left: 30%; top: 76.8%; } }
@keyframes pd-cursor { 0%, 30% { left: 62%; top: 82%; } 36% { left: -30%; top: 26%; } 58% { left: 50%; top: 82%; } 70%, 100% { left: 62%; top: 82%; } }


/* card 3: social creatives. A carousel of bold posters (retail, delivery, travel) that steps on its own every few
   seconds; the next poster peeks in from the right. The track ends with a copy of the first poster, so the jump back
   to the start is invisible. Paused while the section is off screen. */
.sp { background: #f2f3f7; }
.sp-track { position: absolute; top: 4.5cqw; bottom: 4.5cqw; left: 6cqw; display: flex; gap: 4cqw; animation: sp-slide 12s infinite; }
.caps:not(.is-onscreen) .sp-track { animation-play-state: paused; }
.sp-post { position: relative; flex: none; height: 100%; aspect-ratio: 1; border-radius: 1.6cqw; overflow: hidden; color: #fff; }
.sp-big { position: absolute; left: 0; right: 0; top: 6%; text-align: center; font-size: 13.5cqw; line-height: 0.8; font-weight: 800; letter-spacing: -0.06em; text-transform: uppercase; }
.sp-obj { position: absolute; left: 50%; top: 32%; width: 54%; transform: translateX(-50%); filter: drop-shadow(0 1.2cqw 1.2cqw rgba(0, 0, 0, 0.18)); }
.sp-tag { position: absolute; left: 6%; bottom: 8%; display: grid; justify-items: start; gap: 0.5cqw; margin: 0; }
.sp-tag span { padding: 0.5cqw 1cqw; font-size: 2.1cqw; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; }
.sp-brand { position: absolute; right: 6%; bottom: 5%; font-style: normal; font-size: 1.6cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.sp-shop { background: radial-gradient(120% 90% at 30% 20%, #e6f76a, #8fd65c 70%, #6cc45a); }
.sp-shop .sp-tag span { background: #123a1c; color: #e6f76a; }
.sp-shop .sp-obj { top: 36%; width: 64%; }
.sp-food { background: radial-gradient(120% 90% at 70% 20%, #ff9a5a, #e8452c 70%); }
.sp-food .sp-tag span { background: #fff4e6; color: #c2331d; }
.sp-trip { background: radial-gradient(120% 90% at 30% 10%, #7fd8ff, #1e88e5 75%); }
.sp-trip .sp-tag span { background: #0b2d5c; color: #ffe27a; }
.sp-trip .sp-obj { top: 24%; width: 50%; }
/* one step = one square poster (the track height, 53.5cqw) plus the gap */
@keyframes sp-slide {
  0%, 25% { transform: translateX(0); }
  33%, 58% { transform: translateX(calc(-1 * (53.5cqw + 4cqw))); }
  66%, 91% { transform: translateX(calc(-2 * (53.5cqw + 4cqw))); }
  99.9% { transform: translateX(calc(-3 * (53.5cqw + 4cqw))); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .sp-track { animation: none; } }

/* card 4: product experience design. A Claude-built component library beside a Figma frame: a card and two inputs
   appear, then a button is dragged from the library into the frame */
.pd-win { position: absolute; inset: 5cqw; display: flex; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px #e6e9f1; font-size: 2.1cqw; color: #3b4060; }
.pd-lib { flex: none; width: 30%; padding: 3cqw 2.6cqw; display: flex; flex-direction: column; gap: 2.4cqw; border-right: 1px solid #edf0f6; }
.pd-lib b { font-weight: 700; color: #1d1d1f; font-size: 2.2cqw; }
.pd-comp { display: flex; align-items: center; gap: 1.4cqw; font-weight: 500; }
.pd-comp i { flex: none; width: 4.6cqw; height: 2.6cqw; border-radius: 0.6cqw; background: #eef1f8; box-shadow: inset 0 0 0 1px #dfe4f0; }
.pd-comp .sw-btn { background: var(--blue); box-shadow: none; }
.pd-canvas { position: relative; flex: 1; background: #f4f5f9 radial-gradient(#dfe3ee 1px, transparent 1px) 0 0 / 2.4cqw 2.4cqw; border-radius: 0 1.6cqw 1.6cqw 0; }
.pd-file { position: absolute; left: 3cqw; top: 2.4cqw; font-weight: 600; color: #8a8fa6; font-size: 1.9cqw; }
.pd-frame { position: absolute; left: 25%; right: 25%; top: 16%; bottom: 8%; border-radius: 1cqw; background: #fff; box-shadow: 0 0 0 1px #e3e6ef; }
.pd-frame i { position: absolute; left: 10%; right: 10%; border-radius: 0.7cqw; }
.pd-card { top: 9%; height: 30%; background: var(--tint); }
.pd-in { height: 11%; background: #fff; box-shadow: inset 0 0 0 1px #d9dfee; }
.pd-in.in1 { top: 46%; } .pd-in.in2 { top: 61%; }
.pd-btn { top: 78%; height: 12%; background: var(--blue); }
.pd-ghost { position: absolute; left: 30%; top: 76.8%; width: 40%; height: 9%; border-radius: 0.7cqw; background: rgba(0, 95, 252, 0.25); opacity: 0; }
.pd-cursor { position: absolute; left: 62%; top: 82%; width: 0; height: 0; border-left: 1.5cqw solid #1d1d1f; border-top: 1cqw solid transparent; border-bottom: 1cqw solid transparent; transform: rotate(-35deg); }
.cap.is-playing .pd-card { animation: pd-a 6s infinite both; }
.cap.is-playing .pd-in.in1 { animation: pd-b 6s infinite both; }
.cap.is-playing .pd-in.in2 { animation: pd-c 6s infinite both; }
.cap.is-playing .pd-btn { animation: pd-d 6s infinite both; }
.cap.is-playing .pd-ghost { animation: pd-ghost 6s infinite both; }
.cap.is-playing .pd-cursor { animation: pd-cursor 6s infinite both; }
@keyframes pd-a { 0%, 8% { opacity: 0; } 14%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-b { 0%, 18% { opacity: 0; } 24%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-c { 0%, 24% { opacity: 0; } 30%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-d { 0%, 58% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pd-ghost { 0%, 34% { opacity: 0; left: -38%; top: 22%; } 38% { opacity: 1; left: -38%; top: 22%; } 58% { opacity: 1; left: 30%; top: 76.8%; } 62%, 100% { opacity: 0; left: 30%; top: 76.8%; } }
@keyframes pd-cursor { 0%, 30% { left: 62%; top: 82%; } 36% { left: -30%; top: 26%; } 58% { left: 50%; top: 82%; } 70%, 100% { left: 62%; top: 82%; } }



/* card 6: app development, the isometric 3D scene (js/three/icons.js cApp), filling the preview */
.cap-iso { background: linear-gradient(180deg, #ffffff, #f2f4f9); }
.cap-iso .icon3d { position: absolute; inset: 0; width: auto; height: auto; }
.cap-iso .icon3d > canvas { left: 0; top: 0; width: 100%; height: 100%; }
.cap-iso-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: var(--navy); font-size: 18px; }
.cap-iso .icon3d.is-ready .cap-iso-fallback { display: none; }

/* card 7: AI workflows. One agent at work: an emailed purchase order becomes an ERP entry, with a human approval
   above ₹1L. Rests on the finished state. */
.ag { font-size: 3.3cqw; color: #1d1d1f; }
.ag-mail { position: absolute; left: 5cqw; top: 6cqw; width: 36cqw; padding: 3cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0 0 1px #e6e9f1; display: grid; gap: 0.8cqw; }
.ag-from { color: #8a8fa6; font-size: 2.8cqw; }
.ag-mail b { font-size: 4.2cqw; font-weight: 700; letter-spacing: -0.01em; }
.ag-sub { color: #6e6e73; font-size: 3.1cqw; }
.ag-bot { position: absolute; left: 5cqw; top: 36cqw; display: flex; align-items: center; gap: 2.4cqw; }
.ag-head { position: relative; flex: none; width: 10cqw; aspect-ratio: 1.1; border-radius: 3cqw; background: #5b7fdc; box-shadow: inset 0 -0.8cqw 0 rgba(0, 0, 0, 0.12); }
.ag-head::before { content: ""; position: absolute; inset: 1.8cqw 1.5cqw 2.2cqw; border-radius: 1.8cqw; background: #f6f1e6; }
.ag-eye { position: absolute; top: 3.6cqw; width: 1.6cqw; height: 2.1cqw; border-radius: 1cqw; background: #1d1d1f; }
.ag-eye:first-child { left: 3.1cqw; } .ag-eye + .ag-eye { right: 3.1cqw; }
.ag-bot span { display: grid; gap: 0.4cqw; min-width: 26cqw; }
.ag-bot b { font-size: 3.5cqw; font-weight: 700; }
.ag-st { font-style: normal; color: #6e6e73; font-size: 3cqw; grid-area: 2 / 1; opacity: 0; white-space: nowrap; }
.ag-st.st3 { opacity: 1; color: #1c9a68; font-weight: 600; }
.ag-pulse { position: absolute; left: 43cqw; top: 20cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--blue); opacity: 0; }
.ag-form { position: absolute; right: 5cqw; top: 6cqw; bottom: 6cqw; width: 46cqw; padding: 3.2cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0 0 1px #e6e9f1; display: flex; flex-direction: column; justify-content: space-between; }
.ag-row { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; padding-bottom: 1.6cqw; border-bottom: 1px solid #eef0f5; }
.ag-row span { color: #8a8fa6; font-size: 3cqw; }
.ag-row b { font-weight: 700; white-space: nowrap; font-size: 3.4cqw; }
.ag-ok { display: grid; }
.ag-ok span { grid-area: 1 / 1; justify-self: start; padding: 1.2cqw 2.2cqw; border-radius: 99px; font-weight: 700; font-size: 3cqw; }
.ag-wait { background: #fff4dc; color: #8a5a00; opacity: 0; }
.ag-yes { background: #e3f4ec; color: #1c9a68; }
.cap.is-playing .ag-mail { animation: ag-in 7s infinite both; --a: 0%; }
.cap.is-playing .ag-st.st1 { animation: ag-st1 7s infinite both; }
.cap.is-playing .ag-st.st2 { animation: ag-st2 7s infinite both; }
.cap.is-playing .ag-st.st3 { animation: ag-st3 7s infinite both; }
.cap.is-playing .ag-pulse { animation: ag-pulse 7s infinite both; }
.cap.is-playing .ag-row b { animation: ag-r1 7s infinite both; }
.cap.is-playing .ag-row.r2 b { animation-name: ag-r2; } .cap.is-playing .ag-row.r3 b { animation-name: ag-r3; }
.cap.is-playing .ag-wait { animation: ag-wait 7s infinite both; }
.cap.is-playing .ag-yes { animation: ag-yes 7s infinite both; }
.cap.is-playing .ag-eye { animation: ag-blink 7s infinite both; }
@keyframes ag-in { 0% { opacity: 0; transform: translateY(1cqw); } 8%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ag-st1 { 0%, 8% { opacity: 0; } 11%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes ag-st2 { 0%, 27% { opacity: 0; } 30%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes ag-st3 { 0%, 71% { opacity: 0; } 74%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ag-pulse { 0%, 14% { opacity: 0; left: 42cqw; } 16% { opacity: 1; left: 42cqw; } 26% { opacity: 1; left: 48cqw; } 28%, 100% { opacity: 0; left: 48cqw; } }
@keyframes ag-r1 { 0%, 28% { opacity: 0; } 33%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ag-r2 { 0%, 36% { opacity: 0; } 41%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ag-r3 { 0%, 44% { opacity: 0; } 49%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ag-wait { 0%, 50% { opacity: 0; } 54%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ag-yes { 0%, 64% { opacity: 0; } 68%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ag-blink { 0%, 18%, 22%, 58%, 62%, 100% { transform: scaleY(1); } 20%, 60% { transform: scaleY(0.15); } }