/* SANCTUMCLOUD — "The Sanctuary" template kit.
   A dark, night-ink world lit by the logo's three drops: navy (engineering), green (intelligence),
   orange (experience & growth). The drop — a round shape with ONE tight corner, exactly as the
   logo's lobes are cut — is the house geometry: icon tiles, frames, cards and the CTA all carry it.
   Type: Sora (display) · Instrument Sans (body) · Instrument Serif italic (the stressed word) ·
   JetBrains Mono (labels, code). Motion: @dhanest/motion (data-wkm) + sc.js (this kit's patterns). */

:root {
  color-scheme: dark;
  /* ground */
  --ink-0: #02070f;
  --ink-1: #050d1b;
  --ink-2: #0a1729;
  --ink-3: #0f2039;
  --ink-4: #16294a;
  --line: rgba(148, 186, 255, .11);
  --line-2: rgba(148, 186, 255, .2);
  --text: #edf3ff;
  --text-2: #a8b6cf;
  --text-3: #6d7d99;
  /* brand (the logo, exact) */
  --navy: #004174;
  --green: #14a44d;
  --orange: #fa983a;
  /* the same hues lit for a dark ground */
  --blue: #3d9bff;
  --sky: #8cc8ff;
  --mint: #3ed27f;
  --lime: #b4ef8f;
  --amber: #ffbe73;
  --rose: #ff7a59;
  /* paper sections */
  --paper: #f3f6fa;
  --paper-2: #e7edf5;
  --paper-ink: #071428;
  --paper-ink-2: #4a5873;
  --paper-line: rgba(7, 20, 40, .1);
  /* type */
  --f-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --f-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* shape: the drop (three round corners, one tight) */
  --r-drop: 28px 28px 28px 8px;
  --r-drop-lg: 40px 40px 40px 10px;
  --r-card: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --page: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  /* theme roles (dark) — the light theme redefines these */
  --hi: #ffffff;
  --strong: #ffffff;
  --on-strong: #050d1b;
  --fill-1: rgba(255,255,255,.03);
  --fill-2: rgba(255,255,255,.05);
  --fill-3: rgba(255,255,255,.08);
  --fill-4: rgba(255,255,255,.12);
  --glass: rgba(8, 18, 34, .62);
  --glass-2: rgba(7, 16, 31, .9);
  --glass-3: rgba(3, 8, 17, .96);
  --glass-chip: rgba(10, 22, 42, .72);
  --sh-card: 0 30px 60px -30px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.25);
  --paper-card: #ffffff;
  --news-bg: #071428;
  --giant: #15294b;
  --lobe-shadow: rgba(0,0,0,.55);
  --orbit: rgba(140, 200, 255, .14);
  /* motion runtime colours */
  --accent: var(--blue);
  --wkm-accent: var(--blue);
  --wkm-cursor-bg: #fff;
  --wkm-cursor-fg: var(--ink-1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink-1); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink-1); color: var(--text); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--blue) 45%, transparent); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the film grain over every dark section (soft-light, fine) */
.grain { position: relative; isolation: isolate; }
.grain > * { position: relative; z-index: 1; }

.wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; }
section { position: relative; }
.pad { padding-block: clamp(88px, 12vw, 168px); }
.pad-sm { padding-block: clamp(64px, 8vw, 112px); }

/* ── type ───────────────────────────────────────────────────────── */
.h-display, .h1, .h2, .h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.035em; line-height: .98; margin: 0; text-wrap: balance; }
.h-display { font-size: clamp(50px, 7.4vw, 118px); letter-spacing: -.045em; line-height: .94; }
.h1 { font-size: clamp(46px, 6.6vw, 100px); }
.h2 { font-size: clamp(40px, 5.2vw, 76px); }
.h3 { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; line-height: 1.04; }
.h-display em, .h1 em, .h2 em, .h3 em, .lead em, .stmt em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 60ch; margin: 0; text-wrap: pretty; }
.body { font-size: 17px; color: var(--text-2); margin: 0; }
.mono { font-family: var(--f-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.c-blue { color: var(--sky); } .c-green { color: var(--mint); } .c-orange { color: var(--amber); }

/* eyebrow: the three lobes as a tiny mark, then a mono label */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.eyebrow .lobes { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eyebrow .lobes i { display: block; border-radius: 99px 99px 99px 2px; }
.eyebrow .lobes i:nth-child(1) { width: 6px; height: 6px; background: var(--green); }
.eyebrow .lobes i:nth-child(2) { width: 11px; height: 11px; background: var(--blue); border-radius: 99px 99px 99px 2px; }
.eyebrow .lobes i:nth-child(3) { width: 6px; height: 5px; background: var(--orange); border-radius: 99px 99px 2px 99px; }
.eyebrow b { font-weight: 500; color: var(--text); }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(44px, 6vw, 80px); }
.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.sec-head.split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 28px 64px; }
.sec-head.split .eyebrow { grid-column: 1 / -1; }

/* ── buttons ───────────────────────────────────────────────────── */
.btn { --b-bg: var(--strong); --b-fg: var(--on-strong); position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px 0 26px; border-radius: 999px; background: var(--b-bg); color: var(--b-fg);
  font: 600 16px/1 var(--f-body); letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 32px -8px rgba(61,155,255,.35), 0 2px 6px rgba(0,0,0,.3); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.btn:hover { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px -8px rgba(61,155,255,.5), 0 2px 6px rgba(0,0,0,.3); }
.btn .coin { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 99px 99px 99px 6px; background: var(--b-fg); color: var(--b-bg); transition: transform 320ms var(--ease); }
.btn:hover .coin { transform: rotate(-45deg); }
.btn .coin svg { width: 16px; height: 16px; }
.btn.ghost { --b-bg: var(--fill-2); --b-fg: var(--text); padding: 0 24px; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.btn.ghost:hover { --b-bg: var(--fill-4); }
.btn.sm { height: 44px; font-size: 14.5px; padding: 0 8px 0 18px; gap: 10px; }
.btn.sm .coin { width: 30px; height: 30px; }
.btn.ghost.sm { padding: 0 18px; }
.btn.on-paper { --b-bg: var(--paper-ink); --b-fg: var(--paper); box-shadow: 0 12px 30px -10px rgba(7,20,40,.5); }
.btn.on-paper .coin { background: var(--paper); color: var(--paper-ink); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.link-arrow svg { width: 15px; height: 15px; transition: transform 240ms var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ── chips & drops ──────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font: 500 13.5px/1 var(--f-body); color: var(--text-2); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 20%, transparent); }
.chip .dot.pulse { animation: sc-pulse 2s ease-in-out infinite; }
@keyframes sc-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mint) 0%, transparent); } }
/* the drop tile: an icon in the house shape, lit in its hue */
.drop { --h: var(--blue); position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 99px 99px 99px 10px; color: #fff;
  background: radial-gradient(120% 120% at 30% 15%, color-mix(in srgb, var(--h) 92%, #fff), var(--h) 45%, color-mix(in srgb, var(--h) 65%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 26px -8px color-mix(in srgb, var(--h) 70%, transparent); }
.drop svg { width: 22px; height: 22px; }
.drop.sm { width: 38px; height: 38px; border-radius: 99px 99px 99px 7px; }
.drop.sm svg { width: 17px; height: 17px; }
.drop.lg { width: 72px; height: 72px; border-radius: 99px 99px 99px 14px; }
.drop.lg svg { width: 30px; height: 30px; }
.hue-blue { --h: var(--blue); } .hue-green { --h: var(--green); } .hue-orange { --h: var(--orange); } .hue-sky { --h: #2c7fd6; } .hue-mint { --h: #19b866; } .hue-amber { --h: #f2a24a; } .hue-rose { --h: #f06a4a; }

/* ── the finished surface (craft §8): own hue wash, inset ring on ::after, lighter top, deep shadow ── */
.card { --h: var(--blue); position: relative; isolation: isolate; border-radius: var(--r-drop); background:
  radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--h) 16%, transparent), transparent 55%),
  linear-gradient(180deg, color-mix(in srgb, var(--ink-3) 92%, #fff 3%), var(--ink-2));
  box-shadow: var(--sh-card); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 22%, var(--line)), inset 0 1px 0 rgba(255,255,255,.07); }
.card.wkm-spot::before { background: radial-gradient(460px circle at var(--wkm-mx, 50%) var(--wkm-my, 50%), color-mix(in srgb, var(--h) 18%, transparent), transparent 60%); }

/* ── header ─────────────────────────────────────────────────────── */
.nav { position: fixed; z-index: 60; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; width: min(1240px, 100% - 24px);
  display: flex; align-items: center; gap: 8px; height: 66px; padding: 0 9px 0 22px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.07), 0 18px 50px -20px rgba(0,0,0,.6); }
.nav[data-wkm-scrolled] { background: var(--glass-2); height: 60px; }
.nav-logo { display: flex; align-items: center; gap: 11px; margin-right: auto; font: 600 21px/1 var(--f-display); letter-spacing: -.04em; color: var(--hi); }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a, .nav-links > button { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 15px; border-radius: 999px; font: 500 15px/1 var(--f-body); color: var(--text-2); transition: color 140ms, background-color 140ms; }
.nav-links > a:hover, .nav-links > button:hover, .nav-links > button[aria-expanded="true"], .nav-links > a[aria-current] { color: var(--hi); background: var(--fill-2); }
.nav-links > button svg { width: 11px; height: 11px; transition: rotate 240ms var(--ease); }
.nav-links > button[aria-expanded="true"] svg { rotate: 180deg; }
.nav-cta { margin-left: 8px; }
.nav-burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--line-2); place-items: center; }
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--hi); box-shadow: 0 6px 0 var(--hi); translate: 0 -3px; }

/* mega menu: the three practices, each under its own lobe */
.mega { position: fixed; z-index: 59; top: calc(90px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; width: min(1240px, 100% - 24px); padding: 14px;
  border-radius: 34px 34px 34px 10px; background: var(--glass-2); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.8);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: 50% 0; transition: opacity 220ms var(--ease), transform 320ms var(--ease), visibility 0s 320ms; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--ease), transform 320ms var(--ease); }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 10px; }
.mega-col { --h: var(--blue); padding: 22px 18px 18px; border-radius: 24px 24px 24px 8px; background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--h) 14%, transparent), transparent 70%); }
.mega-col h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 17px/1.1 var(--f-display); letter-spacing: -.02em; }
.mega-col h4 small { display: block; margin-top: 4px; font: 400 13px/1.3 var(--f-body); color: var(--text-3); letter-spacing: 0; }
.mega-col a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; margin-inline: -10px; border-radius: 12px; font-size: 15px; color: var(--text-2); transition: background-color 140ms, color 140ms; }
.mega-col a:hover { background: var(--fill-2); color: var(--hi); }
.mega-col a span { color: var(--text-3); font-size: 13px; }
.mega-side { display: grid; gap: 10px; align-content: start; }
.mega-promo { position: relative; overflow: hidden; padding: 20px; border-radius: 24px 24px 24px 8px; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.mega-promo img { width: 100%; height: 130px; object-fit: cover; border-radius: 16px 16px 16px 5px; margin-bottom: 14px; }
.mega-promo b { display: block; font: 600 16px/1.2 var(--f-display); }
.mega-promo span { font-size: 13.5px; color: var(--text-3); }

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--glass-3); backdrop-filter: blur(16px); padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 24px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease), visibility 0s 260ms; }
.sheet.is-open { opacity: 1; visibility: visible; transition: opacity 260ms var(--ease); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sheet a.big { font: 600 34px/1.25 var(--f-display); letter-spacing: -.04em; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sheet .btn { margin-top: 20px; justify-content: space-between; }

/* ── hero + unfold (one sticky stage) ──────────────────────────── */
.unfold { height: 250vh; background: var(--ink-1); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-sky { position: absolute; inset: 0; }
.stage-sky::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(50% 60% at 78% 40%, rgba(0, 65, 116, .55), transparent 70%),
  radial-gradient(32% 40% at 62% 82%, rgba(20, 164, 77, .16), transparent 70%),
  radial-gradient(28% 34% at 95% 78%, rgba(250, 152, 58, .14), transparent 70%),
  radial-gradient(60% 50% at 10% 0%, rgba(61, 155, 255, .1), transparent 70%); }
/* the constellation: faint orbit rings round the cloud (SVG geometry, crisp) */
.orbits { position: absolute; right: -6vw; top: 50%; width: min(1100px, 92vw); translate: 0 -50%; opacity: .55; pointer-events: none; }
.orbits circle { fill: none; stroke: var(--orbit); stroke-width: 1; }
.orbits circle.dash { stroke-dasharray: 2 7; stroke: rgba(140, 200, 255, .22); }
.orbits .sat { fill: var(--sky); }
.hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.hero-copy .wrap { pointer-events: auto; }
.hero-text { max-width: 780px; display: grid; gap: 30px; padding-top: 60px; }
.hero-h { display: grid; gap: .02em; font-size: clamp(46px, 6.1vw, 96px); }
.hero-h .ln { display: flex; align-items: baseline; gap: .18em; white-space: nowrap; }
.hero-h .ln i { flex: none; display: inline-block; width: .4em; height: .4em; translate: 0 -.06em; border-radius: 99px 99px 99px .1em; }
.hero-h .ln:nth-child(1) i { background: linear-gradient(160deg, #5aa9ff, var(--navy)); }
.hero-h .ln:nth-child(2) i { background: linear-gradient(160deg, var(--lime), var(--green)); }
.hero-h .ln:nth-child(3) i { background: linear-gradient(160deg, var(--amber), #e5701c); border-radius: 99px 99px .1em 99px; }
.hero-h em.k-blue { color: var(--sky); } .hero-h em.k-green { color: var(--mint); } .hero-h em.k-orange { color: var(--amber); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--text-3); font-size: 14.5px; }
.hero-proof .sep { width: 1px; height: 18px; background: var(--line-2); }
.hero-proof b { color: var(--text); font-weight: 600; }
.badges { display: flex; gap: 10px; align-items: center; }
.badges img { height: 30px; width: auto; padding: 5px 10px; border-radius: 10px 10px 10px 3px; background: rgba(255,255,255,.92); box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); box-sizing: content-box; }

/* the cloud: three silk lobes, absolutely placed by sc.js; percentages are the logo's own geometry */
.cloud { position: absolute; pointer-events: none; z-index: 3; }
.lobe { position: absolute; will-change: transform; }
.lobe img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px var(--lobe-shadow)); }
.lobe.navy img { filter: drop-shadow(0 30px 60px rgba(0, 40, 90, .7)); }
.lobe .halo { position: absolute; inset: 12%; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: -1; }
.lobe.navy .halo { background: #0b5cb0; } .lobe.green .halo { background: var(--green); opacity: .4; } .lobe.orange .halo { background: var(--orange); opacity: .35; }

/* floating proof chips round the cloud (depth) */
.floats { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px 18px 18px 6px; font: 500 13.5px/1.25 var(--f-body); color: var(--text);
  background: var(--glass-chip); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -18px rgba(0,0,0,.7); white-space: nowrap; }
.float small { display: block; font: 500 11px/1.3 var(--f-mono); color: var(--text-3); letter-spacing: .04em; }
.float .ok { color: var(--mint); }
.float .drop { flex: none; }
.float.term { font-family: var(--f-mono); font-size: 12.5px; padding: 12px 16px; display: block; }
.float.term .p { color: var(--sky); }

/* the practices layer (appears as the lobes arrive in their columns) */
.practices { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.practices .wrap { pointer-events: auto; }
.pr-head { text-align: center; display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(120px, 16vh, 170px); }
.pr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pr-col { --h: var(--blue); position: relative; padding: 44px 28px 26px; }
.pr-col .slot { position: absolute; left: 50%; top: 0; width: 1px; height: 1px; }
.pr-col h3 { margin: 0 0 6px; font: 600 30px/1.05 var(--f-display); letter-spacing: -.035em; }
.pr-col .tag { margin: 0 0 18px; color: var(--text-2); font-size: 15.5px; }
.pr-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pr-col li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--text-2); transition: color 140ms, padding 240ms var(--ease); }
.pr-col li a:hover { color: var(--hi); padding-left: 6px; }
.pr-col li a svg { width: 14px; height: 14px; opacity: 0; transition: opacity 140ms; color: var(--h); }
.pr-col li a:hover svg { opacity: 1; }
.pr-col .count { position: absolute; top: 26px; right: 26px; font: 500 12px/1 var(--f-mono); color: var(--text-3); }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.scroll-cue i { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line-2); position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--sky); animation: sc-cue 1.8s var(--ease) infinite; }
@keyframes sc-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }

/* ── stack marquee ─────────────────────────────────────────────── */
.stackband { padding-block: 40px 56px; border-block: 1px solid var(--line); background: var(--ink-0); }
.stackband .label { text-align: center; margin-bottom: 24px; }
.tech { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 22px 0 14px; border-radius: 20px 20px 20px 6px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 16px/1 var(--f-body); color: var(--text-2); }
.tech img { width: 30px; height: 30px; object-fit: contain; }
.tech-sep { display: grid; place-items: center; width: 20px; }
.tech-sep i { width: 8px; height: 8px; border-radius: 99px 99px 99px 2px; background: var(--blue); }

/* ── services shown working (bento) ─────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.tile { --h: var(--blue); grid-column: span 4; display: flex; flex-direction: column; min-height: 470px; overflow: hidden; }
.tile.w5 { grid-column: span 5; } .tile.w7 { grid-column: span 7; } .tile.w6 { grid-column: span 6; } .tile.w8 { grid-column: span 8; }
.tile-copy { padding: 30px 30px 0; display: grid; gap: 12px; }
.tile-copy .row { display: flex; align-items: center; gap: 12px; }
.tile-copy .kind { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 70%, var(--hi)); }
.tile h3 { margin: 0; font: 600 clamp(26px, 2.3vw, 32px)/1.05 var(--f-display); letter-spacing: -.035em; }
.tile p { margin: 0; color: var(--text-2); font-size: 15.5px; max-width: 46ch; }
.tile-demo { position: relative; flex: 1; margin-top: 24px; min-height: 250px; }
.tile-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 30px 26px; }
.tile-foot span { font: 500 12px/1 var(--f-mono); color: var(--text-3); padding: 7px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }

/* demo: agent chat */
.d-chat { position: absolute; inset: 0 26px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; }
.d-chat p { margin: 0; max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.d-chat .me { align-self: flex-end; background: color-mix(in srgb, var(--h) 32%, var(--ink-3)); border-bottom-right-radius: 5px; }
.d-chat .ai { align-self: flex-start; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 5px; }
.d-chat .tool { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; font: 500 12px/1 var(--f-mono); color: var(--text-3); padding: 8px 12px; border-radius: 99px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); }
.d-chat .tool b { color: var(--mint); font-weight: 500; }
.d-chat .spin { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--mint); animation: sc-rot .8s linear infinite; }
@keyframes sc-rot { to { transform: rotate(360deg); } }
.d-chat > * { animation: sc-bub 480ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sc-bub { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* demo: pipeline (CI) */
.d-pipe { position: absolute; inset: 0 26px 22px; display: grid; align-content: end; gap: 8px; font: 500 13px/1 var(--f-mono); }
.d-pipe .job { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.d-pipe .st { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.d-pipe .job.run .st { border: 1.5px solid var(--line-2); border-top-color: var(--sky); box-shadow: none; animation: sc-rot .8s linear infinite; }
.d-pipe .job.ok .st { background: var(--green); box-shadow: none; }
.d-pipe .job.ok .st::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; }
.d-pipe .job.ok { color: var(--text); }
.d-pipe .t { color: var(--text-3); }
.d-pipe .live { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--green) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent); color: var(--lime); opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 500ms cubic-bezier(.34,1.56,.64,1); }
.d-pipe .live.on { opacity: 1; transform: none; }

/* demo: phone */
.d-phone { position: absolute; left: 50%; bottom: -60px; width: 214px; height: 330px; translate: -50% 0; border-radius: 36px; background: #0b1424; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 7px #050a14, 0 30px 60px -20px rgba(0,0,0,.8); padding: 18px 16px; }
.d-phone .notch { width: 70px; height: 18px; border-radius: 12px; background: #050a14; margin: 0 auto 14px; }
.d-phone .ttl { font: 600 17px/1.1 var(--f-display); letter-spacing: -.03em; margin-bottom: 10px; }
.d-phone .ring { position: relative; width: 104px; height: 104px; margin: 6px auto 12px; }
.d-phone .ring svg { width: 100%; height: 100%; rotate: -90deg; }
.d-phone .ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.d-phone .ring .bg { stroke: rgba(255,255,255,.08); }
.d-phone .ring .fg { stroke: var(--sky); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); }
.d-phone .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 22px/1 var(--f-display); }
.d-phone .bar { height: 30px; border-radius: 10px; background: var(--fill-2); margin-top: 7px; }
.d-push { position: absolute; left: 50%; top: 14px; width: min(290px, 86%); translate: -50% 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(26, 40, 66, .92); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 34px -10px rgba(0,0,0,.7); font-size: 13px; line-height: 1.3; opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity 300ms, transform 520ms cubic-bezier(.34,1.56,.64,1); z-index: 2; }
.d-push.on { opacity: 1; transform: none; }
.d-push img { width: 30px; height: 30px; border-radius: 8px; background: var(--ink-1); padding: 4px; }
.d-push small { display: block; color: var(--text-3); font-size: 11.5px; }

/* demo: cloud architecture (packets travel the lines; replicas scale) */
.d-arch { position: absolute; inset: 0 18px 14px; }
.d-arch svg { width: 100%; height: 100%; overflow: visible; }
.d-arch .ln { fill: none; stroke: rgba(140,200,255,.18); stroke-width: 1.5; }
.d-arch .pk { fill: none; stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 400; }
.d-arch .nd rect { fill: var(--ink-3); stroke: rgba(140,200,255,.22); }
.d-arch .nd text { fill: var(--text-2); font: 500 11px var(--f-mono); }
.d-arch .nd.hot rect { stroke: var(--sky); }
.d-arch .rep rect { fill: color-mix(in srgb, var(--blue) 30%, var(--ink-3)); stroke: var(--blue); }
.d-arch .rep { transition: opacity 400ms, transform 500ms cubic-bezier(.34,1.56,.64,1); transform-box: fill-box; transform-origin: center; }
.d-arch .rep.off { opacity: 0; transform: scale(.6); }
.d-arch .scale { fill: var(--lime); font: 600 12px var(--f-mono); }

/* demo: design canvas */
.d-canvas { position: absolute; inset: 0 24px 22px; border-radius: 18px; background: #f6f2ec; overflow: hidden; color: #1c1408; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.d-canvas .bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.d-canvas .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.12); }
.d-canvas .art { position: absolute; left: 22px; top: 48px; right: 22px; bottom: 18px; }
.d-canvas .wordmark { position: absolute; left: 0; top: 4px; font: 700 34px/1 var(--f-display); letter-spacing: -.05em; transition: color 500ms, letter-spacing 600ms var(--ease); }
.d-canvas .sw { position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; }
.d-canvas .sw i { width: 34px; height: 34px; border-radius: 99px 99px 99px 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform 300ms cubic-bezier(.34,1.56,.64,1); }
.d-canvas .sw i.pick { transform: translateY(-6px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1408; }
.d-canvas .card-mock { position: absolute; right: 0; top: 0; width: 46%; height: 78%; border-radius: 16px 16px 16px 4px; transition: background-color 500ms; box-shadow: 0 14px 30px -12px rgba(0,0,0,.35); }
.d-canvas .card-mock::before { content: ""; position: absolute; left: 12px; right: 30%; top: 14px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.7); }
.d-canvas .card-mock::after { content: ""; position: absolute; left: 12px; right: 50%; top: 30px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.45); }
.d-canvas .type { position: absolute; left: 0; top: 52px; font: 400 13px/1.4 var(--f-mono); color: rgba(28,20,8,.55); }
.d-cursor { position: absolute; width: 22px; height: 22px; z-index: 3; transition: left 900ms var(--ease), top 900ms var(--ease); filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.d-cursor svg { width: 100%; height: 100%; }
.d-cursor b { position: absolute; left: 16px; top: 16px; font: 600 11px/1 var(--f-body); padding: 4px 7px; border-radius: 6px; background: var(--orange); color: #fff; white-space: nowrap; }

/* demo: growth chart */
.d-growth { position: absolute; inset: 0 0 0 0; }
.d-growth svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; }
.d-growth .area { fill: url(#gGrowth); }
.d-growth .line { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.d-growth .kpis { position: absolute; left: 30px; top: 0; display: flex; gap: 24px; }
.d-growth .kpis div { display: grid; gap: 4px; }
.d-growth .kpis b { font: 600 30px/1 var(--f-display); letter-spacing: -.04em; }
.d-growth .kpis span { font: 500 12px/1 var(--f-mono); color: var(--text-3); }
.d-growth .ch { position: absolute; right: 26px; top: 6px; display: grid; gap: 6px; }
.d-growth .ch span { display: flex; align-items: center; gap: 7px; font: 500 12px/1 var(--f-mono); color: var(--text-2); }
.d-growth .ch i { width: 8px; height: 8px; border-radius: 50%; }

/* demo: data rows into a warehouse */
.d-data { position: absolute; inset: 0 26px 22px; display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 6px; }
.d-data .src, .d-data .dst { display: grid; gap: 7px; }
.d-data .src span { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 var(--f-mono); color: var(--text-2); }
.d-data .src span i { width: 8px; height: 8px; border-radius: 2px; }
.d-data .flow { position: relative; height: 100%; }
.d-data .flow i { position: absolute; left: 0; width: 8px; height: 8px; border-radius: 99px 99px 99px 2px; background: var(--mint); animation: sc-flow 1.6s linear infinite; }
@keyframes sc-flow { from { transform: translateX(-4px); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(36px); opacity: 0; } }
.d-data .dst { padding: 12px; border-radius: 16px 16px 16px 5px; background: color-mix(in srgb, var(--green) 10%, var(--ink-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.d-data .dst b { font: 600 12px/1 var(--f-mono); color: var(--lime); letter-spacing: .06em; }
.d-data .bars { display: flex; align-items: flex-end; gap: 5px; height: 76px; }
.d-data .bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--mint), color-mix(in srgb, var(--green) 50%, transparent)); transform-origin: bottom; transition: transform 900ms var(--ease); }
.d-data .rows { font: 500 11.5px/1 var(--f-mono); color: var(--text-3); }

/* ── products: pinned travel ───────────────────────────────────── */
.products { background: var(--ink-0); }
.pp { height: auto; }
.pp-head { position: absolute; left: 0; right: 0; top: clamp(92px, 12vh, 120px); z-index: 2; pointer-events: none; }
.pp-head h2 { font-size: clamp(32px, 3.3vw, 50px); }
.pp-head .wrap { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.pp-steps { display: flex; gap: 6px; pointer-events: auto; }
.pp-steps button { white-space: nowrap; height: 36px; padding: 0 14px; border-radius: 99px; font: 500 13px/1 var(--f-mono); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); transition: color 200ms, background-color 200ms, box-shadow 200ms; }
.pp-steps button.is-on { color: var(--on-strong); background: var(--strong); box-shadow: none; }
.wkm-track.pp-track { gap: 24px; padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2)) 30vw; padding-top: clamp(150px, 20vh, 190px); }
.prod { --p: #ff4d00; --p2: #ffb84d; --pbg: #1a0f08; position: relative; width: min(1120px, 80vw); height: min(600px, calc(100svh - 250px)); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: var(--r-drop-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 90% at 100% 100%, color-mix(in srgb, var(--p) 34%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--pbg) 80%, #fff 4%), var(--pbg)); }
.prod::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 30%, rgba(255,255,255,.08)), inset 0 1px 0 rgba(255,255,255,.1); }
.prod-copy { padding: clamp(28px, 3.4vw, 50px); display: flex; flex-direction: column; gap: 18px; }
.prod-brand { display: flex; align-items: center; gap: 12px; font: 600 24px/1 var(--f-display); letter-spacing: -.04em; }
.prod-brand .logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--p) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 40%, transparent); }
.prod-brand .live { margin-left: auto; }
.prod h3 { margin: 0; font: 600 clamp(32px, 3.2vw, 50px)/1 var(--f-display); letter-spacing: -.045em; text-wrap: balance; }
.prod h3 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; color: var(--p2); letter-spacing: -.01em; }
.prod p { margin: 0; color: rgba(255,255,255,.72); font-size: 16px; max-width: 44ch; }
.prod ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.prod li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: rgba(255,255,255,.82); }
.prod li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 99px 99px 99px 2px; background: var(--p); translate: 0 -1px; }
.prod .stat { margin-top: auto; display: flex; gap: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.prod .stat b { display: block; font: 600 24px/1.1 var(--f-display); letter-spacing: -.035em; margin-bottom: 4px; }
.prod .stat span { font-size: 12.5px; color: rgba(255,255,255,.55); }
.prod-media { position: relative; }
.prod-media img.shot { z-index: 1; position: absolute; right: -2px; bottom: -2px; width: 104%; max-width: none; height: auto; border-radius: 22px 0 0 0; box-shadow: -20px -20px 60px -20px rgba(0,0,0,.6); }
.prod-media .live-ui { position: absolute; z-index: 2; }
.prod.intro { --p: var(--blue); --pbg: var(--ink-2); width: min(520px, 76vw); grid-template-columns: 1fr; }
.prod.intro .prod-copy { justify-content: flex-end; }
.prod.lab { --p: #8a95ad; --pbg: #0c1424; width: min(760px, 78vw); grid-template-columns: 1fr; }
.lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 8px; }
.lab-grid figure { margin: 0; display: grid; gap: 8px; }
.lab-grid img { width: 100%; aspect-ratio: 992/600; object-fit: cover; border-radius: 14px 14px 14px 4px; }
.lab-grid figcaption { font-size: 13.5px; color: var(--text-2); }
.lab-grid figcaption b { display: block; color: var(--hi); font: 600 15px/1.2 var(--f-display); }
/* product micro-UIs */
.ui-pora { left: 7%; top: 9%; width: 300px; padding: 14px; border-radius: 18px; background: rgba(20, 12, 6, .82); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,140,60,.3), 0 20px 40px -14px rgba(0,0,0,.8); font-size: 13px; }
.ui-pora .hd { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-mono); color: #ffb37a; margin-bottom: 10px; }
.ui-pora .hd i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d00; animation: sc-pulse-o 1.4s infinite; }
@keyframes sc-pulse-o { 50% { box-shadow: 0 0 0 6px rgba(255,77,0,0); } 0% { box-shadow: 0 0 0 0 rgba(255,77,0,.5); } }
.ui-pora .ln { color: rgba(255,255,255,.7); margin: 0 0 6px; min-height: 18px; }
.ui-pora .ln b { color: #fff; font-weight: 600; }
.ui-pora .cap { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,77,0,.14); color: #ffd2b0; font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 400ms cubic-bezier(.34,1.56,.64,1); }
.ui-pora .cap.on { opacity: 1; transform: none; }
.ui-inbox { left: 6%; top: 8%; width: 300px; display: grid; gap: 8px; }
.ui-inbox .msg { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.94); color: #0e1525; font-size: 13px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); animation: sc-bub 520ms cubic-bezier(.34,1.56,.64,1) both; }
.ui-inbox .msg img { width: 26px; height: 26px; }
.ui-inbox .msg small { display: block; color: #5c6178; font-size: 11.5px; }
.prod-media .ui-field { z-index: 0; left: 0; top: 0; right: 0; height: 40%; display: grid; grid-template-columns: repeat(30, 1fr); gap: 5px; padding: 22px; }
.ui-field i { aspect-ratio: 1; border-radius: 3px 3px 3px 1px; background: rgba(83,196,139,.07); transition: background-color 1.4s; }
.ui-field i.b { background: rgba(83,196,139,.55); }
.ui-held { left: 8%; bottom: 10%; display: grid; gap: 7px; width: 250px; }
.ui-held div { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(247,245,239,.95); color: #0c3b2e; font-size: 13px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.6); animation: sc-bub 520ms cubic-bezier(.34,1.56,.64,1) both; }
.ui-held b { font: 600 11px/1 var(--f-mono); color: #2f8b5e; letter-spacing: .06em; }

/* ── why: text-scrub statement ─────────────────────────────────── */
.why { background: var(--ink-1); overflow: hidden; }
.stmt { margin: 0; font: 500 clamp(32px, 4.2vw, 64px)/1.12 var(--f-display); letter-spacing: -.04em; max-width: 22ch; text-wrap: balance; }
.why-art { position: absolute; right: -18vw; top: 50%; width: min(760px, 62vw); translate: 0 -50%; opacity: .9; pointer-events: none; }
.beliefs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: clamp(56px, 7vw, 96px); }
.belief { --h: var(--blue); padding: 30px; display: grid; gap: 14px; align-content: start; }
.belief h3 { margin: 6px 0 0; font: 600 25px/1.1 var(--f-display); letter-spacing: -.03em; }
.belief p { margin: 0; color: var(--text-2); font-size: 15.5px; }

/* ── process: the build pipeline ──────────────────────────────── */
.process { height: 280vh; background: var(--ink-0); }
.process .stage { display: flex; align-items: center; }
.pipe { position: relative; margin-top: 50px; }
.pipe-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.pipe-line { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--line-2); border-radius: 2px; }
.pipe-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--blue) 50%, var(--orange)); }
.pipe-fill::after { content: ""; position: absolute; right: -2px; top: 50%; width: 60px; height: 6px; translate: 0 -50%; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff); opacity: .9; filter: blur(.5px); }
.stage-node { position: relative; display: grid; gap: 14px; align-content: start; }
.stage-node .n { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 99px 99px 99px 12px; background: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); font: 600 15px/1 var(--f-mono); color: var(--text-3); transition: background-color 400ms, color 400ms, box-shadow 400ms; }
.stage-node.is-done .n { background: var(--ink-3); color: var(--hi); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--h) 70%, transparent), 0 0 30px -6px var(--h); }
.stage-node.is-on .n { background: var(--h); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--h) 22%, transparent), 0 0 40px -4px var(--h); }
.stage-node h3 { margin: 0; font: 600 26px/1.05 var(--f-display); letter-spacing: -.035em; color: var(--text-3); transition: color 400ms; }
.stage-node.is-done h3, .stage-node.is-on h3 { color: var(--hi); }
.stage-node p { margin: 0; color: var(--text-3); font-size: 15px; transition: color 400ms; max-width: 30ch; }
.stage-node.is-on p { color: var(--text-2); }
.stage-node .art { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; opacity: .35; transition: opacity 400ms; }
.stage-node.is-on .art, .stage-node.is-done .art { opacity: 1; }
.stage-node .art span { font: 500 11.5px/1 var(--f-mono); padding: 7px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.run-log { margin-top: 44px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px 16px 16px 5px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 13.5px/1.3 var(--f-mono); color: var(--text-2); max-width: 760px; }
.run-log .pr { color: var(--sky); }
.run-log .ok { color: var(--mint); margin-left: auto; }

/* ── engagement models (the team diagram morphs) ─────────────── */
.models { background: var(--ink-1); }
.model-ui { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.model-list { display: grid; gap: 8px; align-content: start; }
.model-list button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; text-align: left; padding: 18px 22px; border-radius: 22px 22px 22px 7px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms, box-shadow 200ms; }
.model-list button:hover { background: var(--fill-1); }
.model-list button b { font: 600 19px/1.15 var(--f-display); letter-spacing: -.025em; }
.model-list button span { grid-column: 1; font-size: 14px; color: var(--text-3); }
.model-list button i { grid-row: 1 / 3; grid-column: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 200ms, transform 300ms var(--ease); }
.model-list button i svg { width: 14px; height: 14px; }
.model-list button[aria-pressed="true"] { background: linear-gradient(90deg, rgba(61,155,255,.12), rgba(61,155,255,.02)); box-shadow: inset 0 0 0 1px rgba(61,155,255,.4); }
.model-list button[aria-pressed="true"] i { background: var(--strong); color: var(--on-strong); transform: rotate(-45deg); }
.model-list .grp { font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 14px 4px 4px; }
.model-view { --h: var(--blue); padding: 34px; display: grid; grid-template-rows: auto 1fr auto; gap: 22px; min-height: 620px; }
.model-view h3 { margin: 0; font: 600 34px/1.05 var(--f-display); letter-spacing: -.04em; }
.model-view .for { color: var(--text-2); margin: 8px 0 0; }
.team-dia { position: relative; min-height: 280px; border-radius: 22px; background: radial-gradient(60% 70% at 50% 50%, rgba(61,155,255,.08), transparent 70%); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.team-dia .zone { position: absolute; border-radius: 26px 26px 26px 8px; transition: all 700ms var(--ease); }
.team-dia .zone span { position: absolute; left: 14px; top: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.team-dia .z-you { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.team-dia .z-you span { color: rgba(255,255,255,.7); }
.team-dia .z-us { background: rgba(61,155,255,.07); box-shadow: inset 0 0 0 1.5px rgba(61,155,255,.5); }
.team-dia .z-us span { color: var(--sky); }
.team-dia .p { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 99px 99px 99px 5px; transition: left 800ms var(--ease), top 800ms var(--ease), opacity 400ms, transform 500ms cubic-bezier(.34,1.56,.64,1); }
.team-dia .p.you { background: #e9eef8; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.team-dia .p.us { background: linear-gradient(160deg, #6ab4ff, var(--navy)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -4px rgba(61,155,255,.6); }
.team-dia .p.us.g { background: linear-gradient(160deg, var(--lime), var(--green)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -4px rgba(20,164,77,.6); }
.team-dia .p.us.o { background: linear-gradient(160deg, var(--amber), #e5701c); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -4px rgba(250,152,58,.6); }
.team-dia .p.ven { background: #59647a; }
.team-dia .p.off { opacity: 0; transform: scale(.3); }
.team-dia .mask { position: absolute; font: 600 12px/1 var(--f-mono); color: rgba(255,255,255,.8); padding: 7px 10px; border-radius: 99px; background: var(--fill-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: opacity 500ms, left 700ms var(--ease), top 700ms var(--ease); }
.model-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.model-facts div { padding: 14px 16px; border-radius: 16px 16px 16px 5px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); }
.model-facts dt { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.model-facts dd { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.4; }
.model-how { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.model-how li { display: flex; gap: 10px; color: var(--text-2); font-size: 15px; }
.model-how li::before { content: ""; flex: none; margin-top: 8px; width: 7px; height: 7px; border-radius: 99px 99px 99px 2px; background: var(--h); }

/* ── work: stacked case panels on paper ──────────────────────── */
.work { background: var(--paper); color: var(--paper-ink); color-scheme: light; border-radius: 48px 48px 0 0; margin-top: -48px; z-index: 2; }
.work .eyebrow { color: var(--paper-ink-2); }
.work .eyebrow b { color: var(--paper-ink); }
.work .lead { color: var(--paper-ink-2); }
.cases { display: grid; gap: 0; }
.case { position: sticky; top: 100px; height: min(640px, 76vh); margin-bottom: 28px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border-radius: var(--r-drop-lg); overflow: hidden; background: var(--paper-card); box-shadow: 0 40px 80px -40px rgba(7,20,40,.35), 0 0 0 1px var(--paper-line); transform-origin: 50% 0; }
.case:nth-child(2) { top: 124px; } .case:nth-child(3) { top: 148px; }
.case-copy { padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; gap: 18px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case-meta span { font: 500 12px/1 var(--f-mono); padding: 8px 11px; border-radius: 99px; background: var(--paper); color: var(--paper-ink-2); }
.case h3 { margin: 0; font: 600 clamp(30px, 3vw, 46px)/1.02 var(--f-display); letter-spacing: -.045em; text-wrap: balance; }
.case h3 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.case p { margin: 0; color: var(--paper-ink-2); font-size: 16px; }
.case-res { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding-top: 20px; border-top: 1px solid var(--paper-line); }
.case-res b { display: block; font: 600 clamp(22px, 2.1vw, 32px)/1.05 var(--f-display); letter-spacing: -.045em; margin-bottom: 4px; }
.case-res span { font-size: 13px; color: var(--paper-ink-2); }
.case-art { position: relative; overflow: hidden; }
.case-art .bg { position: absolute; inset: 0; }
.case-art .shot { position: absolute; left: 9%; top: 12%; right: -4%; bottom: -4%; border-radius: 20px 0 0 0; background: #0b1424; box-shadow: -18px -18px 50px -20px rgba(0,0,0,.5); overflow: hidden; }
.case-sample { position: absolute; right: 16px; top: 16px; z-index: 2; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.85); color: var(--paper-ink-2); }

/* ── insights + careers (paper continues) ─────────────────────── */
.paper-sec { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.paper-sec .eyebrow { color: var(--paper-ink-2); } .paper-sec .eyebrow b { color: var(--paper-ink); } .paper-sec .lead { color: var(--paper-ink-2); }
.posts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--r-drop); background: var(--paper-card); box-shadow: 0 0 0 1px var(--paper-line), 0 24px 50px -36px rgba(7,20,40,.4); overflow: hidden; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--paper-line), 0 34px 60px -30px rgba(7,20,40,.45); }
.post-art { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.post:first-child .post-art { aspect-ratio: 16/11; }
.post-art .cover { position: absolute; inset: 0; transition: transform 900ms var(--ease); }
.post:hover .post-art .cover { transform: scale(1.04); }
.post-body { padding: 22px 24px 24px; display: grid; gap: 10px; }
.post-body .meta { display: flex; gap: 10px; font: 500 12px/1 var(--f-mono); color: var(--paper-ink-2); }
.post-body .meta b { color: var(--paper-ink); font-weight: 500; }
.post h3 { margin: 0; font: 600 22px/1.15 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.post:first-child h3 { font-size: 28px; }
/* generated covers: the post's category drawn in the house shapes */
.cover { background: var(--ink-2); }
.cover .lb { position: absolute; border-radius: 99px 99px 99px 14%; }
.cover .cat { position: absolute; left: 18px; bottom: 16px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); padding: 8px 11px; border-radius: 99px; background: rgba(0,0,0,.25); backdrop-filter: blur(8px); }

.careers { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.roles { display: grid; border-top: 1px solid var(--paper-line); }
.role { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 22px 4px; border-bottom: 1px solid var(--paper-line); transition: padding 300ms var(--ease), background-color 200ms; }
.role:hover { padding-inline: 16px 10px; background: var(--paper-card); }
.role b { font: 600 21px/1.15 var(--f-display); letter-spacing: -.03em; }
.role span { font: 500 12.5px/1 var(--f-mono); color: var(--paper-ink-2); }
.role .go { width: 40px; height: 40px; border-radius: 99px 99px 99px 8px; display: grid; place-items: center; background: var(--paper-ink); color: var(--paper); transition: transform 300ms var(--ease); }
.role:hover .go { transform: rotate(-45deg); }
.role .go svg { width: 15px; height: 15px; }
.culture { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.culture span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 99px; background: var(--paper-card); box-shadow: 0 0 0 1px var(--paper-line), 0 8px 20px -14px rgba(7,20,40,.4); font-size: 14.5px; font-weight: 500; }
.culture span i { width: 26px; height: 26px; border-radius: 99px 99px 99px 5px; }

/* ── FAQ chat ───────────────────────────────────────────────── */
.faq { background: var(--ink-1); }
.faq-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.wkm-chat-qs { display: grid; gap: 8px; align-content: start; }
.wkm-chat-qs button { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; border-radius: 20px 20px 20px 6px; box-shadow: inset 0 0 0 1px var(--line); font: 600 17px/1.3 var(--f-display); letter-spacing: -.02em; transition: background-color 200ms, box-shadow 200ms; }
.wkm-chat-qs button:hover { background: var(--fill-1); }
.wkm-chat-qs button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(61,155,255,.45); background: rgba(61,155,255,.07); }
.wkm-chat-qs .n { flex: none; font: 500 12px/1 var(--f-mono); color: var(--text-3); width: 26px; }
.chat-win { --h: var(--blue); display: grid; grid-template-rows: auto 1fr auto; min-height: 560px; overflow: hidden; }
.wkm-chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.wkm-chat-head b { font: 600 16px/1.2 var(--f-display); }
.wkm-chat-head small { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13px; }
.wkm-chat-av { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 99px 99px 99px 8px; background: #fff; }
.wkm-chat-av img { width: 28px; height: auto; }
.wkm-chat-thread { padding: 22px; overflow: hidden; }
.wkm-chat-thread p { margin: 0; max-width: 86%; font-size: 15.5px; line-height: 1.5; }
.wkm-chat-thread .wkm-me { justify-self: end; padding: 12px 16px; border-radius: 18px 18px 5px 18px; background: var(--blue); color: #fff; }
.wkm-chat-thread .wkm-them { display: flex; gap: 10px; align-items: flex-end; }
.wkm-chat-thread .wkm-them .wkm-chat-av { width: 30px; height: 30px; }
.wkm-chat-thread .wkm-them .wkm-chat-av img { width: 22px; }
.wkm-chat-thread .wkm-them > span:last-child { padding: 12px 16px; border-radius: 18px 18px 18px 5px; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.chat-foot { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; }
.chat-foot .field { flex: 1; height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.wkm-chat-src { display: none; }

/* ── closing: book a call (the real booking flow, inline) ─────── */
.closing { background: var(--ink-0); overflow: hidden; }
.closing .glow { position: absolute; inset: 0; background: radial-gradient(40% 50% at 50% 100%, rgba(0, 65, 116, .7), transparent 70%), radial-gradient(26% 30% at 20% 90%, rgba(20,164,77,.2), transparent 70%), radial-gradient(26% 30% at 82% 88%, rgba(250,152,58,.2), transparent 70%); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.book-card { --h: var(--blue); padding: 28px; border-radius: var(--r-drop-lg); }
.book-tabs { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 22px; }
.book-tabs button { position: relative; z-index: 1; height: 40px; padding: 0 18px; border-radius: 99px; font: 600 14.5px/1 var(--f-body); color: var(--text-2); transition: color 200ms; }
.book-tabs button.is-on { color: var(--on-strong); }
.book-tabs .wkm-glide { background: var(--strong); }
.days { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; }
.days button { display: grid; gap: 4px; justify-items: center; padding: 12px 4px; border-radius: 16px 16px 16px 5px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 160ms, box-shadow 160ms; }
.days button small { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.days button b { font: 600 22px/1 var(--f-display); letter-spacing: -.03em; }
.days button.is-on { background: var(--strong); color: var(--on-strong); box-shadow: none; }
.days button.is-on small { color: color-mix(in srgb, var(--on-strong) 55%, transparent); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.slots button { height: 46px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14.5px/1 var(--f-mono); color: var(--text-2); transition: background-color 160ms, color 160ms, box-shadow 160ms; }
.slots button:hover { color: var(--hi); box-shadow: inset 0 0 0 1px var(--line-2); }
.slots button.is-on { background: color-mix(in srgb, var(--blue) 26%, transparent); box-shadow: inset 0 0 0 1px var(--blue); color: var(--hi); }
.slots button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.tz { display: flex; justify-content: space-between; margin: 16px 0 14px; font: 500 12px/1 var(--f-mono); color: var(--text-3); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields .full { grid-column: 1 / -1; }
.inp { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); outline: none; transition: box-shadow 160ms; font-size: 15.5px; }
.inp:focus { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(61,155,255,.15); }
textarea.inp { height: 96px; padding: 14px 16px; resize: vertical; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.inp::placeholder { color: var(--text-3); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks button { height: 38px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--text-2); transition: all 160ms; }
.picks button[aria-pressed="true"] { background: var(--strong); color: var(--on-strong); box-shadow: none; }
.form-label { display: block; font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 10px; }
.book-go { margin-top: 18px; width: 100%; justify-content: space-between; }
.booked { display: none; text-align: center; padding: 30px 10px; }
.book-card.is-done .booked { display: grid; gap: 14px; justify-items: center; }
.book-card.is-done .book-form { display: none; }
.booked .tick { width: 72px; height: 72px; border-radius: 99px 99px 99px 14px; background: var(--green); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(20,164,77,.15), 0 20px 40px -10px rgba(20,164,77,.6); animation: sc-pop 600ms cubic-bezier(.34,1.56,.64,1) both; }
.booked .tick svg { width: 32px; height: 32px; color: #fff; }
@keyframes sc-pop { from { transform: scale(.4); opacity: 0; } }
.booked h3 { margin: 0; font: 600 30px/1.1 var(--f-display); letter-spacing: -.04em; }
.booked ol { text-align: left; margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-2); }
.booked ol li { display: flex; gap: 10px; }
.booked ol li b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--f-mono); background: var(--fill-3); color: var(--hi); }
.contact-lines { display: grid; gap: 14px; margin-top: 34px; }
.contact-lines a, .contact-lines div { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 16px; }
.contact-lines .drop { width: 40px; height: 40px; }
.contact-lines .drop svg { width: 17px; height: 17px; }

/* ── footer ─────────────────────────────────────────────────── */
.foot { background: var(--ink-0); padding-top: clamp(70px, 9vw, 120px); border-top: 1px solid var(--line); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-brand img { height: 44px; width: auto; }
.foot-brand p { color: var(--text-3); font-size: 15px; margin: 18px 0 22px; max-width: 34ch; }
.foot h4 { margin: 0 0 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { color: var(--text-2); font-size: 15px; transition: color 140ms; }
.foot ul a:hover { color: var(--hi); }
.socials { display: flex; gap: 8px; }
.socials a { width: 42px; height: 42px; border-radius: 99px 99px 99px 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: background-color 160ms, color 160ms; }
.socials a:hover { background: var(--strong); color: var(--on-strong); }
.socials svg { width: 17px; height: 17px; }
.giant { margin: clamp(50px, 7vw, 90px) 0 0; font: 600 clamp(56px, 13.4vw, 196px)/.86 var(--f-display); letter-spacing: -.06em; text-align: center; white-space: nowrap; color: var(--giant);
  --wkm-giant-accent: linear-gradient(90deg, #5aa9ff, var(--blue) 30%, var(--mint) 65%, var(--amber)); }
.giant .wkm-gl:hover { color: var(--sky); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 22px 0 calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--text-3); font-size: 13.5px; }
.foot-base nav { display: flex; gap: 20px; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-links { display: none; } .nav-burger { display: grid; } .nav-cta { display: none; }
  .bento .tile, .bento .tile.w5, .bento .tile.w7, .bento .tile.w8 { grid-column: span 6; }
  .mega { display: none; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .sec-head.split, .model-ui, .faq-ui, .book, .careers { grid-template-columns: 1fr; }
  .beliefs, .posts { grid-template-columns: 1fr; }
  .bento .tile, .bento .tile.w5, .bento .tile.w6, .bento .tile.w7, .bento .tile.w8 { grid-column: 1 / -1; }
  .model-view { min-height: 0; }
  .model-facts { grid-template-columns: 1fr; }
  .case { position: relative; top: 0 !important; height: auto; grid-template-columns: 1fr; }
  .case-art { min-height: 260px; }
}
/* phones: the sticky stories become plain, readable sections */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .nav { height: 58px; padding-left: 16px; }
  .nav-logo { font-size: 19px; } .nav-logo img { height: 26px; }
  .unfold, .process { height: auto; }
  .stage { position: relative; height: auto; overflow: visible; }
  .hero-copy, .practices { position: relative; inset: auto; }
  .hero-copy { padding-top: 130px; }
  .hero-text { padding-top: 0; gap: 24px; }
  .hero-h { font-size: clamp(34px, 9.3vw, 56px); }
  .hero-h .ln { white-space: normal; flex-wrap: wrap; column-gap: .22em; }
  .products .wkm-pin { flex-direction: column; align-items: stretch; padding-block: 90px 60px; }
  .pp-head h2 { font-size: clamp(32px, 9vw, 44px); }
  .cloud-m { position: relative; height: 230px; margin-top: 30px; }
  .floats { display: none; }
  .orbits { width: 160vw; right: -50vw; top: 380px; }
  .practices { padding-block: 70px 30px; }
  .pr-head { margin-bottom: 30px; }
  .pr-cols { grid-template-columns: 1fr; }
  .pr-col { padding-top: 92px; }
  .pr-col .m-lobe { position: absolute; left: 26px; top: 24px; height: 56px; width: auto; }
  .scroll-cue { display: none; }
  .process .stage { padding-block: 90px; }
  .pipe-track { grid-template-columns: 1fr; gap: 26px; }
  .pipe-line { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pipe-fill { transform: none; background: linear-gradient(180deg, var(--green), var(--blue), var(--orange)); }
  .pipe-fill::after { display: none; }
  .stage-node { grid-template-columns: 56px 1fr; column-gap: 18px; }
  .stage-node .n { grid-row: 1 / 4; }
  .stage-node h3, .stage-node p, .stage-node .art { grid-column: 2; }
  .stage-node .art, .stage-node h3, .stage-node p { opacity: 1; color: inherit; }
  .stage-node h3 { color: var(--hi); } .stage-node p { color: var(--text-2); }
  .prod { width: 86vw; height: auto; grid-template-columns: 1fr; }
  .prod-media { min-height: 240px; }
  .ui-pora, .ui-inbox { left: 4%; top: 6%; width: min(280px, 88%); }
  .wkm-track.pp-track { padding: 0 var(--gutter); }
  .pp-head { position: relative; top: 0; margin-bottom: 26px; }
  .pp-head .wrap { flex-direction: column; align-items: start; }
  .pp-steps { display: none; }
  .products .pad-top { padding-top: 90px; }
  .lab-grid { grid-template-columns: 1fr 1fr; }
  .days { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fields { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-base nav { flex-wrap: wrap; }
  .giant { font-size: 18vw; }
  .work { border-radius: 30px 30px 0 0; }
  .role { grid-template-columns: 1fr auto; }
  .role span.loc { display: none; }
  .why-art { display: none; }
  .tile { min-height: 440px; }
}
@media (min-width: 768px) { .cloud-m, .m-lobe { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── the cloud's resting geometry (the logo's own proportions: 327 × 200 units) ── */
.cloud { right: max(var(--gutter), calc((100% - var(--page)) / 2)); top: 50%; width: min(39vw, 600px, 58vh * 1.635); aspect-ratio: 327 / 200; translate: 0 -46%; }
.lobe { transform-origin: 0 0; }
.lobe.navy { left: 24.28%; top: 0; width: 61.19%; z-index: 2; }
.lobe.green { left: .08%; top: 44.75%; width: 33.94%; z-index: 1; }
.lobe.orange { left: 69.39%; top: 56%; width: 30.61%; z-index: 1; }
.lobe-in { position: relative; }
.lobe-in.idle { animation: sc-breathe 9s ease-in-out infinite; }
.lobe.green .lobe-in.idle { animation-duration: 7.5s; animation-delay: -2s; }
.lobe.orange .lobe-in.idle { animation-duration: 8.2s; animation-delay: -4s; }
@keyframes sc-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (min-width: 768px) {
  html.sc-on .practices { opacity: 0; }
  html.sc-on .practices .pr-col, html.sc-on .practices .pr-head { opacity: 0; }
}
@media (max-width: 767px) { .cloud, .orbits { display: none; } }
@media (prefers-reduced-motion: reduce) { .lobe-in.idle { animation: none; } }

/* ═══════════════ INNER PAGES ═══════════════ */
/* page hero: crumbs, eyebrow, big title, lead; a lobe of the practice glows behind */
.phero { position: relative; padding-block: clamp(150px, 20vh, 210px) clamp(56px, 8vw, 110px); overflow: hidden; background: var(--ink-1); }
.phero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 70% at 85% 10%, color-mix(in srgb, var(--ph, var(--blue)) 26%, transparent), transparent 70%), radial-gradient(30% 50% at 0% 100%, rgba(0,65,116,.35), transparent 70%); pointer-events: none; }
.phero .wrap { position: relative; display: grid; gap: 26px; }
.phero .h1 { max-width: 15ch; }
.phero .lead { max-width: 58ch; }
.phero-art { position: absolute; right: -6vw; top: 54%; translate: 0 -46%; width: min(440px, 30vw); pointer-events: none; opacity: .95; }
.phero-art img { width: 100%; height: auto; filter: drop-shadow(0 40px 70px rgba(0,0,0,.6)); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12.5px/1 var(--f-mono); color: var(--text-3); }
.crumbs a:hover { color: var(--hi); }
.crumbs span[aria-current] { color: var(--text-2); }
.phero .row-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; border-radius: 99px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; transition: background-color 160ms; }
.jump a:hover { background: var(--fill-3); }
.jump .drop { width: 32px; height: 32px; border-radius: 99px 99px 99px 6px; }
.jump .drop svg { width: 15px; height: 15px; }

/* service index: a pinned practice panel beside the scrolling list of services (sticky-steps) */
.sx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sx-pin { position: sticky; top: 110px; height: calc(100vh - 150px); min-height: 520px; border-radius: var(--r-drop-lg); overflow: hidden; }
.sx-face { position: absolute; inset: 0; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.sx-face img { position: absolute; right: -8%; top: -6%; width: 78%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); transition: transform 900ms var(--ease); transform: translateY(30px) rotate(-6deg) scale(.92); }
[data-wkm-active="0"] .sx-face[data-i="0"], [data-wkm-active="1"] .sx-face[data-i="1"], [data-wkm-active="2"] .sx-face[data-i="2"] { opacity: 1; transform: none; }
[data-wkm-active="0"] .sx-face[data-i="0"] img, [data-wkm-active="1"] .sx-face[data-i="1"] img, [data-wkm-active="2"] .sx-face[data-i="2"] img { transform: none; }
.sx-face .big { font: 600 clamp(48px, 5.4vw, 84px)/.92 var(--f-display); letter-spacing: -.05em; }
.sx-face .big em { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.sx-face p { margin: 0; color: var(--text-2); max-width: 36ch; font-size: 17px; }
.sx-face .n { font: 500 13px/1 var(--f-mono); color: var(--text-3); }
.sx-list { display: grid; gap: clamp(60px, 9vw, 120px); padding-block: 20px 40vh; }
.sx-step { display: grid; gap: 6px; }
.sx-step > h2 { margin: 0 0 14px; font: 500 12.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 10px; }
.svc { --h: var(--blue); display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 24px 6px; border-top: 1px solid var(--line); transition: padding 300ms var(--ease), background-color 200ms; border-radius: 4px; }
.svc:hover { padding-inline: 20px 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--h) 10%, transparent), transparent); }
.svc h3 { margin: 0; font: 600 clamp(24px, 2.2vw, 32px)/1.08 var(--f-display); letter-spacing: -.035em; }
.svc p { margin: 0; grid-column: 1; color: var(--text-2); font-size: 16px; }
.svc .tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.svc .tags span { font: 500 11.5px/1 var(--f-mono); color: var(--text-3); padding: 7px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.svc .go { grid-row: 1 / 4; grid-column: 2; align-self: center; width: 46px; height: 46px; border-radius: 99px 99px 99px 9px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 200ms, color 200ms, transform 300ms var(--ease); }
.svc:hover .go { background: var(--h); color: #fff; transform: rotate(-45deg); box-shadow: none; }
.svc .go svg { width: 17px; height: 17px; }

/* tech hub: our mark at the centre, tools on spokes, pulses travel the spokes */
.hub { position: relative; width: min(820px, 100%); aspect-ratio: 1; margin: 0 auto; }
.hub svg.spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub .sp { stroke: rgba(140,200,255,.16); stroke-width: 1; }
.hub .pl { stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 300; fill: none; animation: sc-spoke 3.6s linear infinite; }
@keyframes sc-spoke { from { stroke-dashoffset: 306; } to { stroke-dashoffset: 0; } }
.hub .core { position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, #1b3560, #08152b); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 80px -10px rgba(61,155,255,.5); }
.hub .core img { width: 64%; }
.hub .node { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 8px; font: 500 12.5px/1 var(--f-mono); color: var(--text-2); }
.hub .node span { width: 64px; height: 64px; border-radius: 20px 20px 20px 6px; display: grid; place-items: center; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -14px rgba(0,0,0,.8); transition: transform 300ms var(--ease); }
.hub .node:hover span { transform: translateY(-4px); }
.hub .node img { width: 32px; height: 32px; object-fit: contain; }
.hub .ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(140,200,255,.08); }

/* generic sections */
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.feat { --h: var(--blue); padding: 30px; display: grid; gap: 14px; align-content: start; }
.feat h3 { margin: 6px 0 0; font: 600 24px/1.1 var(--f-display); letter-spacing: -.03em; }
.feat p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.feat ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.feat ul li { font: 500 12px/1 var(--f-mono); color: var(--text-2); padding: 7px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.feat.big { grid-column: span 2; }
.ba { display: grid; gap: 10px; }
.ba-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 10px; }
.ba-row span { padding: 18px 20px; border-radius: 18px 18px 18px 6px; font-size: 16px; }
.ba-row .b { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; text-decoration-color: rgba(255,122,89,.5); }
.ba-row .a { color: var(--hi); background: color-mix(in srgb, var(--h, var(--green)) 14%, var(--ink-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h, var(--green)) 40%, transparent); }
.ba-row i { display: grid; place-items: center; color: var(--text-3); }
.ba-row i svg { width: 18px; height: 18px; }
.models-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mdl { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 20px 20px 20px 6px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.mdl b { display: block; font: 600 16px/1.2 var(--f-display); }
.mdl small { color: var(--text-3); font-size: 13px; }
.mdl i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 700 14px/1 var(--f-display); color: #fff; }
.signals { display: flex; flex-wrap: wrap; gap: 10px; }
.signals span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 99px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.signals span svg { width: 16px; height: 16px; color: var(--mint); }
/* sticky steps (approach) */
.ss { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); }
.ss-vis { position: sticky; top: 120px; height: min(520px, calc(100vh - 170px)); }
.ss-vis .card { position: absolute; inset: 0; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
.ss-vis .card .num { font: 600 clamp(110px, 12vw, 180px)/.8 var(--f-display); letter-spacing: -.06em; background: linear-gradient(160deg, color-mix(in srgb, var(--h) 80%, #fff), color-mix(in srgb, var(--h) 30%, transparent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: .06em .04em 0; margin: -.06em -.04em 0; }
.ss-steps { display: grid; gap: 0; padding-bottom: 30vh; }
.ss-step { padding: 34px 0; border-top: 1px solid var(--line); opacity: .38; transition: opacity 400ms; min-height: 46vh; }
.ss-step.is-active { opacity: 1; }
.ss-step h3 { margin: 0 0 10px; font: 600 clamp(26px, 2.4vw, 34px)/1.08 var(--f-display); letter-spacing: -.035em; }
.ss-step p { margin: 0 0 14px; color: var(--text-2); font-size: 16.5px; max-width: 46ch; }
.ss-step .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-step .tags span { font: 500 12px/1 var(--f-mono); color: var(--text-2); padding: 7px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-drop-lg); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: end; gap: 30px;
  background: radial-gradient(60% 90% at 100% 100%, rgba(0, 65, 116, .9), transparent 70%), radial-gradient(40% 60% at 0% 0%, rgba(20,164,77,.2), transparent 70%), var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.cta-band .h2 { max-width: 16ch; }
.cta-band img.pill { position: absolute; right: -40px; top: -40px; width: 260px; opacity: .9; pointer-events: none; }

/* filters (glide tabs) */
.filters { display: inline-flex; flex-wrap: wrap; padding: 5px; border-radius: 99px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); }
.filters button { position: relative; z-index: 1; height: 42px; padding: 0 18px; border-radius: 99px; font: 500 14.5px/1 var(--f-body); color: var(--text-2); transition: color 200ms; }
.filters button.is-on { color: var(--on-strong); }
.filters .wkm-glide { background: var(--strong); top: 5px; bottom: 5px; }
.paper-sec .filters { background: var(--paper-card); box-shadow: 0 0 0 1px var(--paper-line); }
.paper-sec .filters button { color: var(--paper-ink-2); }
.paper-sec .filters button.is-on { color: var(--paper); }
.paper-sec .filters .wkm-glide { background: var(--paper-ink); }

/* work grid */
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.wcard { display: grid; gap: 18px; }
.wcard .art { position: relative; aspect-ratio: 16/11; border-radius: var(--r-drop-lg); overflow: hidden; }
.wcard .art .bg { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.wcard .art .shot { position: absolute; left: 10%; top: 12%; right: -3%; bottom: -3%; border-radius: 18px 0 0 0; overflow: hidden; box-shadow: -16px -16px 40px -18px rgba(0,0,0,.6); transition: transform 1s var(--ease); }
.wcard .art .shot img { width: 100%; }
.wcard:hover .art .shot { transform: translate(-10px, -10px); }
.wcard:hover .art .bg { transform: scale(1.05); }
.wcard .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.wcard .meta span { font: 500 12px/1 var(--f-mono); padding: 8px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--paper-line); color: var(--paper-ink-2); }
.wcard h3 { margin: 0; font: 600 clamp(24px, 2.2vw, 32px)/1.08 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.wcard h3 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.wcard p { margin: 0; color: var(--paper-ink-2); }
.wcard.is-hidden { display: none; }
.tag-inhouse { position: absolute; left: 16px; top: 16px; z-index: 2; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 8px 11px; border-radius: 99px; background: rgba(0,0,0,.4); color: #fff; backdrop-filter: blur(8px); }

/* case study */
.case-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.meta-panel { display: grid; gap: 0; border-radius: 22px 22px 22px 7px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.meta-panel div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 15px; }
.meta-panel div:first-child { border-top: 0; }
.meta-panel dt { font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.meta-panel dd { margin: 0; color: var(--text); }
.bigshot { position: relative; border-radius: var(--r-drop-lg); overflow: hidden; aspect-ratio: 16/8.4; }
.bigshot .bg { position: absolute; inset: 0; }
.bigshot .frame { position: absolute; left: 8%; right: 8%; top: 10%; bottom: -2%; border-radius: 20px 20px 0 0; overflow: hidden; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.6); }
.bigshot .frame img { width: 100%; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.stat-c { --h: var(--blue); padding: 28px; display: grid; gap: 8px; }
.stat-c b { font: 600 clamp(40px, 4vw, 60px)/1 var(--f-display); letter-spacing: -.05em; }
.stat-c span { color: var(--text-2); font-size: 15px; }
.quote { position: relative; padding: clamp(36px, 5vw, 70px); border-radius: var(--r-drop-lg); background: var(--paper); color: var(--paper-ink); }
.quote blockquote { margin: 0; font: 500 clamp(26px, 3vw, 42px)/1.2 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.quote blockquote em { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.quote figcaption { margin-top: 26px; display: flex; align-items: center; gap: 14px; color: var(--paper-ink-2); }
.quote figcaption b { color: var(--paper-ink); display: block; }
.quote .av { width: 48px; height: 48px; border-radius: 99px 99px 99px 9px; background: linear-gradient(160deg, #8cc8ff, var(--navy)); }
.next-case { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 40px 0; border-top: 1px solid var(--line); }
.next-case b { font: 600 clamp(32px, 4vw, 60px)/1 var(--f-display); letter-spacing: -.045em; }

/* products page */
.prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 90px); }
.prow.rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.prow.rev .prow-copy { order: 2; }
.prow-copy { display: grid; gap: 18px; align-content: start; }
.prow-copy h2 { margin: 0; font: 600 clamp(36px, 4vw, 60px)/1 var(--f-display); letter-spacing: -.045em; }
.prow-copy h2 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; color: var(--pa); }
.prow-art { position: relative; border-radius: var(--r-drop-lg); overflow: hidden; aspect-ratio: 992/600; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.prow-art img { width: 100%; height: 100%; object-fit: cover; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feature-list li { display: flex; gap: 12px; align-items: baseline; color: var(--text-2); }
.feature-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 99px 99px 99px 2px; background: var(--pa, var(--blue)); translate: 0 -1px; }

/* comparison table */
.tbl-wrap { overflow-x: auto; border-radius: 24px 24px 24px 8px; box-shadow: inset 0 0 0 1px var(--line); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 15px; }
table.cmp th, table.cmp td { text-align: left; padding: 18px 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); vertical-align: top; }
table.cmp th:first-child, table.cmp td:first-child { border-left: 0; }
table.cmp thead th { border-top: 0; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: var(--fill-1); }
table.cmp td b { font: 600 17px/1.2 var(--f-display); letter-spacing: -.02em; }
table.cmp td { color: var(--text-2); }
table.cmp tr:hover td { background: var(--fill-1); }

/* about */
.equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.equation .card { padding: 30px; min-height: 260px; display: grid; align-content: space-between; gap: 18px; }
.equation .op { font: 300 54px/1 var(--f-display); color: var(--text-3); }
.equation .card h3 { margin: 0; font: 600 34px/1 var(--f-display); letter-spacing: -.04em; }
.equation .card p { margin: 0; color: var(--text-2); }
.pillars { display: grid; gap: 0; }
.pillar { position: sticky; top: 96px; display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 30px; padding: 40px; border-radius: var(--r-drop-lg); margin-bottom: 24px; min-height: 360px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 -20px 60px -30px rgba(0,0,0,.8); }
.pillar:nth-child(2) { top: 116px; } .pillar:nth-child(3) { top: 136px; } .pillar:nth-child(4) { top: 156px; }
.pillar .no { font: 600 72px/.9 var(--f-display); letter-spacing: -.06em; color: var(--h); }
.pillar h3 { margin: 0 0 12px; font: 600 clamp(32px, 3.2vw, 48px)/1 var(--f-display); letter-spacing: -.045em; }
.pillar .sub { margin: 0; color: var(--text-2); font-family: var(--f-serif); font-style: italic; font-size: 24px; line-height: 1.3; }
.pillar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.pillar ul li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px 16px 16px 5px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); }
.pillar ul li::before { content: ""; flex: none; margin-top: 8px; width: 8px; height: 8px; border-radius: 99px 99px 99px 2px; background: var(--h); }
.pillar .close { grid-column: 2 / -1; margin: 0; color: var(--text); font-weight: 500; }
.promise { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; gap: 0; }
.promise li { counter-increment: p; display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--line); font: 500 clamp(22px, 2.4vw, 34px)/1.2 var(--f-display); letter-spacing: -.03em; }
.promise li::before { content: "0" counter(p); font: 500 14px/1 var(--f-mono); color: var(--text-3); letter-spacing: 0; }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vm .card { padding: 36px; display: grid; gap: 16px; }
.vm .card p { margin: 0; font: 500 clamp(20px, 1.8vw, 26px)/1.35 var(--f-display); letter-spacing: -.02em; }

/* careers */
.perks { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.perk { --h: var(--blue); padding: 26px; display: grid; gap: 12px; align-content: start; }
.perk h3 { margin: 6px 0 0; font: 600 21px/1.15 var(--f-display); letter-spacing: -.025em; }
.perk p { margin: 0; color: var(--text-2); font-size: 15px; }
.hire { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; counter-reset: h; }
.hire li { list-style: none; counter-increment: h; position: relative; padding: 70px 24px 0 0; }
.hire li::before { content: counter(h); position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 99px 99px 99px 9px; display: grid; place-items: center; font: 600 16px/1 var(--f-mono); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.hire li::after { content: ""; position: absolute; left: 58px; right: 12px; top: 23px; height: 1px; background: var(--line-2); }
.hire li:last-child::after { display: none; }
.hire b { display: block; font: 600 20px/1.2 var(--f-display); letter-spacing: -.02em; margin-bottom: 6px; }
.hire span { color: var(--text-2); font-size: 15px; }

/* job + apply */
.job { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.prose { font-size: 17.5px; line-height: 1.7; color: var(--text-2); }
.prose h2 { font: 600 30px/1.15 var(--f-display); letter-spacing: -.035em; color: var(--text); margin: 48px 0 14px; }
.prose h3 { font: 600 22px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--text); margin: 34px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 0 0 18px; }
.prose ul li { display: flex; gap: 12px; }
.prose ul li::before { content: ""; flex: none; margin-top: 11px; width: 7px; height: 7px; border-radius: 99px 99px 99px 2px; background: var(--blue); }
.prose strong { color: var(--text); font-weight: 600; }
.prose blockquote { margin: 28px 0; padding: 22px 26px; border-radius: 20px 20px 20px 6px; background: color-mix(in srgb, var(--green) 10%, var(--ink-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); color: var(--text); font: 500 21px/1.45 var(--f-display); letter-spacing: -.015em; }
.prose code { font-family: var(--f-mono); font-size: .88em; padding: 2px 7px; border-radius: 6px; background: var(--fill-2); color: var(--sky); }
.prose pre { margin: 0 0 22px; padding: 20px 22px; border-radius: 18px 18px 18px 6px; background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; font: 14px/1.6 var(--f-mono); color: var(--text-2); }
.apply { position: sticky; top: 104px; padding: 28px; border-radius: var(--r-drop-lg); }
.apply h3 { margin: 0 0 6px; font: 600 26px/1.1 var(--f-display); letter-spacing: -.035em; }
.dz { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border-radius: 18px 18px 18px 6px; text-align: center; color: var(--text-2); font-size: 14.5px; background: var(--fill-1); box-shadow: inset 0 0 0 1.5px var(--line-2); border: 0; cursor: pointer; transition: background-color 200ms, box-shadow 200ms; position: relative; }
.dz:hover, .dz.is-over { background: rgba(61,155,255,.07); box-shadow: inset 0 0 0 1.5px var(--blue); }
.dz svg { width: 26px; height: 26px; color: var(--sky); }
.dz small { color: var(--text-3); font-size: 12.5px; }
.dz input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-chip { display: none; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--green) 12%, var(--ink-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent); font-size: 14.5px; }
.file-chip.on { display: flex; }
.file-chip svg { width: 20px; height: 20px; color: var(--mint); }
.file-chip .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--fill-3); overflow: hidden; }
.file-chip .bar i { display: block; height: 100%; width: 0; background: var(--mint); transition: width 1.2s var(--ease); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-3); margin-top: 12px; }
.consent input { margin-top: 3px; accent-color: var(--blue); }
.job-facts { display: flex; flex-wrap: wrap; gap: 8px; }

/* insights */
.feat-post { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border-radius: var(--r-drop-lg); overflow: hidden; background: var(--paper-card); box-shadow: 0 0 0 1px var(--paper-line), 0 40px 80px -50px rgba(7,20,40,.5); }
.feat-post .post-art { aspect-ratio: auto; min-height: 420px; }
.feat-post .post-body { padding: clamp(28px, 4vw, 54px); align-content: center; gap: 16px; }
.feat-post h3 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.05; }
.plist { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.plist .post.is-hidden { display: none; }
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 30px; padding: clamp(32px, 5vw, 60px); border-radius: var(--r-drop-lg); background: var(--news-bg); color: #fff; }
.news form { display: flex; gap: 8px; padding: 6px; border-radius: 99px; background: var(--fill-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.news input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0 16px; color: #fff; font-size: 16px; }
.news input::placeholder { color: rgba(255,255,255,.5); }

/* article */
.read-bar { position: fixed; left: 0; top: 0; z-index: 80; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--blue), var(--orange)); }
.art-head { display: grid; gap: 22px; max-width: 900px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--text-3); font-size: 14.5px; }
.art-meta .av { width: 40px; height: 40px; border-radius: 99px 99px 99px 8px; display: grid; place-items: center; background: #fff; }
.art-meta .av img { width: 28px; }
.art-meta b { color: var(--text); font-weight: 600; }
.art { display: grid; grid-template-columns: 240px minmax(0, 720px) 1fr; gap: clamp(28px, 4vw, 64px); }
.toc { position: sticky; top: 110px; align-self: start; display: grid; gap: 4px; }
.toc b { font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.toc a { padding: 8px 12px; border-radius: 10px; color: var(--text-3); font-size: 14.5px; transition: color 160ms, background-color 160ms; position: relative; }
.toc a.is-on { color: var(--hi); background: rgba(61,155,255,.1); }
.toc a.is-on::before { content: ""; position: absolute; left: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 99px 99px 99px 1px; background: var(--blue); }
.share { position: sticky; top: 110px; align-self: start; display: grid; gap: 8px; justify-items: start; }
.share a, .share button { width: 44px; height: 44px; border-radius: 99px 99px 99px 9px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: all 160ms; }
.share a:hover, .share button:hover { background: var(--strong); color: var(--on-strong); }
.share svg { width: 17px; height: 17px; }
.author { display: flex; gap: 18px; align-items: center; padding: 26px; border-radius: 24px 24px 24px 8px; box-shadow: inset 0 0 0 1px var(--line); margin-top: 40px; }
.author .av { width: 60px; height: 60px; border-radius: 99px 99px 99px 12px; display: grid; place-items: center; background: #fff; flex: none; }
.author .av img { width: 40px; }

/* contact / start a project */
.wiz { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-drop-lg); }
.wiz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.wiz-steps { display: flex; gap: 6px; }
.wiz-steps i { width: 40px; height: 6px; border-radius: 3px; background: var(--fill-4); transition: background-color 400ms; }
.wiz-steps i.on { background: linear-gradient(90deg, var(--blue), var(--sky)); }
.wiz-step { display: none; }
.wiz-step.on { display: grid; gap: 16px; animation: sc-step 500ms var(--ease) both; }
@keyframes sc-step { from { opacity: 0; transform: translateX(16px); } }
.wiz-step h3 { margin: 0; font: 600 clamp(26px, 2.6vw, 36px)/1.08 var(--f-display); letter-spacing: -.035em; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.opt { --h: var(--blue); display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px 18px 18px 6px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms, box-shadow 200ms; }
.opt:hover { background: var(--fill-1); }
.opt[aria-pressed="true"] { background: color-mix(in srgb, var(--h) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--h); }
.opt b { display: block; font: 600 16px/1.2 var(--f-display); }
.opt small { color: var(--text-3); font-size: 13px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { height: 44px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 14.5px; transition: all 160ms; }
.seg button[aria-pressed="true"] { background: var(--strong); color: var(--on-strong); box-shadow: none; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.online { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 99px; background: rgba(20,164,77,.1); box-shadow: inset 0 0 0 1px rgba(20,164,77,.35); color: var(--lime); font-size: 14.5px; }
.online .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: sc-pulse 2s infinite; }
.promises { display: grid; gap: 12px; }
.promises div { display: flex; gap: 14px; align-items: flex-start; }
.promises b { display: block; font: 600 17px/1.3 var(--f-display); }
.promises span { color: var(--text-2); font-size: 15px; }

@media (max-width: 1100px) {
  .art { grid-template-columns: minmax(0, 1fr); }
  .toc, .share { display: none; }
  .perks { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .sx, .ss, .split2, .case-hero, .job, .prow, .prow.rev, .feat-post, .news, .vm, .cta-band { grid-template-columns: 1fr; }
  .prow.rev .prow-copy { order: 0; }
  .sx-pin { display: none; }
  .sx-list { padding-bottom: 0; }
  .ss-vis { display: none; }
  .ss-step { min-height: 0; opacity: 1; }
  .ss-steps { padding-bottom: 0; }
  .grid3, .plist, .wgrid { grid-template-columns: 1fr; }
  .feat.big { grid-column: auto; }
  .stats4 { grid-template-columns: 1fr 1fr; }
  .equation { grid-template-columns: 1fr; }
  .equation .op { justify-self: center; }
  .pillar { position: relative; top: 0 !important; grid-template-columns: 1fr; padding: 28px; }
  .pillar .close { grid-column: auto; }
  .hire { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .hire li::after { display: none; }
  .apply { position: relative; top: 0; }
  .phero-art { opacity: .35; width: 70vw; right: -30vw; }
  .opts { grid-template-columns: 1fr; }
  .ba-row { grid-template-columns: 1fr; }
  .ba-row i { rotate: 90deg; }
}
@media (max-width: 560px) { .perks, .grid2 { grid-template-columns: 1fr; } .stats4 { grid-template-columns: 1fr; } }
[data-wkm-active="0"] .ss-vis .card[data-i="0"], [data-wkm-active="1"] .ss-vis .card[data-i="1"], [data-wkm-active="2"] .ss-vis .card[data-i="2"], [data-wkm-active="3"] .ss-vis .card[data-i="3"], [data-wkm-active="4"] .ss-vis .card[data-i="4"] { opacity: 1; transform: none; }

.paths { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.wiz.is-done .wiz-form { display: none; }
.wiz.is-done .booked { display: grid; gap: 14px; justify-items: center; }
.apply.is-done .apply-form { display: none; }
.apply.is-done .booked { display: grid; gap: 14px; justify-items: center; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }
.phero .tile { grid-column: auto; }
.case-hero .h1 { font-size: clamp(42px, 5.2vw, 80px); }
@media (min-width: 861px) { .phero:has(.phero-art) .wrap { padding-right: min(24vw, 360px); } }
[hidden] { display: none !important; }

/* surfaces that are dark in BOTH themes (devices, product panels, glass chips over silk) keep their own light ink */
.d-phone, .d-push, .prod, .prod.intro, .prod.lab, .ui-pora, .case-art .shot, .bigshot, .news { color: #edf3ff; }
.prod .chip { color: rgba(237,243,255,.75); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* ═══════════════ LIGHT THEME ═══════════════
   Day in the sanctuary: a cool paper ground, white surfaces lifted by soft navy shadows and a hairline,
   the same three logo hues (deepened so they read on white), and the "paper" sheets invert to deep navy
   so the page keeps its rhythm of light and dark. Set by html[data-sc-theme="light"] (the nav toggle). */
html[data-sc-theme="light"] {
  color-scheme: light;
  --ink-0: #eaf0f7;
  --ink-1: #f5f8fc;
  --ink-2: #ffffff;
  --ink-3: #ffffff;
  --ink-4: #dde6f1;
  --line: rgba(12, 36, 78, .1);
  --line-2: rgba(12, 36, 78, .17);
  --text: #08162e;
  --text-2: #46546f;
  --text-3: #75839c;
  --blue: #1a6fe0;
  --sky: #1b6fcf;
  --mint: #0f9448;
  --lime: #2e7d2a;
  --amber: #d4731a;
  --rose: #e2553a;
  --hi: #050d1b;
  --strong: #08162e;
  --on-strong: #ffffff;
  --fill-1: rgba(12, 36, 78, .025);
  --fill-2: rgba(12, 36, 78, .045);
  --fill-3: rgba(12, 36, 78, .07);
  --fill-4: rgba(12, 36, 78, .1);
  --glass: rgba(255, 255, 255, .74);
  --glass-2: rgba(255, 255, 255, .9);
  --glass-3: rgba(245, 248, 252, .97);
  --glass-chip: rgba(255, 255, 255, .82);
  --sh-card: 0 24px 50px -30px rgba(10, 40, 90, .28), 0 1px 3px rgba(10, 40, 90, .08);
  --paper: #071428;
  --paper-2: #0d1d38;
  --paper-ink: #edf3ff;
  --paper-ink-2: #a8b6cf;
  --paper-line: rgba(148, 186, 255, .14);
  --paper-card: #0f2140;
  --news-bg: #13284a;
  --giant: #dbe4f0;
  --lobe-shadow: rgba(10, 40, 90, .28);
  --orbit: rgba(12, 60, 140, .12);
  --wkm-accent: var(--blue);
}
html[data-sc-theme="light"] .stage-sky::before { background:
  radial-gradient(50% 60% at 78% 40%, rgba(26, 111, 224, .14), transparent 70%),
  radial-gradient(32% 40% at 62% 82%, rgba(20, 164, 77, .1), transparent 70%),
  radial-gradient(28% 34% at 95% 78%, rgba(250, 152, 58, .12), transparent 70%); }
html[data-sc-theme="light"] .phero::before { background: radial-gradient(46% 70% at 85% 10%, color-mix(in srgb, var(--ph, var(--blue)) 14%, transparent), transparent 70%); }
html[data-sc-theme="light"] .closing .glow { background: radial-gradient(40% 50% at 50% 100%, rgba(26,111,224,.16), transparent 70%), radial-gradient(26% 30% at 20% 90%, rgba(20,164,77,.1), transparent 70%), radial-gradient(26% 30% at 82% 88%, rgba(250,152,58,.12), transparent 70%); }
html[data-sc-theme="light"] .card { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--h) 9%, transparent), transparent 55%), #fff; }
html[data-sc-theme="light"] .card::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 18%, var(--line)), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-sc-theme="light"] .lobe.navy img { filter: drop-shadow(0 30px 50px rgba(0, 50, 110, .3)); }
html[data-sc-theme="light"] .lobe .halo { opacity: .18; }
html[data-sc-theme="light"] .btn { box-shadow: 0 12px 30px -12px rgba(8, 22, 46, .45), 0 1px 2px rgba(8,22,46,.2); }
html[data-sc-theme="light"] .btn.ghost { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-sc-theme="light"] .nav, html[data-sc-theme="light"] .mega { box-shadow: inset 0 0 0 1px var(--line), 0 18px 50px -24px rgba(10, 40, 90, .3); }
html[data-sc-theme="light"] .tech { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -14px rgba(10,40,90,.25); }
html[data-sc-theme="light"] .stackband { background: var(--ink-0); }
html[data-sc-theme="light"] .tech img[src*="open.svg"], html[data-sc-theme="light"] .hub img[src*="open.svg"] { filter: none !important; }
html[data-sc-theme="light"] .badges img { box-shadow: inset 0 0 0 1px var(--line); }
html[data-sc-theme="light"] .float { box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -20px rgba(10, 40, 90, .35); }
html[data-sc-theme="light"] .d-pipe .live { color: #1c6b25; }
html[data-sc-theme="light"] .hub .core { background: radial-gradient(circle at 35% 25%, #ffffff, #e8eef7); box-shadow: inset 0 0 0 1px var(--line), 0 0 80px -10px rgba(26,111,224,.3); }
html[data-sc-theme="light"] .hub .node span { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -16px rgba(10,40,90,.35); }
html[data-sc-theme="light"] .team-dia .p.you { background: #c9d4e4; }
html[data-sc-theme="light"] .team-dia .z-you { box-shadow: inset 0 0 0 1.5px rgba(12,36,78,.25); }
html[data-sc-theme="light"] .team-dia .z-you span { color: var(--text-2); }
html[data-sc-theme="light"] .mega-promo { background: var(--ink-0); }
html[data-sc-theme="light"] .pillar { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 -20px 60px -40px rgba(10,40,90,.35); }
html[data-sc-theme="light"] .pillar ul li { background: var(--ink-1); }
html[data-sc-theme="light"] .meta-panel, html[data-sc-theme="light"] .tbl-wrap { background: #fff; }
html[data-sc-theme="light"] .prose pre { background: #0a1730; color: #cfe0ff; }
html[data-sc-theme="light"] .prose blockquote { background: color-mix(in srgb, var(--green) 8%, #fff); }
html[data-sc-theme="light"] .work, html[data-sc-theme="light"] .paper-sec { color-scheme: dark; }
html[data-sc-theme="light"] .case-sample, html[data-sc-theme="light"] .case-meta span { color: #46546f; }
html[data-sc-theme="light"] .case-meta span { background: rgba(255,255,255,.08); color: var(--paper-ink-2); }
html[data-sc-theme="light"] .post:hover { box-shadow: 0 0 0 1px var(--paper-line), 0 34px 60px -30px rgba(0,0,0,.6); }
html[data-sc-theme="light"] .ss-vis .card .num { background: linear-gradient(160deg, var(--h), color-mix(in srgb, var(--h) 35%, transparent)); -webkit-background-clip: text; background-clip: text; }

/* theme switch (nav) */
.theme-tg { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: color 160ms, background-color 160ms; margin-left: 6px; }
.theme-tg:hover { color: var(--hi); background: var(--fill-2); }
.theme-tg svg { width: 18px; height: 18px; }
.theme-tg .sun { display: none; }
html[data-sc-theme="light"] .theme-tg .sun { display: block; }
html[data-sc-theme="light"] .theme-tg .moon { display: none; }

/* ═══════════════ V2 — need-first stories, daylight on warm paper ═══════════════ */
/* light theme retuned (references: warm paper grounds, white cards lifted by long tinted shadows, ink bands) */
html[data-sc-theme="light"] {
  --ink-0: #ebe7df;
  --ink-1: #f3f0ea;
  --ink-4: #e2ddd3;
  --text: #0b1220;
  --text-2: #4b5262;
  --text-3: #868b95;
  --line: rgba(20, 18, 14, .08);
  --line-2: rgba(20, 18, 14, .14);
  --fill-1: rgba(20, 18, 14, .025);
  --fill-2: rgba(20, 18, 14, .045);
  --fill-3: rgba(20, 18, 14, .07);
  --fill-4: rgba(20, 18, 14, .1);
  --sh-card: 0 0 0 0 transparent, 0 30px 70px -40px rgba(58, 46, 24, .32), 0 1px 2px rgba(58, 46, 24, .08);
  --glass: rgba(255, 253, 249, .78);
  --glass-2: rgba(255, 253, 249, .92);
  --glass-3: rgba(243, 240, 234, .97);
  --paper: #0a0f1a;
  --paper-2: #111827;
  --paper-card: #121a2b;
  --news-bg: #182238;
  --giant: #e2ddd3;
  --lobe-shadow: rgba(58, 46, 24, .25);
}
html[data-sc-theme="light"] .card::after { box-shadow: inset 0 0 0 1px rgba(20,18,14,.07), inset 0 1px 0 #fff; }
html[data-sc-theme="light"] .card { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--h) 7%, transparent), transparent 55%), #fff; }

/* two-tone titles: a grotesk line, then the serif italic line in the accent */
.tt { display: grid; }
.tt > span:last-child { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--sky); padding-bottom: .04em; }

/* ── NAV GATHER — three pills (mark · links · actions) spread at the top, glide together on scroll ── */
.navg { position: fixed; z-index: 60; top: calc(14px + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2)); pointer-events: none; }
.navg.is-gathered { justify-content: center; gap: 6px; }
.navg > .pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; height: 58px; padding: 0 8px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.07), 0 18px 50px -24px rgba(0,0,0,.45); will-change: transform; }
.navg .p-logo { padding: 0 20px 0 14px; }
.navg .p-links { padding: 0 6px; }
.navg .nav-links > a, .navg .nav-links > button { height: 44px; }
.navg .p-act { padding: 0 7px 0 7px; gap: 6px; }
.navg .theme-tg { margin: 0; }
.navg .nav-burger { display: none; }
@media (max-width: 1100px) { .navg .p-links { display: none; } .navg .nav-burger { display: grid; } .navg .nav-cta { display: none; } }
@media (max-width: 767px) { .navg .p-logo { padding: 0 14px 0 12px; } .navg > .pill { height: 54px; } }
html[data-sc-theme="light"] .navg > .pill { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(58,46,24,.4); }

/* ── HANDOFF — the visitor's backlog is routed, item by item, to the three practices (the logo lobes) ── */
.handoff { height: 400vh; background: var(--ink-0); }
.handoff .stage { display: flex; align-items: center; }
.ho { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ho-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 8px; }
.ho-list { --h: var(--blue); padding: 26px 28px 22px; }
.ho-list .top { display: flex; justify-content: space-between; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.ho-item { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 17px; }
.ho-item .box { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; transition: background-color 300ms, box-shadow 300ms; }
.ho-item .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity 200ms, transform 400ms cubic-bezier(.34,1.56,.64,1); }
.ho-item .txt { position: relative; color: var(--text); transition: color 300ms; }
.ho-item .txt::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease); }
.ho-item .who { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 6px; border-radius: 99px; font: 500 12.5px/1 var(--f-body); color: var(--text-2); background: var(--fill-2); opacity: 0; transform: translateX(8px); transition: opacity 300ms, transform 400ms var(--ease); }
.ho-item .who i { width: 16px; height: 16px; border-radius: 99px 99px 99px 3px; background: var(--h); }
.ho-item.is-done .box { background: var(--h); box-shadow: none; }
.ho-item.is-done .box svg { opacity: 1; transform: none; }
.ho-item.is-done .txt { color: var(--text-3); }
.ho-item.is-done .txt::after { transform: scaleX(1); }
.ho-item.is-done .who { opacity: 1; transform: none; }
.ho-foot { display: flex; justify-content: space-between; align-items: end; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 4px; }
.ho-foot small { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ho-foot b { font: 600 clamp(48px, 5vw, 76px)/.9 var(--f-display); letter-spacing: -.05em; color: var(--sky); font-variant-numeric: tabular-nums; }
.ho-owners { display: grid; gap: 14px; }
.owner { --h: var(--blue); display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 18px; padding: 16px 22px 16px 16px; border-radius: 26px 26px 26px 8px; transition: box-shadow 400ms, transform 400ms cubic-bezier(.34,1.56,.64,1); }
.owner img { width: 74px; height: 64px; object-fit: contain; }
.owner b { display: block; font: 600 22px/1.1 var(--f-display); letter-spacing: -.03em; }
.owner span { font-size: 14px; color: var(--text-3); }
.owner .n { font: 600 15px/1 var(--f-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.owner.is-hit { transform: scale(1.02); }
.owner.is-hit::after { box-shadow: inset 0 0 0 2px var(--h), 0 0 0 6px color-mix(in srgb, var(--h) 16%, transparent) !important; }
.fly { position: fixed; z-index: 40; left: 0; top: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: 99px; background: var(--strong); color: var(--on-strong); font: 500 13.5px/1 var(--f-body); white-space: nowrap; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); }
.fly i { width: 16px; height: 16px; border-radius: 99px 99px 99px 3px; background: var(--h); }

/* ── BRIEF → PLAN — a typed brief, its key phrases highlighted, wired to the plan it becomes ── */
.brief { height: 300vh; background: var(--ink-1); }
.brief .stage { display: flex; align-items: center; }
.bp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(60px, 9vw, 150px); align-items: center; }
.bp-card { --h: var(--blue); padding: 26px 28px; }
.bp-card .top { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px; }
.bp-card .top .av { width: 26px; height: 26px; border-radius: 99px 99px 99px 5px; background: linear-gradient(160deg, var(--amber), #e5701c); }
.bp-card .top em { margin-left: auto; font-style: normal; padding: 6px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-2); }
.bp-text { margin: 0; font: 500 clamp(22px, 2.15vw, 31px)/1.42 var(--f-display); letter-spacing: -.025em; min-height: 6.2em; }
.bp-text .ch { opacity: 0; }
.bp-text .ch.on { opacity: 1; }
.bp-text mark { position: relative; background: none; color: inherit; padding: 0 .08em; margin: 0 -.08em; white-space: nowrap; }
.bp-text mark::before { content: ""; position: absolute; inset: .06em 0 .02em; z-index: -1; border-radius: .18em; background: color-mix(in srgb, var(--mk, var(--blue)) 20%, transparent); transform: scaleX(var(--hl, 0)); transform-origin: 0 50%; }
.bp-text mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; border-radius: 2px; background: var(--mk, var(--blue)); transform: scaleX(var(--hl, 0)); transform-origin: 0 50%; }
.bp-text { position: relative; isolation: isolate; }
.bp-steps { display: inline-flex; gap: 4px; padding: 4px; margin-top: 20px; border-radius: 99px; background: var(--fill-2); }
.bp-steps span { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; font: 500 13px/1 var(--f-body); color: var(--text-3); transition: background-color 300ms, color 300ms; }
.bp-steps span b { font: 500 11px/1 var(--f-mono); }
.bp-steps span.on { background: var(--strong); color: var(--on-strong); }
.bp-plan { display: grid; gap: 10px; }
.plan-card { --h: var(--blue); display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; transition: transform 500ms cubic-bezier(.34,1.56,.64,1); }
.plan-card .ic { width: 44px; height: 44px; border-radius: 99px 99px 99px 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--h) 14%, transparent); color: var(--h); }
.plan-card .ic svg { width: 19px; height: 19px; }
.plan-card small { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.plan-card b { font: 600 16.5px/1.3 var(--f-display); letter-spacing: -.015em; }
.plan-card .ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color 300ms, box-shadow 300ms; }
.plan-card .ok svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 200ms; }
.plan-card.on .ok { background: var(--green); box-shadow: none; }
.plan-card.on .ok svg { opacity: 1; }
.plan-card b { opacity: .3; transition: opacity 400ms; }
.plan-card.lit b { opacity: 1; }
.bp-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.bp-wires path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.bp-ready { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--green) 12%, var(--ink-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent); font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity 400ms, transform 500ms cubic-bezier(.34,1.56,.64,1); }
.bp-ready.on { opacity: 1; transform: none; }
.bp-ready span { display: flex; align-items: center; gap: 10px; }
.bp-ready i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mint) 22%, transparent); }

/* ── CONTROL — a working console: decisions wait for the client, a budget cap, switches, an audit log ── */
.control { background: var(--ink-0); }
.cc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.cc-queue { --h: var(--blue); padding: 18px; display: grid; gap: 10px; }
.cc-queue .top { display: flex; justify-content: space-between; padding: 6px 8px 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.dec { --h: var(--blue); position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 16px; border-radius: 18px 18px 18px 6px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: background-color 300ms; }
.dec::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--h); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease); }
.dec.wkm-lit::before { transform: scaleX(1); }
.dec .av { width: 40px; height: 40px; border-radius: 99px 99px 99px 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--h) 16%, transparent); color: var(--h); }
.dec .av svg { width: 18px; height: 18px; }
.dec b { display: block; font: 600 16.5px/1.3 var(--f-display); letter-spacing: -.015em; }
.dec small { color: var(--text-3); font-size: 13.5px; }
.dec .acts { display: flex; gap: 6px; }
.dec .acts button { height: 38px; padding: 0 16px; border-radius: 99px; font: 600 14px/1 var(--f-body); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: background-color 160ms, color 160ms; }
.dec .acts button.yes { background: var(--strong); color: var(--on-strong); box-shadow: none; }
.dec .state { display: none; align-items: center; gap: 8px; font: 500 13.5px/1 var(--f-body); color: var(--mint); }
.dec .state u { color: var(--text-3); text-decoration: none; cursor: pointer; font-size: 13px; }
.dec.is-yes .acts, .dec.is-no .acts { display: none; }
.dec.is-yes .state, .dec.is-no .state { display: inline-flex; }
.dec.is-no .state { color: var(--rose); }
.dec.is-yes { background: color-mix(in srgb, var(--green) 7%, transparent); }
.cc-log { margin-top: 2px; padding: 12px 14px; border-radius: 14px; background: var(--paper); color: #a8b6cf; font: 500 12.5px/1.6 var(--f-mono); min-height: 64px; }
html:not([data-sc-theme="light"]) .cc-log { background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line); }
.cc-log p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-log p:last-child { color: #edf3ff; }
.cc-side { display: grid; gap: 12px; }
.cc-box { --h: var(--blue); padding: 20px 22px; }
.cc-box .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-box b { font: 600 16.5px/1.3 var(--f-display); letter-spacing: -.015em; }
.cc-box small { display: block; color: var(--text-3); font-size: 13.5px; margin-top: 4px; }
.cc-box .val { font: 600 30px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 18px 0 4px; border-radius: 3px; background: linear-gradient(90deg, var(--blue) var(--v, 50%), var(--fill-4) var(--v, 50%)); outline: none; }
.cc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.25); cursor: grab; }
.cc-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.25); }
.tgl { position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--fill-4); transition: background-color 250ms; }
.tgl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: translate 300ms cubic-bezier(.34,1.56,.64,1); }
.tgl[aria-checked="true"] { background: var(--blue); }
.tgl[aria-checked="true"]::after { translate: 18px 0; }
.cc-seals { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.seal { aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 4px; box-shadow: inset 0 0 0 1px var(--line-2); background: radial-gradient(circle at 35% 25%, var(--fill-2), transparent 70%); }
.seal b { font: 600 clamp(18px, 1.7vw, 24px)/1 var(--f-display); letter-spacing: -.03em; }
.seal span { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* ── BADGE RAIL — open roles hang as Sanctuarian staff badges; they swing to rest; click flips one ── */
.rail { position: relative; padding-top: 30px; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #2a3446, #121927); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 20px -8px rgba(0,0,0,.6); }
.badges-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; perspective: 1400px; }
.bdg { position: relative; transform-origin: 50% -30px; }
.bdg .strap { position: absolute; left: 50%; top: -30px; width: 22px; height: 44px; translate: -50% 0; border-radius: 3px; background: var(--h); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.bdg .clip { position: absolute; left: 50%; top: 6px; width: 34px; height: 14px; translate: -50% 0; border-radius: 5px; background: linear-gradient(180deg, #d9dee7, #9aa3b2); box-shadow: 0 2px 4px rgba(0,0,0,.3); z-index: 2; }
.bdg .inner { position: relative; margin-top: 12px; aspect-ratio: 5 / 7.4; transform-style: preserve-3d; transition: transform 700ms var(--ease); cursor: pointer; }
.bdg.is-flipped .inner { transform: rotateY(180deg); }
.bdg .face { position: absolute; inset: 0; border-radius: 22px 22px 22px 7px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 30px 18px 18px; display: flex; flex-direction: column; gap: 10px; background: #fff; color: #0b1220; box-shadow: 0 30px 50px -28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(20,18,14,.08); overflow: hidden; }
.bdg .face::before { content: ""; position: absolute; left: 50%; top: 12px; width: 40px; height: 7px; translate: -50% 0; border-radius: 4px; background: rgba(20,18,14,.1); }
.bdg .back { transform: rotateY(180deg); background: #0f1830; color: #edf3ff; box-shadow: 0 30px 50px -28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); }
.bdg .org { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #6b7385; }
.bdg .org img { width: 22px; }
.bdg .photo { width: 62%; aspect-ratio: 1; margin: 6px auto 4px; border-radius: 99px 99px 99px 16px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 15%, color-mix(in srgb, var(--h) 70%, #fff), var(--h) 55%, color-mix(in srgb, var(--h) 60%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 26px -12px color-mix(in srgb, var(--h) 80%, transparent); color: #fff; }
.bdg .photo svg { width: 38%; height: 38%; }
.bdg h3 { margin: 0; text-align: center; font: 600 clamp(16px, 1.35vw, 20px)/1.15 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.bdg .dept { text-align: center; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #6b7385; }
.bdg .code { margin-top: auto; height: 26px; background: repeating-linear-gradient(90deg, #0b1220 0 2px, transparent 2px 4px, #0b1220 4px 5px, transparent 5px 8px, #0b1220 8px 11px, transparent 11px 13px); opacity: .85; border-radius: 2px; }
.bdg .back h4 { margin: 0; font: 600 17px/1.2 var(--f-display); }
.bdg .back ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: #a8b6cf; }
.bdg .back ul li { display: flex; gap: 8px; }
.bdg .back ul li::before { content: ""; flex: none; margin-top: 6px; width: 6px; height: 6px; border-radius: 99px 99px 99px 1px; background: var(--h); }
.bdg .back .btn { margin-top: auto; height: 42px; font-size: 14px; justify-content: space-between; --b-bg: #fff; --b-fg: #0b1220; }
.bdg .back .btn .coin { width: 28px; height: 28px; }
.bdg .hint { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font: 500 11.5px/1 var(--f-mono); color: var(--paper-ink-2); opacity: .7; }
@media (max-width: 960px) { .badges-row { grid-template-columns: repeat(5, 220px); overflow-x: auto; padding-bottom: 40px; scroll-snap-type: x mandatory; } .bdg { scroll-snap-align: start; } }

/* ── RECEIPT — results print out of a slot as you scroll (case study) ── */
.rcpt-wrap { position: relative; display: grid; justify-items: center; }
.rcpt-slot { position: relative; z-index: 2; width: min(520px, 100%); height: 26px; border-radius: 14px; background: #0b1220; box-shadow: inset 0 -3px 0 #000, inset 0 2px 0 rgba(255,255,255,.08), 0 10px 30px -10px rgba(0,0,0,.6); }
.rcpt-clip { width: min(460px, 92%); margin-top: -10px; overflow: clip; padding-bottom: 30px; }
.rcpt { position: relative; background: #fbfaf7; color: #0b1220; padding: 34px 30px 26px; font: 500 14px/1.5 var(--f-mono); box-shadow: 0 30px 50px -30px rgba(0,0,0,.6); }
.rcpt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, #fbfaf7 0) 0 0 / 16px 12px repeat-x, linear-gradient(45deg, transparent 8px, #fbfaf7 0) 8px 0 / 16px 12px repeat-x; }
.rcpt h4 { margin: 0 0 4px; text-align: center; font: 600 13px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; }
.rcpt .sub { text-align: center; color: #6b7385; font-size: 12px; margin-bottom: 18px; }
.rcpt .ln { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed rgba(11,18,32,.18); }
.rcpt .ln span:last-child { color: #4b5262; }
.rcpt .tot { display: flex; justify-content: space-between; align-items: end; margin-top: 16px; }
.rcpt .tot b { font: 600 48px/1 var(--f-display); letter-spacing: -.05em; }
.rcpt .bar { height: 48px; margin: 18px 0 8px; background: repeating-linear-gradient(90deg, #0b1220 0 2px, transparent 2px 4px, #0b1220 4px 7px, transparent 7px 9px, #0b1220 9px 10px, transparent 10px 13px, #0b1220 13px 16px, transparent 16px 18px); }
.rcpt .thx { text-align: center; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b7385; }

/* ── STREAK + STATUS — footer wordmark with a light running beneath it, and a live status line ── */
.status-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 46px; font: 500 13px/1 var(--f-mono); color: var(--text-3); }
.status-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent); animation: sc-pulse 2s infinite; }
.status-line b { color: var(--text); font-weight: 500; }
.streak { position: relative; height: 2px; margin-top: 10px; }
.streak svg { width: 100%; height: 6px; overflow: visible; display: block; }
.streak .base { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 6; }
.streak .run { stroke: url(#streakG); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 120 2000; }
.giant { margin-top: 18px; }

@media (max-width: 860px) {
  .ho, .bp, .cc { grid-template-columns: 1fr; }
  .ho-head { flex-direction: column; align-items: start; }
  .bp-wires { display: none; }
}
@media (max-width: 767px) {
  .handoff, .brief { height: auto; }
  .handoff .stage, .brief .stage { padding-block: 90px; }
  .bp-text .ch { opacity: 1; }
  .plan-card b { opacity: 1; }
  .cc-seals { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.hub-ring { position: absolute; inset: 0; will-change: transform; }

.handoff .stage, .brief .stage { padding-top: 76px; }
.handoff .sec-head, .brief .sec-head { margin-bottom: 26px !important; }
.bp-ready a { white-space: nowrap; flex: none; }
.bp-ready span { min-width: 0; }
.rcpt-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .rcpt-sec { grid-template-columns: 1fr; } }
html[data-sc-theme="light"] .seal { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px rgba(58,46,24,.35); }
.rail { min-width: 0; }
@media (max-width: 767px) {
  .dec { grid-template-columns: 40px minmax(0, 1fr); }
  .dec .acts, .dec .state { grid-column: 1 / -1; }
  .dec .acts button { flex: 1; }
  .ho-item { grid-template-columns: 26px minmax(0, 1fr); font-size: 16px; }
  .ho-item .who { display: none; }
  .ho-list { padding: 22px 20px 18px; }
  .owner { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px 16px 12px 12px; }
  .owner img { width: 56px; height: 48px; }
  .bp-steps span { padding: 0 10px; font-size: 12px; }
}
.feat-post > *, .news > * { min-width: 0; }
.author { flex-wrap: wrap; }
@media (max-width: 860px) { .feat-post .post-art { min-height: 240px; } .news h2 { font-size: clamp(28px, 7.6vw, 40px) !important; } }

/* ═══════════════ V3 — San's round 3 ═══════════════ */
/* type: Syne (the brand's own heading face) + Instrument Serif italic; a touch smaller, Syne runs wide */
:root { --f-display: 'Syne', ui-sans-serif, system-ui, sans-serif; }
.h-display, .h1, .h2, .h3 { font-weight: 600; letter-spacing: -.03em; }
.h-display { font-size: clamp(46px, 6.4vw, 100px); letter-spacing: -.035em; }
.h1 { font-size: clamp(40px, 5.6vw, 86px); }
.h2 { font-size: clamp(34px, 4.4vw, 64px); }
.hero-h { font-size: clamp(42px, 5.3vw, 84px) !important; }
.h-display em, .h1 em, .h2 em, .h3 em, .tt > span:last-child { letter-spacing: -.01em; }

/* buttons: medium, lighter text — a software company's quiet confidence */
.btn { height: 46px; padding: 0 5px 0 20px; gap: 10px; font: 500 15px/1 var(--f-body); letter-spacing: 0; }
.btn .coin { width: 36px; height: 36px; }
.btn .coin svg { width: 14px; height: 14px; }
.btn.ghost { padding: 0 20px; }
.btn.sm { height: 40px; font-size: 14px; padding: 0 4px 0 16px; }
.btn.sm .coin { width: 32px; height: 32px; }
.btn.ghost.sm { padding: 0 16px; }

/* hero: the copy never runs under the cloud */
.hero-text { max-width: min(760px, calc(min(100vw - 2 * var(--gutter), var(--page)) - min(39vw, 600px, 58vh * 1.635) - 72px)); }
.hero-text .lead { max-width: 52ch; }
/* recognitions: just the marks, no boxes (so they never read like the floating demo chips) */
.badges { gap: 22px; }
.badges img { height: 22px; width: auto; padding: 0; border-radius: 0; background: none; box-shadow: none !important; filter: brightness(0) invert(1); opacity: .62; transition: opacity 200ms; }
.badges img:hover { opacity: 1; }
html[data-sc-theme="light"] .badges img { filter: brightness(0); opacity: .55; }
.badges .lbl { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* NAV LIQUID — groups float on a goo layer; as they meet, the shapes fuse like water into one bar */
.navl { position: fixed; z-index: 60; left: 0; right: 0; top: calc(14px + env(safe-area-inset-top, 0px)); height: 58px; pointer-events: none; --nav-fill: #0d1a2f; --nav-edge: #24365a; }
html[data-sc-theme="light"] .navl { --nav-fill: #fffdfa; --nav-edge: #e3ddd1; }
.navl-blobs, .navl-blobs > div { position: absolute; inset: 0; }
.navl-blobs > div { filter: url(#goo); }
.navl-blobs i { position: absolute; left: 0; top: 0; height: 58px; border-radius: 999px; will-change: transform, width; }
.navl-edge i { background: var(--nav-edge); margin: -1px 0 0 -1px; padding: 1px; box-sizing: content-box; }
.navl-fill i { background: var(--nav-fill); }
.navl-edge { filter: url(#goo) drop-shadow(0 18px 30px rgba(0, 0, 0, .35)) !important; }
html[data-sc-theme="light"] .navl-edge { filter: url(#goo) drop-shadow(0 16px 28px rgba(58, 46, 24, .16)) !important; }
.navl-g { position: absolute; left: 0; top: 0; height: 58px; display: flex; align-items: center; gap: 2px; pointer-events: auto; will-change: transform; }
.navl .nav-logo { gap: 10px; padding-left: 6px; font: 600 20px/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
.navl .nav-logo img { height: 28px; width: auto; flex: none; }
.navl .wm { display: inline-block; overflow: hidden; white-space: nowrap; transform-origin: 0 50%; }
.navl .nav-links > a, .navl .nav-links > button { height: 42px; padding: 0 14px; }
.navl-act { gap: 6px; }
.navl .theme-tg { margin: 0; width: 40px; height: 40px; }
.navl .nav-burger { display: none; }
@media (max-width: 1100px) { .navl .nav-links { display: none; } .navl .nav-burger { display: grid; } .navl .nav-cta { display: none; } }
@media (max-width: 767px) { .navl .nav-logo { font-size: 18px; } }

/* EYEBROW — the real mark (its three drops arrive one by one), the label resolves, a hairline draws after it */
.eyebrow { gap: 12px; }
.eyebrow .mk { width: 26px; height: 16px; flex: none; overflow: visible; }
.eyebrow .mk .l1 { fill: #14a44d; } .eyebrow .mk .l2 { fill: #2f74c9; } .eyebrow .mk .l3 { fill: #fa983a; }
html[data-sc-theme="light"] .eyebrow .mk .l2 { fill: #004174; }
.eyebrow .mk path { transform-box: fill-box; transform-origin: 50% 100%; }
.eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .4; transform-origin: 0 50%; }
html.sc-on .eyebrow:not(.is-in) .mk path { transform: translateY(5px) scale(.2); opacity: 0; }
html.sc-on .eyebrow:not(.is-in)::after { transform: scaleX(0); }
.eyebrow.is-in .mk path { animation: sc-drop 700ms cubic-bezier(.34, 1.56, .64, 1) both; }
.eyebrow.is-in .mk .l2 { animation-delay: 90ms; } .eyebrow.is-in .mk .l3 { animation-delay: 180ms; }
.eyebrow.is-in::after { transition: transform 900ms cubic-bezier(.22,1,.36,1) 350ms; }
@keyframes sc-drop { from { transform: translateY(5px) scale(.2); opacity: 0; } }
.sec-head.center .eyebrow::after, .pr-head .eyebrow::after { display: none; }

/* RIPPLES — the brand motif: contour lines that echo the logo's cloud outward, breathing slowly */
.ripples { position: absolute; pointer-events: none; color: var(--rip, rgba(140, 190, 255, .16)); }
html[data-sc-theme="light"] .ripples { --rip: rgba(0, 65, 116, .13); }
.ripples svg { width: 100%; height: 100%; overflow: visible; }
.ripples path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 50% 50%; }
.ripples path.pulse { animation: sc-ripple 7s ease-in-out infinite; }
@keyframes sc-ripple { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.stage-sky .ripples { right: max(var(--gutter), calc((100% - var(--page)) / 2)); top: 50%; width: min(39vw, 600px, 58vh * 1.635); aspect-ratio: 327 / 200; translate: 0 -46%; }
.orbits { display: none; }

/* PRACTICES — no boxes: the drop, a big name, its promise in its own hue, the services as quiet lines */
.pr-head { margin-bottom: clamp(150px, 19vh, 200px); }
.pr-head .h2 { font-size: clamp(38px, 5vw, 76px); max-width: 18ch; }
.pr-cols { gap: clamp(28px, 4vw, 64px); }
.pr-col { background: none !important; box-shadow: none !important; padding: 26px 0 0; text-align: left; }
.pr-col::after, .pr-col::before { display: none !important; }
.pr-col h3 { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -.035em; text-align: center; }
.pr-col .tag { text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--h); margin-bottom: 22px; }
html:not([data-sc-theme="light"]) .pr-col[style*="--green"] .tag { color: var(--mint); }
html:not([data-sc-theme="light"]) .pr-col[style*="--orange"] .tag { color: var(--amber); }
html:not([data-sc-theme="light"]) .pr-col[style*="--blue"] .tag { color: var(--sky); }
.pr-col li a { justify-content: center; border-top: 1px solid var(--line); }
.pr-col li a:hover { padding-left: 0; }
.pr-col .count { position: static; display: block; text-align: center; margin-bottom: 10px; }
.practices .ripples { left: 50%; top: 58%; width: min(1500px, 120vw); aspect-ratio: 327 / 200; translate: -50% -50%; }

/* BACKLOG — a list you could have written, and three drops that take the work; no cards */
.ho-list { background: none !important; box-shadow: none !important; padding: 0; }
.ho-list::after, .ho-list::before { display: none !important; }
.ho-list .top { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); margin: 0; }
.ho-item { font-size: clamp(17px, 1.4vw, 21px); padding: 15px 0; }
.ho-item .box { width: 24px; height: 24px; border-radius: 99px 99px 99px 6px; }
.ho-segs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
.ho-segs i { height: 6px; border-radius: 3px; background: var(--fill-3); position: relative; overflow: hidden; }
.ho-segs i::after { content: ""; position: absolute; inset: 0; background: var(--h); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.ho-segs i.on::after { transform: scaleX(1); }
.ho-foot { border: 0; padding-top: 20px; align-items: baseline; justify-content: flex-start; gap: 16px; }
.ho-foot b { font-size: clamp(64px, 7vw, 112px); color: var(--hi); }
.ho-foot b + small { font-size: 13px; }
.ho-owners { gap: clamp(18px, 3vh, 34px); }
.owner { background: none !important; box-shadow: none !important; padding: 0; grid-template-columns: 120px 1fr auto; gap: 22px; border-radius: 0; }
.owner::after { display: none !important; }
.owner img { width: 120px; height: 100px; object-fit: contain; transition: transform 600ms cubic-bezier(.34,1.56,.64,1), filter 400ms; filter: drop-shadow(0 18px 26px var(--lobe-shadow)); }
.owner b { font-size: clamp(24px, 2vw, 30px); }
.owner .n { font: 600 clamp(34px, 3vw, 46px)/1 var(--f-display); letter-spacing: -.04em; color: var(--hi); }
.owner .n small { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; text-align: right; }
.owner.is-hit { transform: none; }
.owner.is-hit img { transform: scale(1.12) rotate(-3deg); filter: drop-shadow(0 0 26px color-mix(in srgb, var(--h) 70%, transparent)); }
/* rolling digits */
.roll { display: inline-flex; font-variant-numeric: tabular-nums; }
.roll .d { display: inline-block; height: 1em; overflow: hidden; clip-path: inset(0 -.1em); line-height: 1; }
.roll .d > span { display: flex; flex-direction: column; transition: transform 800ms cubic-bezier(.22, 1, .36, 1); }
.roll .d > span > i { font-style: normal; height: 1em; line-height: 1; }
@media (max-width: 767px) { .owner { grid-template-columns: 70px 1fr auto; } .owner img { width: 70px; height: 60px; } }
.owner .n b, .owner .n b span, .roll span { font-size: inherit; color: inherit; }
.owner .n b { display: block; color: var(--hi); }
.owner > span > b { color: var(--text); }

/* THE SERVICE THEATRE — one pinned live stage, the services scrolling beside it */
@property --th { syntax: '<color>'; inherits: true; initial-value: #3d9bff; }
.theatre { background: var(--ink-1); }
.th { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.th-stage-wrap { position: sticky; top: 96px; height: min(640px, calc(100vh - 130px)); }
.th-stage { --th: var(--blue); position: relative; height: 100%; border-radius: 36px 36px 36px 10px; overflow: hidden; isolation: isolate; transition: --th 700ms ease;
  background: radial-gradient(80% 70% at 80% 0%, color-mix(in srgb, var(--th) 22%, transparent), transparent 70%), radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--th) 12%, transparent), transparent 70%), var(--ink-2); }
.th-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th) 30%, var(--line)), inset 0 1px 0 rgba(255,255,255,.08); transition: box-shadow 700ms; }
html[data-sc-theme="light"] .th-stage { background: radial-gradient(80% 70% at 80% 0%, color-mix(in srgb, var(--th) 14%, transparent), transparent 70%), radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--th) 8%, transparent), transparent 70%), #fff; box-shadow: var(--sh-card); }
html[data-sc-theme="light"] .th-stage::after { box-shadow: inset 0 0 0 1px rgba(20,18,14,.07), inset 0 1px 0 #fff; }
.th-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.th-bar .live { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 99px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); background: var(--fill-2); }
.th-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: sc-pulse 2s infinite; }
.th-name { font: 600 15px/1 var(--f-display); letter-spacing: -.01em; }
.th-dots { margin-left: auto; display: flex; gap: 6px; }
.th-dots i { width: 8px; height: 8px; border-radius: 99px 99px 99px 2px; background: var(--fill-4); transition: background-color 400ms, transform 400ms cubic-bezier(.34,1.56,.64,1); }
.th-dots i.on { background: var(--h); transform: scale(1.35); }
.th-acts { position: absolute; inset: 64px 10px 10px; }
.act { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity 500ms var(--ease), transform 700ms var(--ease); pointer-events: none; }
.act.on { opacity: 1; transform: none; pointer-events: auto; }
.act .d-chat, .act .d-pipe, .act .d-data { inset: 10px 30px 30px; }
.act .d-chat p { font-size: 15.5px; }
.act .d-pipe .job { height: 52px; font-size: 14px; }
.act .d-canvas { inset: 20px 30px 30px; }
.act .d-arch { inset: 10% 6% 8%; }
.act .d-growth .kpis { left: 34px; top: 10px; }
.act .d-phone { width: 250px; height: 400px; bottom: -40px; }
.act .d-push { top: 24px; }
.th-steps { display: grid; padding-bottom: 20vh; }
.th-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: .28; transition: opacity 500ms; }
.th-step.is-active { opacity: 1; }
.th-kind { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.th-kind em { margin-left: auto; font-style: normal; color: var(--text-3); }
.th-step h3 { margin: 0; font: 600 clamp(32px, 3.4vw, 52px)/1.02 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.th-step p { margin: 0; color: var(--text-2); font-size: 17.5px; max-width: 42ch; }
.th-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.th-tags span { font: 500 12px/1 var(--f-mono); color: var(--text-2); padding: 8px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.th-mobile { display: none; }
@media (max-width: 860px) {
  .th { grid-template-columns: 1fr; }
  .th-stage-wrap { display: none; }
  .th-step { min-height: 0; opacity: 1; padding-block: 28px; border-top: 1px solid var(--line); }
  .th-steps { padding-bottom: 0; }
  .th-mobile { display: block; position: relative; height: 360px; border-radius: 26px 26px 26px 8px; overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); margin-top: 6px; }
  .th-mobile .act { opacity: 1; transform: none; inset: 10px; }
}
.act .d-pipe { align-content: center; }
.d-arch .rep text { fill: #cfe6ff; }
html[data-sc-theme="light"] .d-arch .rep text { fill: #0b3d8a; }
html[data-sc-theme="light"] .d-arch .rep rect { fill: #e3eefc; stroke: var(--blue); }
html[data-sc-theme="light"] .d-arch .nd rect { fill: #fff; stroke: rgba(12,60,140,.22); }
html[data-sc-theme="light"] .d-arch .ln { stroke: rgba(12,60,140,.2); }
html[data-sc-theme="light"] .d-arch .scale { fill: #1c6b25; }
@media (max-width: 767px) { .practices, .stage-sky { overflow: hidden; } }
.handoff .stage, .brief .stage { padding-top: 96px; } .brief .bp-text { min-height: 5.6em; }

/* ═══════════════ V4 — San's round 4 ═══════════════ */
/* type: Space Grotesk — a grotesk drawn from a monospace, so it reads as engineering; thick (600) against
   Instrument Serif's calligraphic italic. Tighter tracking than Syne; sizes back up a step. */
:root { --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
.h-display, .h1, .h2, .h3 { font-weight: 600; letter-spacing: -.04em; }
.h-display { font-size: clamp(48px, 6.8vw, 106px); letter-spacing: -.045em; }
.h1 { font-size: clamp(42px, 5.8vw, 90px); }
.h2 { font-size: clamp(36px, 4.6vw, 68px); }
.hero-h { font-size: clamp(44px, 5.6vw, 88px) !important; letter-spacing: -.045em; }
.h-display em, .h1 em, .h2 em, .h3 em, .tt > span:last-child { letter-spacing: -.012em; font-size: 1.04em; }

/* header at rest: open air. The mark and its name stand free, the actions stand free (the CTA is its own object);
   only the menu sits in the bar. Scrolling, a drop condenses under each and they flow into one bar. */
.navl .nav-logo { gap: 11px; padding-left: 4px; font: 700 21px/1 var(--f-display); letter-spacing: -.05em; }
.navl .nav-logo img { height: 30px; }
.navl.is-merged .nav-logo { padding-left: 6px; }
.navl .nav-links { gap: 0; }
.navl .nav-links > a, .navl .nav-links > button { position: relative; z-index: 1; background: none !important; }
.navl-ptr { position: absolute; left: 0; top: 8px; height: 42px; width: 60px; border-radius: 999px; background: var(--fill-2); opacity: 0;
  transition: transform 520ms cubic-bezier(.34, 1.35, .64, 1), width 520ms cubic-bezier(.34, 1.35, .64, 1), opacity 220ms; pointer-events: none; }
/* the page you are on: a small drop under its name, in the practice blue */
.navl .nav-links > a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 99px 99px 99px 1px; background: var(--sky); }
html[data-sc-theme="light"] .navl .nav-links > a[aria-current]::after { background: var(--blue); }
.navl .theme-tg { box-shadow: none; }
.navl:not(.is-merged) .theme-tg { box-shadow: inset 0 0 0 1px var(--line-2); }
/* the header mark is the inline logo, so its navy lobe can lift on dark ground; hovering it, the drops bounce in turn */
.mk .l1 { fill: #14a44d; } .mk .l2 { fill: #2f74c9; } .mk .l3 { fill: #fa983a; }
html[data-sc-theme="light"] .mk .l2 { fill: #004174; }
.navl .nav-logo .mk { width: 50px; height: 31px; flex: none; overflow: visible; }
.navl .nav-logo .mk path { transform-box: fill-box; transform-origin: 50% 100%; }
.navl .nav-logo:hover .mk path { animation: sc-drop 640ms cubic-bezier(.34, 1.56, .64, 1) both; }
.navl .nav-logo:hover .mk .l2 { animation-delay: 70ms; } .navl .nav-logo:hover .mk .l3 { animation-delay: 140ms; }
/* phone hero cloud: keep the logo's proportions (it was squeezed to the column) */
@media (max-width: 767px) { .hero-text { max-width: none; } .cloud-m { height: auto; aspect-ratio: 1308 / 800; max-width: 100%; } .cloud-m img { width: 100% !important; height: auto !important; object-fit: contain; } }

/* ═══════════════ V5 — San's round 5 ═══════════════ */
/* type: Clash Display (Indian Type Foundry, Ahmedabad — embedded in css/fonts.css): geometric, engineered terminals,
   real weight; Instrument Serif italic stays the second voice. */
:root { --f-display: 'Clash Display', ui-sans-serif, system-ui, sans-serif; }
.h-display, .h1, .h2, .h3 { font-weight: 600; letter-spacing: -.028em; }
.h-display { letter-spacing: -.032em; }
.hero-h { letter-spacing: -.032em; }
.navl .nav-logo { font-weight: 600; letter-spacing: -.035em; }
/* lobes v4 ("grain light"): plain forms, a grain-built gradient, lit from inside. The navy lobe's shadow must never
   fall on its siblings (it browned the orange), so the small lobes sit above it; shadows stay soft and coloured. */
.lobe.green, .lobe.orange { z-index: 3 !important; }
.lobe img { filter: drop-shadow(0 28px 44px var(--lobe-shadow)); }
.lobe.navy img { filter: drop-shadow(0 30px 56px rgba(8, 40, 110, .55)); }
html[data-sc-theme="light"] .lobe.navy img { filter: drop-shadow(0 30px 50px rgba(20, 60, 140, .28)); }
@media (max-width: 767px) { .hero-h { font-size: clamp(30px, 8.6vw, 40px) !important; } .h-display { font-size: clamp(36px, 10vw, 48px); } }
/* lobes v5 ("digital grain", round 6): Comet-style coloured grain with sister-hue pools; and the grain LIVES —
   a noise tile shimmers over each drop (overlay blend, masked by the drop's own alpha so it never leaves the shape) */
.lobe-in { position: relative; display: block; }
.lobe-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: url(../img/grain-live.png) 0 0 / 128px 128px; mix-blend-mode: overlay; opacity: .32;
  -webkit-mask: var(--lobe-img) center / 100% 100% no-repeat; mask: var(--lobe-img) center / 100% 100% no-repeat;
  animation: sc-grain 1s steps(6) infinite; }
.lobe.navy { --lobe-img: url(../img/silk-navy.webp); }
.lobe.green { --lobe-img: url(../img/silk-green.webp); }
.lobe.orange { --lobe-img: url(../img/silk-orange.webp); }
.lobe img { position: relative; display: block; }
@keyframes sc-grain { 0% { background-position: 0 0; } 17% { background-position: -37px 19px; } 33% { background-position: 23px -41px; }
  50% { background-position: -61px -13px; } 67% { background-position: 47px 53px; } 83% { background-position: -11px 67px; } }
@media (prefers-reduced-motion: reduce) { .lobe-in::after { animation: none; } }

/* ═══════════════ V6 — San's round 6 ═══════════════ */
/* type: Inter Tight titles (tight, confident) + Geist Mono as the stressed voice — the words that matter read like
   code. Geist Mono also takes over the labels, so the page speaks with one mono. The serif stays only in quotes. */
:root { --f-display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --f-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --f-accent: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; }
.h-display, .h1, .h2, .h3 { font-weight: 600; letter-spacing: -.035em; }
.h-display, .hero-h { letter-spacing: -.04em; }
.h-display em, .h1 em, .h2 em, .h3 em, .tt > span:last-child, .prod h3 em, .case h3 em, .sx-face .big em, .wcard h3 em, .prow-copy h2 em, .stmt em {
  font-family: var(--f-accent) !important; font-style: normal !important; font-weight: 500 !important; font-size: .9em !important; letter-spacing: -.055em !important; }
.tt > span:last-child { font-size: .84em !important; }
.navl .nav-logo { font-weight: 600; letter-spacing: -.045em; }
.ho-foot small { line-height: 1.45; display: block; }
.h-display em .stop, .h1 em .stop, .h2 em .stop, .h3 em .stop, h3 em .stop { font-family: var(--f-display); letter-spacing: 0; margin-left: .02em; }

/* ═══════════════ V7 — San's round 7: the hero, end to end ═══════════════ */
/* type: ONE family, the way the best Framer heroes do it (Inter Display 500, very tight): Inter with its display
   optical size for titles, the text size for body; Geist Mono only for small labels. No font-mixing in headings —
   emphasis is colour (the three outcomes) or tone (a muted second line). */
:root { --f-display: 'Inter', ui-sans-serif, system-ui, sans-serif; --f-body: 'Inter', ui-sans-serif, system-ui, sans-serif; }
body { font-size: 16px; font-optical-sizing: auto; }
.h-display, .h1, .h2, .h3 { font-weight: 500; letter-spacing: -.045em; font-optical-sizing: auto; }
.h-display, .hero-h { letter-spacing: -.055em; line-height: .98; }
.h-display em, .h1 em, .h2 em, .h3 em, .tt > span:last-child, .prod h3 em, .case h3 em, .sx-face .big em, .wcard h3 em, .prow-copy h2 em, .stmt em {
  font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; font-size: 1em !important; letter-spacing: inherit !important; }
.tt > span:last-child { color: var(--text-3); }
.h2 em, .h1 em { color: var(--sky); } html[data-sc-theme="light"] .h2 em, html[data-sc-theme="light"] .h1 em { color: var(--blue); }
.lead { font-size: clamp(17px, 1.35vw, 19px); letter-spacing: -.011em; }

/* hero variants (the switcher is prototype-only) */
.hv { display: none !important; }
html[data-hero="a"] .hv-a, html[data-hero="b"] .hv-b, html[data-hero="c"] .hv-c, html:not([data-hero]) .hv-a { display: grid !important; }
.hero-h { font-size: clamp(44px, 5.9vw, 94px) !important; gap: 0; }
.hero-h .ln { gap: .24em; }
.hero-text .lead { max-width: 34ch; }
/* B · the logo's three drops sit INSIDE the sentence, tilted like objects on a desk (after Hanzo) */
.hv-b .ln { align-items: center; }
.hv-b .mark { display: inline-block; flex: none; height: .8em; line-height: 0; translate: 0 .04em; transition: rotate 600ms cubic-bezier(.34, 1.56, .64, 1), scale 600ms cubic-bezier(.34, 1.56, .64, 1); }
.hv-b .mark img { height: 100%; width: auto; filter: drop-shadow(0 10px 14px rgba(0, 20, 60, .35)); }
.hv-b .mark.navy { rotate: -9deg; } .hv-b .mark.green { rotate: 7deg; } .hv-b .mark.orange { rotate: -6deg; height: .66em; }
.hv-b .ln:hover .mark { rotate: 0deg; scale: 1.08; }
.hv-b em, .hv-b .ln { color: var(--hi); }
/* C · centred statement; the cloud rises from the bottom like a horizon */
html[data-hero="c"] .hero-copy { align-items: flex-start; }
html[data-hero="c"] .hero-text { margin-inline: auto; max-width: 1100px; justify-items: center; text-align: center; padding-top: clamp(120px, 17vh, 170px); gap: 26px; }
html[data-hero="c"] .hero-h { font-size: clamp(40px, 4.7vw, 76px) !important; }
html[data-hero="c"] .hero-h .ln { justify-content: center; }
html[data-hero="c"] .hero-cta, html[data-hero="c"] .hero-proof { justify-content: center; }
html[data-hero="c"] .hero-proof { display: none; }
html[data-hero="c"] .eyebrow::after { display: none; }
@media (min-width: 768px) {
  html[data-hero="c"] .cloud { left: 50%; right: auto; top: auto; bottom: -15vh; width: min(50vw, 760px, 70vh * 1.635); translate: -50% 0; }
  html[data-hero="c"] .float:nth-child(1) { right: auto !important; left: 6% !important; top: 58% !important; }
  html[data-hero="c"] .float:nth-child(2) { right: 18% !important; top: 66% !important; }
  html[data-hero="c"] .float:nth-child(3) { right: 6% !important; bottom: 9% !important; }
  html[data-hero="c"] .float:nth-child(4) { right: auto !important; left: 17% !important; bottom: 7% !important; }
}

/* the floating chips are GLASS: frosted, a lit top edge, a sheen, and they sit over the drops so the blur has colour */
.float { background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 60%); backdrop-filter: blur(22px) saturate(185%); -webkit-backdrop-filter: blur(22px) saturate(185%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 26px 50px -22px rgba(0, 0, 0, .6) !important;
  border-radius: 16px 16px 16px 5px; font: 500 13px/1.25 var(--f-body); letter-spacing: -.01em; }
.float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 42%); }
.float > * { position: relative; }
.float small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; }
html[data-sc-theme="light"] .float { background: linear-gradient(140deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .3) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 26px 50px -24px rgba(30, 40, 80, .32) !important; }
html[data-sc-theme="light"] .float::before { background: linear-gradient(118deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%); }
/* A/B: the chips overlap the drops' edges */
html:not([data-hero="c"]) .float:nth-child(1) { right: 22% !important; top: 18% !important; }
html:not([data-hero="c"]) .float:nth-child(2) { right: 3% !important; top: 36% !important; }
html:not([data-hero="c"]) .float:nth-child(3) { right: 1.5% !important; bottom: 25% !important; }
html:not([data-hero="c"]) .float:nth-child(4) { right: 27% !important; bottom: 24% !important; }

/* header: five places, smaller type, a slimmer bar */
.navl { height: 52px; }
.navl-blobs i { height: 52px; }
.navl-g { height: 52px; }
.navl .nav-links > a, .navl .nav-links > button { height: 36px; padding: 0 13px; font-size: 14px; font-weight: 450; letter-spacing: -.01em; }
.navl-ptr { top: 8px; height: 36px; }
.navl .nav-links > a[aria-current]::after { bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; }
.navl .nav-logo { font-size: 18px; font-weight: 600; letter-spacing: -.04em; gap: 9px; }
.navl .nav-logo .mk { width: 43px; height: 26px; }
.navl .theme-tg { width: 36px; height: 36px; } .navl .theme-tg svg { width: 16px; height: 16px; }
.navl .btn.sm { height: 36px; font-size: 13.5px; padding: 0 4px 0 15px; } .navl .btn.sm .coin { width: 28px; height: 28px; }
/* the logo no longer blurs on hover: no scale, the drops just lift a hair in turn */
.navl .nav-logo:hover .mk path { animation: none !important; }
.navl .nav-logo .mk path { transition: transform 360ms cubic-bezier(.34, 1.56, .64, 1); }
.navl .nav-logo:hover .mk .l1 { transform: translateY(-2px); } .navl .nav-logo:hover .mk .l2 { transform: translateY(-2.5px); transition-delay: 50ms; } .navl .nav-logo:hover .mk .l3 { transform: translateY(-2px); transition-delay: 100ms; }

/* prototype-only variant switcher */
.hv-switch { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 99px;
  background: rgba(10, 18, 34, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px -16px rgba(0, 0, 0, .6); font: 500 12px/1 var(--f-mono); }
.hv-switch span { color: #8a9bb8; padding: 0 8px 0 10px; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.hv-switch button { height: 30px; padding: 0 12px; border-radius: 99px; color: #c8d3e6; background: none; }
.hv-switch button[aria-pressed="true"] { background: #fff; color: #0a0f1a; }
@media (max-width: 767px) { .hv-switch button { padding: 0 9px; font-size: 11px; } .hv-switch span { display: none; } }
.hv-b .mark { margin-inline: .04em .02em; }
.hero-h em .stop { color: var(--hi); }
html[data-sc-theme="light"] .hero-h em .stop { color: var(--strong, #0a0f1a); }
@media (min-width: 768px) { html[data-hero="c"] .cloud { bottom: -7vh; width: min(46vw, 700px, 62vh * 1.635); } html[data-hero="c"] .hero-text { padding-top: clamp(110px, 14vh, 150px); } }
.hero-text .lead { max-width: 40ch; }
.float small { color: var(--text-2); }
.hv-b .mark { margin-inline: .14em .04em; }
@media (min-width: 768px) {
  html[data-hero="c"] .cloud { bottom: 4vh; width: min(37vw, 580px, 40vh * 1.635); }
  html[data-hero="c"] .hero-text { padding-top: clamp(100px, 12vh, 130px); gap: 22px; }
  html[data-hero="c"] .scroll-cue { display: none; }
  html[data-hero="c"] .float:nth-child(1) { left: 9% !important; top: 64% !important; }
  html[data-hero="c"] .float:nth-child(2) { right: 20% !important; top: 63% !important; }
  html[data-hero="c"] .float:nth-child(3) { right: 9% !important; bottom: 12% !important; }
  html[data-hero="c"] .float:nth-child(4) { left: 22% !important; bottom: 9% !important; }
}
/* B: the drops drop into the sentence after the words land */
html.sc-on .hv-b .mark { animation: sc-mark 900ms cubic-bezier(.34, 1.56, .64, 1) both; }
html.sc-on .hv-b .ln:nth-child(1) .mark { animation-delay: .7s; } html.sc-on .hv-b .ln:nth-child(2) .mark { animation-delay: .82s; } html.sc-on .hv-b .ln:nth-child(3) .mark { animation-delay: .94s; }
@keyframes sc-mark { from { transform: translateY(-40%) scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.sc-on .hv-b .mark { animation: none; } }
.hv-b .mark { margin-inline: .02em; } .hv-b .ln { gap: .2em; }
@media (max-width: 767px) { html[data-hero="c"] .hero-text { padding-top: 0; } html[data-hero="c"] .hero-h { font-size: clamp(30px, 8.6vw, 40px) !important; } }

/* ═══════════════ V8 — San's round 8 ═══════════════ */
/* type: Barlow Condensed 700 in capitals for display headings (tall, rich, engineered — DIN signage lineage; after
   San's reference melyyn.framer.website, which sets Bebas Neue); Inter for everything else, h3 included. */
:root { --f-display: 'Barlow Condensed', 'Bebas Neue', 'Arial Narrow', sans-serif; --f-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.h-display, .h1, .h2 { font-weight: 700 !important; text-transform: uppercase; letter-spacing: -.004em !important; line-height: .93 !important; }
.h3, .pr-col h3, .tile h3, .th-step h3, .prod h3, .case h3, .mega-col h4, .wcard h3 { font-family: var(--f-ui) !important; text-transform: none; }
.h2 { font-size: clamp(38px, 4.6vw, 68px); }
.h1 { font-size: clamp(46px, 5.8vw, 88px); }
.hero-h { font-size: clamp(46px, 5.7vw, 88px) !important; letter-spacing: -.004em !important; line-height: .92 !important; }
html[data-hero="c"] .hero-h { font-size: clamp(42px, 5.1vw, 80px) !important; }
.hero-h .ln { gap: .2em; }
.tt > span:last-child { color: var(--text-3); }
.navl .nav-logo, .giant, .wm { text-transform: none; }
.navl .nav-logo { font-family: var(--f-ui); }
/* numbers set in the display face stay upright and tabular */
.ho-foot b, .owner .n b { font-family: var(--f-display); font-weight: 700; }

/* breathing room: the hero carries less, at a calmer size */
.hero-text { gap: 26px; }
.hero-text .lead { font-size: 17px; max-width: 38ch; color: var(--text-2); }
.hero-proof { font-size: 13.5px; gap: 8px 18px; }
.badges img { height: 19px; }

/* ripples: centred on the cloud itself (sc.js fits them), quieter; the extra orbit circles are gone */
.stage-sky .orbits { display: none !important; }
.stage-sky .ripples { --rip: rgba(140, 190, 255, .12); }
html[data-sc-theme="light"] .stage-sky .ripples { --rip: rgba(0, 65, 116, .1); }
.practices .ripples { display: none; }

/* two glass chips, not four: one engineering (the deploy), one intelligence (the agent) — calm, not chaos */
.floats .float:nth-child(3), .floats .float:nth-child(4) { display: none !important; }
html:not([data-hero="c"]) .float:nth-child(1) { right: 25% !important; top: 20% !important; }
html:not([data-hero="c"]) .float:nth-child(2) { right: 3% !important; top: auto !important; bottom: 24% !important; }
@media (min-width: 768px) {
  html[data-hero="c"] .float:nth-child(1) { left: 10% !important; top: 66% !important; }
  html[data-hero="c"] .float:nth-child(2) { right: 10% !important; left: auto !important; top: 70% !important; bottom: auto !important; }
}

/* the header is glass too: the liquid shapes go translucent and a frosted pane sits behind each group */
.navl-blobs { opacity: .62; }
html:not([data-sc-theme="light"]) .navl-blobs { opacity: .72; }
.navl-g::before { content: ""; position: absolute; inset: -9px; border-radius: 999px; z-index: -1; pointer-events: none;
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); opacity: 1; transition: opacity 260ms; }
html:not([data-sc-theme="light"]) .navl-g::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.navl:not(.is-merged) .navl-g[data-wkm-bare]::before { opacity: 0; }
.navl.is-merged .navl-g::before { box-shadow: none; }

/* the three practices sit on GLASS cards: neat edges, a lit top, a breath of the practice's hue; the drop lands on
   the card's top edge like an object set down on it */
.pr-cols { gap: clamp(18px, 2vw, 28px); }
.pr-col { position: relative; padding: 70px 30px 28px !important; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)) !important;
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .7) !important; }
.pr-col::before { content: ""; display: block !important; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--h) 22%, transparent), transparent 70%); }
html[data-sc-theme="light"] .pr-col { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45)) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .7), 0 40px 80px -44px rgba(20, 40, 90, .28) !important; }
html[data-sc-theme="light"] .pr-col::before { background: radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--h) 14%, transparent), transparent 70%); }
.pr-col > * { position: relative; }
.pr-col .slot { position: absolute !important; top: 0; }
.pr-col .count { position: absolute !important; top: 20px; right: 22px; margin: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--text-3);
  padding: 6px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-2); }
.pr-col .count::after { content: " SERVICES"; }
.pr-col h3 { font-size: clamp(24px, 2vw, 30px) !important; font-weight: 600; letter-spacing: -.03em; margin-bottom: 6px; }
.pr-col .tag { font-family: var(--f-ui) !important; font-style: normal !important; font-size: 15px !important; margin-bottom: 20px; }
.pr-col li a { font-size: 14.5px; padding: 11px 2px; justify-content: space-between !important; border-top: 1px solid var(--line); }
.pr-col li a svg { opacity: .5; }
.pr-col li a:hover { color: var(--hi); }
.pr-head { margin-bottom: clamp(110px, 15vh, 160px) !important; }
.pr-head .h2 { font-size: clamp(38px, 4.6vw, 68px) !important; max-width: none; }
@media (max-width: 767px) { .pr-col { padding: 92px 22px 22px !important; } }
/* merged: one continuous glass pane behind the whole bar (the per-group panes would show as lumps) */
.navl::before { content: ""; position: absolute; top: 0; height: 52px; left: var(--wkm-bar-l, 0); width: var(--wkm-bar-w, 0); border-radius: 999px; pointer-events: none;
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); opacity: 0; transition: opacity 240ms; }
.navl.is-merged::before { opacity: 1; }
.navl.is-merged .navl-g::before { opacity: 0 !important; }
@media (max-width: 767px) { .hero-h, html[data-hero="c"] .hero-h { font-size: clamp(32px, 9.4vw, 42px) !important; } .h2 { font-size: clamp(32px, 9vw, 44px); } }

/* ═══════════════ V9 — San's round 9 ═══════════════ */
/* the header wordmark is the brand's OWN lettering (vector, from the logo file), in the theme's ink */
.navl .wm { display: inline-flex; align-items: center; color: var(--hi); }
.wm-art { display: block; height: 17px; width: auto; flex: none; }
.wm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.navl .nav-logo { gap: 10px; }

/* editorial accent: condensed capitals carry the line, ONE word sits in Instrument Serif italic, lower case */
.h-display em, .h1 em, .h2 em, .hero-h em, .tt > span:last-child em {
  font-family: var(--f-serif) !important; font-style: italic !important; font-weight: 400 !important; text-transform: none !important;
  letter-spacing: -.005em !important; font-size: 1.1em !important; line-height: .8; }
.h2 em, .h1 em, .tt > span:last-child em { color: var(--hi) !important; }
.hero-h em { font-size: 1.14em !important; padding-right: .04em; }
.hero-h em.k-blue { color: var(--sky) !important; } .hero-h em.k-green { color: var(--mint) !important; } .hero-h em.k-orange { color: var(--amber) !important; }
html[data-sc-theme="light"] .hero-h em.k-blue { color: var(--blue) !important; } html[data-sc-theme="light"] .hero-h em.k-green { color: #12924a !important; } html[data-sc-theme="light"] .hero-h em.k-orange { color: #d9661c !important; }
.hero-text { max-width: min(700px, calc(min(100vw - 2 * var(--gutter), var(--page)) - min(39vw, 600px, 58vh * 1.635) - 60px)); }
.hero-text .lead { max-width: 52ch; text-wrap: balance; }

/* eyebrows: a small glass capsule; the mark's drops land, the stressed part glows in the brand's three hues */
.eyebrow { padding: 7px 14px 7px 10px; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; letter-spacing: .16em; gap: 9px; }
html[data-sc-theme="light"] .eyebrow { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07), inset 0 1px 0 #fff, 0 6px 18px -10px rgba(20, 40, 90, .25); }
.eyebrow::after { display: none !important; }
.eyebrow b { font-weight: 600; background: linear-gradient(90deg, #4c9bff, #2fcf7d 55%, #ffad4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-sc-theme="light"] .eyebrow b { background: linear-gradient(90deg, #1d5fd6, #12924a 55%, #e0701c); -webkit-background-clip: text; background-clip: text; }
.work .eyebrow b { color: transparent; }

/* the drops: a softer glow, and instead of moving noise a slow, faint light passing over them, so the grain
   catches it and glints, like a lamp moving across a textured surface */
.lobe .halo { opacity: .2 !important; filter: blur(70px); }
.lobe img { filter: drop-shadow(0 22px 34px rgba(0, 10, 30, .28)) !important; }
html[data-sc-theme="light"] .lobe img { filter: drop-shadow(0 22px 30px rgba(20, 40, 90, .16)) !important; }
.lobe-in::after { background: radial-gradient(30% 34% at 50% 50%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 72%) 0 0 / 240% 240% no-repeat !important;
  mix-blend-mode: overlay; opacity: .85; animation: sc-gloss 16s ease-in-out infinite alternate !important; }
@keyframes sc-gloss { 0% { background-position: 8% 0%; } 50% { background-position: 60% 30%; } 100% { background-position: 100% 70%; } }
@media (prefers-reduced-motion: reduce) { .lobe-in::after { animation: none !important; background-position: 30% 20% !important; } }

/* practices: proportional spacing (more air under the title, less inside the card's foot) */
.pr-head { margin-bottom: clamp(150px, 20vh, 200px) !important; gap: 18px; }
.pr-col { padding: 66px 28px 12px !important; }
.pr-col li:last-child a { border-bottom: 0; }
.pr-col::before { background: radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--h) 14%, transparent), transparent 70%) !important; }

/* stack: a quiet strip, not a row of boxes — the logos in one tone, colour on hover */
.stackband { padding-block: 34px !important; background: transparent !important; border-block: 1px solid var(--line); }
.sb { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 60px); }
.sb-label { margin: 0; font: 500 14px/1.35 var(--f-ui); color: var(--text-2); }
.sb-label span { display: block; color: var(--text-3); }
.sb-rail { min-width: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.stackband .tech { height: 40px; padding: 0 14px !important; background: none !important; box-shadow: none !important; font: 500 15px/1 var(--f-ui); color: var(--text-3); gap: 10px; transition: color 200ms; }
.stackband .tech img { width: 22px; height: 22px; filter: grayscale(1) brightness(1.6) contrast(.8); opacity: .55; transition: filter 300ms, opacity 300ms; }
html[data-sc-theme="light"] .stackband .tech img { filter: grayscale(1) brightness(.5); opacity: .5; }
.stackband .tech:hover { color: var(--hi); } .stackband .tech:hover img { filter: none !important; opacity: 1; }
@media (max-width: 767px) { .sb { grid-template-columns: 1fr; gap: 14px; text-align: center; } }

/* backlog: an eyebrow; the list loses its rules — a quiet rail joins the checkboxes and fills in each practice's
   colour as tasks are handed off; rows breathe and lift on hover */
.ho-title { display: grid; gap: 18px; }
.ho-item { border-top: 0 !important; position: relative; padding: 13px 14px 13px 0; border-radius: 14px; transition: background-color 300ms; }
.ho-item:hover { background: var(--fill-1); }
.ho-item .box { position: relative; z-index: 1; }
.ho-item::before { content: ""; position: absolute; left: 11px; top: calc(50% + 14px); height: calc(100% - 28px); width: 2px; border-radius: 2px; background: var(--line-2); transition: background-color 500ms; }
.ho-item:has(+ .ho-segs)::before, .ho-item:last-of-type::before { display: none; }
.ho-item.is-done::before { background: var(--h); }
.ho-list .top { border-bottom: 0 !important; }
.owner b { font-family: var(--f-ui) !important; font-weight: 600 !important; letter-spacing: -.025em !important; text-transform: none; }

/* the service theatre: the stage is glass, sits dead centre of the space under the header; each service holds the
   screen (step-hold in the library moves ONE service per gesture) */
.th { --hdr: 80px; --stage-h: min(560px, calc(100vh - var(--hdr) - 90px)); align-items: start; }
.th-stage-wrap { top: calc(var(--hdr) + (100vh - var(--hdr) - var(--stage-h)) / 2) !important; height: var(--stage-h) !important; }
.th-steps { padding-bottom: 0 !important; }
.th-step { min-height: calc(100vh - var(--hdr)) !important; justify-content: center; }
.th-stage { border-radius: 28px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), radial-gradient(80% 70% at 85% 0%, color-mix(in srgb, var(--th) 16%, transparent), transparent 70%) !important;
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .7) !important; }
.th-stage::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14) !important; }
html[data-sc-theme="light"] .th-stage { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)), radial-gradient(80% 70% at 85% 0%, color-mix(in srgb, var(--th) 12%, transparent), transparent 70%) !important; box-shadow: 0 50px 100px -56px rgba(20, 40, 90, .32) !important; }
html[data-sc-theme="light"] .th-stage::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 30, 50, .05) !important; }
.th-name { font-family: var(--f-ui) !important; text-transform: none; }

/* the cloud demo */
.d-arch { position: absolute; inset: 4px 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.d-arch .arch-svg { flex: 1; min-height: 0; width: 100%; overflow: visible; }
.a-ln { fill: none; stroke: color-mix(in srgb, var(--sky) 26%, transparent); stroke-width: 1.3; transition: opacity 600ms; }
html[data-sc-theme="light"] .a-ln { stroke: rgba(29, 95, 214, .22); }
.a-ln.off { opacity: 0; }
.a-node rect { fill: color-mix(in srgb, var(--ink-3) 92%, transparent); stroke: rgba(140, 200, 255, .2); stroke-width: 1; }
html[data-sc-theme="light"] .a-node rect { fill: #fff; stroke: rgba(29, 95, 214, .18); }
.a-node text { fill: var(--text); font: 600 11.5px var(--f-ui); }
.a-node text.sub, .a-group text.sub { fill: var(--text-3); font: 500 9px var(--f-mono); letter-spacing: .06em; }
.a-node.hot rect { stroke: var(--sky); }
.a-node.db rect { stroke: color-mix(in srgb, var(--sky) 60%, transparent); }
.a-group rect { fill: color-mix(in srgb, var(--blue) 7%, transparent); stroke: color-mix(in srgb, var(--sky) 30%, transparent); stroke-dasharray: 4 5; }
.a-node.rep rect { fill: color-mix(in srgb, var(--blue) 22%, var(--ink-3)); stroke: color-mix(in srgb, var(--sky) 70%, transparent); }
html[data-sc-theme="light"] .a-node.rep rect { fill: #eaf2ff; }
.a-node.rep { transform-box: fill-box; transform-origin: center; transition: opacity 700ms, transform 900ms cubic-bezier(.34, 1.4, .64, 1); }
.a-node.rep.off { opacity: .18; transform: scale(.92); }
.a-node.rep.off rect { stroke-dasharray: 3 4; }
.a-dot { filter: drop-shadow(0 0 4px currentColor); }
.arch-metrics { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.arch-metrics span { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.arch-metrics i { font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-style: normal; }
.arch-metrics b { font: 600 17px/1 var(--f-ui); color: var(--hi); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .arch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .th-step { min-height: 0 !important; } }
.eyebrow { width: fit-content; }
@media (max-width: 767px) { .hero-text { max-width: none !important; } .hero-text .lead { max-width: none; } }

/* ═══════════════ V10 — San's round 10 ═══════════════ */
/* header: a slimmer bar (44) with more room at the ends; the frosted pane matches the shape exactly */
.navl, .navl-g, .navl-blobs i { height: 44px !important; }
.navl .nav-links > a, .navl .nav-links > button { height: 30px; padding: 0 12px; }
.navl-ptr { top: 7px !important; height: 30px !important; }
.navl-g::before { inset: 0 -16px !important; }
.navl::before { height: 44px !important; }
.navl .theme-tg { width: 32px !important; height: 32px !important; }
.navl .btn.sm { height: 34px !important; font-size: 13px; } .navl .btn.sm .coin { width: 26px !important; height: 26px !important; }
.navl .nav-logo .mk { width: 40px; height: 24px; }
.wm-art { height: 16px; }

/* eyebrows: real glass (see-through, frosted), smaller type, a tint in the words */
.eyebrow { padding: 6px 12px 6px 9px; font-size: 10.5px; letter-spacing: .17em; gap: 8px; color: color-mix(in srgb, var(--sky) 55%, var(--text-2));
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12) !important; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); }
html[data-sc-theme="light"] .eyebrow { color: color-mix(in srgb, var(--blue) 62%, #5b6170);
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16)) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07), inset 0 1px 0 rgba(255, 255, 255, .85) !important; }
.eyebrow svg.mk { width: 22px; height: 14px; }

/* titles: a touch tighter */
.h-display, .h1, .h2 { letter-spacing: -.016em !important; }
.hero-h { letter-spacing: -.018em !important; }

/* theatre: quieter stage shadow; the button below the stories breathes */
.th-stage { box-shadow: 0 28px 60px -40px rgba(0, 0, 0, .5) !important; }
html[data-sc-theme="light"] .th-stage { box-shadow: 0 28px 56px -44px rgba(20, 40, 90, .22) !important; }
.theatre .th + div { margin-top: clamp(44px, 6vh, 72px) !important; }

/* the cloud demo, v2 */
.a-ln { stroke-width: 1.2; }
.a-ln.bus { stroke-width: 1.6; stroke: color-mix(in srgb, var(--sky) 34%, transparent); }
.a-ln.flow { stroke-dasharray: 2 6; animation: sc-flow 1.4s linear infinite; stroke: color-mix(in srgb, var(--sky) 55%, transparent); stroke-linecap: round; }
.a-ln.flow.ai { stroke: color-mix(in srgb, var(--mint) 70%, transparent); }
html[data-sc-theme="light"] .a-ln.flow { stroke: rgba(29, 95, 214, .45); } html[data-sc-theme="light"] .a-ln.flow.ai { stroke: rgba(18, 146, 74, .55); }
@keyframes sc-flow { to { stroke-dashoffset: -16; } }
.a-group.ai rect { fill: color-mix(in srgb, var(--green) 6%, transparent); stroke: color-mix(in srgb, var(--mint) 40%, transparent); }
.a-group.ai text { fill: color-mix(in srgb, var(--mint) 80%, var(--text-3)) !important; }
.a-node.aiN rect { stroke: color-mix(in srgb, var(--mint) 55%, transparent); fill: color-mix(in srgb, var(--green) 10%, var(--ink-3)); }
html[data-sc-theme="light"] .a-node.aiN rect { fill: #effaf3; stroke: rgba(18, 146, 74, .3); }
.a-dot .halo { opacity: .22; }
.a-dot { filter: none !important; }
.a-pk { mix-blend-mode: normal; }
html[data-sc-theme="light"] .a-dot .halo { opacity: .2; }
/* metric chips: the value coloured by what it measures, a live sparkline, pips for replicas */
.arch-metrics { gap: 10px; }
.arch-metrics .m { --c: var(--sky); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 5px; padding: 11px 12px 10px; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), color-mix(in srgb, var(--c) 3%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.arch-metrics .m i { grid-column: 1 / -1; font: 500 9.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.arch-metrics .m b { font: 600 18px/1 var(--f-ui); letter-spacing: -.02em; color: var(--c); align-self: end; }
.arch-metrics .spark { width: 56px; height: 18px; align-self: end; overflow: visible; }
.arch-metrics .spark polyline { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.arch-metrics .m.rps { --c: var(--sky); } .arch-metrics .m.p95 { --c: var(--amber); } .arch-metrics .m.rep { --c: #8fb8ff; } .arch-metrics .m.ai { --c: var(--mint); }
html[data-sc-theme="light"] .arch-metrics .m.rps { --c: var(--blue); } html[data-sc-theme="light"] .arch-metrics .m.p95 { --c: #d9661c; } html[data-sc-theme="light"] .arch-metrics .m.rep { --c: #3a6fd8; } html[data-sc-theme="light"] .arch-metrics .m.ai { --c: #12924a; }
.pips { display: flex; gap: 4px; align-self: end; padding-bottom: 3px; }
.pips i { width: 9px; height: 9px; border-radius: 99px 99px 99px 2px; background: color-mix(in srgb, var(--c) 18%, transparent); transition: background-color 500ms, transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.pips i.on { background: var(--c); transform: scale(1.1); }
.arch-metrics > span { min-width: 0; }
.arch-metrics .m { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; align-items: end; }
.arch-metrics .pips { flex-direction: row; background: none; box-shadow: none; padding: 0 0 3px; }
.d-arch { gap: 14px; }
.arch-metrics .spark { width: 38px; } .arch-metrics .m b { overflow: visible; text-overflow: clip; font-size: 17px; }

/* ═══════════════ V11 — the service demos, rebuilt (540 × 400 design canvas, scaled to fit) ═══════════════ */
.dm { --dm-card: rgba(255, 255, 255, .035); --dm-line: rgba(255, 255, 255, .09); --dm-soft: rgba(255, 255, 255, .05); --ok: var(--mint); --run: var(--sky); --warn: var(--amber);
  position: absolute; left: 50%; top: 50%; width: 540px; height: 400px; transform-origin: center; font: 500 12px/1.35 var(--f-ui); color: var(--text); letter-spacing: -.005em; }
html[data-sc-theme="light"] .dm { --dm-card: #fff; --dm-line: rgba(20, 30, 50, .08); --dm-soft: rgba(20, 30, 50, .04); --ok: #12924a; --run: var(--blue); --warn: #d9661c; }
.dm .card { position: absolute; border-radius: 14px; background: var(--dm-card); box-shadow: inset 0 0 0 1px var(--dm-line); overflow: hidden; padding: 0; }
html[data-sc-theme="light"] .dm .card { box-shadow: inset 0 0 0 1px var(--dm-line), 0 10px 24px -18px rgba(20, 40, 90, .25); }
.dm .card::after, .dm .card::before { display: none; }
.dm .lbl { font: 500 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.dm .mono { font: 500 10px/1 var(--f-mono); color: var(--text-3); }
.dm .pill { margin-left: auto; height: 22px; padding: 0 10px; border-radius: 99px; display: inline-flex; align-items: center; font: 600 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: var(--dm-soft); transition: color 300ms, background-color 300ms; }
.dm .pill.run { color: var(--run); background: color-mix(in srgb, var(--run) 12%, transparent); }
.dm .pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.dm .kpis { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dm .k { --c: var(--run); display: grid; gap: 5px; padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent); }
.dm .k.ok { --c: var(--ok); } .dm .k.warn { --c: var(--warn); }
.dm .k i { font: 500 8.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-style: normal; }
.dm .k b { font: 600 15px/1 var(--f-ui); color: var(--c); letter-spacing: -.02em; }
.dm .st { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); position: relative; }
.dm .run > .st, .dm .st.run { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--run) 25%, transparent); }
.dm .run > .st::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--run); animation: sc-spin .8s linear infinite; }
.dm .ok > .st { background: var(--ok); box-shadow: none; }
.dm .ok > .st::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.dm .warn > .st { background: var(--warn); box-shadow: none; }
.dm .warn > .st::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 10px/1 var(--f-ui); }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* agents */
.ag-goal { display: flex; align-items: center; gap: 12px; padding: 0 12px !important; }
.ag-gt { font-weight: 600; font-size: 12.5px; color: var(--hi); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-g { width: 100%; height: 100%; overflow: visible; }
.ag-ln { stroke: var(--dm-line); stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 300ms; }
.ag-ln.on { stroke: var(--run); stroke-dasharray: none; } .ag-ln.done { stroke: color-mix(in srgb, var(--ok) 60%, transparent); stroke-dasharray: none; }
.ag-n circle { fill: var(--dm-card); stroke: var(--line-2); stroke-width: 1.5; transition: fill 300ms, stroke 300ms; }
html[data-sc-theme="light"] .ag-n circle { fill: #fff; }
.ag-n text { fill: var(--text-2); font: 600 9.5px var(--f-ui); }
.ag-n.on circle { stroke: var(--run); fill: color-mix(in srgb, var(--run) 18%, var(--dm-card)); }
.ag-n.done circle { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 16%, var(--dm-card)); }
.ag-n.warn circle { stroke: var(--warn); fill: color-mix(in srgb, var(--warn) 18%, var(--dm-card)); }
.ag-core circle { fill: color-mix(in srgb, var(--green) 85%, #000); }
.ag-core circle.ring { fill: none; stroke: color-mix(in srgb, var(--ok) 40%, transparent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: sc-agpulse 2.4s ease-in-out infinite; }
.ag-core.think circle.ring { stroke: var(--ok); animation-duration: .9s; }
.ag-core text { fill: #fff; font: 700 11px var(--f-ui); }
@keyframes sc-agpulse { 50% { transform: scale(1.12); opacity: .4; } }
.ag-pk { fill: var(--run); opacity: 0; }
.ag-trace { padding: 12px 12px 0 !important; }
.ag-th { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ag-r { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 10px; opacity: .45; transition: opacity 300ms, background-color 300ms; }
.ag-r.run, .ag-r.ok, .ag-r.warn { opacity: 1; } .ag-r.run { background: color-mix(in srgb, var(--run) 7%, transparent); } .ag-r.warn { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.ag-r b { display: block; font-size: 12px; font-weight: 600; color: var(--hi); }
.ag-r small { display: block; font: 500 9.5px/1.3 var(--f-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-r.warn small { color: var(--warn); }
.ag-r em { font: 500 9.5px/1 var(--f-mono); color: var(--text-3); font-style: normal; }

/* custom software & SaaS */
.sw-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 12px; box-shadow: inset 0 -1px 0 var(--dm-line); }
.sw-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.sw-bar span { margin-left: 10px; font: 500 9.5px/1 var(--f-mono); color: var(--text-3); }
.sw-side { position: absolute; left: 0; top: 30px; bottom: 0; width: 104px; padding: 12px 8px; display: grid; align-content: start; gap: 4px; box-shadow: inset -1px 0 0 var(--dm-line); }
.sw-m { --c: var(--sky); display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 7px; border-radius: 8px; font-size: 10.5px; font-weight: 600; color: var(--text-3); opacity: .3; transform: translateX(-6px); transition: opacity 400ms, transform 500ms cubic-bezier(.34, 1.4, .64, 1), background-color 400ms, color 400ms; }
.sw-m i { width: 9px; height: 9px; border-radius: 3px; background: var(--line-2); transition: background-color 400ms; }
.sw-m.on { opacity: 1; transform: none; color: var(--hi); background: color-mix(in srgb, var(--c) 10%, transparent); }
.sw-m.on i { background: var(--c); }
.sw-main { position: absolute; left: 104px; right: 0; top: 30px; bottom: 0; padding: 14px; }
.sw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sw-kpis span { display: grid; gap: 5px; padding: 8px 9px; border-radius: 10px; background: var(--dm-soft); }
.sw-kpis i { font: 500 8px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-style: normal; }
.sw-kpis b { font: 600 13px/1 var(--f-ui); color: var(--hi); }
.sw-rows { display: grid; gap: 5px; }
.sw-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--dm-soft); font-size: 10.5px; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 500ms; }
.sw-r.on { opacity: 1; transform: none; }
.sw-r b { color: var(--hi); font-weight: 600; } .sw-r span { font: 500 9px/1 var(--f-mono); color: var(--text-3); } .sw-r em { font-style: normal; font-weight: 600; color: var(--ok); }
.sw-pr { padding: 14px 13px !important; display: flex; flex-direction: column; gap: 8px; }
.sw-pt { font-size: 13px; color: var(--hi); line-height: 1.25; }
.sw-au { display: flex; align-items: center; gap: 7px; font: 500 9.5px/1 var(--f-mono); color: var(--text-3); margin-bottom: 4px; }
.sw-au i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--blue)); }
.sw-c { display: flex; align-items: center; gap: 9px; height: 30px; font-size: 11px; color: var(--text-2); }
.sw-c.ok { color: var(--hi); }
.sw-ship { margin-top: auto; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--dm-line); transition: transform 200ms, background-color 400ms, color 400ms; }
.sw-ship.press { transform: scale(.96); background: var(--dm-soft); }
.sw-ship.done { background: var(--ok); color: #fff; box-shadow: none; }
.sw-vs { display: grid; gap: 4px; font: 500 9.5px/1.2 var(--f-mono); color: var(--text-3); }
.sw-vs .now { color: var(--text-3); opacity: .4; transition: opacity 400ms, color 400ms; } .sw-vs.on .now { opacity: 1; color: var(--ok); }

/* mobile */
.mb-ph { position: absolute; width: 196px; height: 396px; border-radius: 34px; background: #0b1324; box-shadow: inset 0 0 0 5px #1b2436, 0 24px 40px -24px rgba(0, 0, 0, .5); overflow: hidden; }
.mb-isl { position: absolute; left: 50%; top: 11px; width: 66px; height: 18px; margin-left: -33px; border-radius: 99px; background: #000; z-index: 5; }
.mb-scr { position: absolute; inset: 5px; border-radius: 29px; background: #f6f4ef; color: #121826; padding: 40px 12px 12px; opacity: 0; transform: translateX(14px); transition: opacity 400ms, transform 500ms cubic-bezier(.34, 1.3, .64, 1); }
.mb-scr.on { opacity: 1; transform: none; }
.mb-h small { display: block; font-size: 9px; color: #7a7f8a; font-weight: 600; }
.mb-h b { font-size: 16px; letter-spacing: -.02em; }
.mb-days { display: flex; gap: 5px; margin: 10px 0; }
.mb-days span { flex: 1; text-align: center; padding: 6px 0; border-radius: 9px; background: #fff; font-size: 9px; font-weight: 600; color: #5d6370; }
.mb-days span.on { background: #1d5fd6; color: #fff; }
.mb-slot { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: #fff; margin-bottom: 6px; transition: transform 200ms, box-shadow 200ms; }
.mb-slot b { font-size: 12px; } .mb-slot span { font-size: 10px; font-weight: 600; } .mb-slot small { display: block; color: #8a8f99; font-weight: 500; }
.mb-slot.pressed, .mb-btn.pressed { transform: scale(.96); }
.mb-doc { display: flex; gap: 10px; align-items: center; padding: 10px; margin: 12px 0; border-radius: 12px; background: #fff; font-size: 10.5px; font-weight: 600; }
.mb-doc i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #8fd3a6, #1d5fd6); }
.mb-doc small { display: block; color: #8a8f99; font-weight: 500; }
.mb-row { display: flex; justify-content: space-between; padding: 7px 2px; font-size: 10.5px; color: #5d6370; border-bottom: 1px solid #ebe7df; }
.mb-row b { color: #121826; }
.mb-btn { margin-top: 16px; height: 34px; border-radius: 12px; background: #1d5fd6; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; transition: transform 200ms; }
.mb-note { display: block; text-align: center; margin-top: 6px; font-size: 8.5px; color: #8a8f99; }
.mb-ok { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.mb-ok i { width: 46px; height: 46px; border-radius: 50%; background: #12924a; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 800; }
.mb-ok b { font-size: 15px; } .mb-ok small { font-size: 10px; color: #5d6370; } .mb-ok span { margin-top: 6px; font-size: 9px; padding: 5px 9px; border-radius: 99px; background: #e5f4ea; color: #12924a; font-weight: 700; }
.mb-push { position: absolute; left: 10px; right: 10px; top: 36px; z-index: 6; display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 14px; background: rgba(28, 34, 48, .9); color: #fff; backdrop-filter: blur(10px); transform: translateY(-80px); transition: transform 600ms cubic-bezier(.34, 1.4, .64, 1); }
.mb-push.on { transform: none; }
.mb-push i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--green), var(--blue)); flex: none; }
.mb-push b { display: block; font-size: 10px; } .mb-push small { font-size: 8.5px; opacity: .7; }
.mb-tap { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(29, 95, 214, .35); opacity: 0; z-index: 7; pointer-events: none; }
.mb-tap.go { animation: sc-tap 520ms ease-out; }
@keyframes sc-tap { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
.mb-panel, .mb-perf { padding: 14px !important; }
.mb-tree { margin-top: 12px; text-align: center; }
.mb-tree .src { display: inline-block; padding: 7px 12px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3fa0ff, #1d5fd6); }
.mb-tree svg { display: block; width: 240px; height: 40px; margin: 0 auto; }
.mb-tree path { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.mb-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-stores span { display: grid; gap: 3px; padding: 8px; border-radius: 10px; background: var(--dm-soft); text-align: left; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 400ms, background-color 400ms; }
.mb-stores b { font-size: 12px; color: var(--hi); } .mb-stores small { font: 500 8.5px/1.2 var(--f-mono); color: var(--text-3); }
.mb-stores span.ok { background: color-mix(in srgb, var(--ok) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.mb-stores span.ok b::after { content: " ✓"; color: var(--ok); }
.mb-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 38px; border-bottom: 1px solid var(--dm-line); font-size: 11px; color: var(--text-2); }
.mb-m:last-child { border-bottom: 0; }
.mb-m b { font: 600 14px/1 var(--f-ui); color: var(--ok); }
.mb-m:has(.mb-sp) { grid-template-columns: minmax(0, 1fr) auto 90px; }
.mb-sp { width: 90px; height: 20px; } .mb-sp polyline { fill: none; stroke: var(--ok); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* data */
.da-flow { position: absolute; }
.da-srcs { position: absolute; left: 0; top: 0; width: 118px; display: grid; gap: 6px; }
.da-srcs span { --c: var(--sky); display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--dm-card); box-shadow: inset 0 0 0 1px var(--dm-line); font-size: 10.5px; font-weight: 600; color: var(--hi); }
.da-srcs i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.da-lines { position: absolute; inset: 0; width: 540px; height: 126px; overflow: visible; }
.da-lines path { fill: none; stroke: var(--line-2); stroke-width: 1.3; }
.da-lines path.trunk { stroke: color-mix(in srgb, var(--ok) 45%, transparent); stroke-dasharray: 2 6; animation: sc-flow 1.4s linear infinite; stroke-linecap: round; }
.da-stg { position: absolute; top: 44px; width: 76px; height: 40px; display: grid; place-content: center; text-align: center; border-radius: 10px; background: var(--dm-card); box-shadow: inset 0 0 0 1px var(--dm-line); }
.da-stg b { font-size: 10.5px; color: var(--hi); } .da-stg small { font: 500 9px/1.3 var(--f-mono); color: var(--ok); }
.da-wh { position: absolute; left: 440px; top: 6px; width: 100px; text-align: center; }
.da-wh svg { width: 74px; height: 84px; display: block; margin: 0 auto; overflow: hidden; }
.da-wh ellipse, .da-wh path { fill: color-mix(in srgb, var(--ok) 10%, transparent); stroke: color-mix(in srgb, var(--ok) 55%, transparent); stroke-width: 1.5; }
.da-wh path.lv { fill: none; stroke: var(--ok); stroke-width: 2; transform: translateY(30px); }
.da-wh b { display: block; font-size: 10.5px; color: var(--hi); } .da-wh small { font: 500 9px/1.2 var(--f-mono); color: var(--text-3); }
.da-pk { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); offset-path: path("M176 63 H 430"); offset-rotate: 0deg; opacity: 0; }
.da-dash { padding: 14px !important; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr; gap: 12px 16px; }
.da-k { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.da-k span { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: baseline; padding: 9px 11px; border-radius: 10px; background: var(--dm-soft); }
.da-k i { grid-column: 1 / -1; font: 500 8.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-style: normal; }
.da-k b { font: 600 16px/1 var(--f-ui); color: var(--hi); letter-spacing: -.02em; }
.da-k em { font-style: normal; font: 600 9.5px/1 var(--f-mono); color: var(--ok); justify-self: end; }
.da-ch { display: grid; align-content: start; gap: 7px; }
.da-bar { display: grid; grid-template-columns: 62px minmax(0, 1fr) 30px; gap: 8px; align-items: center; font-size: 10.5px; color: var(--text-2); }
.da-bar i { height: 12px; border-radius: 4px; background: var(--c); width: 0; transition: width 900ms cubic-bezier(.2, .8, .2, 1); }
.dm.drawn .da-bar i { width: calc(var(--v) * 1%); }
.da-bar b { font: 600 10px/1 var(--f-mono); color: var(--text-2); }
.da-co { display: grid; align-content: start; gap: 7px; }
.da-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.da-grid i { height: 13px; border-radius: 3px; background: var(--dm-soft); transition: background-color 300ms; }
.da-grid i.on { background: color-mix(in srgb, var(--ok) calc(var(--a) * 85%), transparent); }
.da-grid i.x { background: none; }
.da-ins { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 11px; font-size: 11px; color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 14%, transparent), color-mix(in srgb, var(--run) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent); opacity: 0; transform: translateY(8px); transition: opacity 500ms, transform 600ms cubic-bezier(.34, 1.4, .64, 1); }
.da-ins.on { opacity: 1; transform: none; }
.da-ins i { font-style: normal; color: var(--ok); font-size: 14px; } .da-ins b { margin-right: 6px; color: var(--ok); }

/* UX/UI */
.ux-bar { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 10px; box-shadow: inset 0 -1px 0 var(--dm-line); }
.ux-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.ux-bar span { margin-left: 8px; font: 500 9.5px/1 var(--f-mono); color: var(--text-3); } .ux-bar em { margin-left: auto; font: 600 9px/1 var(--f-mono); font-style: normal; color: var(--warn); }
.ux-page { position: absolute; inset: 28px 0 0; padding: 14px 20px; background: #f6efe4; color: #3b2a20; }
.ux-nav { display: flex; gap: 14px; font-size: 9.5px; color: #7a6656; align-items: center; } .ux-nav b { font-family: Georgia, serif; font-size: 14px; color: #3b2a20; margin-right: auto; letter-spacing: -.02em; }
.ux-h { margin: 22px 0 8px; font: 700 21px/1.12 Georgia, serif; letter-spacing: -.01em; max-width: 300px; transition: font-size 500ms, letter-spacing 500ms; }
.ux-h.tight { font-size: 28px; letter-spacing: -.03em; }
.ux-p { margin: 0 0 12px; font-size: 10.5px; color: #7a6656; }
.ux-btn { display: inline-block; padding: 8px 14px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: #e8cfae; color: #9a7b5c; transition: background-color 500ms, color 500ms; }
.ux-btn.fix { background: #3b2a20; color: #fff; }
.ux-proof { display: flex; gap: 12px; margin-top: 12px; font-size: 9.5px; font-weight: 700; color: #7a6656; opacity: 0; transform: translateY(6px); transition: opacity 500ms, transform 500ms; }
.ux-proof.on { opacity: 1; transform: none; }
.ux-img { position: absolute; right: 18px; bottom: 18px; width: 120px; height: 120px; border-radius: 16px; background: radial-gradient(60% 60% at 40% 35%, #c8792b, #3b2a20); }
.ux-pin { position: absolute; display: flex; align-items: flex-start; gap: 6px; z-index: 3; opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: opacity 300ms, transform 400ms cubic-bezier(.34, 1.56, .64, 1); }
.ux-pin.on { opacity: 1; transform: none; }
.ux-pin i { flex: none; width: 20px; height: 20px; border-radius: 99px 99px 99px 3px; background: var(--warn); color: #fff; display: grid; place-items: center; font: 800 10px/1 var(--f-ui); font-style: normal; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); transition: background-color 300ms; }
.ux-pin span { max-width: 132px; padding: 6px 8px; border-radius: 9px; background: #fff; color: #222; font-size: 9.5px; line-height: 1.3; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35); transition: opacity 300ms; }
.ux-pin span b { display: block; font-size: 9px; color: var(--warn); }
.ux-pin.done i { background: #12924a; } .ux-pin.done span { opacity: 0; } .ux-pin.done i::after { content: ""; }
.ux-cur { position: absolute; z-index: 4; display: flex; align-items: flex-start; gap: 2px; transition: left 800ms cubic-bezier(.45, 0, .2, 1), top 800ms cubic-bezier(.45, 0, .2, 1); }
.ux-cur svg { width: 16px; height: 16px; } .ux-cur path { fill: #e9572f; stroke: #fff; stroke-width: 1.4; }
.ux-cur b { margin-top: 12px; padding: 3px 7px; border-radius: 6px; background: #e9572f; color: #fff; font-size: 9px; }
.ux-sys { padding: 14px 12px !important; }
.ux-sw { display: flex; gap: 5px; margin: 8px 0 12px; } .ux-sw i { flex: 1; height: 26px; border-radius: 7px; }
.ux-ty { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: Georgia, serif; color: var(--hi); } .ux-ty small { width: 100%; font: 500 9px/1 var(--f-mono); color: var(--text-3); }
.ux-bs { display: grid; gap: 5px; margin-top: 7px; } .ux-bs span { height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; }
.ux-bs .a { background: #3b2a20; color: #fff; } .ux-bs .b { background: #5a4130; color: #fff; } .ux-bs .c { background: var(--dm-soft); color: var(--text-3); }
.ux-sp { display: grid; gap: 4px; margin-top: 7px; } .ux-sp i { height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--warn) 55%, transparent); }
.ux-a11y { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 10px; border-radius: 9px; font-size: 10px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); transition: color 400ms, background-color 400ms; }
.ux-a11y.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }

/* growth */
.gr-ig { padding: 10px !important; }
.gr-u { display: flex; gap: 7px; align-items: center; font-size: 10px; } .gr-u i { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(#feda75, #d62976, #4f5bd5, #feda75); box-shadow: inset 0 0 0 2px var(--dm-card); }
.gr-u b { display: block; color: var(--hi); } .gr-u small { color: var(--text-3); font-size: 8.5px; }
.gr-img { position: relative; height: 170px; margin: 9px -10px; background: radial-gradient(60% 60% at 40% 35%, #c8792b, #2a1a10); display: grid; place-items: end start; padding: 10px; }
.gr-img span { font: 700 15px/1 Georgia, serif; color: #fff; }
.gr-act { font-size: 10px; color: var(--text-2); } .gr-act b { color: var(--hi); }
.gr-cmt, .gr-dm { margin-top: 9px; font-size: 10px; padding: 7px 9px; border-radius: 10px; background: var(--dm-soft); opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 500ms cubic-bezier(.34, 1.4, .64, 1); }
.gr-cmt.on, .gr-dm.on { opacity: 1; transform: none; }
.gr-dm { background: linear-gradient(135deg, #7b5cff, #d62976); color: #fff; } .gr-dm small { display: block; font-size: 8px; opacity: .8; margin-bottom: 3px; }
.gr-fn { padding: 14px !important; }
.gr-st { position: relative; margin-top: 14px; height: 54px; display: grid; align-content: center; justify-items: center; text-align: center; }
.gr-st i { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; translate: -50% 0; border-radius: 10px; background: color-mix(in srgb, #d62976 calc(16% + var(--d) * 6%), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #d62976 25%, transparent); transition: width 900ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d) * 150ms); }
html[data-sc-theme="light"] .gr-st i { background: color-mix(in srgb, #d62976 calc(10% + var(--d) * 5%), transparent); }
.dm.drawn .gr-st i { width: var(--w); }
.gr-st span { position: relative; font-size: 9.5px; color: var(--text-2); } .gr-st b { position: relative; font: 600 16px/1.1 var(--f-ui); color: var(--hi); }
.gr-dots { position: absolute; inset: 30px 0 0; pointer-events: none; }
.gr-dots i { position: absolute; top: 0; width: 5px; height: 5px; border-radius: 50%; background: #d62976; opacity: .7; animation: sc-fall 2.6s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes sc-fall { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 100% { transform: translate(calc((88px - var(--x, 0px)) * .5), calc(70px + var(--s) * 64px)); opacity: 0; } }
.gr-out { padding: 14px 12px !important; display: grid; align-content: start; gap: 12px; }
.gr-big { display: grid; gap: 4px; } .gr-big i { font: 500 8.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-style: normal; } .gr-big b { font: 600 20px/1 var(--f-ui); color: var(--ok); letter-spacing: -.02em; }
.gr-crm { padding: 12px !important; display: grid; align-content: start; gap: 4px; opacity: .4; transition: opacity 400ms; }
.gr-crm.on { opacity: 1; }
.gr-crm > b { font-size: 12.5px; color: var(--hi); margin-top: 4px; } .gr-crm > small { font-size: 9.5px; color: #d62976; margin-bottom: 4px; }
.gr-step { font-size: 10px; color: var(--text-3); opacity: .4; transition: opacity 300ms, color 300ms; } .gr-step.on { opacity: 1; color: var(--ok); }

/* stage plumbing for the new demos; phones get a taller stage so the canvas stays legible */
.act .dm { pointer-events: none; }
@media (max-width: 767px) { .th-mobile { height: auto !important; aspect-ratio: 540 / 420; } .th-mobile .act { inset: 6px !important; } }
.sw-side { width: 112px; } .sw-main { left: 112px; padding: 12px; } .sw-m { font-size: 10px; white-space: nowrap; }
.sw-kpis b { font-size: 12px; white-space: nowrap; }
.tile .tile-demo:has(.dm) { min-height: 380px; }

/* ═══════════════ V12 — the sections below the services ═══════════════ */
/* inverted bands (work, insights, careers): the serif word and the eyebrow take the BAND's ink, never the page's */
html .work .h1 em, html .work .h2 em, html .paper-sec .h1 em, html .paper-sec .h2 em, html .paper-sec .tt > span:last-child em { color: inherit !important; }
html .work .tt > span:last-child, html .paper-sec .tt > span:last-child { color: color-mix(in srgb, currentColor 55%, transparent); }
html .work .eyebrow, html .paper-sec .eyebrow { color: color-mix(in srgb, currentColor 70%, transparent) !important;
  background: color-mix(in srgb, currentColor 6%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent) !important; }

/* one surface for every working card below: glass (a lit top edge, a frosted body), the same as the practices */
.cc-queue, .cc-box, .bp-card, .plan-card, .model-view, .chat-win, .book-card, .model-list {
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .022)) !important;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(0, 0, 0, .6) !important; border-radius: 22px !important; }
html[data-sc-theme="light"] :is(.cc-queue, .cc-box, .bp-card, .plan-card, .model-view, .chat-win, .book-card, .model-list) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(20, 30, 50, .04), 0 30px 60px -44px rgba(20, 40, 90, .26) !important; }
:is(.cc-queue, .cc-box, .bp-card, .plan-card, .model-view, .chat-win, .book-card)::after { display: none !important; }
.plan-card { border-radius: 16px !important; }
.model-list { padding: 10px !important; }
/* the FAQ: the chat window sized to its answers, not a tall empty box; questions as quiet rows */
.chat-win { min-height: 0 !important; height: 440px; }
.wkm-chat-qs button { border-radius: 14px; transition: background-color 200ms; }
.wkm-chat-qs button[aria-pressed="true"] { background: color-mix(in srgb, var(--sky) 10%, transparent); }
/* section heads below: the same rhythm as above (eyebrow, title, then 56–80 px of air before the content) */
.sec-head { margin-bottom: clamp(48px, 6vw, 80px) !important; }
.stage-sky .ripples { --rip: rgba(150, 195, 255, .26); } html[data-sc-theme="light"] .stage-sky .ripples { --rip: rgba(0, 65, 116, .2); }

/* ═══════════════ V13 — round 12 polish ═══════════════ */
/* agents: tool cards wired edge to edge around a live agent card */
.ag-map .ag-w { position: absolute; inset: 0; width: 232px; height: 286px; overflow: visible; }
.ag-ln { fill: none; stroke: var(--dm-line); stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 300ms; }
html[data-sc-theme="light"] .ag-ln { stroke: rgba(20, 30, 50, .16); }
.ag-ln.on { stroke: var(--run); stroke-dasharray: none; } .ag-ln.done { stroke: color-mix(in srgb, var(--ok) 55%, transparent); stroke-dasharray: none; }
.ag-pk { fill: var(--run); opacity: 0; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--run) 60%, transparent)); }
.ag-tool { --c: var(--sky); position: absolute; height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 7px; border-radius: 11px; background: var(--dm-card); box-shadow: inset 0 0 0 1px var(--dm-line); transition: box-shadow 300ms, background-color 300ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
html[data-sc-theme="light"] .ag-tool { background: #fff; box-shadow: inset 0 0 0 1px var(--dm-line), 0 6px 14px -10px rgba(20, 40, 90, .3); }
.ag-tool i { flex: none; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-style: normal; }
.ag-tool i svg { width: 12px; height: 12px; } .ag-tool i b { font: 700 11px/1 var(--f-ui); }
.ag-tool span { min-width: 0; } .ag-tool b { display: block; font: 600 9.5px/1.15 var(--f-ui); color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ag-tool small { display: block; font: 500 8px/1.2 var(--f-mono); color: var(--text-3); }
.ag-tool.on { box-shadow: inset 0 0 0 1.5px var(--run); } .ag-tool.hit { transform: scale(1.06); }
.ag-tool.done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 60%, transparent); } .ag-tool.done small::after { content: " ✓"; color: var(--ok); }
.ag-tool.warn { box-shadow: inset 0 0 0 1.5px var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--dm-card)); }
.ag-core { position: absolute; width: 100px; height: 62px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: 16px; color: #fff;
  background: linear-gradient(150deg, #22b866, #0e7c41); box-shadow: 0 14px 28px -14px rgba(20, 164, 77, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ag-core::after { content: ""; position: absolute; inset: -5px; border-radius: 20px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ok) 45%, transparent); opacity: 0; transition: opacity 300ms; animation: sc-agpulse 1.6s ease-in-out infinite; }
.ag-core.busy::after { opacity: 1; }
.ag-ic { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); } .ag-ic svg { width: 13px; height: 13px; }
.ag-core b { display: block; font: 700 10.5px/1.1 var(--f-ui); } .ag-core small { display: block; margin-top: 3px; font: 500 8px/1.2 var(--f-mono); opacity: .85; }

/* mobile: a real app */
.mb-sb { position: absolute; left: 14px; right: 14px; top: 13px; z-index: 6; display: flex; justify-content: space-between; align-items: center; font: 700 9px/1 var(--f-ui); color: #121826; padding: 0 8px; }
.mb-sb span { display: flex; gap: 3px; align-items: center; }
.mb-sb i { display: block; background: #121826; border-radius: 2px; } .mb-sb .sig { width: 10px; height: 6px; clip-path: polygon(0 100%, 100% 0, 100% 100%); } .mb-sb .wifi { width: 9px; height: 6px; border-radius: 9px 9px 2px 2px; } .mb-sb .bat { width: 15px; height: 7px; border-radius: 2px; }
.mb-scr { padding: 36px 11px 10px !important; }
.mb-top { display: flex; justify-content: space-between; align-items: center; } .mb-top small { display: block; font-size: 8.5px; color: #8a8f99; } .mb-top b { font-size: 15px; letter-spacing: -.02em; }
.mb-top .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font: 700 10px/1 var(--f-ui); color: #fff; background: linear-gradient(135deg, #f59e0b, #e9572f); }
.mb-search { display: flex; align-items: center; gap: 6px; margin: 9px 0 8px; height: 26px; padding: 0 9px; border-radius: 9px; background: #fff; font-size: 9px; color: #9aa0aa; } .mb-search svg { width: 10px; height: 10px; }
.mb-cats { display: flex; gap: 4px; } .mb-cats span { padding: 5px 8px; border-radius: 99px; background: #fff; font-size: 8.5px; font-weight: 600; color: #5d6370; } .mb-cats span.on { background: #121826; color: #fff; }
.mb-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 6px; } .mb-sec b { font-size: 11px; } .mb-sec small { font-size: 8.5px; color: #1d5fd6; font-weight: 600; }
.mb-doc { display: flex; gap: 8px; align-items: center; padding: 7px 8px; margin: 0 0 5px !important; border-radius: 12px; background: #fff; font-size: 9px; transition: transform 200ms; }
.mb-doc i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font: 700 9px/1 var(--f-ui); color: #fff; }
.mb-doc span { flex: 1; min-width: 0; } .mb-doc b { display: block; font-size: 10px; } .mb-doc small { display: block; color: #8a8f99; font-weight: 500; }
.mb-doc em { font-style: normal; font-size: 8px; font-weight: 700; color: #12924a; background: #e5f4ea; padding: 3px 6px; border-radius: 99px; }
.mb-doc.pressed, .mb-cta.pressed, .mb-pay.pressed, .mb-slots span.pressed { transform: scale(.96); }
.mb-tab { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 34px; border-radius: 14px; background: #fff; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .3); }
.mb-tab i { width: 26px; height: 26px; display: grid; place-items: center; color: #9aa0aa; border-radius: 9px; } .mb-tab i.on { color: #1d5fd6; background: #eaf1ff; } .mb-tab svg { width: 12px; height: 12px; }
.mb-back { font-size: 9.5px; font-weight: 600; color: #1d5fd6; }
.mb-pro { display: grid; justify-items: center; text-align: center; gap: 3px; margin: 8px 0 4px; } .mb-pro i { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-style: normal; font: 700 12px/1 var(--f-ui); color: #fff; margin-bottom: 4px; } .mb-pro b { font-size: 12px; } .mb-pro small { font-size: 8.5px; color: #8a8f99; }
.mb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .mb-slots span { text-align: center; padding: 7px 0; border-radius: 9px; background: #fff; font-size: 9.5px; font-weight: 700; color: #121826; transition: background-color 200ms, color 200ms, transform 200ms; }
.mb-slots span.gone { color: #c3c6cc; text-decoration: line-through; } .mb-slots span.on { background: #1d5fd6; color: #fff; }
.mb-cta { margin-top: 12px; height: 32px; border-radius: 11px; background: #121826; color: #fff; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; transition: transform 200ms; }
.mb-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 8px 12px 14px; border-radius: 20px 20px 24px 24px; background: #fff; box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .35); transform: translateY(105%); transition: transform 500ms cubic-bezier(.34, 1.2, .64, 1); }
.mb-sheet.on { transform: none; }
.mb-sheet .grab { display: block; width: 30px; height: 3px; border-radius: 3px; background: #dcdfe4; margin: 0 auto 8px; } .mb-sheet > b { font-size: 12px; }
.mb-upi { display: grid; gap: 5px; margin: 8px 0; } .mb-upi span { padding: 7px 9px; border-radius: 9px; font-size: 9px; font-weight: 600; box-shadow: inset 0 0 0 1px #e7e9ee; } .mb-upi span.on { box-shadow: inset 0 0 0 1.5px #1d5fd6; color: #1d5fd6; }
.mb-pay { height: 30px; border-radius: 10px; background: #12924a; color: #fff; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; transition: transform 200ms; }
.mb-ok i { animation: none; } .mb-scr.s3.on .mb-ok i { animation: sc-pop 600ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sc-pop { from { transform: scale(.3); opacity: 0; } }
.mb-cal { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 7px 10px; border-radius: 11px; background: #fff; text-align: left; }
.mb-cal span:first-child { display: grid; justify-items: center; padding: 3px 6px; border-radius: 7px; background: #fde8e4; color: #e9572f; } .mb-cal span:first-child b { font-size: 13px; line-height: 1; } .mb-cal small { font-size: 7.5px; font-weight: 700; }
.mb-cal span:last-child b { display: block; font-size: 9.5px; } .mb-cal span:last-child small { color: #8a8f99; font-weight: 500; font-size: 8px; }
.mb-pill { margin-top: 6px; font-size: 8.5px; padding: 4px 8px; border-radius: 99px; background: #e5f4ea; color: #12924a; font-weight: 700; }
.mb-push { display: none !important; }
.mb-notif { position: absolute; left: 9px; right: 9px; top: 32px; z-index: 7; display: flex; gap: 7px; align-items: flex-start; padding: 8px 9px; border-radius: 16px;
  background: rgba(245, 245, 247, .82); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); color: #121826;
  transform: translateY(-140%); opacity: 0; transition: transform 650ms cubic-bezier(.34, 1.3, .64, 1), opacity 300ms; }
.mb-notif.on { transform: none; opacity: 1; }
.mb-notif .ico { flex: none; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #2ec27e, #1d5fd6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.mb-notif .h { display: flex; justify-content: space-between; } .mb-notif .h b { font: 600 7.5px/1 var(--f-ui); letter-spacing: .04em; color: #6b7080; } .mb-notif .h small { font-size: 7.5px; color: #8a8f99; }
.mb-notif > span { flex: 1; min-width: 0; } .mb-notif > span > b { display: block; margin-top: 3px; font-size: 9.5px; } .mb-notif > span > small { display: block; font-size: 8.5px; color: #3c4150; line-height: 1.3; }

/* data: taller stage boxes; data moves only in the gaps between them */
.da-stg { top: 37px !important; height: 52px !important; gap: 3px; z-index: 2; }
.da-stg small { color: var(--ok); }
.da-pk { offset-path: path("M184 63 H 470") !important; z-index: 1; }
.da-wh { left: 444px !important; }

/* cloud: bigger labels */
.a-node text { font: 600 13.5px var(--f-ui) !important; }
.a-node text.sub, .a-group text.sub { font: 500 10px var(--f-mono) !important; }

/* UX: a real website under review */
.ux-br { overflow: hidden; }
.ux-bar { height: 30px; } .ux-bar .who { display: flex; margin-left: auto; margin-right: 10px; } .ux-bar .who i { width: 16px; height: 16px; border-radius: 50%; margin-left: -4px; display: grid; place-items: center; font: 700 8px/1 var(--f-ui); color: #fff; font-style: normal; box-shadow: 0 0 0 2px var(--dm-card); }
.ux-bar em { margin-left: 0 !important; }
.ux-view { position: absolute; inset: 30px 0 0; overflow: hidden; background: #f7f1e8; }
.ux-page { padding: 12px 20px 30px; color: #2e2118; transition: transform 1100ms cubic-bezier(.45, 0, .2, 1); }
.ux-nav { display: flex; gap: 14px; align-items: center; font-size: 9.5px; color: #7a6656; } .ux-nav b { font: 700 15px/1 Georgia, serif; color: #2e2118; margin-right: auto; letter-spacing: -.02em; }
.ux-nav .cart { padding: 5px 9px; border-radius: 99px; background: #2e2118; color: #fff; font-weight: 700; }
.ux-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; margin-top: 16px; align-items: center; }
.ux-copy small { font: 600 8.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #b06a2c; }
.ux-h { margin: 8px 0 8px !important; font: 700 19px/1.1 Georgia, serif !important; letter-spacing: -.01em; max-width: none !important; }
.ux-h.tight { font-size: 27px !important; letter-spacing: -.03em; }
.ux-copy p { margin: 0 0 11px; font-size: 9.5px; line-height: 1.45; color: #7a6656; }
.ux-btn { padding: 8px 14px !important; } .ux-link { margin-left: 10px; font-size: 9.5px; font-weight: 700; color: #2e2118; }
.ux-proof { flex-wrap: wrap; gap: 4px 10px !important; margin-top: 11px !important; }
.ux-photo { height: 200px; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 18px 30px -18px rgba(60, 30, 10, .5); }
.ux-shop { margin-top: 22px; } .ux-sh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .ux-sh b { font: 700 15px/1 Georgia, serif; } .ux-sh span { font-size: 9px; font-weight: 700; color: #b06a2c; }
.ux-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ux-card { padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px -14px rgba(60, 30, 10, .4); }
.ux-card .img { height: 112px; border-radius: 9px; margin-bottom: 7px; }
.ux-card b { display: block; font-size: 10px; } .ux-card small { display: block; font-size: 8.5px; color: #8a7666; } .ux-card em { display: block; margin-top: 5px; font-style: normal; font-size: 9.5px; font-weight: 700; color: #2e2118; opacity: 0; transition: opacity 500ms; } .ux-card em.on { opacity: 1; }
.ux-pin { --c: #e9572f; position: absolute; z-index: 5; display: flex; align-items: flex-start; gap: 6px; opacity: 0; transform: scale(.5); transform-origin: 0 0; transition: opacity 300ms, transform 450ms cubic-bezier(.34, 1.56, .64, 1); }
.ux-pin.l { flex-direction: row-reverse; transform-origin: 100% 0; }
.ux-pin.on { opacity: 1; transform: none; }
.ux-pin > i { flex: none; width: 22px; height: 22px; border-radius: 99px 99px 99px 3px; display: grid; place-items: center; font: 800 9.5px/1 var(--f-ui); font-style: normal; color: #fff; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 6px 12px -4px rgba(0, 0, 0, .4); }
.ux-pin .ux-th { width: 150px; padding: 8px 9px; border-radius: 11px; background: #fff; color: #222; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45); transition: opacity 400ms, transform 400ms; }
.ux-pin .hd { display: flex; justify-content: space-between; } .ux-pin .hd b { font-size: 9px; color: var(--c); } .ux-pin .hd small { font-size: 8px; color: #999; }
.ux-pin p { margin: 3px 0 0; font-size: 9.5px; line-height: 1.3; }
.ux-pin .fx { display: block; max-height: 0; overflow: hidden; font-size: 9px; font-weight: 700; color: #12924a; transition: max-height 300ms, margin 300ms; }
.ux-pin.done .fx { max-height: 14px; margin-top: 4px; }
.ux-pin.done .ux-th { opacity: 0; transform: translateY(-4px); transition-delay: 700ms; }
.ux-pin.done > i { background: #12924a; }
.ux-insp { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: grid; gap: 3px; padding: 8px 11px; border-radius: 11px; background: rgba(18, 24, 38, .92); color: #fff; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(6px); }
.ux-insp.on { animation: sc-insp 3.2s ease forwards; }
@keyframes sc-insp { 0% { opacity: 0; transform: translateY(6px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ux-insp .lbl { color: rgba(255, 255, 255, .55) !important; } .ux-insp b { font: 600 10px/1.2 var(--f-mono); }
.ux-cur { z-index: 7 !important; } .ux-cur b { background: #e9572f !important; }
.ux-sys { display: none !important; }

/* growth: the reel is a real photo; Instagram chrome; conversion steps */
.gr-ig { padding: 10px !important; }
.gr-u { gap: 7px; } .gr-u .ava { width: 26px; height: 26px; border-radius: 50%; background: url(../img/nw-hero.webp) center / cover; box-shadow: 0 0 0 2px var(--dm-card), 0 0 0 3.5px #d62976; }
.gr-u .ig { margin-left: auto; width: 18px; height: 18px; } .gr-u .ig svg { width: 18px; height: 18px; fill: none; stroke: url(#igG); stroke-width: 2; } .gr-u .ig .dot { fill: #d62976; stroke: none; }
.gr-img { position: relative; height: 196px !important; margin: 9px -10px 7px !important; background-size: cover !important; background-position: center 35% !important; padding: 0 !important; }
.gr-img span:not(.views):not(.reel):not(.play) { display: none; }
.gr-img .reel { position: absolute; right: 8px; top: 8px; font: 700 8px/1 var(--f-ui); color: #fff; padding: 4px 7px; border-radius: 99px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.gr-img .views { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 3px; align-items: center; font: 700 9.5px/1 var(--f-ui); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .gr-img .views svg { width: 10px; height: 10px; fill: #fff; }
.gr-img .play { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .3); }
.gr-img .play::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
.dm.playing .gr-img .play::after { animation: sc-reel 6s linear infinite; } @keyframes sc-reel { to { width: 100%; } }
.gr-icons { display: flex; gap: 9px; margin-bottom: 4px; } .gr-icons svg { width: 15px; height: 15px; fill: none; stroke: var(--hi); stroke-width: 1.8; stroke-linejoin: round; }
.gr-icons .heart.on { fill: #ed4956; stroke: #ed4956; animation: sc-pop 500ms cubic-bezier(.34, 1.56, .64, 1); }
.gr-cap { margin-top: 3px; font-size: 9.5px; color: var(--text-2); } .gr-cap b { color: var(--hi); }
.gr-cmt { margin-top: 7px !important; } .gr-dm { margin-top: 7px !important; }
.gr-fn { padding: 14px 12px !important; }
.gr-st { margin-top: 6px !important; height: 50px !important; }
.gr-st i { background: linear-gradient(90deg, color-mix(in srgb, #ff7a59 calc(18% + var(--d) * 6%), transparent), color-mix(in srgb, #d62976 calc(18% + var(--d) * 6%), transparent)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px color-mix(in srgb, #d62976 25%, transparent) !important; }
.gr-cv { display: block; text-align: center; margin-top: 6px; font: 600 9px/1 var(--f-mono); color: var(--text-3); opacity: 0; transition: opacity 500ms; transition-delay: calc(var(--d) * 200ms + 300ms); }
.gr-cv::before { content: "↓ "; color: #d62976; }
.dm.drawn .gr-cv { opacity: 1; }
.gr-out { gap: 14px !important; } .gr-big b { font-size: 22px !important; }
.gr-who { display: flex; gap: 7px; align-items: center; margin: 7px 0 5px; } .gr-who i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 8.5px/1 var(--f-ui); font-style: normal; color: #fff; background: linear-gradient(135deg, #f58529, #d62976); }
.gr-who b { display: block; font-size: 11px; color: var(--hi); } .gr-who small { font-size: 8.5px; color: #d62976; }

/* the hero CTA: a pane of glass (white glass on dark, dark glass on light). Its lit edge follows the pointer as if
   you tilted it (inset highlights, no gradient edges); a slow sheen passes when it rests; the beam is the glint. */
.btn.glass { --tx: -.35; --ty: -.6; --mx: 30%; --my: 0%;
  --b-bg: rgba(255, 255, 255, .13); --b-fg: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); color: #fff;
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset calc(var(--tx) * 2.5px) calc(var(--ty) * 2.5px) 0 -1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 40px -18px rgba(0, 0, 0, .7); overflow: hidden; transition: box-shadow 160ms; }
.btn.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(120px 60px at var(--mx) var(--my), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%); mix-blend-mode: screen; }
.btn.glass > :not(.wkm-beam-svg) { position: relative; z-index: 1; }
.btn.glass .coin { background: #fff; color: #0a0f1a; }
html[data-sc-theme="light"] .btn.glass { background: linear-gradient(180deg, rgba(22, 30, 48, .9), rgba(8, 12, 24, .82)); color: #fff;
  box-shadow: inset calc(var(--tx) * 2.5px) calc(var(--ty) * 2.5px) 0 -1px rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -18px rgba(10, 20, 50, .55); }
html[data-sc-theme="light"] .btn.glass::before { background: radial-gradient(120px 60px at var(--mx) var(--my), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); }
.btn.glass.idle::before { animation: sc-sheen 6.5s ease-in-out infinite; }
@keyframes sc-sheen { 0%, 55% { background-position: -160px 0; } 80%, 100% { background-position: 320px 0; } }
@media (prefers-reduced-motion: reduce) { .btn.glass.idle::before { animation: none; } }
.btn.glass::before { background-repeat: no-repeat; }
.gr-u .ig svg { width: 18px; height: 18px; fill: initial; stroke: none; }
.ag-tool { padding: 0 6px 0 5px; gap: 5px; } .ag-tool i { width: 17px; height: 17px; border-radius: 6px; } .ag-tool i svg { width: 10px; height: 10px; }
.ag-tool b { font-size: 9px; } .ag-tool small { font-size: 7.5px; }
.ag-core { width: 116px; } .ag-core small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
.ux-pin .ux-th span { max-width: none; padding: 0; background: none; box-shadow: none; border-radius: 0; opacity: 1; }
.ux-pin.done .ux-th span { opacity: 1; }
.ux-pin .ux-th .hd { display: flex; } .ux-pin .ux-th .fx { display: block; }
.sw-kpis span { padding: 7px 6px; } .sw-kpis b { font-size: 11px; }

.ag-tool.v { flex-direction: column; justify-content: center; height: 50px; gap: 3px; padding: 0 4px; text-align: center; }
.ag-tool.v span { width: 100%; } .ag-tool.v b { white-space: nowrap; overflow: visible; }

/* ═══════════════ V14 — San's round 13 ═══════════════ */
:root { --page: 1520px; }

/* logo: one light travels through the whole mark (sc.js energy); each drop's highlight is placed from it */
.lobe-in::after { background: radial-gradient(var(--gr, 160px) var(--gr, 160px) at var(--gx, 40%) var(--gy, 30%), rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 34%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, 0) 78%) 0 0 / 100% 100% no-repeat !important;
  mix-blend-mode: overlay; opacity: var(--ga, .9) !important; animation: none !important; }
html[data-sc-theme="light"] .lobe-in::after { opacity: calc(var(--ga, .9) * .9) !important; }

/* buttons: the coin TURNS. At rest its arrow points up-right; on hover the coin turns 45° clockwise (a spring, like
   one of the logo's drops settling) so the arrow lies flat and points the way. The drop's square corner then points
   back at the label, so the label keeps a little more room. The pill wakes: it lifts a pixel and a light passes. */
.btn { gap: 15px; transition: translate 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms var(--ease), background-color 300ms; }
.btn:hover, .btn:focus-visible { translate: 0 -1px; }
.btn .coin { transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1); }
.btn .coin svg { transform: rotate(-45deg); }
.btn:hover .coin, .btn:focus-visible .coin { transform: rotate(45deg) !important; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 38%, var(--sweep, rgba(255, 255, 255, .26)) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat; transition: background-position 0s; }
.btn:hover::after { background-position: -40% 0; transition: background-position 1000ms cubic-bezier(.3, .6, .2, 1); }
.btn { --sweep: rgba(40, 110, 255, .18); }
html[data-sc-theme="light"] .btn, .btn.glass, .btn.on-paper { --sweep: rgba(255, 255, 255, .3); }
html[data-sc-theme="light"] .btn.glass { --sweep: rgba(255, 255, 255, .26); }
.btn.ghost { --sweep: rgba(255, 255, 255, .14); }
html[data-sc-theme="light"] .btn.ghost { --sweep: rgba(255, 255, 255, .7); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--line-3, var(--line-2)), inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px -14px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } .btn .coin { transition-duration: 1ms; } }

/* titles: no grey second line. One ink, one serif word; the serif carries the stress on its own */
.tt > span:last-child { color: var(--text) !important; }
html .work .tt > span:last-child, html .paper-sec .tt > span:last-child { color: inherit !important; }

/* handoff owners: the drop pops when a task lands, no coloured glow (it flashed grey, then hue, and read cheap) */
.owner img { filter: drop-shadow(0 12px 16px var(--lobe-shadow)) brightness(1) !important; transition: transform 700ms cubic-bezier(.34, 1.56, .64, 1), filter 500ms ease; }
html[data-sc-theme="light"] .owner img { filter: drop-shadow(0 12px 14px rgba(20, 40, 90, .14)) brightness(1) !important; }
.owner.is-hit img { transform: scale(1.08) !important; filter: drop-shadow(0 12px 16px var(--lobe-shadow)) brightness(1.1) !important; }
html[data-sc-theme="light"] .owner.is-hit img { filter: drop-shadow(0 12px 14px rgba(20, 40, 90, .14)) brightness(1.08) !important; }
.owner[data-wkm-owner="experience"] img { padding: 6px 4px; }

/* theatre: a bigger stage (sc.js sizes it from its column: the demo canvas fills it) and richer service copy */
.th { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: clamp(30px, 4vw, 64px); }
.th-step p { font-size: 17px; max-width: 40ch; }
.th-step h3 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: color-mix(in srgb, var(--h) 82%, var(--text)); font-size: 1.06em; }
.th-kind { gap: 10px; color: color-mix(in srgb, var(--h) 78%, var(--text)); width: 100%; }
.th-kind > .drop + * { }
.th-kind .th-n { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--text-3); }
.th-kind .th-n b { font: 400 italic 34px/0.8 var(--f-serif); letter-spacing: -.02em; color: color-mix(in srgb, var(--h) 82%, var(--text)); }
.th-kind .pill { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px 0 5px; border-radius: 99px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 12%, rgba(255, 255, 255, .06)), color-mix(in srgb, var(--h) 5%, rgba(255, 255, 255, .02)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(10px); }
.th-kind .pill .drop.sm { width: 22px; height: 22px; }
.th-kind .pill .drop.sm svg { width: 11px; height: 11px; }
.th-tags { gap: 8px; margin-top: 4px; }
.th-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 9px 11px; font: 500 12px/1 var(--f-mono); color: var(--text-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 18%, var(--line)), inset 0 1px 0 rgba(255, 255, 255, .07); }
.th-tags span::before { content: ""; width: 6px; height: 6px; border-radius: 99px 99px 99px 1.5px; background: var(--h); opacity: .9; }
html[data-sc-theme="light"] .th-tags span { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 20%, rgba(20, 30, 50, .08)), 0 1px 2px rgba(20, 30, 50, .04); }
html[data-sc-theme="light"] .th-kind .pill { background: linear-gradient(180deg, color-mix(in srgb, var(--h) 10%, #fff), color-mix(in srgb, var(--h) 4%, rgba(255, 255, 255, .7))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 24%, transparent), 0 1px 2px rgba(20, 30, 50, .05); }
.th-tl { font: 500 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; }

/* CTA band: one glass card, the mark in its living rings, one line, one action */
.cta-x { background: var(--ink-0); }
.cta-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; padding: clamp(250px, 26vw, 330px) clamp(22px, 5vw, 80px) clamp(54px, 6vw, 84px); text-align: center;
  background: radial-gradient(60% 50% at 50% 18%, rgba(46, 120, 230, .16), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 90px -60px rgba(0, 0, 0, .6); }
html[data-sc-theme="light"] .cta-card { background: radial-gradient(60% 50% at 50% 18%, rgba(46, 120, 230, .1), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(20, 30, 50, .05), 0 40px 90px -60px rgba(20, 40, 90, .3); }
.cta-sky { position: absolute; left: 50%; top: clamp(60px, 6vw, 84px); width: clamp(190px, 18vw, 250px); aspect-ratio: 327 / 200; translate: -50% 0; z-index: -1; }
.cta-sky .ripples { inset: 0; width: 100%; height: 100%; --rip: rgba(140, 190, 255, .2); }
html[data-sc-theme="light"] .cta-sky .ripples { --rip: rgba(0, 65, 116, .14); }
.cta-mark { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 10, 30, .3)); }
html[data-sc-theme="light"] .cta-mark { filter: drop-shadow(0 16px 22px rgba(20, 40, 90, .16)); }
.cta-copy { position: relative; display: grid; justify-items: center; gap: 22px; }
.cta-copy .tt { justify-items: center; }
.cta-copy .lead { max-width: 46ch; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.cta-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--text-3); }
.cta-facts li { display: inline-flex; align-items: baseline; gap: 8px; }
.cta-facts b { font: 700 20px/1 var(--f-display); letter-spacing: -.01em; color: var(--text); text-transform: uppercase; }
@media (max-width: 767px) { .cta-card { border-radius: 28px; } .cta-facts { gap: 8px 20px; } }

/* start a project: two doors behind one glass switch */
.cx-hero { padding-bottom: 26px !important; }
.cx-hero .wrap { display: grid; gap: 22px; }
.cx-hero .lead { max-width: 52ch; margin: 0; }
.cx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.cx-switch { position: relative; display: inline-flex; padding: 5px; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14); backdrop-filter: blur(16px); }
.cx-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 99px; font: 500 15.5px/1 var(--f-body); color: var(--text-2); transition: color 250ms; }
.cx-switch button svg { width: 16px; height: 16px; }
.cx-switch button.is-on { color: #0a0f1a; }
.cx-switch .wkm-glide { background: linear-gradient(180deg, #fff, #e9eef7); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(20, 30, 50, .08); border-radius: 99px; }
html[data-sc-theme="light"] .cx-switch { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07), 0 1px 2px rgba(20, 30, 50, .05); }
html[data-sc-theme="light"] .cx-switch button.is-on { color: #fff; }
html[data-sc-theme="light"] .cx-switch .wkm-glide { background: linear-gradient(180deg, #1a2540, #08101f); box-shadow: 0 8px 18px -8px rgba(8, 16, 31, .55); }
.cx-doors { background: var(--ink-1); }
.cx-door { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cx-door.is-on { animation: cx-in 600ms cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cx-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cx-side { display: grid; gap: 22px; padding-top: 10px; }
.cx-side .lead { margin: 0; max-width: 44ch; }
.cx-k { display: inline-flex; align-items: center; gap: 10px; justify-self: start; height: 34px; padding: 0 14px 0 6px; border-radius: 99px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--h) 78%, var(--text)); background: linear-gradient(180deg, color-mix(in srgb, var(--h) 12%, rgba(255, 255, 255, .06)), color-mix(in srgb, var(--h) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 26%, transparent); }
.cx-k .drop.sm { width: 24px; height: 24px; } .cx-k .drop.sm svg { width: 12px; height: 12px; }
.cx-agenda { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.cx-agenda li { position: relative; display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; row-gap: 4px; padding: 18px 20px; border-radius: 22px 22px 22px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1); }
html[data-sc-theme="light"] .cx-agenda li { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06), 0 1px 2px rgba(20, 30, 50, .04); }
.cx-agenda .t { grid-row: span 2; font: 500 12px/1.3 var(--f-mono); letter-spacing: .06em; color: color-mix(in srgb, var(--h) 80%, var(--text)); padding-top: 3px; }
.cx-agenda b { font: 600 17px/1.25 var(--f-ui); color: var(--text); }
.cx-agenda li > span:last-child { color: var(--text-2); font-size: 15px; }
.cx-promises { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cx-promises li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.cx-promises b { display: block; font: 600 16px/1.3 var(--f-ui); color: var(--text); }
.cx-promises li > span:last-child > span { color: var(--text-2); font-size: 14.5px; }
@media (max-width: 900px) { .cx-door { grid-template-columns: 1fr; } .cx-promises { grid-template-columns: 1fr; } .cx-agenda li { grid-template-columns: 1fr; } .cx-agenda .t { grid-row: auto; } }
@media (max-width: 520px) { .cx-switch button { padding: 0 16px; font-size: 14.5px; height: 44px; } .cx-switch { width: 100%; } .cx-switch button { flex: 1; justify-content: center; } }

/* type, the whole class: the condensed display face is for CAPS headings and big numerals only. Every sentence-case
   line that inherited it (brief text, plan cards, FAQ questions, card titles, dialog heads) reads in Inter */
.mega-col h4, .mega-promo b, .sheet a.big, .d-phone .ttl, .prod-brand, .prod .stat b, .lab-grid figcaption b, .stmt, .belief h3, .stage-node h3,
.model-list button b, .model-view h3, .post h3, .role b, .wkm-chat-qs button, .wkm-chat-head b, .booked h3, .svc h3, .feat h3, .mdl b, .ss-step h3,
.wcard h3, .quote blockquote, .prow-copy h2, table.cmp td b, .equation .card h3, .pillar h3, .vm .card p, .perk h3, .hire b, .prose h2, .prose h3,
.apply h3, .wiz-step h3, .opt b, .promises b, .bp-text, .plan-card b, .dec b, .cc-box b, .seal b, .bdg h3, .bdg .back h4, .th-name, .next-case b {
  font-family: var(--f-ui) !important; text-transform: none; }
.bp-text { font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.5 !important; }
.plan-card b, .opt b, .promises b, .dec b, .cc-box b, .mdl b, .wkm-chat-head b { font-weight: 600 !important; letter-spacing: -.01em !important; }
.wkm-chat-qs button { font-weight: 500 !important; font-size: 16px !important; letter-spacing: -.01em !important; }
.booked h3, .wiz-step h3, .apply h3, .model-view h3, .pillar h3, .prow-copy h2, .next-case b, .stmt, .quote blockquote { letter-spacing: -.035em !important; }

/* how we work: the switch of stages as glass */
.bp-steps { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-sc-theme="light"] .bp-steps { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07); }

/* products: the step pills are glass too, the live one solid */
.pp-steps { padding: 4px; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); gap: 2px; }
.pp-steps button { box-shadow: none; height: 34px; }
html[data-sc-theme="light"] .pp-steps { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07); }

/* FAQ: question rows as quiet glass; the chosen one tinted; the chat window a touch taller */
.wkm-chat-qs button { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
html[data-sc-theme="light"] .wkm-chat-qs button { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06); }
.wkm-chat-qs button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 40%, transparent) !important; }
.chat-win { height: 470px !important; }
.cta-copy .h2 { font-size: clamp(40px, 5vw, 78px); max-width: none; }
.cta-card { padding-top: clamp(230px, 22vw, 290px); }
.cx-hero .h1 { max-width: none; }
/* no sideways scroll, ever: entrances that fly in from the edge (the badge rail) are clipped on x only */
.rail { overflow-x: clip; }
body { overflow-x: clip; }

/* ═══════════════ V15 — San's round 14 ═══════════════ */
/* the practices overlay sits over the hero until the scroll reveals it: it must not catch the pointer before then
   (it was swallowing the hero buttons' hover AND clicks). sc.js sets .practices pointer-events; the wrap inherits */
.practices .wrap { pointer-events: inherit; }
@media (max-width: 767px) { .practices { pointer-events: auto; } }

/* NIGHT — the page's ending (finale + footer) is night in both themes: the dark tokens, re-declared */
.night { color-scheme: dark; --ink-0: #02070f; --ink-1: #050d1b; --line: rgba(148, 186, 255, .11); --line-2: rgba(148, 186, 255, .2);
  --text: #edf3ff; --text-2: #a8b6cf; --text-3: #6d7d99; --hi: #fff; --strong: #fff; --on-strong: #050d1b; --blue: #3d9bff; --sky: #8cc8ff; --mint: #3ed27f;
  --fill-1: rgba(255, 255, 255, .03); --fill-2: rgba(255, 255, 255, .05); --fill-3: rgba(255, 255, 255, .08); --fill-4: rgba(255, 255, 255, .12); color: var(--text); }
html[data-sc-theme="light"] .night .btn.glass { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
  box-shadow: inset calc(var(--tx) * 2.5px) calc(var(--ty) * 2.5px) 0 -1px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 40px -18px rgba(0, 0, 0, .7); }
html[data-sc-theme="light"] .night .btn.ghost { box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .08); --sweep: rgba(255, 255, 255, .14); }
html[data-sc-theme="light"] .night .eyebrow { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--sky); }
html[data-sc-theme="light"] .night .ripples { --rip: rgba(140, 190, 255, .2); }
html[data-sc-theme="light"] .night .lead { color: var(--text-2); }

/* FINALE — the mark on a horizon of light, its rings rising over it, its reflection in the water */
.finale { position: relative; isolation: isolate; overflow: hidden; min-height: max(100vh, 860px); display: flex; flex-direction: column; padding-top: clamp(110px, 14vh, 160px);
  background: radial-gradient(70% 55% at 50% 66%, rgba(30, 90, 190, .22), transparent 70%), linear-gradient(180deg, #02060d 0%, #040b18 62%, #02050b 100%); }
.fn-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fn-aura { position: absolute; left: 50%; top: 66%; width: min(1100px, 120vw); height: 340px; translate: -50% -78%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 140, 255, .16), transparent 70%), radial-gradient(30% 40% at 24% 60%, rgba(62, 210, 127, .1), transparent 70%), radial-gradient(30% 40% at 78% 60%, rgba(255, 162, 74, .1), transparent 70%); filter: blur(10px); }
.fn-copy { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 22px; }
.fn-h { display: grid; justify-items: center; font-size: clamp(48px, 7.4vw, 128px) !important; line-height: .9 !important; letter-spacing: -.02em !important; color: #fff; text-wrap: balance; }
.fn-h em { color: #fff !important; font-size: 1.04em; }
.fn-copy .lead { max-width: 46ch; margin: 0; }
.fn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
.fn-horizon { position: relative; flex: 1; min-height: 300px; margin-top: clamp(10px, 3vh, 40px); }
.fn-mark { position: absolute; left: 50%; bottom: 46%; width: clamp(200px, 19vw, 300px); aspect-ratio: 327 / 200; translate: -50% 0; z-index: 1; }
.fn-mark > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(60, 140, 255, .18)); }
.fn-mark .ripples { inset: 0; width: 100%; height: 100%; }
.fn-line { position: absolute; left: 0; right: 0; bottom: 46%; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(140, 200, 255, .22) 18%, rgba(190, 225, 255, .55) 50%, rgba(140, 200, 255, .22) 82%, transparent); }
.fn-spot { --hx: 50%; position: absolute; left: 0; right: 0; bottom: calc(46% - 60px); height: 120px; z-index: 1; pointer-events: none;
  background: radial-gradient(260px 60px at var(--hx) 50%, rgba(140, 200, 255, .22), transparent 70%), radial-gradient(90px 2px at var(--hx) 50%, rgba(255, 255, 255, .9), transparent 100%); }
.fn-water { position: absolute; left: 50%; top: 54%; width: clamp(200px, 19vw, 300px); aspect-ratio: 327 / 200; translate: -50% 0; opacity: .2; filter: blur(2px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.fn-water img { width: 100%; height: 100%; object-fit: contain; transform: scaleY(-1); }
.fn-slots { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; padding-bottom: clamp(50px, 8vh, 90px); margin-top: -14%; }
.fn-lbl { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.fn-lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(62, 210, 127, .16); animation: sc-pulse 2s infinite; }
.fn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fn-chips a { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 6px 0 18px; border-radius: 99px; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px); transition: translate 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms; }
.fn-chips a:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .2); }
.fn-chips small { font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.fn-chips b { font: 700 24px/1 var(--f-display); letter-spacing: 0; }
.fn-chips .coin { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 99px 99px 99px 6px; background: #fff; color: #0a0f1a; transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1); }
.fn-chips .coin svg { width: 14px; height: 14px; transform: rotate(-45deg); }
.fn-chips a:hover .coin { transform: rotate(45deg); }
.fn-facts { font-size: 14px; color: var(--text-3); }
@media (max-width: 767px) {
  .finale { min-height: 0; padding-top: 90px; }
  .fn-horizon { min-height: 230px; }
  .fn-slots { margin-top: -60px; }
  .fn-chips a { height: 48px; padding-left: 14px; } .fn-chips b { font-size: 20px; } .fn-chips .coin { width: 36px; height: 36px; }
}

/* ASK — the FAQ as one question bar and an answer in big type; the questions a quiet index */
.ask { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.ask-side { display: grid; gap: 20px; position: sticky; top: 110px; }
.ask-side .lead { margin: 0; max-width: 34ch; }
.ask-list { position: relative; display: grid; margin-top: 14px; padding-left: 22px; }
.ask-list::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.ask-mark { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 99px 99px 99px 2px; background: var(--blue); opacity: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 20%, transparent);
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1), opacity 300ms; }
.ask-list button { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; text-align: left; color: var(--text-3); font: 500 17px/1.35 var(--f-ui); letter-spacing: -.01em; transition: color 250ms; }
.ask-list button .n { font: 500 11.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--text-3); }
.ask-list button:hover, .ask-list button[aria-pressed="true"] { color: var(--text); }
.ask-list button[aria-pressed="true"] .n { color: var(--blue); }
.ask-main { display: grid; gap: clamp(30px, 4vw, 48px); padding-top: 8px; }
.ask-bar { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 8px 0 10px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -40px rgba(0, 0, 0, .6); backdrop-filter: blur(16px); }
html[data-sc-theme="light"] .ask-bar { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07), inset 0 1px 0 #fff, 0 30px 60px -40px rgba(20, 40, 90, .3); }
.ask-bar:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 55%, transparent), 0 0 0 5px color-mix(in srgb, var(--blue) 14%, transparent); }
.ask-av { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--fill-2); }
.ask-av .mk { width: 30px; height: auto; }
.ask-in { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: 500 clamp(16px, 1.4vw, 19px)/1 var(--f-ui); letter-spacing: -.01em; }
.ask-in::placeholder { color: var(--text-3); }
.ask-go { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 99px 99px 99px 8px; background: var(--strong); color: var(--on-strong); transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1); }
.ask-go svg { width: 17px; height: 17px; transform: rotate(-45deg); }
.ask-go:hover { transform: rotate(45deg); }
.ask-ans { display: grid; gap: 18px; min-height: 340px; align-content: start; }
.ask-who { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ask-who b { font-weight: 500; color: var(--text); letter-spacing: .1em; }
.ask-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 18%, transparent); }
.ask-ans.is-typing .ask-dot { animation: sc-pulse 1s infinite; }
.ask-n { margin-left: auto; }
.ask-q { margin: 0; font: 400 italic clamp(26px, 2.6vw, 38px)/1.15 var(--f-serif); letter-spacing: -.01em; color: var(--text-2); min-height: 1.15em; }
.ask-a { margin: 0; font: 500 clamp(22px, 2.15vw, 31px)/1.42 var(--f-ui); letter-spacing: -.022em; color: var(--text); min-height: 4.3em; text-wrap: pretty; }
.ask-a span { animation: ask-w 420ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ask-w { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.ask-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; opacity: 0; transition: opacity 400ms; }
.ask-ans.is-done .ask-next { opacity: 1; }
.ask-more { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--f-ui); color: var(--text-2); }
.ask-more svg, .ask-next .link-arrow svg { width: 15px; height: 15px; }
.ask-more:hover { color: var(--text); }
@media (max-width: 900px) { .ask { grid-template-columns: 1fr; } .ask-side { position: static; } .ask-ans { min-height: 300px; } .ask-bar { height: 60px; } .ask-av { width: 42px; height: 42px; } .ask-go { width: 46px; height: 46px; } }

/* FOOTER — night, a monthly note, a live line and the lettering with a light inside */
.foot2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #02050b, #030a16); padding-top: clamp(64px, 8vw, 110px); }
.foot { display: none; }
.f2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(36px, 6vw, 110px); }
.f2-brand { display: grid; gap: 22px; align-content: start; }
.f2-logo .mk { width: 64px; height: auto; }
.f2-brand p { margin: 0; color: var(--text-2); font-size: 15.5px; max-width: 40ch; }
.f2-news { display: grid; gap: 10px; }
.f2-nl { font-size: 14px; color: var(--text-3); }
.f2-in { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 5px 0 20px; border-radius: 99px; max-width: 460px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12); }
.f2-in:focus-within { box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .45); }
.f2-in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 500 15px/1 var(--f-ui); }
.f2-in input::placeholder { color: var(--text-3); }
.f2-in .btn.sm { height: 46px; }
.f2-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.f2-cols h4 { margin: 0 0 16px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.f2-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.f2-cols a { position: relative; color: var(--text-2); font-size: 15px; transition: color 200ms; }
.f2-cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 380ms cubic-bezier(.3, .7, .2, 1); }
.f2-cols a:hover { color: #fff; } .f2-cols a:hover::after { transform: scaleX(1); transform-origin: left; }
.f2-tag { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 99px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; color: #0a0f1a; background: var(--mint); vertical-align: 2px; }
.f2-addr { display: block; color: var(--text-3); font-size: 14px; line-height: 1.5; }
.f2-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: clamp(48px, 6vw, 80px); padding: 14px 0; font: 500 12.5px/1 var(--f-mono); color: var(--text-3); }
.f2-stat b { color: var(--text); font-weight: 500; }
.f2-stat { display: inline-flex; align-items: center; gap: 9px; }
.f2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(62, 210, 127, .18); animation: sc-pulse 2s infinite; }
.f2-soc { margin-left: auto; display: flex; gap: 8px; }
.f2-soc a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px 99px 99px 6px; color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: color 200ms, transform 520ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms; }
.f2-soc a svg { width: 16px; height: 16px; }
.f2-soc a:hover { color: #fff; transform: rotate(-8deg); box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .45); }
.f2-word { margin: clamp(10px, 2vw, 24px) 0 0; }
.f2-word svg { display: block; width: 100%; height: auto; overflow: visible; }
.f2-out { fill: rgba(255, 255, 255, .025); stroke: rgba(170, 205, 255, .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.f2-base { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 26px 0 calc(28px + env(safe-area-inset-bottom, 0px)); margin-top: clamp(20px, 3vw, 40px); color: var(--text-3); font-size: 13.5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.f2-base nav { display: flex; gap: 20px; }
.f2-base nav a:hover { color: #fff; }
.f2-top-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font: 500 13.5px/1 var(--f-ui); color: var(--text-2); }
.f2-top-btn .coin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px 99px 99px 6px; background: rgba(255, 255, 255, .1); color: #fff; transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1), background-color 200ms; }
.f2-top-btn .coin svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.f2-top-btn:hover { color: #fff; } .f2-top-btn:hover .coin { transform: rotate(-45deg); background: #fff; color: #0a0f1a; }
@media (max-width: 1000px) { .f2-top { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .f2-cols { grid-template-columns: 1fr 1fr; gap: 28px 18px; } .f2-soc { margin-left: 0; } .f2-top-btn { margin-left: 0; } }

/* START A PROJECT v2 — one screen: the promise on the left, the door (a call ticket or the brief) beside the title */
.cx { position: relative; padding-block: clamp(120px, 15vh, 160px) clamp(70px, 9vw, 120px); background: var(--ink-1); overflow: hidden; }
.cx::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 82% 20%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%), radial-gradient(30% 40% at 0% 100%, color-mix(in srgb, var(--green) 7%, transparent), transparent 70%); }
.cx-grid { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.cx-left { display: grid; gap: 22px; align-content: start; }
.cx-left .crumbs { margin: 0; }
.cx-h { font-size: clamp(44px, 5.2vw, 84px) !important; }
.cx-left .lead { margin: 0; max-width: 44ch; }
.cx-left .cx-switch { justify-self: start; margin-top: 4px; }
.cx-rail { list-style: none; margin: 10px 0 0; padding: 0 0 0 26px; display: grid; gap: 22px; position: relative; }
.cx-rail::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--green), var(--blue), var(--orange)); opacity: .5; }
.cx-rail li { position: relative; display: grid; gap: 4px; }
.cx-rail li::before { content: ""; position: absolute; left: -26px; top: 3px; width: 11px; height: 11px; border-radius: 99px 99px 99px 2px; background: var(--h); box-shadow: 0 0 0 4px var(--ink-1); }
.cx-rail .t { font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 75%, var(--text)); }
.cx-rail b { font: 600 18px/1.25 var(--f-ui); letter-spacing: -.015em; color: var(--text); }
.cx-rail li > span:last-child { color: var(--text-2); font-size: 15px; max-width: 44ch; }
.cx-rail.is-on { animation: cx-in 600ms cubic-bezier(.2, .9, .3, 1) both; }
.cx-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--line); }
.cx-reach a { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 15px; } .cx-reach a:hover { color: var(--text); }
.cx-reach svg { width: 16px; height: 16px; color: var(--text-3); }
.cx-reach .online { padding: 8px 14px 8px 10px; font-size: 13.5px; }
.cx-right { position: sticky; top: 92px; display: grid; gap: 14px; }
.cx-door { display: block !important; } .cx-door[hidden] { display: none !important; }
.cx-promises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; grid-template-columns: none; }
.cx-promises li { display: inline-flex; align-items: center; gap: 8px; padding: 0; box-shadow: none; border-radius: 0; color: var(--text-3); font-size: 13.5px; }
.cx-promises svg { width: 15px; height: 15px; color: var(--mint); } .cx-promises b { color: var(--text); font-weight: 600; }

/* the call ticket */
.tk { position: relative; padding: 0 !important; border-radius: 30px !important; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14), 0 50px 100px -60px rgba(0, 0, 0, .7); backdrop-filter: blur(18px); }
html[data-sc-theme="light"] .tk { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .78)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06), inset 0 1px 0 #fff, 0 50px 100px -60px rgba(20, 40, 90, .35); }
.tk .book-form { padding: 0; }
.tk-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 22px 26px; box-shadow: inset 0 -1px 0 var(--line); }
.tk-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 99px 99px 99px 10px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); }
.tk-mark .mk { width: 30px; height: auto; }
.tk-head b { display: block; font: 600 19px/1.15 var(--f-ui); letter-spacing: -.02em; color: var(--text); }
.tk-head small { color: var(--text-3); font-size: 13.5px; }
.tk-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tk-meta > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; font: 500 12px/1 var(--f-mono); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.tk-meta svg { width: 13px; height: 13px; }
.tk-meta .free { color: #0a0f1a; background: var(--mint); box-shadow: none; }
.tk-sec { display: grid; gap: 12px; padding: 18px 26px 0; }
.tk-l { display: flex; justify-content: space-between; align-items: baseline; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.tk-l span { letter-spacing: .04em; text-transform: none; color: var(--text-3); }
.tk .days button { padding: 11px 4px; border-radius: 16px 16px 16px 5px; }
.tk .slots { grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.tk-half { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
.tk-half small { grid-column: 1 / -1; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; color: var(--text-3); margin-bottom: 2px; }
.tk .slots button { height: 44px; border-radius: 12px; font-size: 14px; }
.tk-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-topics button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 11px; border-radius: 99px; font: 500 13.5px/1 var(--f-ui); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms, color 200ms, box-shadow 200ms; }
.tk-topics button::before { content: ""; width: 7px; height: 7px; border-radius: 99px 99px 99px 2px; background: var(--h); }
.tk-topics button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.tk-topics button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--h) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 60%, transparent); }
.tk .fields .inp { height: 50px; }
.tk-stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 20px 26px 22px; background: var(--fill-1);
  background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 0); background-size: 12px 1px; background-repeat: repeat-x; background-position: 0 0; }
.tk-sum { display: grid; gap: 4px; min-width: 0; }
.tk-sum small { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.tk-sum b { font: 700 clamp(22px, 2vw, 28px)/1.05 var(--f-display); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); transition: color 300ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk.has-slot .tk-sum b { color: var(--text); }
.tk-sum span { font-size: 13px; color: var(--text-3); }
.tk .book-go { width: auto !important; flex: none; }
.tk .booked { padding: 44px 26px; }
html[data-sc-theme="light"] .tk .days button.is-on { background: #0b1730; color: #fff; }
@media (max-width: 1000px) { .cx-grid { grid-template-columns: 1fr; } .cx-right { position: static; } }
@media (max-width: 560px) {
  .tk-head { grid-template-columns: auto 1fr; padding: 18px; } .tk-meta { grid-column: 1 / -1; justify-content: flex-start; }
  .tk-sec { padding: 16px 18px 0; } .tk .days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tk .slots { grid-template-columns: 1fr; }
  .tk-stub { flex-direction: column; align-items: stretch; padding: 18px; } .tk .book-go { justify-content: space-between; }
  .tk .fields { grid-template-columns: 1fr; }
}
.cx-promises li b { display: inline; font: 600 13.5px/1.2 var(--f-ui); color: var(--text); }
.cx-promises li > span { display: inline; color: var(--text-3); font-size: 13.5px; }
.cx-promises li svg { display: block; flex: none; }
.fn-horizon { flex: none; height: clamp(320px, 38vh, 420px); min-height: 0; }
.fn-mark { bottom: 30%; width: clamp(220px, 21vw, 330px); }
.fn-line { bottom: 30%; } .fn-spot { bottom: calc(30% - 60px); }
.fn-water { top: 70%; width: clamp(220px, 21vw, 330px); opacity: .16; }
.fn-slots { margin-top: 0; }
.f2-out { fill: rgba(170, 205, 255, .055); stroke: none; }
@media (max-width: 767px) { .fn-horizon { height: 250px; } .fn-slots { margin-top: 0; } }
/* the rings rise from the horizon: nothing of them below the water line */
.fn-mark .ripples { clip-path: inset(-600% -600% 0 -600%); }
body:has(.finale) .foot2 { padding-top: 30px; }
/* phones: the door comes straight after the switch; the timeline and contact lines follow it */
@media (max-width: 1000px) {
  .cx-grid { display: flex; flex-direction: column; gap: 22px; }
  .cx-left { display: contents; }
  .cx-left > * { order: 1; } .cx-right { order: 2; margin-top: 6px; } .cx-left > .cx-rail, .cx-left > .cx-reach { order: 3; }
}

/* ═══════════════ V16 — round 15 ═══════════════ */
/* paired buttons keep a clear gap (the pull is capped in the engine too) */
.hero-cta, .fn-actions, .cta-actions { gap: 16px !important; }
/* the finale's eyebrow: a lit night capsule, a live dot, bright brand-hue words, a light that passes */
.fn-eye { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 18px 0 8px; border-radius: 99px; overflow: hidden;
  font: 500 11.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #d4e5ff;
  background: linear-gradient(180deg, rgba(140, 190, 255, .16), rgba(140, 190, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 44px -12px rgba(61, 155, 255, .6); backdrop-filter: blur(14px); }
.fn-eye::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%) -160% 0 / 250% 100% no-repeat; animation: fn-pass 5.5s ease-in-out infinite; }
@keyframes fn-pass { 0%, 60% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
.fn-live { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(62, 210, 127, .14); box-shadow: inset 0 0 0 1px rgba(62, 210, 127, .35); }
.fn-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ed27f; box-shadow: 0 0 10px #3ed27f; animation: sc-pulse 2s infinite; }
.fn-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(212, 229, 255, .45); }
.fn-eye b { font-weight: 600; background: linear-gradient(90deg, #5ee79a, #8fd0ff 50%, #ffbb73); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .fn-eye::after { animation: none; display: none; } }

/* INNER PAGES v2 — the page hero: copy on the left at a readable width; the whole mark in its live rings on the
   right, inside the layout (never cropped by the screen edge); the page's hue as a quiet aura behind it */
.phero { min-height: clamp(560px, 74vh, 760px); display: flex; align-items: center; padding-block: clamp(130px, 17vh, 170px) clamp(70px, 9vh, 100px) !important; }
.phero > .wrap { width: min(var(--page), 100% - 2 * var(--gutter)); }
.phero .wrap { gap: 22px; }
.phero .h1 { max-width: 17ch; font-size: clamp(42px, 5vw, 80px); }
.phero .lead { max-width: 52ch; margin: 0; }
.phero .eyebrow { margin: 0; }
.phero-art { position: absolute; right: max(var(--gutter), calc((100% - var(--page)) / 2)); left: auto; top: 54%; translate: 0 -50%; width: min(32vw, 470px); opacity: 1; z-index: 0; }
.phero-art::before { content: ""; position: absolute; inset: -30% -20%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--ph, var(--blue)) 22%, transparent), transparent 70%); filter: blur(10px); z-index: -1; }
.ph-mark { position: relative; width: 100%; aspect-ratio: 327 / 200; }
.ph-mark > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 26px 40px var(--lobe-shadow)) !important; }
.ph-mark .ripples { inset: 0; width: 100%; height: 100%; }
@media (min-width: 861px) { .phero:has(.phero-art) .wrap { padding-right: min(38vw, 540px) !important; } }
@media (max-width: 860px) {
  .phero { min-height: 0; display: block; }
  .phero-art { position: relative; right: auto; top: auto; translate: none; width: min(78vw, 360px); margin: 0 auto 8px; order: -1; }
  .phero:has(.phero-art) { display: flex; flex-direction: column-reverse; }
  .phero-art::before { inset: -20%; }
}

/* the inner-page ending: night horizon, small. Copy left, the mark on the line at right, its rings rising, its
   reflection below the line */
.fin-sm { position: relative; isolation: isolate; overflow: hidden; padding: clamp(100px, 13vh, 150px) 0 clamp(120px, 15vh, 170px);
  background: radial-gradient(60% 60% at 74% 78%, rgba(30, 90, 190, .22), transparent 70%), linear-gradient(180deg, #02060d, #040b18 70%, #02050b); }
.fin-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.fin-copy { display: grid; gap: 22px; justify-items: start; }
.fin-h { display: grid; font-size: clamp(42px, 5.6vw, 92px) !important; line-height: .92 !important; letter-spacing: -.015em !important; color: #fff; }
.fin-h em { color: #fff !important; font-size: 1.04em; }
.fin-copy .fn-actions { justify-content: flex-start; }
.fin-art { position: relative; height: clamp(180px, 20vw, 260px); }
.fin-art .fn-mark { left: 50%; bottom: 0; width: min(100%, 320px); }
.fin-art .fn-mark .ripples { clip-path: inset(-600% -600% 0 -600%); }
.fin-water { position: absolute; left: 50%; top: 100%; width: min(100%, 320px); aspect-ratio: 327 / 200; translate: -50% 0; opacity: .16; filter: blur(2px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.fin-water img { width: 100%; height: 100%; object-fit: contain; transform: scaleY(-1); }
.fin-sm .fn-line { bottom: clamp(120px, 15vh, 170px); }
.fin-news { max-width: 460px; width: 100%; }
@media (max-width: 860px) {
  .fin-in { grid-template-columns: 1fr; }
  .fin-art { height: 170px; order: -1; }
  .fin-sm .fn-line { display: none; }
  .fin-water { display: none; }
}
/* hero art v2b: a larger, masked stage around a smaller mark, so the rings fade out before any edge */
.phero-art { --mw: min(24vw, 360px); width: calc(var(--mw) * 2.1); aspect-ratio: 1.25; right: max(calc(var(--gutter) - var(--mw) * .55), calc((100% - var(--page)) / 2 - var(--mw) * .55)); top: 52%;
  display: grid; place-items: center; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); }
.phero-art::before { inset: 10%; }
.ph-mark { width: var(--mw); }
@media (min-width: 861px) { .phero:has(.phero-art) .wrap { padding-right: calc(min(24vw, 360px) + 80px) !important; } }
@media (max-width: 860px) { .phero-art { --mw: min(58vw, 280px); right: auto; margin: 0 auto -20px; } }
@media (max-width: 860px) { .phero-art { width: 100%; --mw: min(60vw, 280px); aspect-ratio: 1.5; margin: -10px 0 -30px; } .phero { min-height: 0 !important; } }

/* case story: chapters as rows, figure left in the chapter's hue, joined by a rail */
.cstory { display: grid; gap: 0; position: relative; }
.cst { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 110px); padding: clamp(40px, 6vw, 70px) 0; align-items: start; }
.cst + .cst { box-shadow: inset 0 1px 0 var(--line); }
.cst-num { display: grid; gap: 10px; align-content: start; }
.cst-num small { font: 500 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 75%, var(--text)); }
.cst-num b { font: 700 clamp(72px, 9vw, 140px)/.85 var(--f-display); letter-spacing: -.02em; color: var(--h); text-transform: uppercase; }
.cst-num span { color: var(--text-2); font-size: 16px; max-width: 26ch; }
.cst-copy { display: grid; gap: 14px; padding-top: 6px; }
.cst-k { font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.cst-copy h3 { margin: 0; font: 600 clamp(28px, 2.6vw, 40px)/1.08 var(--f-ui); letter-spacing: -.03em; color: var(--text); }
.cst-copy p { margin: 0; color: var(--text-2); font-size: 17.5px; line-height: 1.6; max-width: 56ch; }
@media (max-width: 860px) { .cst { grid-template-columns: 1fr; gap: 18px; } }

/* service approach: one path, five steps */
.approach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.approach::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: linear-gradient(90deg, var(--green), var(--blue), var(--mint), var(--orange), var(--sky)); opacity: .45; }
.approach li { position: relative; display: grid; gap: 12px; align-content: start; padding: 0 clamp(14px, 1.6vw, 26px) 0 0; }
.ap-n { position: relative; display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 99px 99px 99px 12px; font: 400 italic 30px/1 var(--f-serif); color: color-mix(in srgb, var(--h) 85%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 18%, var(--ink-1)), var(--ink-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 40%, transparent), 0 0 0 8px var(--ink-1); margin-bottom: 8px; }
.approach h3 { margin: 0; font: 600 19px/1.25 var(--f-ui); letter-spacing: -.015em; color: var(--text); }
.approach p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.ap-t { font: 500 11.5px/1.5 var(--f-mono); color: color-mix(in srgb, var(--h) 70%, var(--text-3)); letter-spacing: .02em; }
html[data-sc-theme="light"] .ap-n { color: color-mix(in srgb, var(--h) 80%, #000); }
@media (max-width: 1000px) { .approach { grid-template-columns: 1fr 1fr; gap: 36px 20px; } .approach::before { display: none; } }
@media (max-width: 560px) { .approach { grid-template-columns: 1fr; } }

/* company pillars: four glass cards in a grid, no pinned stack; the points are a plain list */
.pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
.pillar { position: relative !important; top: auto !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto auto; gap: 8px 22px !important; min-height: 0 !important; margin: 0 !important; padding: clamp(26px, 3vw, 38px) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1) !important; border-radius: 28px !important; }
html[data-sc-theme="light"] .pillar { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)) !important; box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06), 0 30px 60px -44px rgba(20, 40, 90, .3) !important; }
.pillar .no { grid-row: 1 / span 3; font: 400 italic 54px/.9 var(--f-serif) !important; letter-spacing: 0 !important; }
.pillar h3 { font-size: clamp(26px, 2.2vw, 32px) !important; margin: 0 0 6px !important; }
.pillar .sub { font-size: 19px !important; }
.pillar ul { grid-column: 2; gap: 9px !important; margin-top: 10px !important; }
.pillar ul li { padding: 0 !important; background: none !important; box-shadow: none !important; color: var(--text-2); font-size: 15.5px; }
.pillar .close { grid-column: 2 !important; margin-top: 10px !important; color: var(--text) !important; font-size: 15px; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.cst-copy .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cst-copy .tags span { font: 500 12px/1 var(--f-mono); color: var(--text-2); padding: 8px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 24%, var(--line)); }

/* ═══════════════ V17 — services and careers, rebuilt ═══════════════ */
/* hero: the three practices as glass capsules */
.pj { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pj a { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 6px; border-radius: 99px; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 12%, rgba(255, 255, 255, .05)), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: translate 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 250ms; }
.pj a:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 60%, transparent); }
.pj b { font: 600 15px/1 var(--f-ui); letter-spacing: -.01em; }
.pj small { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; font: 600 12.5px/1 var(--f-mono); color: color-mix(in srgb, var(--h) 80%, var(--text)); background: color-mix(in srgb, var(--h) 16%, transparent); }
.pj .drop.sm { width: 34px; height: 34px; }
html[data-sc-theme="light"] .pj a { background: linear-gradient(180deg, color-mix(in srgb, var(--h) 8%, #fff), rgba(255, 255, 255, .7)); }

/* need finder */
.nf-sec { background: var(--ink-1); }
.nf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.nf-needs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nf-needs button { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px 14px 14px; border-radius: 22px 22px 22px 8px; text-align: left; color: var(--text-2); font: 500 16.5px/1.3 var(--f-ui); letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: color 250ms, box-shadow 250ms, background-color 250ms, translate 320ms cubic-bezier(.34, 1.56, .64, 1); }
.nf-needs button:hover { color: var(--text); translate: 0 -2px; }
.nf-needs button[aria-pressed="true"] { color: var(--text); background: linear-gradient(180deg, rgba(61, 155, 255, .14), rgba(61, 155, 255, .04)); box-shadow: inset 0 0 0 1px rgba(61, 155, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .14); }
html[data-sc-theme="light"] .nf-needs button { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .07); }
html[data-sc-theme="light"] .nf-needs button[aria-pressed="true"] { background: linear-gradient(180deg, #fff, rgba(26, 111, 224, .06)); box-shadow: inset 0 0 0 1.5px rgba(26, 111, 224, .5); }
.nf-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 99px 99px 99px 10px; background: var(--fill-2); color: var(--text-2); transition: background-color 250ms, color 250ms; }
.nf-ic svg { width: 19px; height: 19px; }
.nf-needs button[aria-pressed="true"] .nf-ic { background: var(--strong); color: var(--on-strong); }
.nf-card { position: sticky; top: 110px; display: grid; gap: 20px; padding: clamp(24px, 3vw, 34px); border-radius: 30px;
  background: radial-gradient(70% 60% at 100% 0%, rgba(61, 155, 255, .12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14), 0 50px 100px -60px rgba(0, 0, 0, .7); }
html[data-sc-theme="light"] .nf-card { background: radial-gradient(70% 60% at 100% 0%, rgba(26, 111, 224, .08), transparent 70%), linear-gradient(180deg, #fff, rgba(255, 255, 255, .8)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06), 0 50px 100px -60px rgba(20, 40, 90, .35); }
.nf-card .btn { justify-self: start; }
.nf-head { display: flex; align-items: center; gap: 16px; }
.nf-head small { display: block; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.nf-head b { font: 600 clamp(22px, 2vw, 28px)/1.15 var(--f-ui); letter-spacing: -.025em; color: var(--text); }
.nf-mark { display: grid; place-items: center; flex: none; width: 92px; height: 66px; border-radius: 20px; background: var(--fill-1); box-shadow: inset 0 0 0 1px var(--line); }
.nf-mark .mk { width: 64px; height: auto; }
.nf-mark .mk path { opacity: .16; transition: opacity 500ms, filter 500ms; }
.nf[data-p~="intelligence"] .nf-mark .l1, .nf[data-p~="engineering"] .nf-mark .l2, .nf[data-p~="experience"] .nf-mark .l3 { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .25)); }
.js-nfbody ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.js-nfbody li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--fill-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 22%, var(--line)); }
.js-nfbody li i { width: 10px; height: 10px; border-radius: 99px 99px 99px 2px; background: var(--h); }
.js-nfbody li b { font: 600 16px/1.3 var(--f-ui); color: var(--text); }
.js-nfbody li small { font: 500 11.5px/1 var(--f-mono); letter-spacing: .06em; color: color-mix(in srgb, var(--h) 75%, var(--text-3)); }
.js-nfbody p { margin: 14px 0 0; padding: 16px 18px; border-radius: 16px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); background: linear-gradient(90deg, rgba(62, 210, 127, .1), transparent); }
.js-nfbody p::before { content: "First step  "; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-right: 6px; }
.js-nfbody.in li, .js-nfbody.in p { animation: nf-in 520ms cubic-bezier(.2, .9, .3, 1) both; }
.js-nfbody.in li:nth-child(2) { animation-delay: 70ms; } .js-nfbody.in li:nth-child(3) { animation-delay: 140ms; } .js-nfbody.in li:nth-child(4) { animation-delay: 210ms; } .js-nfbody.in p { animation-delay: 260ms; }
@keyframes nf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .nf { grid-template-columns: 1fr; } .nf-card { position: static; } }
@media (max-width: 520px) { .nf-needs { grid-template-columns: 1fr; } .js-nfbody li { grid-template-columns: auto 1fr; } .js-nfbody li small { grid-column: 2; } }

/* practice chapters: the practice on the left (its drop, promise, what you walk away with), its services on the right */
.pv { padding-block: clamp(80px, 10vw, 130px); background: var(--ink-0); position: relative; overflow: hidden; }
.pv:nth-of-type(odd) { background: var(--ink-1); }
.pv::before { content: ""; position: absolute; left: -10%; top: -10%; width: 60%; height: 70%; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--h) 12%, transparent), transparent 70%); pointer-events: none; }
.pv-grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.pv-side { position: sticky; top: 110px; display: grid; gap: 20px; }
.pv-art { width: clamp(120px, 12vw, 170px); aspect-ratio: 1; display: grid; place-items: end start; }
.pv-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px var(--lobe-shadow)); }
.pv-k { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 78%, var(--text)); }
.pv-k em { font-style: normal; margin-left: 6px; padding: 5px 9px; border-radius: 99px; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); letter-spacing: .06em; }
.pv-side .lead { margin: 0; max-width: 40ch; }
.pv-out { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.pv-out li { display: flex; align-items: center; gap: 10px; color: var(--text); font: 500 15.5px/1.3 var(--f-ui); }
.pv-out svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; background: var(--h); flex: none; }
.pv-list { display: grid; gap: 10px; }
.pv-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "n main go" "n tags go"; gap: 4px 16px; padding: 22px 22px 22px 18px; border-radius: 24px 24px 24px 8px; color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: box-shadow 300ms, background-color 300ms, translate 320ms cubic-bezier(.34, 1.56, .64, 1); }
html[data-sc-theme="light"] .pv-row { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06); }
.pv-row:hover { translate: 4px 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1); }
.pv-n { grid-area: n; font: 400 italic 26px/1 var(--f-serif); color: color-mix(in srgb, var(--h) 80%, var(--text)); padding-top: 2px; }
.pv-main { grid-area: main; display: grid; gap: 6px; }
.pv-main b { font: 600 19px/1.25 var(--f-ui); letter-spacing: -.015em; color: var(--text); }
.pv-main > span { color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.pv-main small { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; margin-top: 4px; }
.pv-main small svg { width: 15px; height: 15px; color: var(--h); flex: none; }
.pv-tags { grid-area: tags; font: 500 11.5px/1.5 var(--f-mono); color: var(--text-3); margin-top: 6px; }
.pv-go { grid-area: go; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 99px 99px 99px 8px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1), background-color 250ms, color 250ms; }
.pv-go svg { width: 15px; height: 15px; transform: rotate(-45deg); }
.pv-row:hover .pv-go { transform: rotate(45deg); background: var(--h); color: #fff; box-shadow: none; }
@media (max-width: 900px) { .pv-grid { grid-template-columns: 1fr; } .pv-side { position: static; } .pv-row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "n main" "n tags"; } .pv-go { display: none; } }

/* relay: one project travels the team */
.relay-sec { background: var(--ink-1); }
.relay { --at: 0; position: relative; padding-top: 120px; }
.rl-track { position: absolute; left: 12.5%; right: 12.5%; top: 150px; height: 2px; border-radius: 2px; background: var(--line-2); }
.rl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--at) / 3 * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--blue), var(--green), #f2a24a); transition: width 900ms cubic-bezier(.6, 0, .2, 1); }
.rl-token { position: absolute; top: 0; left: calc((var(--at) + .5) * 25%); translate: -50% 0; transition: left 900ms cubic-bezier(.6, 0, .2, 1); z-index: 2; }
.rl-card { display: grid; gap: 4px; padding: 12px 16px; border-radius: 18px 18px 18px 6px; min-width: 200px; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -20px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); }
html[data-sc-theme="light"] .rl-card { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .08), 0 20px 40px -24px rgba(20, 40, 90, .35); }
.rl-card small { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.rl-card b { font: 600 16px/1.2 var(--f-ui); color: var(--text); }
.rl-badges { display: flex; gap: 5px; margin-top: 4px; }
.rl-badges i { width: 22px; height: 6px; border-radius: 99px; background: var(--line-2); transition: background-color 500ms; }
.relay[data-at="0"] .rl-badges i:nth-child(-n+1), .relay[data-at="1"] .rl-badges i:nth-child(-n+2), .relay[data-at="2"] .rl-badges i:nth-child(-n+3), .relay[data-at="3"] .rl-badges i, .relay[data-at="done"] .rl-badges i { background: var(--h); }
.relay[data-at="done"] .rl-card { box-shadow: inset 0 0 0 1px rgba(62, 210, 127, .6), 0 0 40px -10px rgba(62, 210, 127, .5); }
.rl-stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.rl-stations li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 14px; opacity: .5; transition: opacity 500ms; }
.relay[data-at="0"] .rl-stations li:nth-child(1), .relay[data-at="1"] .rl-stations li:nth-child(2), .relay[data-at="2"] .rl-stations li:nth-child(3), .relay[data-at="3"] .rl-stations li:nth-child(4), .relay[data-at="done"] .rl-stations li { opacity: 1; }
.rl-dot { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 99px 99px 99px 12px; margin-bottom: 12px; color: #fff; background: var(--h); box-shadow: 0 0 0 8px var(--ink-1); }
.rl-dot svg { width: 22px; height: 22px; }
.rl-stations small { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 75%, var(--text)); }
.rl-stations b { font: 600 22px/1.15 var(--f-ui); letter-spacing: -.02em; color: var(--text); }
.rl-stations li > span:last-child { color: var(--text-2); font-size: 15px; line-height: 1.5; max-width: 26ch; }
.rl-lead { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 44px; color: var(--text-2); font-size: 15px; text-align: center; }
.rl-lead b { color: var(--text); }
.rl-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.rl-av .mk { width: 26px; height: auto; }
@media (max-width: 860px) {
  .relay { padding-top: 0; } .rl-track, .rl-token { display: none; }
  .rl-stations { grid-template-columns: 1fr 1fr; gap: 30px 10px; } .rl-stations li { opacity: 1; }
}
.rl-token::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 46px; background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent); }
html[data-sc-theme="light"] .rl-token::after { background: linear-gradient(180deg, rgba(20, 30, 50, .3), transparent); }

/* careers · a typical week (the culture as a calendar) */
.wk-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.wk { padding: clamp(20px, 2.4vw, 30px); border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-sc-theme="light"] .wk { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .78)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06), 0 40px 80px -56px rgba(20, 40, 90, .3); }
.wk-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 18px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.wk-key { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .06em; text-transform: none; }
.wk-key i { width: 9px; height: 9px; border-radius: 3px; margin-left: 8px; }
.wk-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 360px; }
.wk-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wk-day > b { font: 600 13px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 0 4px 6px; }
.wk-b { flex: var(--u) 1 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; min-height: 0; overflow: hidden; padding: 10px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent); }
.wk-b strong { font: 600 13.5px/1.2 var(--f-ui); color: var(--text); }
.wk-b small { font-size: 12px; line-height: 1.3; color: var(--text-2); }
.sky, .wk-key .sky { --c: #3d9bff; } .blue { --c: #8fb8ff; } .violet { --c: #a98bff; } .green { --c: #3ed27f; } .orange { --c: #fa983a; } .amber { --c: #ffbe73; }
.wk-key i { background: var(--c); }
.wk-b.sky { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); }
.wk-note { display: block; margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.protect { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.protect li { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 22px 22px 22px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 22%, rgba(255, 255, 255, .06)); }
html[data-sc-theme="light"] .protect li { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .7)); }
.protect b { display: block; font: 600 17px/1.2 var(--f-ui); color: var(--text); }
.protect s { display: block; margin-top: 4px; color: var(--text-3); font-size: 14px; text-decoration-color: color-mix(in srgb, var(--h) 70%, transparent); text-decoration-thickness: 1.5px; }
.protect s::before { content: "instead of "; text-decoration: none; display: inline; }
@media (max-width: 1000px) { .wk-grid { grid-template-columns: 1fr; } .protect { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .wk-cols { grid-template-columns: repeat(5, 150px); overflow-x: auto; height: 380px; padding-bottom: 6px; } .protect { grid-template-columns: 1fr; } }

/* careers · growth as four rising columns */
.gr4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: end; }
.gr4 li { display: grid; gap: 10px; align-content: end; }
.gr-bar { position: relative; height: 300px; display: flex; align-items: flex-end; }
.gr-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v) * 100%); border-radius: 26px 26px 8px 8px; transform-origin: bottom; transform: scaleY(.06); transition: transform 1200ms cubic-bezier(.2, .9, .2, 1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 70%, transparent), color-mix(in srgb, var(--h) 14%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px color-mix(in srgb, var(--h) 50%, transparent); }
.gr4 li:nth-child(2) .gr-bar i { transition-delay: 120ms; } .gr4 li:nth-child(3) .gr-bar i { transition-delay: 240ms; } .gr4 li:nth-child(4) .gr-bar i { transition-delay: 360ms; }
.gr4.in .gr-bar i { transform: none; }
.gr-bar em { position: relative; z-index: 1; margin: 0 0 16px 18px; font: 700 clamp(22px, 2vw, 30px)/1 var(--f-display); font-style: normal; letter-spacing: -.005em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 500ms 900ms; }
.gr4.in .gr-bar em { opacity: 1; }
.gr4 b { font: 600 18px/1.25 var(--f-ui); letter-spacing: -.015em; color: var(--text); margin-top: 6px; }
.gr4 li > span:last-child { color: var(--text-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) { .gr4 { grid-template-columns: 1fr 1fr; } .gr-bar { height: 200px; } }
.moments { margin-top: clamp(50px, 6vw, 80px); }
.mo { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 8px; border-radius: 99px; font: 500 16px/1 var(--f-ui); color: var(--text); white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 12%, rgba(255, 255, 255, .04)), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 26%, transparent); }
.mo svg { width: 40px; height: 40px; padding: 11px; border-radius: 50%; color: #fff; background: var(--h); }

/* careers · roles head and what we look for */
.roles-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.look { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.look li { display: flex; align-items: baseline; gap: 14px; font: 500 18px/1.35 var(--f-ui); letter-spacing: -.01em; color: var(--paper-ink, var(--text)); }
.look span { font: 400 italic 22px/1 var(--f-serif); color: var(--blue); }
@media (max-width: 860px) { .roles-head { grid-template-columns: 1fr; } }
.hire4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hire4 h3 { font-size: 22px !important; }
@media (max-width: 1000px) { .hire4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hire4 { grid-template-columns: 1fr; } }
.row-cta { gap: 14px !important; }
.protect s::before { content: none; }
.protect small { display: block; margin-top: 4px; color: var(--text-3); font-size: 14px; }
.protect small s { display: inline; margin: 0; }
html[data-sc-theme="light"] .gr-bar em { color: color-mix(in srgb, var(--h) 70%, #000); }
html[data-sc-theme="light"] .gr-bar i { background: linear-gradient(180deg, color-mix(in srgb, var(--h) 55%, #fff), color-mix(in srgb, var(--h) 18%, #fff)); }
.wk, .wk-grid > * { min-width: 0; } .wk-key { flex-wrap: wrap; }

/* generated service pages */
.sv-hero .h1 { font-size: clamp(40px, 4.4vw, 72px); max-width: none; }
.sv-tile { min-height: clamp(460px, 40vw, 560px) !important; grid-column: auto; }
.sv-tile .tile-demo { margin-top: 10px; }
.sb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sb-card { display: grid; gap: 14px; align-content: start; padding: 26px 24px; border-radius: 26px 26px 26px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 18%, rgba(255, 255, 255, .06)), inset 0 1px 0 rgba(255, 255, 255, .1); }
html[data-sc-theme="light"] .sb-card { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .75)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06), 0 30px 60px -46px rgba(20, 40, 90, .3); }
.sb-card h3 { margin: 6px 0 0; font: 600 20px/1.2 var(--f-ui); letter-spacing: -.02em; color: var(--text); }
.sb-card p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.sv-stack { display: grid; gap: 10px; margin-top: 28px; }
.sv-stack small { font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.sv-stack div { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-stack span { font: 500 12.5px/1 var(--f-mono); color: var(--text-2); padding: 9px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 1000px) { .sb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sb-grid { grid-template-columns: 1fr; } }

/* ═══════════════ V18 — work and products ═══════════════ */
/* work hero: how to read a story */
.wk-read { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.wk-read span { display: grid; gap: 3px; font-size: 13.5px; color: var(--text-3); }
.wk-read b { font: 700 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.wk-read i { width: 34px; height: 1px; background: linear-gradient(90deg, var(--line-2), var(--blue)); }
/* featured case */
.feat-case { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: 36px; color: var(--paper-ink);
  background: var(--paper-card, #fff); box-shadow: 0 40px 80px -50px rgba(7, 20, 40, .35), inset 0 0 0 1px var(--paper-line); transition: translate 400ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms; }
.feat-case:hover { translate: 0 -3px; box-shadow: 0 50px 90px -50px rgba(7, 20, 40, .45), inset 0 0 0 1px var(--paper-line); }
.fc-copy { display: grid; gap: 16px; justify-items: start; }
.fc-tag { font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #d9661c; }
.feat-case .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.feat-case .meta span { font: 500 12px/1 var(--f-mono); padding: 7px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--paper-line); color: var(--paper-ink-2); }
.feat-case h2 { margin: 0; font: 600 clamp(28px, 2.8vw, 42px)/1.08 var(--f-ui); letter-spacing: -.035em; text-wrap: balance; }
.feat-case h2 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.feat-case p { margin: 0; color: var(--paper-ink-2); font-size: 16.5px; line-height: 1.55; max-width: 46ch; }
.fc-ba { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.fc-ba > span:not(.fc-arrow) { display: grid; gap: 4px; font-size: 13.5px; color: var(--paper-ink-2); max-width: 16ch; }
.fc-ba small { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-2); }
.fc-ba b { font: 700 clamp(34px, 3.4vw, 50px)/.9 var(--f-display); text-transform: uppercase; color: #e2553a; }
.fc-ba > span:last-child b { color: #12924a; }
.fc-arrow svg { width: 22px; height: 22px; color: var(--paper-ink-2); }
.fc-art { position: relative; aspect-ratio: 1.35; border-radius: 26px; overflow: hidden; }
.fc-art .bg { position: absolute; inset: 0; }
.fc-art .shot { position: absolute; left: 7%; right: 7%; top: 9%; bottom: -8%; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.fc-art img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.wc-res { position: absolute; right: 14px; top: 14px; z-index: 3; font: 600 12px/1 var(--f-mono); padding: 7px 10px; border-radius: 99px; color: #0a0f1a; background: rgba(255, 255, 255, .9); }
@media (max-width: 860px) { .feat-case { grid-template-columns: 1fr; } .fc-art { order: -1; } }
/* what every project leaves behind */
.keep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.keep li { display: grid; gap: 10px; align-content: start; padding: 26px 24px; border-radius: 26px 26px 26px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 20%, rgba(255, 255, 255, .06)); }
html[data-sc-theme="light"] .keep li { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .75)); box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .06); }
.keep b { margin-top: 6px; font: 600 20px/1.2 var(--f-ui); letter-spacing: -.02em; color: var(--text); }
.keep li > span:last-child { color: var(--text-2); font-size: 15px; line-height: 1.55; }
@media (max-width: 1000px) { .keep { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .keep { grid-template-columns: 1fr; } }

/* products: hero capsules with logos */
.pj-prod .pj-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.pj-prod .pj-logo svg, .pj-prod .pj-logo img { width: 18px; height: 18px; }
.pj-prod small { min-width: 0; padding: 0 10px; font-weight: 500; letter-spacing: .02em; }
/* product chapters */
.pc { position: relative; overflow: hidden; padding-block: clamp(80px, 10vw, 130px); background: radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 70%), var(--pbg); color: #f3f5fa; }
.pc.rev { background: radial-gradient(60% 70% at 15% 30%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 70%), var(--pbg); }
.pc-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.pc.rev .pc-copy { order: 2; }
.pc-copy { display: grid; gap: 18px; justify-items: start; }
.pc-copy .prod-brand { color: #fff; }
.pc-copy h2 { margin: 0; font: 600 clamp(34px, 3.6vw, 56px)/1.02 var(--f-ui); letter-spacing: -.04em; text-wrap: balance; color: #fff; }
.pc-copy h2 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; color: var(--pa); letter-spacing: -.01em; }
.pc-what { margin: 0; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pa); }
.pc-copy .lead { margin: 0; color: rgba(235, 240, 250, .78); max-width: 46ch; }
.pc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-who small { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(235, 240, 250, .5); margin-right: 6px; }
.pc-who span { font-size: 13.5px; padding: 7px 12px; border-radius: 99px; color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa) 40%, transparent); background: color-mix(in srgb, var(--pa) 10%, transparent); }
html[data-sc-theme="light"] .pc .btn.glass { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); }
/* the screen switcher */
.ps { display: grid; gap: 14px; min-width: 0; }
.ps-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 99px; justify-self: start; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ps-tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 99px; color: rgba(235, 240, 250, .7); font: 500 14px/1 var(--f-ui); transition: color 250ms, background-color 250ms; }
.ps-tabs button:hover { color: #fff; }
.ps-tabs button[aria-selected="true"] { color: #0a0f1a; background: #fff; }
.pt-n { font: 500 11px/1 var(--f-mono); opacity: .6; }
.pt-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--pa); transform: scaleX(0); transform-origin: left; opacity: 0; }
.ps.run .ps-tabs button[aria-selected="true"] .pt-bar { opacity: 1; animation: pt-fill 5s linear forwards; }
@keyframes pt-fill { to { transform: scaleX(1); } }
.ps-stage { position: relative; border-radius: 22px; overflow: hidden; background: #0d1018; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 80px -30px var(--glow); }
.ps-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ps-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ps-bar span { margin-left: 12px; font: 500 12px/1 var(--f-mono); color: rgba(235, 240, 250, .45); }
.ps-screens { position: relative; aspect-ratio: 16 / 10; background: #f6f7f9; }
.ps-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity 600ms ease, transform 900ms cubic-bezier(.2, .8, .2, 1); }
.ps-shot.is-on { opacity: 1; transform: none; }
.ps-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ps-caps { position: relative; min-height: 1.6em; }
.ps-cap { position: absolute; inset: 0 auto auto 0; margin: 0; font-size: 15.5px; color: rgba(235, 240, 250, .82); opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms; }
.ps-cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 99px 99px 99px 2px; background: var(--pa); vertical-align: 1px; }
.ps-cap.is-on { opacity: 1; transform: none; position: relative; }
@media (max-width: 960px) { .pc-grid { grid-template-columns: 1fr; } .pc.rev .pc-copy { order: 0; } .ps-tabs { border-radius: 20px; } }
/* lessons */
.lessons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lesson { display: grid; gap: 14px; align-content: start; padding: 28px 26px; border-radius: 28px 28px 28px 8px; color: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 22%, rgba(255, 255, 255, .06)); transition: translate 350ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms; }
html[data-sc-theme="light"] .lesson { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .75)); }
.lesson:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h) 60%, transparent); }
.ls-k { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--h) 80%, var(--text)); }
.lesson h3 { margin: 4px 0 0; font: 600 22px/1.2 var(--f-ui); letter-spacing: -.02em; color: var(--text); }
.lesson p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.ls-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 14px/1 var(--f-ui); color: var(--text); }
.ls-go svg { width: 14px; height: 14px; transition: transform 300ms; } .lesson:hover .ls-go svg { transform: translateX(4px); }
@media (max-width: 900px) { .lessons { grid-template-columns: 1fr; } }
.rcpt-sec > * { min-width: 0; } @media (max-width: 520px) { .rcpt-sec .h2 { font-size: clamp(30px, 9.5vw, 44px); } }
.stats4 > * { min-width: 0; } .stat-c b { overflow-wrap: anywhere; } @media (max-width: 520px) { .stat-c b { font-size: clamp(26px, 8vw, 40px) !important; } }
@media (max-width: 860px) { .rcpt-sec { grid-template-columns: minmax(0, 1fr) !important; } .rcpt-wrap, .rcpt-clip, .rcpt { max-width: 100%; } .rcpt .ln span:first-child { min-width: 0; overflow-wrap: anywhere; } }
.rcpt-sec, .quote, .next-case { min-width: 0; }
.rcpt-sec .stats4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .rcpt-sec .sec-head { min-width: 0; }
.next-case > span:first-child { min-width: 0; } @media (max-width: 640px) { .next-case { flex-wrap: wrap; gap: 16px; } .next-case b { font-size: clamp(26px, 7.5vw, 40px) !important; } }

/* ═══════════════ live services (2026-10-02) ═══════════════ */
.tk-err { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #ffb4a3; background: rgba(255, 122, 89, .1); box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .3); }
html[data-sc-theme="light"] .tk-err { color: #b8401f; background: rgba(226, 85, 58, .07); }
.tk-err[hidden] { display: none; }
.tk-none { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); font-style: normal; }
.tk .slots button { min-width: 0; }
.tk-half { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }

/* ── ROUND 18 · PHONES (San's iPhone pass, 2026-10-02) ─────────────────────────────────────────────────────────
   One block, last in the sheet, so every phone rule is in one place and wins over the rounds before it. */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  /* the header: two glass drops that keep their corners (nav-liquid data-wkm-apart) — the mark on the left,
     theme + menu on the right, each round button inside a ring of glass, never touching an edge */
  .navl { top: calc(10px + env(safe-area-inset-top, 0px)); height: 54px; }
  .navl-g { height: 54px; }
  .navl-blobs i { height: 54px; }
  .navl .theme-tg, .navl .nav-burger { width: 40px; height: 40px; }
  .navl .nav-burger span { width: 16px; }
  .navl.is-apart .theme-tg { box-shadow: none; }
  .navl.is-apart .nav-burger { background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); }
  .navl.is-apart .navl-edge { filter: url(#goo) drop-shadow(0 12px 22px rgba(0, 0, 0, .45)) !important; }

  /* the hero: one centred column — word, cloud, promise, two full-width buttons, the proof as a quiet ledger */
  .hero-copy { padding-top: 104px; }
  .hero-text, html[data-hero="c"] .hero-text { justify-items: center; text-align: center; gap: 22px; }
  .hero-text .eyebrow { justify-self: center; max-width: 100%; }
  .hero-h .ln { justify-content: center; }
  .hero-h, html[data-hero="c"] .hero-h { font-size: clamp(34px, 10.2vw, 44px) !important; line-height: .98; }
  .hero-text .lead { max-width: 31ch; margin-inline: auto; font-size: 16.5px; }

  .cloud-m { position: relative; width: min(88%, 340px); height: auto !important; aspect-ratio: 327 / 200; margin: 18px auto 10px; }
  .cloud-m .ripples { left: 50%; top: 54%; width: 230%; aspect-ratio: 327 / 200; translate: -50% -50%; z-index: 0; --rip: rgba(150, 195, 255, .2); }
  html[data-sc-theme="light"] .cloud-m .ripples { --rip: rgba(0, 65, 116, .14); }
  .cloud-m .cm-glow { position: absolute; inset: 8% 14% 0; border-radius: 50%; z-index: 0; background: radial-gradient(closest-side, rgba(36, 104, 230, .55), rgba(36, 104, 230, 0)); filter: blur(26px); animation: sc-m-glow 7s ease-in-out infinite; }
  html[data-sc-theme="light"] .cloud-m .cm-glow { background: radial-gradient(closest-side, rgba(36, 104, 230, .22), rgba(36, 104, 230, 0)); }
  .cloud-m .lobe { z-index: 2; animation: sc-m-in 1.25s cubic-bezier(.2, 1.1, .3, 1) both; }
  .cloud-m .lobe.navy { z-index: 2; animation-delay: .25s; --fx: 10px; --fy: -46px; --fs: .8; }
  .cloud-m .lobe.green { z-index: 3; animation-delay: .4s; --fx: -54px; --fy: 34px; --fr: -14deg; --fs: .6; }
  .cloud-m .lobe.orange { z-index: 3; animation-delay: .52s; --fx: 58px; --fy: 30px; --fr: 16deg; --fs: .55; }
  .cloud-m .lobe-in { animation: sc-breathe 8.5s ease-in-out 1.7s infinite; }
  .cloud-m .lobe.green .lobe-in { animation-duration: 7.2s; animation-delay: 1.2s; }
  .cloud-m .lobe.orange .lobe-in { animation-duration: 7.9s; animation-delay: 2.1s; }
  .cloud-m .lobe img { width: 100%; }
  .stage-sky .ripples { display: none; }

  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; gap: 12px; }
  .hero-cta .btn { position: relative; width: 100%; height: 58px; justify-content: center; font-size: 16.5px; }
  .hero-cta .btn .coin { position: absolute; right: 7px; top: 50%; translate: 0 -50%; }
  .hero-proof { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 380px; gap: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
  .hero-proof > .sep { display: none !important; }
  .hero-proof { align-items: start; }
  .hero-proof > span:not(.badges):not(.sep) { align-content: start; }
  .unfold, .hero-copy { overflow-x: clip; }
  .hero-proof > span:not(.badges):not(.sep) { display: grid; gap: 4px; padding: 2px 10px; color: var(--text-3); }
  .hero-proof > span:first-child { border-right: 1px solid var(--line); }
  .hero-proof > span:not(.badges):not(.sep) b { font: 600 28px/1 var(--f-display); letter-spacing: -.03em; color: var(--hi); }
  .hero-proof .badges { grid-column: 1 / -1; justify-content: center; gap: 18px; margin-top: 20px; }

  /* practices: one alignment per card — the drop, the name and its promise all start on the left, as the rows do */
  .pr-col, .practices .pr-col { padding: 104px 24px 14px !important; text-align: left; }
  .pr-col .m-lobe { left: 24px !important; top: 26px !important; height: 58px !important; }
  .pr-col h3, .pr-col .tag { text-align: left !important; }
  .pr-col h3 { font-size: 30px; }
  .pr-col .tag { font-size: 19px; margin-bottom: 16px; }
  .pr-col li a { justify-content: space-between !important; padding-inline: 0; }

  /* services, shown working: the story is the whole width on a phone (a later desktop rule kept two columns) */
  .th { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .th-step { padding-block: 34px; gap: 14px; }
  .th-step p { max-width: none; font-size: 16.5px; }

  /* forms on a phone: 16px text so iOS never zooms the page when a field is tapped; every control thumb-sized */
  input, textarea, select, .inp { font-size: 16px !important; }
  .cx-switch { display: flex; width: 100%; }
  .cx-switch button { flex: 1; justify-content: center; gap: 8px; padding: 0 10px !important; height: 48px !important; font-size: 15px !important; white-space: nowrap; }
  .wiz-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .wiz-top .eyebrow { align-self: flex-start; white-space: nowrap; }
  .wiz-nav .btn.js-next { flex: 1; justify-content: space-between; height: 56px; }
  .wiz-nav > span:empty { display: none; }
  .tk .slots { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .tk-half { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .tk .slots button { height: 48px; font-size: 15px; }
  .tk .book-go { height: 56px; }

  /* labels: one sentence that wraps as a sentence (as flex items each half stacked on its own) */
  .eyebrow { display: inline-block; max-width: 100%; font-size: 11px; letter-spacing: .1em; line-height: 1.55; text-align: left; }
  .eyebrow > * { display: inline-flex !important; vertical-align: middle; }
  .eyebrow .lobes { vertical-align: -1px; margin-right: 9px !important; }
  .eyebrow .drop, .eyebrow > .mk { margin-right: 9px !important; }
  .eyebrow b { display: inline !important; }
  .hero-text .eyebrow, .sec-head.center .eyebrow, .pr-head .eyebrow, .fn .eyebrow { text-align: center; }

  /* every hero and closing button row: full-width, one above the other, thumb-sized */
  .row-cta, .fn-actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .row-cta .btn, .fn-actions .btn { position: relative; width: 100%; height: 56px; justify-content: center; }
  .row-cta .btn .coin, .fn-actions .btn .coin { position: absolute; right: 7px; top: 50%; translate: 0 -50%; }

  /* work: the reading key as three equal columns */
  .wk-read { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .wk-read > i { display: none; }
  .wk-read > span { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }

  /* side panels pinned beside a column on a desktop scroll with the page on a phone: stacked, a pinned panel
     sat on top of the very rows scrolling past it (service pages' "a new paradigm", the case receipt) */
  [style*="position:sticky"], [style*="position: sticky"], .sx-pin, .ss-vis, .pillar, .apply, .toc, .share, .ask-side, .cx-right, .nf-card, .pv-side { position: relative !important; top: auto !important; }

  /* a product's small capitals tagline keeps its lines apart when it wraps */
  .pc-what { line-height: 1.5; }
}
@keyframes sc-m-in { from { transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(var(--fs, .7)); opacity: 0; filter: blur(10px); } to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes sc-m-glow { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .cloud-m .lobe, .cloud-m .lobe-in, .cloud-m .cm-glow { animation: none !important; } }
/* round 18: a done task is struck THROUGH its words, on every line it wraps to (the drawn line sat between lines) */
.ho-item .txt::after { display: none !important; }
.ho-item .txt { text-decoration: line-through 1.5px; text-decoration-color: transparent; text-decoration-skip-ink: none; transition: color 300ms, text-decoration-color 450ms var(--ease); }
.ho-item.is-done .txt { text-decoration-color: color-mix(in srgb, currentColor 80%, transparent); }
/* round 18: a product stat's label is one tidy block under its figure (inline, it took the body's loose line-height) */
.prod .stat span { display: block; line-height: 1.4; }
.prod .stat > div { min-width: 0; }