/* White and violet. A violet-tinted white ground, violet-black ink, one purple accent; deep aubergine for the closing band and footer.
   A live liquid-glass form behind the opening lines on desktop; after that the page is type, space and a few quiet frames. */
:root {
  color-scheme: light;
  --bg: #FAF9FD;
  --bg-2: #F1EDFB;
  --bg-3: #E7E0F7;
  --bg-rgb: 250,249,253;
  --ink: #17131F;
  --ink-rgb: 23,19,31;
  --ink-2: rgba(23,19,31,0.74);
  --ink-3: rgba(23,19,31,0.60);
  --hair: rgba(23,19,31,0.10);
  --accent: #5B47C8;
  --accent-rgb: 91,71,200;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gx: max(28px, env(safe-area-inset-left, 0px));
  --gxr: max(28px, env(safe-area-inset-right, 0px));
  --nav-h: 72px;
  --sec: 96px;
}
/* Dark accent surfaces: the home hero, the closing band, the footer, the menu and the nav while it sits over the hero. */
.dark {
  color-scheme: dark;
  --bg: #1D1533;
  --bg-2: #261D42;
  --bg-3: #30254F;
  --bg-rgb: 29,21,51;
  --ink: #F6F3FF;
  --ink-rgb: 246,243,255;
  --ink-2: rgba(246,243,255,0.76);
  --ink-3: rgba(246,243,255,0.62);
  --hair: rgba(246,243,255,0.12);
  --accent: #C8BCFF;
  --accent-rgb: 200,188,255;
  color: var(--ink);
}
.close.dark, footer.dark { background: var(--bg); }
* { box-sizing: border-box; }
html { scrollbar-color: var(--bg-3) var(--bg); scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
.serif { font-family: var(--serif); font-weight: 400; }
.wrap { padding-left: var(--gx); padding-right: var(--gxr); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; }
h2.serif, .h2, .two h2, .method .lead h2, .services .intro h2, .plans h2, .prompts h2 { text-wrap: balance; }

.skip { position: absolute; left: var(--gx); top: -60px; z-index: 50; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; transition: top 160ms var(--ease-out); }
.skip:focus { top: 14px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.pill { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: 0; border: 1px solid var(--hair); color: var(--ink); background: transparent; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 160ms var(--ease-out); }
.pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill:active { transform: scale(0.97); }
.pill.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill.solid:hover { background: var(--accent); border-color: var(--accent); }
.pill.lg { height: 54px; padding: 0 28px; font-size: 15px; }
.link { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(var(--ink-rgb),0.28); transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
.link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.link.ink { color: var(--ink); }
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 36px; }
.sh .eyebrow { margin: 0; }
.sh .link { font-size: 14px; flex: none; padding: 11px 0; }
.sh .note { font-size: 13px; color: var(--ink-3); max-width: 46ch; text-align: right; }
.eyebrow, .label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 36px; letter-spacing: 0.01em; }
.eyebrow a, .label a { color: var(--ink-2); margin-left: 12px; }

/* ---- NAV ---- */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px var(--gxr) 0 var(--gx); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(var(--bg) 45%, rgba(var(--bg-rgb),0)); pointer-events: none; z-index: -1; }
.nav.solid::before { height: 110px; }
.nav .short { display: none; }
.nav-l { justify-self: start; display: flex; align-items: center; gap: 22px; }
.nav-links { list-style: none; padding: 0; margin: 0; display: none; gap: 22px; }
.nav-links a { font-size: 14px; color: var(--ink-2); padding: 10px 0; display: inline-block; transition: color 200ms var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.brand { font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; line-height: 1; justify-self: center; padding: 9px 4px; }
.nav-r { justify-self: end; display: flex; align-items: center; gap: 14px; }
.clock { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pill.sm { height: 40px; padding: 0 16px; font-size: 13px; background: rgba(var(--ink-rgb),0.08); border-color: transparent; backdrop-filter: blur(8px); }
.pill.sm:hover { background: var(--ink); color: var(--bg); }
.pill.sm.solid { background: var(--ink); color: var(--bg); }
.pill.sm.solid:hover { background: var(--accent); }
.menu { position: fixed; inset: 0; z-index: 25; background: rgba(var(--bg-rgb),0.96); backdrop-filter: blur(18px); }
.menu-in { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.menu-in a { font-family: var(--serif); font-size: clamp(44px, 7vw, 96px); line-height: 1.05; color: var(--ink-2); padding: 4px 0; transition: color 200ms var(--ease), padding-left 300ms var(--ease-out); }
.menu-in a:hover, .menu-in a:focus-visible { color: var(--ink); padding-left: 0.3em; }
.menu-in p { margin-top: 40px; font-size: 14px; color: var(--ink-3); }
@media (min-width: 901px) {
  .nav-links { display: flex; }
  #menu-btn { display: none; }
}

/* ---- HERO ---- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--bg); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: blur(0.7px); }
.hero.static canvas { display: none; }
.hero.static { background: radial-gradient(60% 50% at 72% 36%, rgba(110,86,224,0.30), rgba(var(--bg-rgb),0) 70%), radial-gradient(45% 40% at 20% 80%, rgba(var(--accent-rgb),0.10), rgba(var(--bg-rgb),0) 70%), var(--bg); }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(rgba(var(--bg-rgb),0.78), rgba(var(--bg-rgb),0) 32%), radial-gradient(120% 80% at 50% 110%, rgba(var(--bg-rgb),0.92), rgba(var(--bg-rgb),0) 60%); pointer-events: none; }
.hero-copy { position: absolute; inset: 0; padding: 0 var(--gxr) 0 var(--gx); }
.hero-intro { margin-top: 30px; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ink); text-shadow: 0 1px 18px rgba(var(--bg-rgb),0.9), 0 0 2px rgba(var(--bg-rgb),0.9); opacity: 0; animation: fade 700ms var(--ease-out) 350ms forwards; }
.hero-bottom { position: absolute; left: var(--gx); right: var(--gxr); bottom: 56px; }
.hero h1 { font-family: var(--serif); font-size: clamp(56px, 8.6vw, 136px); line-height: 0.9; letter-spacing: -0.015em; max-width: 12ch; text-wrap: balance; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero h1 .l > span { display: block; transform: translateY(104%); animation: rise 800ms var(--ease-out) 60ms forwards; }
.hero h1 .l:nth-child(2) > span { animation-delay: 160ms; }
.hero-act { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; opacity: 0; animation: fade 700ms var(--ease-out) 520ms forwards; }
.hero-act .link { font-size: 15px; padding: 10px 0; color: var(--ink); }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- STATEMENT ---- */
.statement { padding-block: calc(var(--sec) + 16px) var(--sec); }
.statement .big { grid-column: 3 / 11; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 56px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: pretty; }
.statement .big .soft { color: var(--ink-2); }
.statement .src { grid-column: 3 / 11; margin-top: 36px; font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 72ch; }
.statement .src a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb),0.35); text-underline-offset: 3px; }
.statement .src a:hover { text-decoration-color: var(--accent); }
.statement .src cite { font-style: normal; }

/* ---- CLIENTS / PROOF ---- */
.clients { padding-block: 0 var(--sec); }
.logos { list-style: none; padding: 40px 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 32px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.logos li { display: flex; align-items: center; justify-content: center; height: 72px; }
.logos img { width: auto; max-width: 150px; height: auto; object-fit: contain; opacity: 0.68; transition: opacity 300ms var(--ease); }
.logos li:hover img { opacity: 1; }
.logos li.h22 img { max-height: 22px; } .logos li.h24 img { max-height: 24px; } .logos li.h26 img { max-height: 26px; } .logos li.h28 img { max-height: 28px; } .logos li.h30 img { max-height: 30px; } .logos li.h40 img { max-height: 40px; }
.tenure { margin-top: 18px; font-size: 14px; color: var(--ink-3); max-width: 72ch; line-height: 1.6; }

/* ---- NUMBERS (selected work on home) ---- */
.numbers { padding-block: 0 var(--sec); }
.numbers .row { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; padding: 26px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.numbers .row:last-of-type { border-bottom: 1px solid var(--hair); }
.numbers .fig { grid-column: 1 / 6; grid-row: 1; font-family: var(--serif); font-size: clamp(52px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numbers .txt { grid-column: 6 / 12; }
.numbers .what { font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 38ch; }
.numbers .who { margin-top: 10px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.more a { padding: 10px 0; display: inline-block; }
.method .lead .more { margin-top: 32px; font-size: 15px; }

/* ---- METHOD ---- */
.method { padding-block: 0 var(--sec); }
.method .lead { grid-column: 1 / 6; }
.method .lead h2 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -0.015em; }
.method .lead p { margin-top: 28px; font-size: 15px; color: var(--ink-2); max-width: 36ch; }
.method .lead h3 { margin-top: 36px; font-size: 13px; color: var(--ink-3); }
.method .lead ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 8px; font-size: 15px; color: var(--ink); max-width: 36ch; }
.method .lead ul li::before { content: "·"; color: var(--accent); margin-right: 8px; }
.method .steps { grid-column: 7 / 13; }
.step { padding: 22px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.step:last-child { border-bottom: 1px solid var(--hair); }
.step h3 { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.step p { font-size: 15px; color: var(--ink-2); max-width: 44ch; }

/* ---- THE LIVE THING ---- */
.prompts { padding-block: 0 var(--sec); }
.prompts .frame { grid-column: 2 / 12; background: var(--bg-2); border: 1px solid var(--hair); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.prompts h2 { font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.01em; }
.prompts .intro { font-size: 15px; color: var(--ink-2); margin-top: 18px; max-width: 36ch; }
.prompts .fields { display: grid; gap: 14px; margin-top: 32px; }
.prompts label { font-size: 13px; color: var(--ink-3); display: block; margin-bottom: 6px; }
.prompts input { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--hair); background: var(--bg); color: var(--ink); font: 400 15px var(--sans); caret-color: var(--accent); transition: border-color 200ms var(--ease); }
.prompts input::placeholder { color: var(--ink-3); }
.prompts input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); }
.prompts ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.prompts li { padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--bg); transition: background 200ms var(--ease); }
.prompts li:hover { background: var(--bg-3); }
.prompts .actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.prompts .alt { font-size: 14px; color: var(--ink-2); margin-top: 16px; }
.prompts .hint { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

/* ---- WORK LIST (inner) ---- */
.work { padding-block: 0 var(--sec); }

/* ---- SERVICES (home strip) ---- */
.services { padding-block: 0 var(--sec); }
.services .intro { grid-column: 1 / 5; }
.services .intro h2 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -0.015em; }
.services .intro p { margin-top: 24px; color: var(--ink-2); max-width: 32ch; }
.services .cols { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.services h3 { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.services ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink); }
.services li span { color: var(--accent); font-size: 12px; margin-left: 6px; vertical-align: top; }

/* ---- PLANS ---- */
.plans { padding-block: 0 var(--sec); }
.plans h2 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -0.015em; grid-column: 1 / 8; margin-bottom: 20px; }
.plans .intro { grid-column: 1 / 8; color: var(--ink-2); max-width: 60ch; margin-bottom: 32px; }
.plans .set { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.plan { background: var(--bg-2); padding: 36px 32px 40px; display: grid; gap: 22px; align-content: start; transition: background 240ms var(--ease); }
.plan:first-child { border-radius: 20px 0 0 20px; }
.plan:last-child { border-radius: 0 20px 20px 0; }
.plan:hover { background: var(--bg-3); }
.plan.feat { background: var(--ink); color: var(--bg); }
.plan.feat:hover { background: rgba(var(--ink-rgb),0.9); }
.plan .tier { font-size: 13px; color: var(--ink-3); }
.plan.feat .tier { color: rgba(var(--bg-rgb),0.64); }
.plan .price { font-family: var(--serif); font-size: 48px; line-height: 0.9; letter-spacing: -0.02em; }
.plan .for { font-size: 15px; line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.plan.feat .for { color: rgba(var(--bg-rgb),0.74); }
.plan ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 20px; }
.plan.feat ul { color: rgba(var(--bg-rgb),0.78); border-color: rgba(var(--bg-rgb),0.12); }
.plan .pill { justify-self: start; }
.plan.feat .pill { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.plan.feat .pill:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.plans .note { grid-column: 1 / 9; margin-top: 24px; font-size: 14px; color: var(--ink-2); max-width: 70ch; }

/* ---- FOUNDER ---- */
.founder { padding-block: 0 var(--sec); }
.founder .q { grid-column: 2 / 12; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 56px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: pretty; }
.founder .by { grid-column: 2 / 12; margin-top: 32px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.founder .by b { color: var(--ink); font-weight: 500; margin-right: 10px; }

/* ---- FAQ ---- */
.faq { padding-block: 0 var(--sec); }
.qa { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; padding: 24px 0; border-top: 1px solid var(--hair); }
.qa:last-of-type { border-bottom: 1px solid var(--hair); }
.qa h3 { grid-column: 1 / 6; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.01em; }
.qa p { grid-column: 7 / 13; font-size: 15px; color: var(--ink-2); max-width: 52ch; }

/* ---- CLOSE ---- */
.close { position: relative; padding-block: 112px 40px; overflow: hidden; }
.close::before { content: ""; position: absolute; left: 50%; top: 40%; width: 120vw; height: 120vw; max-width: 1400px; max-height: 1400px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0) 70%); pointer-events: none; }
.close h2 { position: relative; font-family: var(--serif); font-size: clamp(48px, 7.6vw, 124px); line-height: 0.95; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.close .act { position: relative; display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 36px; flex-wrap: wrap; }
.close .act .link { font-size: 15px; padding: 10px 0; }
.close .sub { position: relative; text-align: center; margin-top: 22px; font-size: 14px; color: var(--ink-2); }

footer { padding-block: 72px 32px; }
.frow { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; row-gap: 28px; }
.frow .brand { grid-column: 1 / 4; justify-self: start; }
.frow .col { font-size: 14px; display: grid; gap: 0; align-content: start; justify-items: start; }
.frow .col:nth-child(2) { grid-column: 5 / 7; }
.frow .col:nth-child(3) { grid-column: 7 / 9; }
.frow .col:nth-child(4) { grid-column: 9 / 11; }
.frow .col:nth-child(5) { grid-column: 11 / 13; }
.frow .col b { font-weight: 500; color: var(--ink-3); font-size: 13px; margin-bottom: 6px; }
.frow .col a { color: var(--ink-2); padding: 11px 0; display: inline-block; }
.frow .col a:hover { color: var(--ink); }
.frow .col span { color: var(--ink-2); padding: 6px 0; }
.legal { margin-top: 48px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.legal a { padding: 12px 0; display: inline-block; }

/* ---- entrances (only when JS is running; everything is visible without it) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0.001; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .l > span, .hero-intro, .hero-act { animation: none; transform: none; opacity: 1; }
}

/* ---- inner pages ---- */
.page-hero { padding-block: 136px 56px; }
.page-hero h1 { font-family: var(--serif); font-size: clamp(46px, 6.4vw, 104px); line-height: 0.94; letter-spacing: -0.02em; grid-column: 1 / 10; text-wrap: balance; }
.page-hero.case h1 { font-size: clamp(40px, 5.4vw, 84px); }
.page-hero .eyebrow { grid-column: 1 / 13; margin-bottom: 0; }
.page-hero p { grid-column: 1 / 7; margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.page-hero .side { grid-column: 9 / 13; margin-top: 28px; font-size: 14px; color: var(--ink-2); line-height: 1.7; align-self: start; }
.page-hero .side.stat { text-align: right; }
.page-hero .side.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 4.6vw, 76px); line-height: .9; letter-spacing: -0.02em; color: var(--ink); }
.page-hero .side.stat span { display: block; margin-top: 12px; }
.byline { grid-column: 1 / 13; margin-top: 36px; font-size: 13px; color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.byline a { color: var(--ink-2); }
.sect { padding-block: 0 var(--sec); }
.entry { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; padding: 30px 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--nav-h) + 12px); }
.entry:last-child { border-bottom: 1px solid var(--hair); }
.entry .n { grid-column: 1 / 5; }
.entry .n h2 { font-family: var(--serif); font-size: clamp(32px, 3.4vw, 56px); line-height: 0.98; letter-spacing: -0.015em; }
.entry .n .meta { font-size: 13px; color: var(--ink-3); margin-top: 14px; line-height: 1.6; }
.entry .d { grid-column: 5 / 10; font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.entry .d p + p { margin-top: 14px; }
.entry .o { grid-column: 10 / 13; text-align: right; }
.entry .o b { display: block; font-family: var(--serif); font-size: clamp(36px, 3.6vw, 60px); line-height: 0.9; letter-spacing: -0.02em; font-weight: 400; font-variant-numeric: tabular-nums; }
.entry .o span { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.two { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; }
.two .l { grid-column: 1 / 6; }
.two .r { grid-column: 7 / 13; }
.two h2 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -0.015em; }
.two .l p { margin-top: 24px; color: var(--ink-2); max-width: 36ch; }
.stage-x { padding: 26px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.stage-x:last-child { border-bottom: 1px solid var(--hair); }
.stage-x h3 { font-family: var(--serif); font-size: 34px; line-height: 1; }
.stage-x h3 small { display: block; font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.stage-x p { color: var(--ink-2); font-size: 15px; }
.stage-x p + p { margin-top: 12px; }
.stage-x ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.stage-x ul li::before { content: "·"; color: var(--accent); margin-right: 8px; }
.answer { grid-column: 1 / 13; padding: 32px 0 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; }
.answer h2 { grid-column: 1 / 6; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -0.01em; }
.answer p { grid-column: 7 / 13; font-size: 16px; color: var(--ink); max-width: 56ch; }
.svc { padding: 30px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; }
.svc:last-child { border-bottom: 1px solid var(--hair); }
.svc h2 { grid-column: 1 / 5; font-family: var(--serif); font-size: clamp(30px, 3vw, 48px); line-height: 1; letter-spacing: -0.015em; }
.svc h2 small { display: block; font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin-top: 12px; }
.svc .items { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.svc .items div h3 { margin: 0 0 6px; font-weight: 500; font-size: 15px; }
.svc .items div p { font-size: 14px; color: var(--ink-2); max-width: 40ch; }
.industries { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.industries li { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair); display: inline-flex; align-items: center; font-size: 14px; color: var(--ink-2); }
.bigq { grid-column: 2 / 12; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 56px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: pretty; }
.bigq-by { grid-column: 2 / 12; margin-top: 24px; font-size: 14px; color: var(--ink-2); }
.prose { grid-column: 5 / 11; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: 1.2em; }
.prose b { color: var(--ink); font-weight: 500; }
.prose h2 { font-family: var(--serif); font-size: 32px; line-height: 1.05; color: var(--ink); margin: 1.6em 0 0.5em; }
.facts { grid-column: 1 / 4; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.facts b { display: block; color: var(--ink); font-weight: 500; }
.facts div + div { margin-top: 18px; }
.cform { grid-column: 1 / 8; display: grid; gap: 18px; }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.cform input, .cform textarea, .cform select { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--hair); background: var(--bg-2); color: var(--ink); font: 400 15px var(--sans); caret-color: var(--accent); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.cform input { height: 50px; padding-block: 0; }
.cform textarea { min-height: 140px; resize: vertical; }
.cform input:focus, .cform textarea:focus, .cform select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); }
.cform input[aria-invalid="true"] { border-color: #D98C8C; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--ink-3); }
.cform .act { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cform .msg { font-size: 15px; color: var(--ink); }
.cform .msg a { text-decoration: underline; text-underline-offset: 3px; }
.cform .fine { font-size: 13px; color: var(--ink-3); }
.cside { grid-column: 9 / 13; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.cside b { display: block; color: var(--ink-3); font-weight: 500; font-size: 13px; margin-bottom: 6px; }
.cside div + div { margin-top: 28px; }
.cside a { color: var(--ink); padding: 9px 0; display: inline-block; }
.summary { grid-column: 1 / 8; background: var(--bg-2); border: 1px solid var(--hair); border-radius: 16px; padding: 24px; font-size: 14px; line-height: 1.7; color: var(--ink-2); white-space: pre-wrap; }

/* ---- case studies ---- */
.sample { background: var(--bg-2); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; font-variant-numeric: tabular-nums; }
.sample-hd { display: flex; justify-content: space-between; padding: 16px 24px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--hair); }
.sample-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; padding: 14px 24px; font-size: 15px; }
.sample-row.head { font-size: 13px; color: var(--ink-3); }
.sample-row:nth-child(odd) { background: rgba(var(--ink-rgb),0.025); }
.sample-foot { padding: 16px 24px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--hair); }
.verticals { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.vert { background: var(--bg-2); padding: 32px; display: grid; gap: 14px; align-content: start; }
.vert:first-child { border-radius: 16px 0 0 16px; } .vert:last-child { border-radius: 0 16px 16px 0; }
.vert h3 { font-family: var(--serif); font-size: 32px; line-height: 1; }
.vert p { font-size: 15px; color: var(--ink-2); }
.vert a { font-size: 14px; color: var(--ink); padding: 11px 0; display: inline-block; }
.fit { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fit div { padding-top: 20px; border-top: 1px solid var(--hair); }
.fit h3 { font-family: var(--serif); font-size: 30px; margin-bottom: 14px; }
.fit ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.fit ul li::before { content: "·"; color: var(--accent); margin-right: 8px; }
.h2-lg { grid-column: 1 / 9; font-family: var(--serif); font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: 32px; text-wrap: balance; }
.why { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why div { padding-top: 20px; border-top: 1px solid var(--hair); }
.why h3 { font-family: var(--serif); font-size: 26px; line-height: 1.05; margin-bottom: 10px; }
.why p { font-size: 14px; color: var(--ink-2); }
.notfound { min-height: 70svh; display: grid; align-content: center; }

/* ---- tablet ---- */
@media (max-width: 1100px) and (min-width: 901px) {
  .page-hero h1 { font-size: clamp(46px, 7vw, 92px); }
  .services .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) and (min-width: 600px) {
  .page-hero h1, .hero h1 { font-size: 11vw; }
  .stage-x { grid-template-columns: 1fr 2fr; }
  .svc .items { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(5, 1fr); }
}
/* ---- phone and tablet ---- */
@media (max-width: 900px) {
  :root { --gx: max(20px, env(safe-area-inset-left, 0px)); --gxr: max(20px, env(safe-area-inset-right, 0px)); }
  .pill, .pill.sm { min-height: 44px; }
  .nav { padding-top: 14px; }
  .nav-r .clock { display: none; }
  .nav .full { display: none; }
  .nav .short { display: inline; }
  .hero { min-height: 600px; }
  .hero h1 { font-size: 15vw; max-width: none; }
  .hero-intro { margin-top: 22px; max-width: none; font-size: 15px; }
  .hero-bottom { bottom: 36px; }
  .hero-act { gap: 18px; margin-top: 24px; }
  .statement { padding-block: calc(var(--sec) + 8px) var(--sec); }
  .statement .big, .statement .src { grid-column: 1 / 13; }
  .statement .big { font-size: 30px; }
  .clients, .numbers, .method, .prompts, .work, .services, .plans, .founder, .faq { padding-bottom: var(--sec); }
  .numbers .fig { grid-column: 1 / 13; font-size: 18vw; }
  .numbers .txt { grid-column: 1 / 13; margin-top: 14px; }
  .method .lead, .method .steps, .method .more { grid-column: 1 / 13; }
  .method .steps { margin-top: 48px; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .prompts .frame { grid-column: 1 / 13; grid-template-columns: 1fr; padding: 24px; gap: 28px; }
  .services .intro, .services .cols { grid-column: 1 / 13; }
  .services .cols { grid-template-columns: 1fr; margin-top: 40px; gap: 32px; }
  .plans h2, .plans .intro { grid-column: 1 / 13; }
  .plans .set { grid-template-columns: 1fr; gap: 8px; }
  .plan { border: 1px solid var(--hair); }
  .plan:first-child { border-radius: 20px 20px 0 0; }
  .plan:last-child { border-radius: 0 0 20px 20px; }
  .plans .note { grid-column: 1 / 13; }
  .founder .q, .founder .by { grid-column: 1 / 13; }
  .founder .q { font-size: 28px; }
  .qa h3, .qa p { grid-column: 1 / 13; }
  .qa p { margin-top: 12px; }
  .close { padding-top: 120px; }
  .close h2 { font-size: 15vw; text-align: left; }
  .close .act { justify-content: flex-start; }
  .close .sub { text-align: left; }
  .frow .brand { grid-column: 1 / 13; }
  .frow .col:nth-child(2) { grid-column: 1 / 7; }
  .frow .col:nth-child(3) { grid-column: 7 / 13; }
  .frow .col:nth-child(4) { grid-column: 1 / 7; }
  .frow .col:nth-child(5) { grid-column: 7 / 13; }
  .two .l, .two .r { grid-column: 1 / 13; }
  .two .r { margin-top: 40px; }
  .sh { flex-wrap: wrap; row-gap: 6px; margin-bottom: 28px; }
  .sh .note { text-align: left; max-width: none; }
  .page-hero { padding-block: 108px 40px; }
  .page-hero h1, .page-hero p, .page-hero .side { grid-column: 1 / 13; }
  .page-hero .side { margin-top: 28px; }
  .page-hero .side.stat { text-align: left; }
  .sect { padding-bottom: 96px; }
  .entry { padding: 32px 0; }
  .entry .n, .entry .d, .entry .o { grid-column: 1 / 13; }
  .entry .d { margin-top: 18px; }
  .entry .o { text-align: left; margin-top: 18px; }
  .answer h2, .answer p { grid-column: 1 / 13; }
  .answer p { margin-top: 12px; }
  .svc h2, .svc .items { grid-column: 1 / 13; }
  .svc .items { margin-top: 20px; }
  .bigq, .bigq-by, .prose, .facts, .cform, .cside, .summary, .why { grid-column: 1 / 13; }
  .prose { margin-top: 32px; }
  .facts { margin-top: 32px; }
  .cform .row2 { grid-template-columns: 1fr; }
  .cside { margin-top: 40px; }
  .logos { gap: 24px 16px; padding: 28px 0; }
  .logos li { height: 52px; }
  .logos img { opacity: 0.74; max-width: 100%; }
  .logos li.h40 img { max-height: 34px; } .logos li.h30 img { max-height: 26px; } .logos li.h28 img { max-height: 24px; }
  .sample-row { grid-template-columns: 1fr 1fr 1fr; }
  .sample-row span:nth-child(2), .sample-row span:nth-child(5) { display: none; }
  .verticals, .fit { grid-template-columns: 1fr; }
  .vert:first-child { border-radius: 16px 16px 0 0; } .vert:last-child { border-radius: 0 0 16px 16px; }
  .h2-lg { grid-column: 1 / 13; }
}
@media (max-width: 599px) {
  .page-hero h1 { font-size: 15vw; }
  .page-hero.case h1 { font-size: 13vw; }
  .stage-x { grid-template-columns: 1fr; gap: 12px; }
  .svc .items { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .why { grid-template-columns: 1fr; }
}

em { font-style: normal; }

/* booking, readout capture, honeypot (2026-10-28) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.book .bk-l { grid-column: 1 / 5; }
.book .bk-l h2, .fm-h { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.01em; }
.book .bk-l p { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.bk-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.bk-list li { padding: 14px 0; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink); }
.bk-list li:last-child { border-bottom: 1px solid var(--hair); }
.book .bk-r { grid-column: 6 / 13; }
.cal { background: var(--bg-2); border: 1px solid var(--hair); border-radius: 20px; min-height: 420px; display: grid; overflow: hidden; }
.cal.on { background: #fff; }
.cal iframe { display: block; width: 100%; min-height: 760px; border: 0; }
.cal-ph { align-self: center; padding: 40px; display: grid; gap: 22px; justify-items: start; }
.cal-note { font-size: 13px; color: var(--ink-3); max-width: 42ch; }
.cal-act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cal-act .link { font-size: 15px; padding: 11px 0; }
.fm-h { grid-column: 1 / 13; margin-bottom: 36px; }
.cform.sent input, .cform.sent textarea { opacity: 0.6; }
.prompts .readout { margin-top: 28px; }
.prompts .readout .rrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.prompts .readout .rrow .pill { height: 48px; }
.prompts .readout input[aria-invalid="true"] { border-color: #D98C8C; }
.prompts .readout.sent input { opacity: 0.6; }
.prompts .actions .link { font-size: 14px; padding: 11px 0; }
.prompts .hint:empty { display: none; }
@media (max-width: 900px) {
  .book .bk-l, .book .bk-r { grid-column: 1 / 13; }
  .book .bk-r { margin-top: 36px; }
  .cal-ph { padding: 24px; }
  .prompts .readout .rrow { grid-template-columns: 1fr; }
}

/* comparison table */
.cmp { grid-column: 1 / 13; overflow-x: auto; border: 1px solid var(--hair); border-radius: 20px; background: var(--bg-2); -webkit-overflow-scrolling: touch; }
.cmp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 20px 22px; border-top: 1px solid var(--hair); }
.cmp thead th { border-top: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); }
.cmp thead th:nth-child(2) { color: var(--accent); }
.cmp tbody th { width: 18%; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.cmp td { color: var(--ink-2); width: 27%; }
.cmp td:nth-child(2) { color: var(--ink); }
.cmp-note { grid-column: 1 / 9; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px) { .cmp-note { grid-column: 1 / 13; } .cmp th, .cmp td { padding: 16px; } }

.prose > h2:first-child { margin-top: 0; }
.prose a:not(.pill) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(var(--ink-rgb),0.28); }
.prose a:not(.pill):hover { text-decoration-color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 1.2em; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px 12px 0; border-top: 1px solid var(--hair); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 500; }

/* ---- PORTED RESOURCES: elements the ported pages use that styles.css does not yet cover. Append to styles.css. ---- */
.prose h3 { font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--ink); margin: 1.6em 0 0.4em; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose ul, .prose ol { margin: 1.1em 0 0; padding-left: 1.2em; }
.prose li { padding-left: 0.2em; }
.prose li + li { margin-top: 0.7em; }
.prose li::marker { color: var(--ink-3); }
.prose ul + p, .prose ol + p, .prose .tbl + p, .prose blockquote + p { margin-top: 1.2em; }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 22px; border-left: 1px solid var(--accent); }
.prose blockquote p { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; color: var(--ink); }
.prose blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--ink-3); }
.tbl { margin: 1.6em 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--hair); }
.tbl:focus-visible { outline-offset: 2px; }
.tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); }
.tbl thead th { font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
.tbl tbody th { font-weight: 500; color: var(--ink); }
.tbl td { color: var(--ink-2); }
.gloss { grid-column: 1 / 13; margin: 0; }
.gloss dt { grid-column: 1 / 6; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; color: var(--ink); padding-top: 32px; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--nav-h) + 12px); }
.gloss dd { grid-column: 7 / 13; margin: 0; padding: 0 0 32px; font-size: 15px; color: var(--ink-2); max-width: 56ch; }
.gloss { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; }
.gloss dt:target { color: var(--accent); }
@media (min-width: 901px) { .gloss dd { padding-top: 38px; border-top: 1px solid var(--hair); } }
@media (max-width: 900px) {
  .gloss dt, .gloss dd { grid-column: 1 / 13; }
  .gloss dd { padding-top: 10px; }
  .tbl table { font-size: 13px; }
}
.entry .n h2 a { display: inline-block; padding-block: 7px; margin-block: -7px; }

/* real self-readout on the audit page */
.readout-x { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; row-gap: 40px; }
.readout-x .rd-score { grid-column: 1 / 5; }
.readout-x .rd-score .big { font-size: clamp(64px, 7vw, 112px); line-height: 0.9; letter-spacing: -0.02em; color: var(--ink); }
.readout-x .rd-score p + p { margin-top: 18px; font-size: 15px; color: var(--ink-2); max-width: 36ch; }
.readout-x .sample { grid-column: 5 / 13; }
.rd-row { display: grid; grid-template-columns: minmax(0, 3fr) 0.7fr 0.7fr 0.8fr; gap: 12px; padding: 14px 24px; font-size: 15px; align-items: baseline; }
.rd-row.head { font-size: 13px; color: var(--ink-3); }
.rd-row:nth-child(odd) { background: rgba(var(--ink-rgb),0.025); }
.rd-row .q { color: var(--ink); }
.rd-row .yes { color: var(--accent); }
.rd-row .no { color: var(--ink-3); }
.readout-x .rd-next { grid-column: 5 / 13; }
.rd-next h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; }
.rd-next ol { margin: 20px 0 0; padding-left: 1.2em; display: grid; gap: 14px; font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.rd-next ol b { color: var(--ink); font-weight: 500; }
.rd-next p { margin-top: 20px; font-size: 15px; color: var(--ink); }
@media (max-width: 900px) {
  .readout-x .rd-score, .readout-x .sample, .readout-x .rd-next { grid-column: 1 / 13; }
  .rd-row { grid-template-columns: minmax(0, 1fr) 44px 44px 48px; padding: 12px 16px; font-size: 14px; gap: 8px; }
}
.sample-hd { gap: 16px; } .sample-hd span:last-child { white-space: nowrap; }
.prompts ol { align-content: start; }

/* Client logos: one continuous row. The track holds the list twice and slides by half its width, so the loop is seamless. */
.marquee { position: relative; overflow: hidden; padding: 28px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-row { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.logo-row li { flex: none; display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 44px; }
.logo-row img { width: auto; height: auto; max-width: 170px; object-fit: contain; opacity: 0.68; transition: opacity 300ms var(--ease); }
.logo-row li:hover img { opacity: 1; }
.logo-row li.h16 img { max-height: 16px; } .logo-row li.h22 img { max-height: 22px; } .logo-row li.h24 img { max-height: 24px; } .logo-row li.h26 img { max-height: 26px; } .logo-row li.h28 img { max-height: 28px; } .logo-row li.h30 img { max-height: 30px; } .logo-row li.h40 img { max-height: 40px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .marquee { padding: 28px 0; }
  .logo-row li { height: 52px; padding: 0 26px; }
  .logo-row img { max-width: 140px; opacity: 0.74; }
  .logo-row li.h16 img { max-height: 14px; }
  .logo-row li.h40 img { max-height: 34px; } .logo-row li.h30 img { max-height: 26px; } .logo-row li.h28 img { max-height: 24px; }
  .marquee-track { animation-duration: 54s; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .logo-row[aria-hidden="true"] { display: none; }
}

/* Logos are bone-white files; on paper they render as ink silhouettes. */
.logo-row img { filter: brightness(0); opacity: 0.62; }
.logo-row li:hover img { opacity: 0.9; }
.dark .logo-row img { filter: none; opacity: 0.68; }
.nav { transition: color 300ms var(--ease); }

/* ================= Graphics and motion ================= */
/* Answer card: a real AI answer, set as UI. Plays once when it scrolls in. */
.statement.has-card .big, .statement.has-card .src { grid-column: 1 / 7; }
.statement.has-card .big { grid-row: 1; align-self: center; }
.statement.has-card .src { grid-row: 2; }
.answer-card { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; margin: 0; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(var(--ink-rgb),0.04), 0 18px 40px -18px rgba(var(--ink-rgb),0.18); }
.ac-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.ac-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ac-date { margin-left: auto; }
.ac-q { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); font-size: 14px; line-height: 1.45; color: var(--ink); }
.ac-lines { display: grid; gap: 8px; margin: 18px 0; }
.ac-lines i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: rgba(var(--ink-rgb),0.08); transform-origin: left; }
.ac-pick { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 18px; border-radius: 12px; background: rgba(var(--accent-rgb),0.07); }
.ac-pick::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); transform-origin: top; }
.ac-tag { font-size: 12px; color: var(--accent); font-weight: 500; }
.ac-pick b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--ink); }
.ac-src { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.35); background: #FFFFFF; font-size: 12px; color: var(--ink-2); }
.answer-card figcaption { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* Method timeline: a line that draws down the four stages, each with its week. */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 40px; bottom: 40px; width: 1px; background: var(--ink); opacity: 0.3; transform-origin: top; }
.timeline .step { position: relative; }
.timeline .step::before { content: ""; position: absolute; left: -30px; top: 37px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink); }
.timeline .step:first-child::before { background: var(--accent); border-color: var(--accent); }
.step h3 small, .stage-x h3 small { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--ink-3); margin-top: 8px; }

/* Sample scorecard: named / cited / absent per engine. */
.scorecard { margin: 32px 0 0; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 18px 40px -22px rgba(var(--ink-rgb),0.18); }
.sc-row { display: grid; grid-template-columns: minmax(0,2.2fr) repeat(4, minmax(0,1fr)); align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink); }
.sc-row.sc-head { border-top: 0; padding-top: 0; font-size: 12px; color: var(--ink-3); }
.sc-row > span:not(:first-child) { text-align: center; }
.sc-row i, .sc-key i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.s-c { background: var(--accent); }
.s-n { border: 2px solid var(--accent); }
.s-a { width: 14px !important; height: 2px !important; border-radius: 2px !important; background: rgba(var(--ink-rgb),0.22); }
.scorecard figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-3); }
.sc-key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.sc-note { flex-basis: 100%; }

@media (max-width: 900px) {
  .statement.has-card .big, .statement.has-card .src, .answer-card { grid-column: 1 / 13; grid-row: auto; }
  .answer-card { margin-top: 40px; }
  .sc-row { grid-template-columns: minmax(0,1.6fr) repeat(4, minmax(0,1fr)); font-size: 12px; gap: 4px; }
  .sc-row.sc-head { font-size: 10.5px; }
}

/* One-shot motion, only with JS and only when the visitor has not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .answer-card .ac-q { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms; }
  .js .answer-card .ac-lines i { transform: scaleX(0); transition: transform 700ms var(--ease-out); }
  .js .answer-card .ac-lines:first-of-type i:nth-child(1) { transition-delay: 600ms; } .js .answer-card .ac-lines:first-of-type i:nth-child(2) { transition-delay: 680ms; }
  .js .answer-card .ac-pick { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out) 950ms, transform 700ms var(--ease-out) 950ms; }
  .js .answer-card .ac-pick::before { transform: scaleY(0); transition: transform 600ms var(--ease-out) 1250ms; }
  .js .answer-card .ac-src { opacity: 0; transform: scale(0.92); transition: opacity 400ms var(--ease-out) 1450ms, transform 500ms var(--ease-out) 1450ms; }
  .js .answer-card .ac-lines:last-of-type i { transition-delay: 1300ms; }
  .js .answer-card.play .ac-q, .js .answer-card.play .ac-pick, .js .answer-card.play .ac-src { opacity: 1; transform: none; }
  .js .answer-card.play .ac-lines i, .js .answer-card.play .ac-pick::before { transform: none; }

  .js .timeline::before { transform: scaleY(0); transition: transform 1400ms var(--ease-out) 200ms; }
  .js .timeline.play::before { transform: none; }
  .js .timeline .step::before { transform: scale(0); transition: transform 400ms var(--ease-out); }
  .js .timeline .step:nth-child(1)::before { transition-delay: 250ms; } .js .timeline .step:nth-child(2)::before { transition-delay: 600ms; }
  .js .timeline .step:nth-child(3)::before { transition-delay: 950ms; } .js .timeline .step:nth-child(4)::before { transition-delay: 1300ms; }
  .js .timeline.play .step::before { transform: none; }

  .js .scorecard .sc-row i { transform: scale(0); transition: transform 360ms var(--ease-out); transition-delay: calc(300ms + var(--d) * 60ms); }
  .js .scorecard.play .sc-row i { transform: none; }

  .js .numbers .row .fig { clip-path: inset(0 0 100% 0); transform: translateY(14px); transition: clip-path 900ms var(--ease-out) 120ms, transform 900ms var(--ease-out) 120ms; }
  .js .numbers .row.play .fig { clip-path: inset(0 0 -10% 0); transform: none; }
}

/* Rhythm: one section gap, tighter on phones. */
@media (max-width: 900px) {
  :root { --sec: 64px; }
  .close { padding-block: 88px 32px; }
  footer { padding-block: 56px 28px; }
  .legal { margin-top: 36px; }
}

/* Purple primary: the one solid action per view is violet on light, lavender on the aubergine bands. */
.pill.solid, .pill.sm.solid { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.pill.solid:hover, .pill.sm.solid:hover { background: #4A38AE; border-color: #4A38AE; color: #FFFFFF; }
.dark .pill.solid, .dark .pill.sm.solid { background: var(--accent); border-color: var(--accent); color: #1D1533; }
.dark .pill.solid:hover, .dark .pill.sm.solid:hover { background: #FFFFFF; border-color: #FFFFFF; color: #1D1533; }
.link { text-decoration-color: rgba(var(--accent-rgb),0.45); }
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.dark .link:hover { color: var(--ink); }
.close::before { background: radial-gradient(closest-side, rgba(150,120,255,0.28), rgba(150,120,255,0) 70%); }
.numbers .fig { color: var(--ink); }
.timeline::before { background: var(--accent); opacity: 0.45; }
.timeline .step::before { border-color: var(--accent); }
.plan.feat { background: var(--accent); }
.plan.feat:hover { background: #4A38AE; }
.plan.feat .tier, .plan.feat .for, .plan.feat ul { color: rgba(255,255,255,0.86); }
.plan.feat .price { color: #FFFFFF; }
.plan.feat ul { border-color: rgba(255,255,255,0.22); }
.plan.feat .pill { background: #FFFFFF; color: var(--accent); border-color: #FFFFFF; }
.plan.feat .pill:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* Rhythm, second pass: less air at the end of each page, under labels, and above the fold on phones. */
.close { padding-block: 80px 32px; }
.close h2 { font-size: clamp(46px, 7vw, 100px); }
main > section:has(+ .close) { padding-bottom: 56px; }
.statement { padding-top: calc(var(--sec) - 16px); }
.eyebrow, .label { margin-bottom: 20px; }
.sh { margin-bottom: 20px; }
footer { padding-top: 56px; }
.frow { row-gap: 20px; }
.marquee { padding: 20px 0; }
.clients { padding-bottom: 56px; }
.numbers .row { padding: 20px 0; }
.page-hero { padding-bottom: 40px; }
.prompts .frame { padding: 28px; }
@media (max-width: 900px) {
  .close { padding-block: 64px 28px; }
  main > section:has(+ .close) { padding-bottom: 40px; }
  .page-hero { padding-bottom: 32px; }
}
@media (max-width: 600px) {
  .hero { height: 82svh; min-height: 560px; }
}
@media print {
  .reveal, .answer-card *, .numbers .fig, .timeline::before, .timeline .step::before, .scorecard i { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* deploy: footer legal links, ported page prose */
.legal .legal-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.legal .legal-links a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.svc .items h3 a { color: inherit; display: inline-block; padding-block: 12px; margin-block: -12px; }
.facts a, .prose cite a { display: inline-block; padding-block: 13px; margin-block: -13px; }
.industries a { color: inherit; }