/* ==========================================================================
   Point It Here site stylesheet. Concept K's system, applied to every page.

   Paper ground, ink type, one gold accent. Bricolage Grotesque for display,
   Manrope for reading, Playfair Display for the wordmark alone. The work stands beside the words, never behind them.
   Motion is budgeted: one load sequence on the home hero, drawings that draw
   themselves on when they enter the viewport, and effects that answer an
   action. Everything respects prefers-reduced-motion.

   The portal (public/css/portal.css) shares this file and reads the legacy
   token names (--bg, --surface, --primary, ...), so those stay defined here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* K palette */
  --paper: #f4f2ee;
  --paper-2: #ebe8e1;
  --ink: #0b0b0d;
  --ink-2: #141417;
  --fg: #f4f2ee;
  --dim: #5f5f68;
  --dim-dark: #9a9aa3;
  --line: rgba(11, 11, 13, 0.12);
  --line-dark: rgba(244, 242, 238, 0.14);
  --gold: #c9a961;
  --gold-ink: #2a1e07;
  --gold-text: #7a5410;

  /* Legacy names the portal and a few shared parts still read */
  --bg: var(--paper);
  --surface: #ffffff;
  --muted: var(--dim);
  --rule: rgba(11, 11, 13, 0.24);
  --primary: #1a1a2e;
  --primary-strong: #12122a;
  --primary-deep: #1a1a2e;
  --primary-text: #1a1a2e;
  --tint: #ecebf1;
  --gold-deep: #9a7b3a;
  --gold-tint: #f3ecd9;
  --on-gold: var(--gold-ink);
  --header-bg: rgba(244, 242, 238, 0.9);
  --error: #b3261e;
  --ok: #1f7a4d;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --radius: var(--r);
  --shadow: 0 1px 2px rgba(11, 11, 13, 0.06);
  --shadow-lift: 0 20px 50px rgba(11, 11, 13, 0.18);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: var(--sans);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.2rem;
  --t-xl: 1.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lead { font-size: 1.15rem; color: var(--dim); max-width: 54ch; }
.dark .lead, .section--dark .lead { color: var(--dim-dark); }
.fine { color: var(--dim); font-size: 0.95rem; }
.container { width: min(1280px, 92%); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; background: var(--ink); color: var(--fg); padding: 0.5rem 0.9rem; border-radius: 999px; z-index: 100; }
.skip-link:focus { left: 0.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 0.98rem;
  padding: 0.85rem 1.5rem; border-radius: 1000px; border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn--primary { background: var(--gold); color: var(--gold-ink); }
.btn--primary:hover { background: #f3c566; }
.btn--ink { background: var(--ink); color: var(--fg); }
.btn--ink:hover { background: #2a2a30; }
.btn--ghost, .btn--outline { border-color: rgba(11, 11, 13, 0.3); color: var(--ink); background: transparent; }
.btn--ghost:hover, .btn--outline:hover { border-color: var(--ink); }
.dark .btn--ghost, .section--dark .btn--ghost, .btn--ghost-light { border-color: rgba(244, 242, 238, 0.35); color: var(--fg); background: transparent; }
.dark .btn--ghost:hover, .btn--ghost-light:hover { border-color: #fff; }
.btn--light { background: var(--fg); color: var(--ink); }
.btn--small { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { width: min(1280px, 92%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0.95rem 0; }
.nav__brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.wordmark, .nav__wordmark, .site-footer__brand { display: flex; flex-direction: column; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.wordmark small, .nav__wordmark small, .site-footer__brand small { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.32em; opacity: 0.72; margin-bottom: 0.3rem; }
.nav__mark { display: inline-grid; place-items: center; }
.nav__menu { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; color: var(--dim); }
.nav__menu a:not(.btn) { text-decoration: none; }
.nav__menu a:not(.btn):hover, .nav__menu a[aria-current="page"] { color: var(--ink); }
.nav__menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; align-items: center; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 0.2s; }
@media (max-width: 1040px) {
  .nav__toggle { display: flex; }
  .nav__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 0.5rem 4%; }
  .nav__menu.is-open { display: flex; }
  .nav__menu li { width: 100%; }
  .nav__menu a:not(.btn) { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .nav__menu .btn { margin: 0.8rem 0; }
}

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section--tight { padding: 3.5rem 0; }
.section--alt { background: var(--paper-2); }
.dark, .section--dark { background: var(--ink); color: var(--fg); }
.section__head { max-width: 62ch; margin-bottom: 3rem; }
.page-hero { padding: 3.5rem 0 2.5rem; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 1rem; }
.crumb { font-size: 0.85rem; color: var(--dim); margin-bottom: 1.2rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .two-col, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.cta-band { background: var(--ink); color: var(--fg); }
.cta-band__inner { text-align: center; max-width: 60ch; margin-inline: auto; }
.cta-band__inner p { color: var(--dim-dark); }
.cta-band .btn { margin-top: 0.5rem; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.checklist li { padding-left: 1.6rem; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--gold); }
.checklist--pain li::before { background: var(--dim-dark); }
.dark .checklist li, .section--dark .checklist li { color: #c9c9d0; }

/* ---------- Reveal (runtime adds .is-visible) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Home hero: words left, the deck right ---------- */
.hero { padding: 2.5rem 0 4rem; overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 5.6vw, 5.4rem); max-width: 12ch; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .w span { display: inline-block; transform: translateY(110%); animation: rise 0.9s var(--ease) forwards; }
.hero h1 .w:nth-child(2) span { animation-delay: 0.08s; }
.hero h1 .w:nth-child(3) span { animation-delay: 0.16s; }
.hero h1 .w:nth-child(4) span { animation-delay: 0.24s; }
@keyframes rise { to { transform: none; } }
.hero .lead { margin-top: 1.4rem; opacity: 0; animation: fade 0.8s 0.5s ease forwards; }
.hero__row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; opacity: 0; animation: fade 0.8s 0.65s ease forwards; }
.proof { margin-top: 1.6rem; font-size: 0.95rem; color: var(--dim); opacity: 0; animation: fade 0.8s 0.8s ease forwards; }
.proof b { color: var(--ink); }

/* City line in the heroes: every city is in the HTML; one shows at a time.
   The names share one grid cell, so the line is as wide as the longest name
   and nothing below it moves when the city changes. */
.cities { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45em; margin: 1rem 0 0; font-size: 1.08rem; color: var(--dim); }
.cities__rot { display: inline-grid; color: var(--ink); font-weight: 700; }
.cities__rot > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; opacity: 0; transform: translateY(0.35em); transition: opacity 0.35s ease, transform 0.35s var(--ease); box-shadow: inset 0 -2px 0 var(--gold); }
.cities__rot > span.is-on { opacity: 1; transform: none; }
.hero .cities { opacity: 0; animation: fade 0.8s 0.4s ease forwards; }
@media (prefers-reduced-motion: reduce) { .cities__rot > span { transition: none; } .hero .cities { animation: none; opacity: 1; } }
@keyframes fade { to { opacity: 1; } }
.hero__deck { position: relative; padding: 5.6rem 4.5rem 3rem 0; }
.deck { position: relative; width: 100%; aspect-ratio: 16 / 11; perspective: 1800px; outline: 0; touch-action: pan-y; }
.deck__stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(-16deg + var(--ty, 0deg))) rotateX(calc(7deg + var(--tx, 0deg))); transition: transform 0.25s ease-out; }
.deck .card {
  position: absolute; inset: 0; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px rgba(11, 11, 13, 0.28), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
  transition: transform 0.8s var(--ease), opacity 0.6s ease; will-change: transform; animation: fan 0.9s var(--ease) both;
}
.deck .card:nth-child(2) { animation-delay: 0.06s; }
.deck .card:nth-child(3) { animation-delay: 0.12s; }
.deck .card:nth-child(4) { animation-delay: 0.18s; }
@keyframes fan { from { transform: translate3d(0, 40px, -200px); opacity: 0; } }
.deck .card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card__tag { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--ink); color: var(--fg); font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 999px; }
.deck__ui { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; flex-wrap: wrap; }
.deck__cap { margin: 0; }
.deck__cap b { display: block; font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.deck__cap span { color: var(--dim); font-size: 0.92rem; }
.deck__cap a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.deck__btns { display: flex; gap: 0.5rem; align-items: center; }
.deck__btns button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(11, 11, 13, 0.25); background: #fff; cursor: pointer; display: grid; place-items: center; }
.deck__btns button:hover { border-color: var(--ink); }
.deck__btns svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; gap: 0.4rem; margin-inline: 0.4rem; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(11, 11, 13, 0.2); }
.dots i.on { background: var(--ink); }
.hint { position: absolute; right: 0; top: 0.2rem; width: 250px; margin: 0; font-size: 0.88rem; color: var(--dim); line-height: 1.35; padding-left: 2.2rem; opacity: 0; animation: fade 0.8s 1.1s ease forwards; }
.hint svg { position: absolute; left: 0; top: 0.1rem; width: 30px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hint svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s 1.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: 2rem; }
  .hero h1 { max-width: 14ch; }
  .hero__deck { padding: 1.5rem 5rem 2rem 0; }
  .deck__stage { transform: rotateY(calc(-8deg + var(--ty, 0deg))) rotateX(calc(4deg + var(--tx, 0deg))); }
  .hint { display: none; }
}

/* ---------- Marquee ---------- */
.ticker { border-block: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 0.9rem 0; background: var(--paper-2); }
.ticker__track { display: inline-flex; animation: tick 70s linear infinite; }
.ticker a { display: inline-block; padding: 0 1.3rem; text-decoration: none; font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--dim); }
.ticker a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-left: 1.3rem; vertical-align: middle; }
.ticker a:hover { color: var(--ink); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Two front doors ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.door { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; transition: box-shadow 0.25s, transform 0.25s; }
.door:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.door__k { color: var(--gold-text); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; }
.door h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.door p { color: var(--dim); }
.door ul { margin: 1rem 0 1.4rem; padding-left: 1.1rem; color: var(--dim); }
.door ul li { margin-bottom: 0.35rem; }
.door .btn { pointer-events: none; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }

/* ---------- Three things, drawn ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.step { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.step__n { font-family: var(--display); font-weight: 700; color: var(--gold-text); font-size: 1rem; margin: 0; }
.step svg { display: block; width: 120px; height: 120px; margin: 1rem 0 1.2rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step svg path, .step svg circle, .step svg rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); }
.step.is-visible svg path, .step.is-visible svg circle, .step.is-visible svg rect { stroke-dashoffset: 0; }
.step.is-visible svg .d2 { transition-delay: 0.35s; }
.step.is-visible svg .d3 { transition-delay: 0.7s; }
.step svg .gold { stroke: var(--gold); }
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--dim); }
.step.reveal { transform: none; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Compare slider ---------- */
.compare-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: center; }
.compare { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(11, 11, 13, 0.25); --split: 50%; isolation: isolate; background: #e4e2dc; }
.compare__tpl { position: absolute; inset: 0; padding: 6% 7%; display: grid; grid-template-rows: auto 1fr auto; gap: 5%; background: #e8e6e0; }
.tpl__bar { height: 7%; background: #cfcdc6; border-radius: 6px; display: flex; align-items: center; gap: 3%; padding: 0 3%; }
.tpl__bar i { display: block; height: 35%; background: #b5b3ab; border-radius: 3px; }
.tpl__bar i:first-child { width: 14%; }
.tpl__bar i:nth-child(n+2) { width: 7%; }
.tpl__hero { background: #d6d4cd; border-radius: 8px; display: grid; place-items: center; color: #8a8880; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 2.4cqw, 1.6rem); text-align: center; padding: 4%; }
.tpl__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; height: 26%; }
.tpl__cards i { display: block; background: #d6d4cd; border-radius: 8px; }
.compare__real { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare__real img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; background: var(--gold); transform: translateX(-50%); pointer-events: none; }
.compare__knob { position: absolute; top: 50%; left: var(--split); transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.compare__knob svg { width: 20px; height: 20px; stroke: var(--gold-ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 2; }
.compare__lab { position: absolute; bottom: 0.8rem; font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px; background: rgba(11, 11, 13, 0.8); color: #fff; pointer-events: none; }
.compare__lab--l { left: 0.8rem; }
.compare__lab--r { right: 0.8rem; }
@media (max-width: 900px) { .compare-wrap { grid-template-columns: 1fr; } }

/* ---------- Client cards that tilt ---------- */
/* Three across so five clients read 3+2 and nine sites read 3+3+3, rather
   than auto-fit stranding a single card on its own row. */
.clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 1040px) { .clients { grid-template-columns: repeat(2, 1fr); } }
.tilt { perspective: 1200px; text-decoration: none; color: inherit; display: block; }
.tilt__in { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(11, 11, 13, 0.2); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.2s ease-out, box-shadow 0.3s; transform-style: preserve-3d; }
.tilt:hover .tilt__in { box-shadow: 0 34px 70px rgba(11, 11, 13, 0.3); }
.client img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.client__b { padding: 1rem 1.1rem 1.2rem; color: var(--ink); }
.client__b b { display: block; font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.client__b span { display: block; color: var(--dim); font-size: 0.9rem; }
.client__b em { display: inline-block; margin-top: 0.6rem; font-style: normal; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .clients { grid-template-columns: 1fr; } }

/* ---------- Who: the ledger ---------- */
.who { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: start; }
.ledger { border-top: 1px solid var(--line); }
.ledger div { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.ledger b { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; min-width: 3.6ch; }
.ledger span { color: var(--dim); }
.who__copy p b { color: var(--ink); }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; gap: 2rem; } }
.stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 2rem; }
.stats-row div { flex: 1 1 0; max-width: 15rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.stats-row b { display: block; font-family: var(--display); font-size: 2rem; letter-spacing: -0.04em; line-height: 1; }
.stats-row span { color: var(--dim); font-size: 0.92rem; }

/* ---------- Worth calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.calc__form { display: grid; gap: 1.1rem; }
.calc__out { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 16px; padding: 2rem; }
.calc__big { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--gold); margin: 0; }
.calc__big small { display: block; font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--dim-dark); margin-top: 0.5rem; }
.calc__say { margin-top: 1.4rem; font-size: 1.05rem; }
.calc__note { margin-top: 1.2rem; color: var(--dim-dark); font-size: 0.9rem; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.field label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field small { display: block; color: var(--dim); font-size: 0.85rem; margin-top: 0.3rem; }
.dark .field small, .section--dark .field small { color: var(--dim-dark); }
.field input, .field textarea, .field select, .input {
  width: 100%; padding: 0.85rem 1rem; border-radius: var(--r); border: 1px solid rgba(11, 11, 13, 0.25); background: #fff; color: var(--ink); font-size: 1.02rem;
}
.dark .field input, .dark .field textarea, .dark .field select, .section--dark .field input, .section--dark .field textarea, .section--dark .field select { border-color: var(--line-dark); background: var(--ink-2); color: var(--fg); }
.field textarea { min-height: 130px; resize: vertical; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field--full { grid-column: 1 / -1; }
.hp-field { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; color: var(--dim); }
.form-status.is-error { color: var(--error); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { color: var(--dim); font-size: 0.9rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.next { color: var(--dim); font-size: 0.92rem; }
.dark .next, .section--dark .next { color: var(--dim-dark); }
.next-steps { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.2rem; }
.next-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.next-steps p { margin: 0.2rem 0 0; color: var(--dim); }
.timeline__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; }

/* ---------- Choosers: goals and business types ---------- */
.chooser__tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.6rem; margin-bottom: 1.6rem; scrollbar-width: thin; }
.chooser__tabs--wrap { flex-wrap: wrap; overflow: visible; }
/* On a phone, twenty wrapped buttons become a wall; scroll them instead. */
@media (max-width: 700px) { .chooser__tabs--wrap { flex-wrap: nowrap; overflow-x: auto; } }
.chooser__tabs button { flex-shrink: 0; border: 1px solid rgba(11, 11, 13, 0.25); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.chooser__tabs button:hover { border-color: var(--ink); }
.chooser__tabs button.is-on { background: var(--ink); color: var(--fg); border-color: var(--ink); }
.chooser__panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 2rem; }
.chooser__panel[hidden] { display: none; }
.chooser__panel h3 { font-size: 1.6rem; }
.chooser__who, .chooser__wrong { color: var(--dim); }
.chooser__wrong b { color: var(--ink); }
.chooser__foot { margin-top: 1.4rem; color: var(--dim); }
.chooser__foot p b { color: var(--ink); }
.chooser__tags span { margin-right: 0.5rem; }
.chooser__tags b, .chooser__tags i { display: inline-block; font-style: normal; font-weight: 600; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0.2rem 0.3rem 0 0; }
.chooser__tags b { background: var(--gold); color: var(--gold-ink); }
.chooser__tags i { border: 1px solid var(--line); color: var(--dim); }
.chooser__cta { margin: 1.6rem 0 0; }
.figure__scroll { overflow-x: auto; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ledger-table th, .ledger-table td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid var(--line); }
.ledger-table th { font-weight: 700; color: var(--ink); }
.ledger-table td { color: var(--dim); }
.ledger-table td:first-child { color: var(--ink); font-weight: 600; min-width: 16ch; }
.feature-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 2rem; }
.feature-list--tight { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.6rem; }
.feature-list li { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.feature-list b { display: block; }
.feature-list span { color: var(--dim); font-size: 0.95rem; }
@media (max-width: 760px) { .feature-list { grid-template-columns: 1fr; } }
.uni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.uni { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; }
.uni__tag { color: var(--dim); margin-top: -0.3rem; }
@media (max-width: 900px) { .uni-grid { grid-template-columns: 1fr; } }

/* ---------- Picker: a small drawing and a name for each kind of business ---------- */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.6rem; overflow: visible; padding-bottom: 0; margin-bottom: 2.2rem; }
.picker .chooser__tile { display: grid; justify-items: center; gap: 0.55rem; padding: 1rem 0.5rem 0.9rem; border: 1px solid transparent; border-radius: var(--r-lg); background: transparent; color: var(--dim); font-weight: 600; font-size: 0.88rem; line-height: 1.2; text-align: center; cursor: pointer; position: relative; }
.picker .chooser__tile:hover { color: var(--ink); background: #fff; border-color: var(--line); }
.picker .chooser__tile.is-on { color: var(--ink); background: #fff; border-color: var(--line); }
.picker .chooser__tile.is-on::after { content: ""; position: absolute; left: 50%; bottom: -0.35rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.tile__ic { width: 40px; height: 40px; color: inherit; }
@media (max-width: 700px) {
  .picker { display: flex; overflow-x: auto; gap: 0.3rem; padding-bottom: 0.8rem; scrollbar-width: thin; }
  .picker .chooser__tile { flex: 0 0 104px; }
}

/* ---------- The offer as an exploded stack ---------- */
.chooser__panel--stack { padding: 2rem 2rem 1.6rem; }
.stack__head h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.3rem; }
.stack { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: start; margin-top: 1.6rem; }
.layers { border-top: 1px solid var(--line); }
.layer { border-bottom: 1px solid var(--line); }
.layer__btn { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; padding: 1rem 0.2rem; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.layer__btn b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.layer__n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--dim); }
.layer.is-on .layer__n { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.layer__count { color: var(--dim); font-size: 0.85rem; }
.layer__body { padding: 0 0.2rem 1.3rem 2.7rem; }
.layer__body[hidden] { display: none; }
.layer__line { color: var(--dim); margin-bottom: 0.2rem; }
.stack__art { position: sticky; top: 6rem; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 1rem; align-items: stretch; }
.stack__svg { width: 100%; height: auto; display: block; overflow: visible; }
.slab__lift { transition: transform 0.35s var(--ease); }
.slab__side { fill: #e6e3dc; stroke: rgba(11, 11, 13, 0.35); stroke-width: 1.2; stroke-linejoin: round; }
.slab__top { fill: #fff; stroke: rgba(11, 11, 13, 0.35); stroke-width: 1.2; stroke-linejoin: round; }
.slab__glyph { fill: none; stroke: rgba(11, 11, 13, 0.45); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.slab.is-on .slab__lift { transform: translateY(-8px); }
.slab.is-on .slab__top { fill: var(--gold-tint); stroke: var(--ink); }
.slab.is-on .slab__side { fill: var(--gold); stroke: var(--ink); }
.slab.is-on .slab__glyph { stroke: var(--ink); }
.stack__labels { display: grid; grid-template-rows: repeat(5, 1fr); align-items: center; }
.stack__label { display: block; text-align: left; border: 0; background: transparent; padding: 0.3rem 0.4rem; cursor: pointer; color: var(--dim); border-radius: var(--r); }
.stack__label b { display: block; font-family: var(--display); font-size: 0.98rem; letter-spacing: -0.01em; color: var(--dim); }
.stack__label span { display: block; font-size: 0.82rem; line-height: 1.3; }
.stack__label:hover, .stack__label.is-on { color: var(--ink); }
.stack__label.is-on b { color: var(--ink); }
.stack__label.is-on { background: var(--gold-tint); }
@media (max-width: 960px) {
  .stack { grid-template-columns: 1fr; gap: 1.6rem; }
  .stack__art { position: static; order: -1; }
}
@media (max-width: 560px) {
  .stack__art { grid-template-columns: 1fr; }
  .stack__labels { grid-template-rows: none; gap: 0.2rem; }
  .stack__label span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .slab__lift { transition: none; } }

/* ---------- Software practices ---------- */
.practice { border-top: 1px solid var(--line-dark); padding: 3rem 0; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; }
.practice h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.practice .lead { font-size: 1.05rem; }
.practice .checklist li { color: #c9c9d0; }
@media (max-width: 860px) { .practice { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-text); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0.7rem 0 0; color: var(--dim); }

/* ---------- Pricing ---------- */
.price-grid, .bundle-grid { display: grid; gap: 1.6rem; }
.price-grid { grid-template-columns: 1fr 1fr; }
.price-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .price-grid--3 { grid-template-columns: 1fr; } }
.bundle-grid { grid-template-columns: repeat(3, 1fr); }
.price, .bundle { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.8rem; position: relative; }
.price--feature, .bundle--feature { border-color: var(--gold); box-shadow: var(--shadow-lift); }
.price__name, .bundle__name { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.price__fig, .bundle__fig { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; margin: 0; }
.price__fig span, .bundle__fig span { font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--dim); margin-left: 0.4rem; }
.price__sub, .bundle__line { color: var(--dim); margin: 0.5rem 0 1rem; }
.bundle__tag { position: absolute; top: -0.8rem; left: 1.4rem; background: var(--gold); color: var(--gold-ink); font-weight: 700; font-size: 0.8rem; padding: 0.25rem 0.7rem; border-radius: 999px; margin: 0; }
.price ul, .bundle ul { padding-left: 1.1rem; color: var(--dim); margin: 0 0 1.2rem; }
.price ul li, .bundle ul li { margin-bottom: 0.35rem; }
@media (max-width: 900px) { .price-grid, .bundle-grid { grid-template-columns: 1fr; } }

/* ---------- Cards (work, pricing services; the portal reads .card too) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; text-decoration: none; color: inherit; display: block; transition: box-shadow 0.25s, transform 0.25s; }
a.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.6rem; }
.card__head h3 { margin: 0; font-size: 1.15rem; }
.card p { color: var(--dim); margin: 0; }
.card ul { padding-left: 1.1rem; color: var(--dim); margin: 0.6rem 0 0; }
.card__domain { display: block; margin-top: 0.8rem; font-size: 0.85rem; color: var(--gold-text); font-weight: 700; }
.tag { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.tag--live { background: var(--gold); color: var(--gold-ink); }
.tag--dev, .tag--beta { border: 1px solid var(--line); color: var(--dim); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Practices ---------- */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.spec { border-top: 1px solid var(--line); padding-top: 1rem; }
.spec h3 { font-size: 1.1rem; }
.spec ul { padding-left: 1.1rem; color: var(--dim); margin: 0; }
.spec ul li { margin-bottom: 0.4rem; }
@media (max-width: 800px) { .specs { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--dim-dark); padding: 4rem 0 2rem; font-size: 0.92rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-footer__brand { font-size: 1.25rem; color: var(--gold); margin: 0 0 0.5rem; }
.site-footer__tag { color: var(--dim-dark); margin: 0 0 1rem; }
.site-footer__nap { font-style: normal; color: #c9c9d0; }
.site-footer__head { color: var(--fg); font-weight: 700; margin: 0 0 0.6rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer__legal { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); font-size: 0.85rem; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Compatibility for pages still on the older vocabulary
   (pricing, legal, practices). Maps their class names onto K's styles. ---------- */
.hero__bg { display: none; }
.page-hero__inner { }
.section-lede { font-size: 1.15rem; color: var(--dim); max-width: 54ch; }
.dark .section-lede, .section--dark .section-lede, .cta .section-lede { color: var(--dim-dark); }
.section-kicker { color: var(--gold-text); font-weight: 700; font-size: 0.95rem; margin: 0 0 0.6rem; }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.cta { background: var(--ink); color: var(--fg); padding: 5rem 0; }
.cta__inner { text-align: center; max-width: 60ch; margin-inline: auto; }
.cta__inner p { color: var(--dim-dark); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.hero__actions--center { justify-content: center; }
.timeline { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.timeline li { border-top: 1px solid var(--line); padding-top: 1rem; }
.timeline__meta { display: block; color: var(--gold-text); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.timeline h3 { font-size: 1.15rem; }
.timeline p { color: var(--dim); }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }
.card-grid, .service-grid, .venture-grid, .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .card-grid, .service-grid, .venture-grid, .services__grid { grid-template-columns: 1fr; } }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.2rem; color: var(--dim); }
.prose li { margin-bottom: 0.4rem; }
.who__note { color: var(--dim); font-size: 0.95rem; }
.legal-meta { color: var(--dim); font-size: 0.9rem; }
.note { border-left: 3px solid var(--gold); padding: 0.6rem 0 0.6rem 1.2rem; color: var(--dim); max-width: 72ch; }
dl.specs-list dt { font-weight: 700; margin-top: 1rem; }
dl.specs-list dd { margin: 0.2rem 0 0; color: var(--dim); }

/* ---------- Diagram figures (practices pipeline), restored from the previous sheet ---------- */
.figure {
  max-width: 62rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.5rem 1.75rem;
}
.figure__scroll {
  overflow-x: auto;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.figure svg {
  width: 100%;
  height: auto;
  display: block;
  /* Below this the station labels stop being legible, so the figure scrolls
     inside its own box rather than shrinking further. */
  min-width: 640px;
}
.figure__cap {
  margin-top: 1.25rem;
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 68ch;
}
.dg-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--ink);
}
.dg-sub {
  font-family: var(--body);
  font-size: 12.5px;
  fill: var(--muted);
}

/* ---------- Utilities ---------- */
.u-center { text-align: center; }
.u-mt-md { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 2.5rem; }
.u-mx-auto { margin-inline: auto; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 .w span, .hero .lead, .hero__row, .proof, .hint, .deck .card { animation: none; opacity: 1; transform: none; }
  .hint svg path, .step svg * { stroke-dashoffset: 0 !important; }
  .deck .card, .deck__stage, .tilt__in, .door, .card { transition: none; }
  .ticker__track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   The project brief (/brief)

   A worksheet, not a corporate form. The page is quiet — the same paper,
   ink, and single gold accent as everywhere else — and spends its one piece
   of boldness on the running estimate, which is the thing an owner is really
   asking about while they fill this in.

   Choices with a reason behind them:
   - Questions sit on the paper, not in cards. Sixteen bordered boxes down a
     page reads as an application form; a stack of plain questions reads as
     someone asking.
   - The pick controls hide the native input and draw their own box, so the
     whole tile is the target on a phone. The input keeps focus, and the
     focus ring is drawn on the box via :has, with a :focus-within fallback.
   - "Part 3 of 7" is numbering that earns its place: this genuinely is a
     sequence, and the count is the answer to "how much more of this is there".
   ========================================================================== */

.brief__ic { width: 20px; height: 20px; flex: none; }

/* ---------- Hero promise ---------- */
.brief-promise { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 68ch; }
.brief-promise li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--dim); font-size: 1rem; }
.brief-promise__ic { width: 22px; height: 22px; flex: none; color: var(--gold-text); margin-top: 0.15rem; }

/* ---------- Access code ---------- */
.codebar { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-lg); background: #fff; padding: 1.5rem 1.7rem; max-width: 68ch; }
.codebar__row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.8rem; }
.codebar__row input {
  flex: 1 1 15rem; padding: 0.8rem 1rem; border-radius: var(--r); border: 1px solid rgba(11, 11, 13, 0.25);
  background: var(--paper); color: var(--ink); font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.codebar__status { margin: 0.7rem 0 0; min-height: 1.4em; font-size: 0.95rem; color: var(--dim); }
.codebar__status.is-ok { color: var(--ok); }
.codebar__status.is-error { color: var(--error); }
.codebar.is-on { border-left-color: var(--ok); }

/* ---------- Layout ---------- */
/* The grid's rows stretch on purpose: a sticky panel can only follow the
   scroll for as long as its own grid cell is tall, so the aside's cell must
   span the full height of the form beside it. */
.brief__grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; }
.brief__aside { position: sticky; top: 6rem; align-self: start; }
@media (max-width: 980px) {
  .brief__grid { grid-template-columns: 1fr; gap: 2rem; }
  .brief__aside { position: static; order: -1; }
}

/* ---------- One part ---------- */
.brief__part { padding: 2.6rem 0; border-top: 1px solid var(--line); }
.brief__part:first-child { border-top: 0; padding-top: 0; }
.brief__parthead { max-width: 60ch; margin-bottom: 1.8rem; }
.brief__step { display: flex; gap: 0.9rem; align-items: baseline; margin: 0 0 0.4rem; font-size: var(--t-sm); color: var(--dim); }
.brief__mins { color: var(--gold-text); }
.brief__part h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.4rem; }
.brief__blurb { color: var(--dim); margin: 0; }
.brief__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.8rem; }
.brief__q--wide, .brief__set { grid-column: 1 / -1; }
.brief__set { border: 0; margin: 0; padding: 0; min-width: 0; }
@media (max-width: 700px) { .brief__fields { grid-template-columns: 1fr; } }

/* Each question is a column with its control pushed to the bottom, so two
   side-by-side questions keep their inputs on one line even when only one
   of them carries a line of help text. */
.brief__q { display: flex; flex-direction: column; }
.brief__q > input, .brief__q > textarea { margin-top: auto; }
.brief__label { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.3rem; padding: 0; }
.brief__req { font-weight: 400; font-size: var(--t-xs); color: var(--gold-text); border: 1px solid rgba(233, 180, 76, 0.6); border-radius: 999px; padding: 0.05rem 0.5rem; vertical-align: 0.1em; }
.brief__help { color: var(--dim); font-size: 0.92rem; margin: 0 0 0.6rem; max-width: 62ch; }
.brief__q input, .brief__q textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: var(--r); border: 1px solid rgba(11, 11, 13, 0.25);
  background: #fff; color: var(--ink); font-size: 1.02rem;
}
.brief__q textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.brief__q input::placeholder, .brief__q textarea::placeholder { color: #8b8b93; }

/* ---------- Radio and checkbox tiles ---------- */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
.pick {
  display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 1rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color 0.15s, background 0.15s;
}
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick__box { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; border: 1.5px solid rgba(11, 11, 13, 0.35); background: var(--paper); position: relative; }
.picks--one .pick__box { border-radius: 50%; }
.picks--many .pick__box { border-radius: 5px; }
.pick__label { font-size: 0.98rem; line-height: 1.35; }
.pick:hover { border-color: rgba(11, 11, 13, 0.35); }
.pick:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.pick:has(input:checked) .pick__box { border-color: var(--ink); background: var(--gold); }
.pick:has(input:checked) .pick__box::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 10px;
  border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
.pick:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Priced feature picker ---------- */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem 1.4rem; }
/* Each choice is a tile plus the explanation under it. The cell spans two of
   the grid's row tracks and subgrids them, so across a whole row every tile
   shares one track and every "what does this mean" line shares the next:
   tiles come out the same height and the questions sit on one baseline, even
   when one question wraps to two lines. */
.feat-cell { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
@supports not (grid-template-rows: subgrid) {
  .feat-cell { display: flex; flex-direction: column; height: 100%; }
  .feat-cell > .feat { flex: 1 1 auto; }
}
.feat {
  display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color 0.15s, background 0.15s;
}
.feat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feat__box { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; border: 1.5px solid rgba(11, 11, 13, 0.35); border-radius: 5px; background: var(--paper); position: relative; }
.feat__ic { width: 26px; height: 26px; flex: none; color: var(--gold-text); margin-top: 0.05rem; }
.feat__body { display: block; }
.feat__name { display: block; font-weight: 700; }
.feat__plain { display: block; color: var(--dim); font-size: 0.94rem; margin-top: 0.15rem; }
.feat__meta { display: block; margin-top: 0.45rem; font-size: 0.9rem; }
.feat__meta b { color: var(--gold-text); }
.feat__meta i { display: block; font-style: normal; color: var(--dim); }
.feat:hover { border-color: rgba(11, 11, 13, 0.35); }
.feat:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.feat:has(input:checked) .feat__box { border-color: var(--ink); background: var(--gold); }
.feat:has(input:checked) .feat__box::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 10px;
  border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}
.feat:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.feat__more { margin: 0.15rem 0 0; }
.feat__more summary { cursor: pointer; color: var(--dim); font-size: 0.88rem; padding: 0.3rem 0 0.3rem 1.1rem; list-style: none; }
.feat__more summary::-webkit-details-marker { display: none; }
.feat__more summary::before { content: "?"; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: -1.1rem; margin-right: 0.4rem; border: 1px solid var(--line); border-radius: 50%; font-size: 0.72rem; vertical-align: 0.05em; }
.feat__more summary:hover { color: var(--ink); }
.feat__more p { margin: 0 0 0.4rem; color: var(--dim); font-size: 0.9rem; max-width: 60ch; }

/* ---------- Plan picker ---------- */
.planpicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.planpick { display: block; position: relative; padding: 1.3rem 1.4rem; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: border-color 0.15s, background 0.15s; }
.planpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.planpick__box { position: absolute; top: 1.4rem; right: 1.4rem; width: 18px; height: 18px; border: 1.5px solid rgba(11, 11, 13, 0.35); border-radius: 50%; background: var(--paper); }
.planpick__name { display: block; font-weight: 700; }
.planpick__fig { display: block; font-family: var(--display); font-size: 2.1rem; letter-spacing: -0.04em; margin: 0.3rem 0 0.1rem; }
.planpick__fig small { font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0; color: var(--dim); display: block; }
.planpick__line { display: block; margin-top: 0.6rem; font-size: 0.95rem; }
.planpick__why { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--dim); }
.planpick:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.planpick:has(input:checked) .planpick__box { border-color: var(--ink); background: var(--gold); box-shadow: inset 0 0 0 3px var(--paper-2); }
.planpick:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Running estimate ---------- */
.estimate { background: var(--ink); color: var(--fg); border-radius: 16px; padding: 1.6rem 1.7rem; }
.estimate__head { margin: 0 0 0.8rem; font-size: var(--t-sm); color: var(--dim-dark); }
.estimate__big { font-family: var(--display); font-size: 2.8rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--gold); margin: 0; }
.estimate__big small { display: block; font-family: var(--sans); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; color: var(--dim-dark); margin-top: 0.3rem; }
.estimate__big--mo { font-size: 2rem; margin-top: 0.9rem; }
.estimate__lines { list-style: none; margin: 1.3rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line-dark); display: grid; gap: 0.45rem; font-size: 0.9rem; }
.estimate__lines li { display: flex; justify-content: space-between; gap: 1rem; color: var(--fg); }
.estimate__lines b { font-weight: 400; color: var(--dim-dark); }
.estimate__market { margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-dark); font-size: 0.92rem; color: var(--fg); }
.estimate__market b { color: var(--gold); }
.estimate__note { margin: 1rem 0 1.2rem; font-size: 0.83rem; color: var(--dim-dark); }
.estimate .btn--ghost { border-color: rgba(244, 242, 238, 0.35); color: var(--fg); }
.estimate .btn--ghost:hover { border-color: #fff; }

/* ---------- Upload containers ---------- */
/* Files are for coded briefs only: the drop zone, list, and status only
   exist once a code has been accepted, and the hint says so until then. */
#main:not(.is-coded) .uploader__drop,
#main:not(.is-coded) .uploader__list,
#main:not(.is-coded) .uploader__status { display: none; }
.uploader__nocode { margin: 0; font-size: 0.92rem; color: var(--dim); max-width: 62ch; }
#main.is-coded .uploader__nocode { display: none; }
.uploader__drop {
  display: flex; gap: 1rem; align-items: center; padding: 1.3rem 1.4rem; cursor: pointer;
  border: 1.5px dashed rgba(11, 11, 13, 0.3); border-radius: var(--r-lg); background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.uploader__drop:hover, .uploader.is-over .uploader__drop { border-color: var(--ink); background: var(--paper-2); }
.uploader__drop:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.uploader__drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.uploader__ic { width: 34px; height: 34px; flex: none; color: var(--gold-text); }
.uploader__cta b { display: block; }
.uploader__cta span { display: block; color: var(--dim); font-size: 0.92rem; }
.uploader__status { margin: 0.6rem 0 0; min-height: 1.3em; font-size: 0.9rem; color: var(--dim); }
.uploader__status.is-error { color: var(--error); }
.uploader__list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.7rem; }
.uploader__list:empty { display: none; }
.uploader__item { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; font-size: 0.8rem; }
.uploader__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.uploader__doc { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--paper-2); color: var(--gold-text); font-weight: 700; letter-spacing: 0.05em; }
.uploader__name { display: block; padding: 0.4rem 0.55rem 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uploader__size { display: block; padding: 0 0.55rem 0.45rem; color: var(--dim); }
.uploader__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform 0.2s; }
.uploader__item.is-done .uploader__bar { display: none; }
.uploader__item.is-error { border-color: var(--error); }
.uploader__remove { position: absolute; top: 0.35rem; right: 0.35rem; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: rgba(11, 11, 13, 0.75); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.uploader__nojs { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--dim); }
.js .uploader__nojs { display: none; }

/* ---------- Glossary ---------- */
.gloss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.6rem 2.4rem; }
.gloss { display: flex; gap: 0.9rem; align-items: flex-start; }
.gloss__ic { width: 30px; height: 30px; flex: none; color: var(--gold-text); margin-top: 0.2rem; }
.gloss h3 { font-size: 1.05rem; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.gloss p { margin: 0; color: var(--dim); font-size: 0.94rem; max-width: 46ch; }

/* ---------- Ask panel ---------- */
/* display on .ask and .ask__panel would otherwise beat the hidden attribute,
   which is what gates the panel before a code is entered. */
.ask[hidden], .ask__panel[hidden] { display: none; }
.ask { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.ask__tab { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.3rem; border: 1px solid var(--ink); border-radius: 1000px; background: var(--ink); color: var(--fg); font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: var(--shadow-lift); }
.ask__ic { width: 20px; height: 20px; }
.ask__panel { width: min(24rem, calc(100vw - 2.4rem)); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden; display: flex; flex-direction: column; max-height: min(32rem, calc(100vh - 8rem)); }
.ask__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.ask__head p { margin: 0; font-size: 0.92rem; }
.ask__head span { display: block; color: var(--dim); font-size: 0.85rem; }
.ask__close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--dim); padding: 0 0.2rem; }
.ask__log { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: grid; gap: 0.8rem; align-content: start; }
.ask__msg { font-size: 0.94rem; line-height: 1.5; max-width: 92%; padding: 0.65rem 0.9rem; border-radius: 12px; white-space: pre-wrap; }
.ask__msg--you { justify-self: end; background: var(--ink); color: var(--fg); border-bottom-right-radius: 4px; }
.ask__msg--us { justify-self: start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 4px; }
.ask__msg--wait { color: var(--dim); font-style: italic; background: transparent; padding-left: 0; }
.ask__form { display: flex; gap: 0.5rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); }
.ask__form input { flex: 1; min-width: 0; padding: 0.65rem 0.85rem; border: 1px solid rgba(11, 11, 13, 0.25); border-radius: var(--r); background: var(--paper); color: var(--ink); font-size: 0.95rem; }
.ask__note { margin: 0; padding: 0 1.1rem 1rem; font-size: 0.78rem; color: var(--dim); }
@media (max-width: 560px) {
  .ask { left: 1.2rem; right: 1.2rem; align-items: stretch; }
  .ask__tab { justify-content: center; }
  /* The docked tab must never sit on top of the send button. */
  .brief-main { padding-bottom: 6rem; }
}

/* A coded session is someone we have already talked to, and their offer comes
   from us in writing, not from the page. Every price fragment carries
   .brief__price; the sentence that replaces it carries .brief__coded. */
.brief__coded { display: none; }
.is-coded .brief__price { display: none !important; }
.is-coded .brief__coded { display: block; }
.is-coded span.brief__coded { display: inline; }
.is-coded .brief__grid { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }

/* The submit block closes the form; it should not read as another question. */
.brief__send { border-top: 2px solid var(--ink); }
.brief__send .form-actions { margin-top: 1rem; }