:root {
  /* Every color is a light/dark pair. light-dark() resolves on the element that uses the token, against
     that element's color-scheme, so a part of the page can switch scheme just by setting color-scheme. */
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #000000);
  --band: light-dark(#f5f5f7, #141416);
  --surface: light-dark(#ffffff, #1f1f21); /* cards and rows sitting on a band */
  --chip: light-dark(#f5f5f7, #2c2c2e);
  --ink: light-dark(#1d1d1f, #f5f5f7);
  --ink-hover: light-dark(#000000, #ffffff);
  --on-ink: light-dark(#ffffff, #000000);
  --graphite: light-dark(#424245, #a1a1a6);
  --muted: light-dark(#6e6e73, #86868b);
  --faint: light-dark(#737378, #7a7a7f);
  --line: light-dark(#d2d2d7, #3a3a3c);
  --pressed: light-dark(#e8e8ed, #353538);
  --halo: light-dark(rgba(29,29,31,.12), rgba(245,245,247,.18));
  --error: light-dark(#c4302b, #ff6b62);
  --pad: clamp(24px, 5vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
/* No choice saved: follow the system. A saved choice (site.js) sets data-theme on <html>. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Accent surfaces take the scheme opposite to the page: the black band, the dark tile and the CTA strip are
   dark on a light page and light on a dark one. The "now" row inside the band flips back. Device screens
   show the work as it really looks, so they stay light. Each one re-declares its colors, because inherited
   colors were already resolved by the parent. */
.band--black, .nav--dark, .tile--dark, .cta-line { color-scheme: dark; }
.timeline li.now, .phone .screen, .demo { color-scheme: light; }
:root[data-theme="dark"] :is(.band--black, .nav--dark, .tile--dark, .cta-line) { color-scheme: light; }
:root[data-theme="dark"] .timeline li.now { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.band--black, .nav--dark, .tile--dark, .cta-line) { color-scheme: light; }
  :root:not([data-theme="light"]) .timeline li.now { color-scheme: dark; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.47 var(--sans); letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--on-ink); }
input, select, textarea { caret-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; text-underline-offset: 3px; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(1080px, 100% - 2 * var(--pad)); margin-inline: auto; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; }
.skip:focus { top: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--on-ink); font: 500 16px/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn--ghost { background: var(--chip); color: var(--ink); }
.btn--ghost:hover { background: var(--pressed); }
.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn svg { width: 14px; height: 14px; }
.link { color: var(--ink); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { text-decoration: underline; }
.link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.link:hover svg { transform: translateX(2px); }
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- launch offer ---------- */
/* A slim strip above the nav on every page, until the visitor closes it (site.js remembers). */
.offer { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 52px; background: var(--ink); color: light-dark(#fff, #000); font-size: 13px; line-height: 1.4; text-align: center; letter-spacing: -0.005em; }
.offer p { max-width: 920px; }
.offer b { font-weight: 600; }
.offer a { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.offer a svg { width: 12px; height: 12px; }
.offer-close { position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; opacity: .7; cursor: pointer; transition: opacity .2s, background-color .2s; }
.offer-close:hover { opacity: 1; background: rgba(128,128,128,.25); }
.offer-close svg { width: 14px; height: 14px; }
.offer-closed .offer { display: none; }
@media (max-width: 560px) { .offer { justify-content: flex-start; text-align: left; padding: 10px 48px 10px 16px; } }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: 52px;
  background: light-dark(rgba(255,255,255,.8), rgba(0,0,0,.8)); color: var(--ink); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background-color .3s var(--ease), color .3s;
}
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; font-size: 19px; letter-spacing: -0.03em; margin-right: auto; }
.brand svg { width: 30px; height: 20px; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.nav ul a { text-decoration: none; transition: color .2s; }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); }
.lang { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--chip); font: 500 12px/1 var(--sans); letter-spacing: 0; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.lang svg { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.lang:hover { background: var(--pressed); }
.nav--dark ul { color: var(--graphite); }
.nav--snap, .nav--snap * { transition: none !important; } /* light/dark switch in one frame (site.js) */
.theme { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: var(--chip); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.theme:hover { background: var(--pressed); }
.theme svg { width: 16px; height: 16px; }
@media (max-width: 940px) { .nav ul { display: none; } .nav .wrap { gap: 16px; } }
@media (max-width: 430px) { .nav .btn--sm { display: none; } }

/* ---------- type ---------- */
.h2 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.04em; }
.lede { margin-top: 20px; font-size: clamp(19px, 2vw, 24px); line-height: 1.38; color: var(--graphite); max-width: 36ch; letter-spacing: -0.02em; }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: -0.005em; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- sections ---------- */
section.band { padding: clamp(88px, 13vw, 160px) 0; }
.band--gray { background: var(--band); }
.band--black { background: light-dark(#f5f5f7, #000000); color: var(--ink); }

/* ---------- hero (home) ---------- */
.hero { text-align: center; padding: clamp(56px, 11vh, 112px) 0 0; width: min(1240px, 100% - 2 * var(--pad)); }
.hero h1 { font-size: clamp(40px, 7.4vw, 104px); line-height: 1.02; letter-spacing: -0.04em; }
.hero h1 span { color: var(--faint); }
.hero .sub { margin: 24px auto 0; max-width: 40ch; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.35; color: var(--graphite); letter-spacing: -0.02em; }
.hero .actions-row { justify-content: center; margin-top: 36px; }
.hero > * { animation: rise 1s var(--ease) both; }
.hero .sub { animation-delay: .08s; }
.hero .actions-row { animation-delay: .16s; }
@keyframes rise { from { opacity: .35; transform: translateY(10px); } }
@media (max-width: 640px) { .hero { padding-top: 40px; } .hero .sub { margin-top: 16px; font-size: 18px; } .hero .actions-row { margin-top: 28px; } }

/* ---------- device frames ---------- */
.duo { position: relative; width: min(1080px, 100%); margin: clamp(48px, 7vw, 88px) auto 0; padding-right: clamp(40px, 9vw, 120px); padding-bottom: clamp(24px, 4vw, 48px); }
.browser {
  position: relative; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.25), 0 10px 30px -10px rgba(0,0,0,.12);
}
.browser .bar { height: 36px; background: var(--chip); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px; gap: 7px; }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); flex: none; }
.browser .bar span { margin: 0 auto; padding: 3px 14px; border-radius: 7px; background: light-dark(#fff, #3a3a3c); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
/* iPhone: everything scales with the phone's own width (cqw), so one frame works at any size. */
.phone { position: relative; width: 100%; container-type: inline-size; }
.phone .frame {
  position: relative; padding: 3.4cqw; border-radius: 16cqw; background: #0b0b0c;
  box-shadow: inset 0 0 0 .55cqw #8a8a8f, inset 0 0 0 1cqw #2a2a2d, 0 30px 70px -20px rgba(0,0,0,.35);
}
.phone .frame::before, .phone .frame::after { content: ""; position: absolute; width: 1.1cqw; border-radius: 1cqw; background: #6e6e73; }
.phone .frame::before { right: -.8cqw; top: 27%; height: 15%; }
.phone .frame::after { left: -.8cqw; top: 18%; height: 5.5%; box-shadow: 0 9cqw 0 #6e6e73, 0 22cqw 0 #6e6e73; }
.phone .screen { color: var(--ink); position: relative; border-radius: 12.8cqw; overflow: hidden; background: #fff; aspect-ratio: 393 / 852; display: flex; flex-direction: column; }
.phone .status { flex: none; height: 13.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 8.5cqw 0 10.5cqw; color: #000; font: 600 4.4cqw/1 var(--sans); letter-spacing: -0.01em; }
.phone .status--dark { color: #fff; }
.phone .status svg { width: 18cqw; height: 3.2cqw; }
.phone .island { position: absolute; top: 3cqw; left: 50%; width: 31cqw; height: 9cqw; margin-left: -15.5cqw; border-radius: 99px; background: #000; }
.phone img { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.duo .phone { position: absolute; right: 0; bottom: 0; width: clamp(130px, 25%, 260px); }

/* ---------- work list (home) ---------- */
.projects { margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.proj {
  position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 4.5vw, 56px); border-radius: 28px; background: var(--band); overflow: hidden;
  transition: background-color .45s var(--ease);
}
/* On a dark page the project's light tint becomes a dark tone of the same hue. */
.proj { --tint-dark: oklch(from var(--tint, #2c2c2e) .26 calc(c * 1.6) h); }
.proj:hover { background: light-dark(var(--tint, var(--pressed)), var(--tint-dark)); }
.proj h3 { margin-top: 10px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.04em; line-height: 1.04; }
.proj p { margin-top: 14px; font-size: 19px; color: var(--graphite); max-width: 32ch; }
.proj .eyebrow { margin-top: 0; font-size: 13px; color: var(--muted); }
.proj-actions { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.proj:hover .stretch { text-decoration: underline; }
.proj:hover .stretch svg { transform: translateX(2px); }
.proj .cta { position: relative; z-index: 1; }
.proj .browser { transition: transform .6s var(--ease); }
.proj:hover .browser { transform: translateY(-4px); }
@media (max-width: 820px) {
  .proj { grid-template-columns: 1fr; }
  .proj .media { order: -1; }
}

/* ---------- process ---------- */
/* With JS the cards land one after another, half a second apart, as they come into view (site.js). */
section.process { padding: 0; }
.process-pin { padding: clamp(88px, 13vw, 160px) 0; }
.steps { margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--surface); border-radius: 28px; padding: clamp(28px, 3.6vw, 44px); }
.step .num { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 40px; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.04em; line-height: 1; }
.step p:last-child { margin-top: 14px; font-size: 17px; color: var(--graphite); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step h3 { margin-top: 20px; } }
html.js .process.staged .step { opacity: 0; transform: translateY(90px) scale(.96); transition: opacity .45s var(--ease), transform .75s cubic-bezier(.22, 1.35, .4, 1); }
html.js .process.staged .step.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .process.staged .step { opacity: 1; transform: none; transition: none; } }

/* ---------- timeline (black band) ---------- */
.timeline { margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.timeline li { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 18px 22px; border-radius: 14px; background: var(--surface); font-size: 19px; letter-spacing: -0.015em; }
.timeline time { color: var(--graphite); font-size: 15px; font-variant-numeric: tabular-nums; }
.timeline small { color: var(--muted); font-size: 15px; text-align: right; }
.timeline a { text-decoration: none; }
.timeline a:hover { text-decoration: underline; }
.timeline li.now { background: var(--band); color: var(--ink); }
.timeline li.now time, .timeline li.now small { color: var(--muted); }
@media (max-width: 720px) { .timeline li { grid-template-columns: 1fr; padding: 16px 18px; } .timeline small { text-align: left; } }

/* ---------- tiles ---------- */
.tiles { margin-top: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { border-radius: 28px; padding: clamp(28px, 3.6vw, 44px); min-height: 360px; display: flex; flex-direction: column; background: var(--band); }
.tile h3 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.035em; line-height: 1.08; }
.tile p { margin-top: 14px; font-size: 17px; color: var(--graphite); }
.tile ul { margin: auto 0 0; padding: 28px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tile li { font-size: 14px; padding: 8px 14px; border-radius: 999px; background: var(--surface); }
.tile--dark { background: var(--surface); color: var(--ink); }
.tile--dark li { background: var(--chip); }
.tiles--2 { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.tiles--2 .tile:first-child h3 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.045em; }
.tiles--2 .tile:first-child p { font-size: 19px; max-width: 34ch; }
@media (max-width: 900px) { .tiles, .tiles--2 { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* ---------- founder ---------- */
/* Portrait left, story right; the name and role sit on the photo, over the dark jacket. */
.founder { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: 1fr auto auto 1fr; gap: 0 clamp(40px, 6vw, 88px); align-items: start; }
.founder .portrait { grid-column: 1; grid-row: 1 / -1; }
.founder .h2 { grid-column: 2; grid-row: 2; }
.founder .body { grid-column: 2; grid-row: 3; margin-top: 28px; }
.founder .body p { font-size: 19px; line-height: 1.55; max-width: 40ch; }
.founder .body p + p { margin-top: 18px; }
.founder .body strong { font-weight: 500; }
.portrait { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: var(--pressed); aspect-ratio: 4 / 5; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(to top, rgba(10,12,24,.6) 0%, rgba(10,12,24,.32) 22%, rgba(10,12,24,.1) 48%, rgba(10,12,24,0) 100%); }
.portrait figcaption { position: absolute; left: clamp(20px, 2.6vw, 32px); right: clamp(20px, 2.6vw, 32px); bottom: clamp(18px, 2.4vw, 30px); z-index: 1; color: #fff; }
.portrait b { display: block; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.portrait span { display: block; margin-top: 6px; font-size: clamp(13px, 1.2vw, 15px); color: rgba(255,255,255,.82); }
@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px; }
  .founder .body { margin-top: 0; }
  .founder .h2, .founder .body { grid-column: 1; }
  .founder .portrait { grid-column: 1; grid-row: 2; width: min(420px, 100%); aspect-ratio: 1 / 1.08; }
  .founder .portrait img { object-position: 50% 12%; }
  .founder .h2 { grid-row: 1; }
  .founder .body { grid-row: 3; }
}

/* ---------- contact ---------- */
.contact { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.channels { display: grid; gap: 4px; }
.channels a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: var(--surface); text-decoration: none; font-size: 17px; transition: background-color .2s; }
.channels a:hover { background: var(--pressed); }
.channels a span { color: var(--muted); font-size: 15px; text-align: right; overflow-wrap: anywhere; }
.channels a:hover span { color: var(--ink); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- case study ---------- */
.case-head { padding: clamp(40px, 8vh, 88px) 0 0; }
.back { font-size: 13px; color: var(--muted); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.back:hover { color: var(--ink); }
.back svg { width: 14px; height: 14px; transform: scaleX(-1); }
.case-head h1 { margin-top: 28px; font-size: clamp(48px, 9vw, 120px); line-height: .98; letter-spacing: -0.05em; }
.case-head .lede { max-width: 30ch; font-size: clamp(21px, 2.4vw, 28px); }
.facts { margin: clamp(36px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.facts div { background: var(--band); border-radius: 14px; padding: 16px 20px; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.case-head .actions-row { margin-top: 28px; }
@media (max-width: 820px) { .facts { grid-template-columns: 1fr 1fr; } }

.chapters { display: grid; gap: clamp(72px, 10vw, 128px); }
.chapter { display: grid; gap: 20px; }
.chapter-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px clamp(32px, 6vw, 80px); align-items: center; }
.chapter .num { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapter h2 { margin-top: 10px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -0.04em; }
.chapter .text p { font-size: 19px; line-height: 1.55; max-width: 40ch; }
.chapter .text p + p { margin-top: 18px; }
.chapter .text strong { font-weight: 600; }
.chapter .text a { color: inherit; }
.chapter .text ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 46ch; }
.chapter .text li { padding: 14px 18px; border-radius: 14px; background: var(--band); font-size: 17px; }
.chapter .text li b { display: block; font-weight: 600; }
.band--gray .chapter .text li { background: var(--surface); }
/* Title and text sit side by side, centered on each other. The text is padded by the height of the
   number over the title (its line plus the title's margin), so it centers on the title itself. */
@media (min-width: 821px) { .chapter header { position: sticky; top: 84px; } .chapter .text { padding-top: 29px; } }
@media (max-width: 820px) { .chapter-row { grid-template-columns: 1fr; } }

figure { margin: 0; }
figcaption { margin-top: 16px; font-size: 14px; color: var(--muted); max-width: 60ch; }
.shot { margin-top: clamp(16px, 3vw, 32px); }
.shot--wide .browser img { aspect-ratio: auto; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.phones { display: flex; justify-content: center; gap: clamp(16px, 4vw, 48px); }
.phones .phone { width: min(300px, 42vw); }
.phones figcaption { text-align: center; margin-inline: auto; }
.canvas-band { background: var(--band); border-radius: 28px; padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 64px); }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }

.next { display: block; text-decoration: none; }
.next .eyebrow { color: var(--muted); }
.next h2 { margin-top: 12px; font-size: clamp(48px, 9vw, 120px); line-height: .98; letter-spacing: -0.05em; display: flex; align-items: center; gap: .2em; flex-wrap: wrap; }
.next h2 svg { width: .5em; height: .5em; transition: transform .35s var(--ease); }
.next:hover h2 svg { transform: translateX(.08em); }
.next p:not(.eyebrow) { margin-top: 18px; color: var(--graphite); font-size: clamp(19px, 2vw, 24px); max-width: 36ch; }
.cta-strip { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }

/* ---------- footer ---------- */
/* The footer fills the screen. When it comes into view the wordmark grows on its own from small to the
   full width of the screen, then the tagline, contact buttons and "back to top" fade in underneath.
   site.js sets --s (full scale) and adds .in. */
.outro { position: relative; color: var(--muted); font-size: 13px; }
.outro-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-bottom: clamp(190px, 30vh, 260px); }
.outro-sign { margin: 0; display: inline-flex; align-items: center; gap: .42em; font-size: 160px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; transform: scale(calc(var(--s, 1) * .16)); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.outro.in .outro-sign { transform: scale(var(--s, 1)); }
.outro-sign svg { width: 1.58em; height: 1.05em; flex: none; }
.outro-meta { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 56px); display: grid; gap: 20px; opacity: 0; transition: opacity .6s ease .75s; }
.outro.in .outro-meta { opacity: 1; }
.outro-line { font-size: clamp(22px, 3vw, 36px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.outro-links { display: flex; flex-wrap: wrap; gap: 8px; }
.outro-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.outro-row a { text-decoration: none; }
.outro-row a:hover { color: var(--ink); }
.to-top { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.to-top svg { width: 14px; height: 14px; transform: rotate(-90deg); }
html:not(.js) .outro-sign { transform: none; }
html:not(.js) .outro-meta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .outro-sign { transform: none; transition: none; }
  .outro-meta { opacity: 1; transition: none; }
  .outro-pin { position: static; height: auto; display: block; padding: 72px 0 48px; }
  .outro-sign { display: flex; justify-content: center; margin-bottom: 48px; }
  .outro-meta { position: static; }
}

/* Calls to action along the page, and one that floats in once the hero is gone. */
.section-cta { margin-top: clamp(32px, 5vw, 48px); }
.cta-line { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: clamp(24px, 3.6vw, 40px) clamp(28px, 4.5vw, 56px); border-radius: 28px; background: light-dark(#f5f5f7, #1d1d1f); color: var(--ink); }
.cta-line p { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.founder .actions-row { margin-top: 28px; gap: 20px; }
.float-cta { position: fixed; right: 20px; bottom: 20px; z-index: 40; box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .5s ease, transform .6s var(--ease), background-color .2s; }
.float-cta.on { opacity: 1; transform: none; pointer-events: auto; }
.float-cta.on.away { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (max-width: 560px) { .float-cta { right: 16px; bottom: 16px; height: 44px; padding: 0 18px; font-size: 15px; } }

/* ---------- motion ---------- */
html.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .rise.in { opacity: 1; transform: none; }
/* Page to page: the page underneath fades out and the next one rises in, the nav holds still, and the
   project's screenshot and name travel to their place on the next page (assets/transitions.js names them). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.nav { view-transition-name: nav; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: .25s ease both vt-out; }
::view-transition-new(root) { animation: .6s var(--ease) .15s both vt-in; }
/* The name keeps its proportions while it grows, instead of stretching to the shape of the new box. */
::view-transition-old(project-name), ::view-transition-new(project-name) { width: auto; height: 100%; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  html.js .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero > * { animation: none; }
}

/* ---------- section variants ---------- */
.band--gray .tile { background: var(--surface); }
.band--gray .tile li { background: var(--chip); }
.contact-light .channels a { background: var(--band); }
.contact-light .channels a:hover { background: var(--pressed); }
.pair--bp { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 720px) { .pair--bp { grid-template-columns: 1fr; } .pair--bp .phone { width: min(260px, 70%); margin-inline: auto; } }

/* ---------- Prospector demo (home hero) ---------- */
/* The page shows a video of it (site.js) over its first frame. The .demo-live rules below style the live
   demo itself (demo.js), which only src/record-demo.mjs loads, to film that video. Sizes inside the
   browser follow its width (cqw), so the app keeps its proportions at any size. */
.duo--demo { padding-right: 0; padding-left: clamp(40px, 9vw, 120px); }
.duo--demo .phone { left: 0; right: auto; }
.demo { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; background: var(--band); color: var(--ink); overflow: hidden; text-align: left; }
.demo > picture img, .demo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo > video { opacity: 0; transition: opacity .5s; }
.demo.playing > video { opacity: 1; }
.demo-live {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34%;
  background: #f5f5f7; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease);
  font: 400 clamp(9px, 1.12cqw, 13px)/1.35 var(--sans); letter-spacing: -0.01em; color: var(--ink);
}
.demo.ready .demo-live { opacity: 1; pointer-events: auto; }
.demo-map { position: relative; min-width: 0; height: 100%; }
.demo-map .maplibregl-canvas { filter: grayscale(1); outline: none; }
.demo-map .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.demo-map .maplibregl-cooperative-gesture-screen { font-family: var(--sans); font-size: 14px; }
.demo-where { position: absolute; top: 1.4cqw; left: 1.4cqw; z-index: 2; display: flex; gap: .4cqw; padding: .45cqw; width: min(42cqw, 360px); background: #fff; border-radius: 99px; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.demo-where input { flex: 1; min-width: 0; border: 0; background: var(--band); border-radius: 99px; padding: 0 1.1cqw; font: inherit; color: var(--ink); height: 2.9cqw; min-height: 24px; }
.demo-where input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.demo-where button, .dp-search, .dp-save { border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: 500 1em var(--sans); cursor: pointer; }
.demo-where button { padding: 0 1.3cqw; }
.demo-panel { display: flex; flex-direction: column; min-height: 0; padding: 1.5cqw 1.5cqw 1.2cqw; background: #fff; border-left: 1px solid var(--pressed); }
.dp-top { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-bottom: 1.4cqw; }
.dp-brand { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1.15em; letter-spacing: -0.03em; }
.dp-brand svg { width: 1.625em; height: 1.083em; flex: none; }
.dp-tabs, .ai-tabs { display: inline-flex; padding: 2px; border-radius: 99px; background: var(--band); }
.dp-tabs i, .ai-tabs i { font-style: normal; font-size: .85em; padding: .25em .75em; border-radius: 99px; color: var(--muted); }
.dp-tabs i.on, .ai-tabs i.on { background: var(--ink); color: #fff; }
.dp-label { display: block; margin: 0 0 .5cqw; font-weight: 500; font-size: .92em; }
.dp-input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: .6cqw .9cqw; font: inherit; color: var(--ink); margin-bottom: 1.1cqw; background: #fff; }
.dp-input:focus-visible { outline: none; border-color: var(--ink); }
.dp-seg { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; gap: 2px; border-radius: 10px; background: var(--band); margin-bottom: 1cqw; }
.dp-seg button { border: 0; background: none; border-radius: 8px; padding: .45cqw 0; font: inherit; color: var(--muted); cursor: pointer; }
.dp-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dp-search { padding: .75cqw 0; margin-bottom: .9cqw; }
.dp-search:hover, .demo-where button:hover, .dp-save:not([disabled]):hover { background: #000; }
.dp-status { display: grid; grid-template-columns: 1fr auto; gap: .5cqw; padding: .7cqw .9cqw; border-radius: 9px; background: var(--band); font-size: .85em; }
.dp-status em { font-style: normal; color: var(--muted); }
.dp-status i { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--pressed); overflow: hidden; }
.dp-status b { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
.dp-hint { margin: .6cqw 0 1cqw; font-size: .8em; color: var(--muted); }
.dp-list-head { display: flex; flex-direction: column; gap: .5cqw; padding-top: .9cqw; border-top: 1px solid var(--pressed); }
.dp-count { font-size: .85em; color: var(--graphite); }
.dp-chips { display: flex; gap: .4cqw; }
.dp-chips button { border: 0; border-radius: 99px; padding: .3cqw .8cqw; background: var(--band); font: inherit; font-size: .85em; color: var(--ink); cursor: pointer; }
.dp-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dp-list { flex: 1; min-height: 0; overflow-y: auto; margin: .6cqw -1.5cqw 0; padding: 0; list-style: none; scrollbar-width: thin; }
.dp-list li { display: flex; gap: .8cqw; align-items: flex-start; padding: .8cqw 1.5cqw; border-top: 1px solid #f0f0f2; }
.dp-list li.on { background: var(--band); }
.dp-list input { margin: .25em 0 0; accent-color: var(--ink); }
.dp-biz { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.dp-biz b { display: block; font-weight: 500; }
.dp-biz span { display: block; font-size: .82em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-biz em, .demo-pop em { display: inline-block; margin-top: .3em; font-style: normal; font-size: .78em; padding: .1em .6em; border-radius: 99px; background: #fdecea; color: #b42318; }
.dp-empty { color: var(--muted); font-size: .85em; }
.dp-foot { padding-top: .9cqw; border-top: 1px solid var(--pressed); }
.dp-save { width: 100%; padding: .75cqw 0; }
.dp-save[disabled] { opacity: .45; cursor: default; }
.demo-toast { position: absolute; left: 33%; bottom: 2cqw; transform: translate(-50%, 1cqw); z-index: 3; margin: 0; padding: .7cqw 1.4cqw; border-radius: 99px; background: var(--ink); color: #fff; font-size: .95em; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.demo-toast.on { opacity: 1; transform: translate(-50%, 0); }
.demo-pop .maplibregl-popup-content { padding: 9px 12px; border-radius: 12px; font: 400 12px/1.4 var(--sans); color: var(--ink); box-shadow: 0 6px 24px rgba(0,0,0,.16); }
.demo-pop b, .demo-pop span { display: block; }
.demo-pop b { font-weight: 600; font-size: 13px; }
.demo-pop span { color: var(--muted); }
.demo-intro { margin: clamp(56px, 8vw, 96px) auto 0; max-width: 620px; display: grid; justify-items: center; gap: 12px; }
.demo-intro p { font-size: 17px; line-height: 1.5; color: var(--graphite); }
.demo-intro strong { color: var(--ink); font-weight: 600; }
.demo-label { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; background: var(--band); font-size: 13px; font-weight: 500; }
.demo-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: blink 1.4s ease-in-out infinite; }
.duo--demo { margin-top: clamp(32px, 4vw, 48px); }
.demo-hit { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.browser--link { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.browser--link:has(.demo-hit:hover) { transform: translateY(-4px); box-shadow: 0 40px 90px -20px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.12); }
.browser--link .bar span { color: var(--ink); font-weight: 500; }
.warmth .h2 { max-width: 16ch; margin-inline: auto; }
.warmth .lede { max-width: 40ch; }
@media (prefers-reduced-motion: reduce) { .demo-label i { animation: none; } }
@container (max-width: 560px) {
  .demo-live { grid-template-columns: 1fr; font-size: 12px; }
  .demo-panel { display: none; }
  .demo-where { top: 10px; left: 10px; width: calc(100% - 64px); padding: 4px; gap: 4px; }
  .demo-where input { height: 30px; padding: 0 12px; }
  .demo-where button { padding: 0 12px; }
  .demo-toast { left: 50%; bottom: 12px; padding: 6px 12px; }
}
@media (max-width: 720px) {
  .duo--demo { padding: 0; }
  .duo--demo .phone { position: relative; left: auto; bottom: auto; width: min(280px, 72%); margin: 28px auto 0; }
}

/* The phone beside it: Prospector's "What the AI learned", sized by the phone's width. */
.ai-screen { flex: 1; min-height: 0; overflow: hidden; padding: 1cqw 5.5cqw 6cqw; background: #fff; font: 400 3.3cqw/1.35 var(--sans); letter-spacing: -0.01em; color: var(--ink); scrollbar-width: none; text-align: left; }
.ai-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4cqw; }
.ai-top svg { width: 8cqw; height: 5.3cqw; }
.ai-screen h3 { font-size: 6.6cqw; letter-spacing: -0.035em; line-height: 1.1; }
.ai-sub { margin-top: 1.2cqw; font-size: 3cqw; color: var(--muted); }
.ai-kpis { margin-top: 4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.ai-kpis div, .ai-card { background: var(--band); border-radius: 4cqw; padding: 3.2cqw 3.4cqw; }
.ai-kpis span { display: block; font-size: 2.7cqw; color: var(--muted); }
.ai-kpis b { display: block; margin-top: .6cqw; font-size: 6cqw; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.ai-kpis small { display: block; margin-top: .6cqw; font-size: 2.5cqw; color: var(--muted); }
.ai-card { margin-top: 2.4cqw; }
.ai-card h4 { margin: 0 0 2.2cqw; font-size: 3.6cqw; font-weight: 600; }
.ai-row { display: grid; grid-template-columns: auto 1fr; gap: 0 2cqw; padding: 1.8cqw 0; border-top: 1px solid var(--pressed); }
.ai-row span { color: var(--muted); font-size: 2.9cqw; }
.ai-row b { text-align: right; font-weight: 600; font-size: 3.1cqw; }
.ai-row small { grid-column: 1 / -1; text-align: right; font-size: 2.5cqw; color: var(--muted); }
.ai-bar { display: grid; grid-template-columns: 34% 1fr 9cqw; align-items: center; gap: 2cqw; padding: 1.2cqw 0; font-size: 2.9cqw; }
.ai-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bar i { height: 2.2cqw; border-radius: 2cqw; background: var(--pressed); overflow: hidden; }
.ai-bar b { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #a1a1a6; transform-origin: left; animation: grow 1.4s var(--ease) .6s both; }
.ai-bar.best b { background: var(--ink); }
.ai-bar em { font-style: normal; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.ai-note { margin-top: 3cqw; text-align: center; font-size: 2.5cqw; color: var(--faint); }
@keyframes grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ai-bar b { animation: none; } }

/* The demo runs itself: an "AI pilot" badge says what it is doing, fields fill as if typed. */
.demo-ai { position: absolute; top: 5.6cqw; left: 1.4cqw; z-index: 2; display: inline-flex; align-items: center; gap: .6cqw; margin: 0; padding: .55cqw 1.1cqw; border-radius: 99px; background: var(--ink); color: #fff; font-size: .95em; max-width: 60cqw; }
.demo-ai:has(b:empty) { display: none; }
.demo-ai i { width: .7cqw; height: .7cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: #fff; flex: none; }
.demo-ai.busy i { animation: blink 1s ease-in-out infinite; }
.demo-ai b { font-weight: 600; }
.demo-ai span { color: #a1a1a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes blink { 50% { opacity: .25; } }
.demo-live .typing { box-shadow: 0 0 0 2px var(--ink); }
.demo-live .press { transform: scale(.96); background: #000; transition: transform .15s; }
@container (max-width: 560px) { .demo-ai { top: 52px; left: 10px; padding: 5px 10px; font-size: 11px; gap: 6px; max-width: calc(100% - 20px); } }
@media (prefers-reduced-motion: reduce) { .demo-ai.busy i { animation: none; } }

/* Footer rubber letters (site.js). */
.rb-word { display: inline-block; white-space: nowrap; }
.rb { display: inline-block; will-change: transform; }
.outro-sign { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.outro-sign.grabbing { cursor: grabbing; }
.outro-line { justify-self: start; }

/* ---------- contact chat (chat.js) ---------- */
.chat { position: relative; display: flex; flex-direction: column; height: clamp(500px, 64vh, 620px); background: var(--band); border-radius: 28px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--pressed); }
.chat-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--pressed); }
.chat-head b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.chat-head span { display: block; font-size: 12px; color: var(--muted); }
.chat-restart { margin-left: auto; border: 0; background: var(--band); border-radius: 99px; padding: 6px 12px; font: 500 12px var(--sans); color: var(--ink); cursor: pointer; }
.chat-restart:hover { background: var(--pressed); }
.chat-close { margin-left: auto; width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.chat-close[hidden] { display: none; }
.chat-keep { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }
.chat-restart:not([hidden]) + .chat-close { margin-left: 0; }
.chat-close svg { width: 16px; height: 16px; }
/* Phones, once the visitor starts typing: the chat takes the whole visible screen (chat.js sets top and height). */
.chat.is-full { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 100vh; border-radius: 0; }
.chat.is-full .chat-head { padding-top: max(16px, env(safe-area-inset-top)); }
.chat.is-full .chat-input { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
html.chat-open, html.chat-open body { overflow: hidden; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; overscroll-behavior: contain; }
.msg { max-width: 84%; padding: 10px 15px; border-radius: 20px; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; animation: pop .35s var(--ease) both; overflow-wrap: anywhere; white-space: pre-line; }
.msg--bot { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; }
.msg--me { align-self: flex-end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 6px; }
.msg.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: bounce 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
.msg.estimate { display: grid; gap: 4px; padding: 16px 18px; white-space: normal; }
.est-kind { font-size: 14px; color: var(--muted); }
.est-price { margin-top: 2px; font-size: 38px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.est-was { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.est-was s { color: var(--muted); font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
.est-off { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 500; line-height: 1.25; }
.est-note { font-size: 13px; color: var(--muted); }
.chat-input { padding: 12px 14px; background: var(--surface); border-top: 1px solid var(--pressed); min-height: 70px; display: flex; align-items: center; }
.chat-input:empty::before { content: ""; }
.chat-form { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.chat-form input, .chat-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 22px; padding: 12px 16px; font: 400 16px/1.35 var(--sans); color: var(--ink); background: var(--surface); resize: none; }
.chat-form input:focus-visible, .chat-form textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--halo); }
.chat-send { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; cursor: pointer; }
.chat-send:hover { background: var(--ink-hover); }
.chat-send svg { width: 18px; height: 18px; }
.chat-err { grid-column: 1 / -1; font-size: 13px; color: var(--error); }
.chat-err:empty { display: none; }
.chat-suggest { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-suggest:empty { display: none; }
.chat-suggest .chip { padding: 7px 12px; font-size: 14px; }
.chat-chips { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 10px 18px; font: 500 15px var(--sans); color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
.chip:hover { background: var(--band); border-color: var(--faint); }
.chat-form .chip { padding: 10px 14px; }
.chat-final { justify-content: stretch; }
.chat-final .btn { flex: 1; }
.chat-noscript { padding: 20px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 560px) { .chat { height: 72vh; height: 72svh; border-radius: 22px; } .msg { font-size: 15px; } .chat-log > :first-child { margin-top: auto; } }
@media (prefers-reduced-motion: reduce) { .msg, .msg.typing i { animation: none; } }

/* Phones: a little more air between blocks and calmer line lengths. */
@media (max-width: 560px) {
  section.band { padding: 80px 0; }
  .lede { margin-top: 16px; font-size: 18px; line-height: 1.45; }
  .hero .sub { line-height: 1.45; }
  .proj p, .founder .body p, .chapter .text p { font-size: 17px; line-height: 1.6; }
  .projects, .tiles, .steps, .timeline { margin-top: 40px; }
  .proj { gap: 24px; }
  .contact { gap: 28px; }
  .channels a { padding: 15px 18px; }
  .channels a span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}