/* ==========================================================
   TOPHAM & CO — TERRAIN SYSTEM — /smallbiz
   Field White canvas, Forest Ink type, Earth Sage rules,
   Trail Chartreuse only for the route and small details.
   Condensed uppercase display at 0.9, Avenir Next body,
   Menlo field notes. Square corners. No shadows. Hairlines
   and full-bleed Forest Ink bands do the structure.
   Shared by every page. See ../BRAND.md for the reference lock.
   ========================================================== */
:root{
  --forest:#161B13;
  --sage:#84907F;
  --sage-ink:#545E51;
  --sage-lit:#A6B0A1;     /* labels on Forest Ink: 7.8:1 */
  --trail:#E2FFCC;
  --mist:#DDE2E4;
  --field:#F6F7F2;
  --ink-soft:#3a3f36;      /* body on light, a step off pure forest */
  --rule:#C9CFC4;          /* hairline on light: sage lightened */
  --rule-dark:#2D3329;     /* hairline on forest: San Rita's terrain shadow */

  --display:'Avenir Next Condensed','Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Avenir Next','Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:Menlo,Consolas,'Liberation Mono',monospace;

  --t-hero:clamp(2.75rem,6.4vw,6rem);   /* was 11vw: a 428px headline pushed the form below the fold */
  --t-h:clamp(2.5rem,5.6vw,5.25rem);
  --t-sub:clamp(1.5rem,2.4vw,2rem);
  --t-body:1.0625rem;
  --t-lede:clamp(1.125rem,1.5vw,1.3125rem);
  --t-note:.8125rem;

  --shell:1360px;
  --gutter:clamp(20px,4vw,64px);
  --band:clamp(56px,7vw,104px);
  --ease:cubic-bezier(.32,.72,0,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--field); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--field); color:var(--forest); font-family:var(--body); font-size:var(--t-body); line-height:1.6; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
p{ margin:0; }
::selection{ background:var(--forest); color:var(--trail); }
.dark ::selection{ background:var(--trail); color:var(--forest); }
:root{ accent-color:var(--forest); color-scheme:light; }
html{ scrollbar-color:var(--sage) var(--field); }
input,textarea{ caret-color:var(--forest); }
:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
.dark :focus-visible{ outline-color:var(--trail); }
a,button,summary{ touch-action:manipulation; }
.skip{ position:absolute; left:-9999px; top:0; }
/* a name for a control that already reads from the question above it */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip:focus{ left:16px; top:16px; z-index:10; padding:10px 14px; background:var(--forest); color:var(--trail); font-family:var(--mono); font-size:var(--t-note); text-decoration:none; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:var(--band); }
.dark{ background:var(--forest); color:var(--mist); }
.mist{ background:var(--mist); }
section[id]{ scroll-margin-top:16px; }

/* ---------- type ---------- */
.note{ font-family:var(--body); font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--sage-ink); line-height:1.5; }
.note b{ font-weight:600; }
/* mono stays for data: a citation, an address, a form field */
.data{ font-family:var(--mono); font-size:var(--t-note); letter-spacing:0; text-transform:uppercase; color:var(--sage-ink); line-height:1.5; }
.dark .data{ color:var(--sage-lit); }
.dark .note{ color:var(--sage-lit); }
.note b{ font-weight:400; color:var(--forest); }
.dark .note b{ color:var(--mist); }
h1,h2,h3{ margin:0; }
h1,h2{ font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.9; letter-spacing:-.015em; text-wrap:balance; }
h1{ font-size:var(--t-hero); }
h2{ font-size:var(--t-h); max-width:20ch; }
.dark h2{ color:var(--trail); }
h3{ font-family:var(--body); font-weight:600; font-size:1.25rem; line-height:1.3; letter-spacing:-.005em; }
/* the condensed display h3, one definition; each context sets only its size and spacing */
.shapes h3,.sequence .route-list h3,.person h3,.part h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.95; letter-spacing:-.015em; }
.lede{ font-size:var(--t-lede); line-height:1.5; max-width:34em; color:var(--ink-soft); text-wrap:pretty; }
.dark .lede,.dark p{ color:var(--mist); }
.copy{ max-width:36em; color:var(--ink-soft); }
.copy p + p{ margin-top:1em; }
.copy .data{ margin-top:14px; }
.dark .copy{ color:var(--mist); }
.link{ text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; text-decoration-color:var(--sage); }
.link:hover{ text-decoration-color:currentColor; }

/* ---------- buttons: square, mono, one fill per surface ---------- */
.btn{ display:inline-flex; align-items:center; gap:14px; padding:16px 22px; border:0; background:var(--forest); color:var(--trail);
  font-family:var(--mono); font-size:var(--t-note); letter-spacing:-.01em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease); }
.btn::after{ content:'\2192'; font-family:var(--mono); }
.btn:hover{ background:var(--ink-soft); }
.dark .btn{ background:var(--trail); color:var(--forest); }
.dark .btn:hover{ background:#eeffe0; }
.btn:disabled{ opacity:.6; cursor:default; }
.ghost{ font-family:var(--body); font-size:1.0625rem; font-weight:400; text-decoration:none; color:var(--forest);
  border-bottom:1px solid var(--sage); padding-bottom:3px; }
.ghost:hover{ border-color:var(--forest); }

/* ---------- nav ---------- */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:22px; position:relative; }
/* the hairline starts where the content starts, not at the shell's padding edge */
.nav::after{ content:''; position:absolute; left:var(--gutter); right:var(--gutter); bottom:0; height:1px; background:var(--rule); }
.lockup{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.lockup svg{ width:36px; height:36px; }
.lockup .wm{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.5rem; line-height:1; letter-spacing:-.01em; }
.lockup .wm small{ display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.02em; margin-top:3px; color:var(--sage-ink); }
.nav-r{ display:flex; align-items:center; gap:28px; }
/* the route colour marks where you are: a chartreuse hairline under the nav item,
   sitting on a sage one so the link never shifts when it lights up */
.nav-r .note{ text-decoration:none; color:var(--sage-ink); border-bottom:1px solid transparent; padding-bottom:4px;
  transition:color .3s var(--ease), border-color .3s var(--ease); }
.nav-r .note:hover,.nav-r .note[aria-current]{ color:var(--forest); border-bottom-color:var(--forest); }
/* on a phone the tagline goes but "& CO" stays: the company is Topham & Co, not Topham */
@media (max-width:760px){ .nav-r .note{ display:none; } .lockup .wm small .tag-l{ display:none; } }
/* On a phone "Tell us about your business" wrapped to three lines and made the
   nav button 94px tall. It isn't clipped, it's just too long a label for the
   space, so below 700px the button says the short version instead. */
.btn .sm{ display:none; }
@media (max-width:700px){
  .nav .btn .lg{ display:none; }
  .nav .btn .sm{ display:inline; }
  .nav .btn{ padding:14px 16px; gap:10px; white-space:nowrap; flex:none; }
  .nav{ padding-block:18px; gap:14px; }
  .nav-r{ gap:16px; }
}

/* ---------- hero ---------- */
.hero{ padding-block:clamp(32px,4.5vw,64px) 0; }
.hero .top{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,56px); }
.hero h1 .r{ display:block; }
.hero-grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--gutter); align-items:start; margin-top:clamp(28px,3vw,44px); }
.hero-grid .btns{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.spec{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.hero-grid .spec{ margin-top:6px; }
.spec li{ display:grid; grid-template-columns:118px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.spec .v{ font-family:var(--body); font-weight:600; font-size:1rem; color:var(--forest); }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

/* the landscape strip: contours, a route, the fork. sits under the hero, full bleed */
/* the strip now follows a padded band rather than sitting inside the hero, so
   it carries no top margin of its own */
.strip{ position:relative; background:var(--forest); overflow:hidden; }
.strip svg{ width:100%; height:auto; display:block; }
.strip .cap{ position:absolute; right:var(--gutter); bottom:clamp(20px,3vw,40px); max-width:40ch; text-align:right; }
.strip + .band.dark{ padding-top:clamp(40px,5vw,72px); }
.strip .cap p{ color:var(--mist); font-size:var(--t-lede); line-height:1.35; text-wrap:balance; }
.strip .cap .note{ margin-top:12px; color:var(--sage); }
.strip .cap .note b{ color:var(--trail); }
@media (max-width:640px){ .strip .cap{ position:static; padding:24px var(--gutter) 32px; text-align:left; max-width:none; } }
.route{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference){
  .route{ stroke-dasharray:2400; stroke-dashoffset:2400; animation:draw 3s var(--ease) .4s forwards; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------- section head: note on the left, headline on the right ---------- */
.head{ display:grid; grid-template-columns:2fr 10fr; gap:var(--gutter); align-items:start; }
.head .note{ padding-top:.9em; }
.body2{ display:grid; grid-template-columns:2fr 10fr; gap:var(--gutter); }
.body2 > :first-child{ grid-column:2; }
/* A section with a margin label indents its body to sit under the headline.
   A section without one has nothing to put in that column, so it starts at the
   left edge instead of leaving a 220px void and indenting anyway. */
.head.solo,.body2.solo{ grid-template-columns:1fr; }
.head.solo > h2, .body2.solo > :first-child{ grid-column:1; }
.head.solo + .body2.solo{ margin-top:clamp(28px,3.5vw,44px); }
@media (max-width:900px){ .head,.body2{ grid-template-columns:1fr; } .head .note{ padding-top:0; margin-bottom:12px; } .body2 > :first-child{ grid-column:1; } }

/* ---------- rules ---------- */
.rules{ list-style:none; margin:clamp(40px,5vw,64px) 0 0; padding:0; counter-reset:r; border-top:1px solid var(--rule); }
.rules li{ display:grid; grid-template-columns:2fr 10fr; gap:var(--gutter); padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--rule); }
.rules li::before{ counter-increment:r; content:counter(r,decimal-leading-zero); font-family:var(--mono); font-size:var(--t-note); text-transform:uppercase; color:var(--sage-ink); padding-top:.5em; }
.rules h3{ margin-bottom:8px; max-width:30ch; }
.rules p{ color:var(--ink-soft); max-width:60ch; }
@media (max-width:900px){ .rules li{ grid-template-columns:1fr; gap:8px; } }

/* ---------- who's on the call ---------- */
.who{ display:grid; grid-template-columns:2fr 5fr 5fr; gap:var(--gutter); align-items:end; }
.who > .note{ align-self:start; padding-top:.9em; }
.who .pic{ background:var(--mist); padding:32px 32px 0; }
.who .pic img{ width:100%; max-width:360px; margin:0 auto; }
@media (max-width:900px){ .who{ grid-template-columns:1fr; } .who .pic{ max-width:320px; } }

/* ---------- faq ---------- */
.faq{ margin-top:clamp(32px,4vw,56px); border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; display:grid; grid-template-columns:1fr 20px; gap:20px; align-items:baseline;
  font-family:var(--body); font-weight:600; font-size:1.125rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--mono); color:var(--sage-ink); justify-self:end; transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ padding:0 0 24px; color:var(--ink-soft); max-width:60ch; }

/* ---------- form: underlined inputs ---------- */
.fld{ margin:0 0 30px; }
/* A field label IS the question, so it gets the same treatment as a fieldset
   legend on /ai-check: body face, sentence case, weight 600, Forest Ink. The
   label rule (body face, muted by colour) governs metadata like .note, not the
   question the field is asking. It used to be 1rem/400 in sage-ink, which put
   the question quieter than the answer typed under it. No mono caps. */
.fld label{ display:block; font-family:var(--body); font-size:1.1875rem; font-weight:600; text-transform:none; letter-spacing:-.005em; color:var(--forest); line-height:1.35; max-width:38ch; margin-bottom:10px; }
.fld input,.fld textarea{ width:100%; background:transparent; color:var(--forest); border:0; border-bottom:1px solid var(--forest); border-radius:0; padding:12px 0;
  font:400 var(--t-lede)/1.35 var(--body); }
.fld textarea{ min-height:100px; resize:vertical; }
.fld input:focus,.fld textarea:focus{ outline:none; border-bottom-width:2px; padding-bottom:11px; }
.fld .opt-l{ font-weight:400; color:var(--ink-soft); }
.fld ::placeholder{ color:#646E61; }
.form-row{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.small{ color:var(--sage-ink); font-size:.9375rem; max-width:40ch; }
.err{ display:none; margin-top:16px; color:var(--forest); font-size:.9375rem; }
.err.on{ display:block; }
.sent{ display:none; }
.sent.on{ display:block; }

/* ---------- footer ---------- */
footer{ padding:clamp(48px,6vw,80px) 0 40px; }
.foot{ display:grid; grid-template-columns:2fr 5fr 5fr; gap:var(--gutter); align-items:end; }
.foot .lockup svg{ width:44px; height:44px; }
.foot .lockup .wm{ color:var(--mist); }
.foot .lockup .wm small{ color:var(--sage); }
.foot .note a{ text-decoration:none; }
.foot .note a:hover{ color:var(--mist); }
.foot .tag{ font-family:var(--body); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.8125rem; color:var(--mist); margin-bottom:8px; }
@media (max-width:900px){ .foot{ grid-template-columns:1fr; gap:28px; } }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .rv.in{ opacity:1; transform:none; }
}

/* ---------- what we do: three columns off the descriptor ---------- */
.what{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:clamp(28px,4vw,52px); border-top:1px solid var(--rule); }
.dark .what{ border-color:var(--rule-dark); }
.what > div{ padding-top:24px; }
.what .k{ display:block; margin-bottom:18px; }
.what h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.75rem,2.6vw,2.25rem); line-height:.95; margin-bottom:14px; }
.what p{ color:var(--ink-soft); max-width:34em; }
.dark .what p{ color:var(--mist); }
@media (max-width:900px){ .what{ grid-template-columns:1fr; gap:32px; } }

/* ---------- the people ---------- */
.people{ display:grid; grid-template-columns:2fr 5fr 5fr; gap:var(--gutter); align-items:start; }
.person .pic{ background:var(--field); aspect-ratio:4/5; display:grid; align-items:end; overflow:hidden; }
.person .pic img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.person .pic .ph{ padding:24px; align-self:end; }
.person .pic .ph svg{ width:72px; height:72px; margin-bottom:16px; }
.person h3{ font-size:clamp(2rem,3vw,2.75rem); margin:28px 0 6px; }
.person .role{ margin-bottom:16px; }
.person .pic .ph .note{ color:var(--sage-ink); }
.person p{ color:var(--ink-soft); max-width:36em; }
.person p + p{ margin-top:1em; }
@media (max-width:900px){ .people{ grid-template-columns:1fr; } }

/* ---------- survey: the ad landing's form, every question on one page ---------- */
.survey{ max-width:760px; }
.part h3{ font-size:clamp(1.75rem,3vw,2.5rem); margin:0 0 20px; }
/* the survey's five groups sit on one page. The display heading marks each
   one, and space does the rest: a divider here sat just under the last answer's
   underline, so every part ended in two stacked lines. */
.part + .part{ margin-top:clamp(64px,8vw,96px); }
.part .intro{ color:var(--ink-soft); margin:-8px 0 32px; max-width:44em; }

fieldset{ border:0; margin:0 0 40px; padding:0; }
/* The question is the loudest thing in its block. It used to be 13px mono caps
   in grey while the answers were 17px ink, so the eye landed on the options
   before it landed on what was being asked. */
legend{ font-family:var(--body); font-weight:600; font-size:1.1875rem; line-height:1.35; letter-spacing:-.005em;
  text-transform:none; color:var(--forest); max-width:38ch; padding:0; margin-bottom:10px; }
.hint{ font-size:.9375rem; color:var(--sage-ink); margin:-2px 0 14px; max-width:44ch; }

/* option grids: square boxes, filled when chosen, no pills and no rules. A line
   under every option turned each question into a striped table; space does the
   job instead. Short answer sets run in two or three columns. */
.opts{ display:grid; row-gap:2px; }
.opts.two{ grid-template-columns:1fr 1fr; column-gap:32px; }
.opts.three{ grid-template-columns:repeat(3,1fr); column-gap:32px; }
.opt{ display:flex; align-items:flex-start; gap:12px; padding:11px 0; cursor:pointer; }
.opt input{ appearance:none; flex:none; width:18px; height:18px; margin:2px 0 0; border:1px solid var(--sage); background:transparent; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease); }
.opt input[type=radio]{ border-radius:50%; }
/* the route colour marks every answer given */
.opt input:checked{ background:var(--forest); border-color:var(--forest); }
.opt input[type=radio]:checked{ box-shadow:inset 0 0 0 4px var(--field); }
.opt input[type=checkbox]:checked{ background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23E2FFCC' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E") center/12px no-repeat; }
.opt input:focus-visible{ outline:2px solid var(--forest); outline-offset:2px; }
.opt span{ line-height:1.4; font-size:1rem; color:var(--ink-soft); }
.opt:hover span{ color:var(--forest); }
.opt input:checked + span{ color:var(--forest); font-weight:600; }
@media (max-width:860px){ .opts.three{ grid-template-columns:1fr 1fr; } }
/* short answers stay two-up on a phone; six one-word options were six full-width rows */
@media (max-width:640px){ .opts.two{ grid-template-columns:1fr; column-gap:0; } .opts.three{ grid-template-columns:1fr 1fr; column-gap:20px; } }

.nav-btns{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:clamp(32px,4vw,44px); }
.btn.plain::after{ content:none; }

/* a field that only appears once the option it belongs to is ticked */
.reveal{ display:none; margin:14px 0 0 30px; padding-left:18px; border-left:1px solid var(--sage); }
.reveal.on{ display:block; }
.reveal .fld{ margin:0; }
.reveal .fld input,.reveal .fld textarea{ font-size:1.0625rem; }
/* a revealed field is a follow-up to the legend above it, not a new question,
   so its label stays quieter than a legend or it competes with what it answers */
.reveal .fld label{ font-size:1rem; font-weight:400; letter-spacing:0; color:var(--sage-ink); line-height:1.5; margin-bottom:4px; }
@media (max-width:640px){ .reveal{ margin-left:0; } }



/* ---------- the shapes: a stacked list, one per row, display type ---------- */
.shapes{ list-style:none; margin:clamp(28px,3.5vw,44px) 0 0; padding:0; border-top:1px solid var(--rule); }
.shapes li{ display:grid; grid-template-columns:5fr 7fr; gap:var(--gutter); padding:clamp(28px,3.5vw,44px) 0; border-bottom:1px solid var(--rule); align-items:start; }
.shapes h3{ font-size:clamp(1.75rem,3.2vw,2.75rem); }
.shapes p{ color:var(--ink-soft); max-width:40em; text-wrap:pretty; }
.shapes p + p{ margin-top:.75em; }
@media (max-width:900px){ .shapes li{ grid-template-columns:1fr; gap:10px; } }

/* the built example is a row like the others: the screenshot sits under its paragraph */
.shapes .pic{ margin-top:clamp(20px,2.5vw,28px); max-width:520px; }
.shapes .pic img{ width:100%; border:1px solid var(--rule); }
.person .pic{ position:relative; }
.person .pic .award{ position:absolute; right:16px; top:16px; width:150px; height:auto; }


/* ---------- the terrain canvas: sized by its band ---------- */
.qualifier{ margin-top:22px; font-size:.9375rem; max-width:46ch; }
.terrain{ background:var(--forest); overflow:hidden; }
.terrain canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }


/* ---------- who we are: one photo of the two of them, bios beside it ---------- */
/* the photo carries the only human moment on the page, so it gets a column it
   can fill rather than sitting small beside two long bios */
.pair{ display:grid; grid-template-columns:2fr 5fr 5fr; gap:var(--gutter); align-items:start; }
.pair > .note{ line-height:1.6; }
.pair .person h3{ margin-top:0; }
/* one portrait each, straight on the band, above their own bio */
.pair .portrait{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; margin-bottom:clamp(20px,2.5vw,28px); }
@media (max-width:900px){ .pair{ grid-template-columns:1fr 1fr; } .pair > .note{ grid-column:1 / -1; } }
@media (max-width:560px){ .pair{ grid-template-columns:1fr; row-gap:clamp(40px,10vw,56px); } .pair .portrait{ max-width:420px; } }


/* ---------- how we work: a real sequence, full width, breaking the margin-note rhythm ---------- */
.sequence h2{ max-width:22ch; }
.sequence > .shell > .lede{ margin-top:clamp(20px,2.5vw,32px); max-width:52ch; }
.sequence .route-list{ margin-top:clamp(44px,5.5vw,80px); padding-left:38px; }
.sequence .route-list li{ display:grid; grid-template-columns:2fr 9fr; gap:var(--gutter); padding-bottom:clamp(36px,4.5vw,60px); }
.sequence .route-list li:last-child{ padding-bottom:0; }
.sequence .route-list li::before{ left:-35px; top:10px; }
.sequence .route-list b{ margin-bottom:0; padding-top:.35em; }
.sequence .route-list h3{ font-size:clamp(1.6rem,2.8vw,2.375rem); color:var(--mist); margin-bottom:12px; }
.sequence .route-list p{ max-width:56ch; }
@media (max-width:760px){ .sequence .route-list li{ grid-template-columns:1fr; gap:6px; } }


/* ---------- route list: the chartreuse spine, used by the sequence band ---------- */
.route-list{ list-style:none; margin:0; padding:0 0 0 34px; position:relative; }
.route-list::before{ content:''; position:absolute; left:8px; top:10px; bottom:10px; width:3px; background:var(--trail); }
.route-list li{ position:relative; padding:0 0 32px; }
.route-list li:last-child{ padding-bottom:0; }
.route-list li::before{ content:''; position:absolute; left:-31px; top:6px; width:13px; height:13px; background:var(--forest); border:3px solid var(--trail); border-radius:50%; }
.route-list b{ display:block; font-family:var(--body); font-size:1rem; text-transform:none; letter-spacing:0; color:var(--trail); font-weight:600; }
.route-list p{ color:var(--mist); }


/* ==========================================================
   Added 25 Sep 2026, from the brand and design review.
   ========================================================== */

/* ---------- the first question, asked in the hero ----------
   An ad landing page that makes you scroll three screens before it asks
   anything loses the people the ad just paid for. This is question one,
   outside the form so it never posts twice; Start copies it into the real
   field and moves you to part 1 with it already answered. */
.starter{ margin-top:clamp(28px,3.5vw,40px); border-top:1px solid var(--rule); padding-top:clamp(20px,2.5vw,28px); }
.starter label{ display:block; font-family:var(--body); font-weight:600; font-size:1.1875rem; line-height:1.35; color:var(--forest); margin-bottom:10px; }
.starter .row{ display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.starter input{ flex:1 1 320px; min-width:0; background:transparent; color:var(--forest); border:0; border-bottom:1px solid var(--forest); border-radius:0;
  padding:10px 0; font:400 var(--t-lede)/1.35 var(--body); }
.starter input:focus{ outline:none; border-bottom-width:2px; padding-bottom:9px; }
.starter input::placeholder{ color:#646E61; }
.starter .small{ margin-top:14px; }

/* ---------- the working-out, shown as you answer ----------
   The one place the survey does arithmetic in front of the person: the
   monthly software band turned into what it costs over a year. */
.working{ margin:-6px 0 0; padding:12px 0 0; border-top:1px solid var(--sage); color:var(--forest); font-size:1rem; display:none; }
.working.on{ display:block; }
.working b{ font-weight:600; }

/* ---------- the brief the survey writes back ----------
   A company that sells custom software should show the person a piece of
   software doing something. This reads their own answers back as the brief
   Ash and Nick are replying to, before anyone has written a word. */
.brief{ margin-top:clamp(32px,4vw,44px); }
.brief > .note{ margin-bottom:10px; }
.brief dl{ margin:0; border-top:1px solid var(--forest); }
.brief div{ display:grid; grid-template-columns:200px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--rule); }
.brief dt{ color:var(--sage-ink); }
.brief dd{ margin:0; color:var(--forest); font-weight:600; overflow-wrap:anywhere; }
.brief dd .plain{ font-weight:400; color:var(--ink-soft); }
.brief .flag{ display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--rule); font-weight:400; color:var(--ink-soft); font-size:1rem; }
@media (max-width:640px){ .brief div{ grid-template-columns:1fr; gap:4px; } }


/* ---------- Nick's award, cited rather than stuck on ----------
   It was a rounded, shadowed third-party badge floating under the bio, the one
   off-system object on the page. Now it sits on a hairline with its citation. */
.credential{ display:flex; align-items:center; gap:18px; margin-top:24px; padding-top:18px; border-top:1px solid var(--rule); }
.credential img{ width:78px; height:auto; flex:none; }
.credential .data{ line-height:1.6; }

/* ---------- /thanks ----------
   The hero measure is built for a long headline; this one is three words. */
.thanks-h1{ font-size:clamp(3rem,9vw,8rem); }
/* the ledger sits full width on /thanks, so it needs its own measure */
.hero .brief{ max-width:920px; }
.brief[hidden]{ display:none; }

/* the hero's second paragraph: what they get for answering, set below the
   lede so the reason for asking and the reason for answering are separate */
.hero-grid .deal{ margin-top:1em; max-width:38em; color:var(--ink-soft); }

/* a section heading that is not a second hero. The survey sits directly under
   the hero headline, so its own heading has to be clearly subordinate to it. */
h2.sub{ font-size:clamp(1.5rem,2.4vw,2.125rem); max-width:26ch; }

/* ==========================================================
   Polish pass, 29 Sep 2026
   ========================================================== */

/* a missed question says what's missing, beside it, until it's answered */
fieldset > .fld:last-child{ margin-bottom:0; }
.fld-err{ margin-top:10px; padding-left:12px; border-left:1px solid var(--forest); font-size:.9375rem; font-weight:600; color:var(--forest); }
[aria-invalid="true"]{ border-bottom-color:var(--forest); border-bottom-width:2px; }

/* home form: the note and the survey link beside the fields, not above them,
   so the band isn't a 560px column with the right half empty */
.form-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--gutter); align-items:start; margin-top:clamp(28px,3.5vw,44px); }
.form-aside{ position:sticky; top:28px; max-width:34em; }
.form-aside p + p{ margin-top:1em; }
.form-split form{ max-width:640px; }
@media (max-width:900px){ .form-split{ grid-template-columns:1fr; } .form-aside{ position:static; } }

/* /ai-check on a phone: the hero's Start is the one filled button in view */
@media (max-width:700px){
  .nav .btn.quiet-sm{ background:transparent; color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest); }
  .nav .btn.quiet-sm:hover{ background:var(--forest); color:var(--trail); }
}

/* ---------- /ai-check: the first screen is the terrain ----------
   The ad lands on Forest Ink with the landscape moving behind it, the same
   device as the home hero but full bleed. The header floats over the band so
   the whole first screen is one surface. Contours are soft behind text and the
   route keeps to a lane along the bottom, so nothing crosses the headline. */
.top-dark{ --nav-h:92px; }
.top-dark .nav{ position:absolute; top:0; left:0; right:0; z-index:2; }
.top-dark .nav::after{ background:var(--rule-dark); }
.top-dark .nav :focus-visible{ outline-color:var(--trail); }
.top-dark .lockup .wm{ color:var(--mist); }
.top-dark .lockup .wm small{ color:var(--sage-lit); }
.top-dark .nav-r .note{ color:var(--sage-lit); }
.top-dark .nav-r .note:hover,.top-dark .nav-r .note[aria-current]{ color:var(--mist); border-bottom-color:var(--mist); }
/* the hero's Start is the one filled button on the first screen */
.btn.quiet{ background:transparent; color:var(--mist); box-shadow:inset 0 0 0 1px var(--sage); }
.btn.quiet:hover{ background:var(--trail); color:var(--forest); box-shadow:none; }

.terrain-hero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + clamp(32px,4.5vw,64px)); padding-bottom:clamp(104px,12vw,160px); }
.terrain-hero .terrain{ position:absolute; inset:0; }
.terrain-hero > .shell{ position:relative; z-index:1; }
.terrain-hero h1{ color:var(--trail); }
.dark .starter{ border-top-color:var(--rule-dark); }
.dark .starter label{ color:var(--mist); }
.dark .starter input{ color:var(--mist); border-bottom-color:var(--mist); caret-color:var(--trail); }
.dark .starter input::placeholder{ color:var(--sage-lit); }
.dark .small{ color:var(--sage-lit); }
.dark .spec{ border-top-color:var(--rule-dark); }
.dark .spec li{ border-bottom-color:var(--rule-dark); }
.dark .spec .v{ color:var(--mist); }
@media (max-width:700px){ .top-dark{ --nav-h:84px; } }

/* ---------- home and /thanks on the terrain band (29 Sep 2026 redesign) ---------- */
.dark .ghost{ color:var(--mist); border-bottom-color:var(--sage); }
.dark .ghost:hover{ border-bottom-color:var(--trail); }
/* the read-back of their answers sits on the light canvas under the band; with
   nothing to read back, the band goes rather than sitting empty */
.brief-band .brief{ max-width:920px; margin-top:0; }
.brief-band:has(.brief[hidden]){ display:none; }
/* /thanks is one short screen: the band grows so the footer meets the bottom edge */
.page-thanks{ min-height:100vh; display:flex; flex-direction:column; }
.page-thanks main{ flex:1; display:flex; flex-direction:column; }
.page-thanks .terrain-hero{ flex:1; }
/* On the dark-top pages the page itself is Forest Ink, so the floating header is
   on dark whatever renders under it; the light bands carry their own canvas. */
html:has(body.top-dark),body.top-dark{ background:var(--forest); }
.top-dark .band:not(.dark):not(.mist){ background:var(--field); }

/* the before picture: one left edge, the headline beside the evidence for it */
.gap-top{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gutter); align-items:end; }
.gap-top .lede{ max-width:none; }
@media (max-width:900px){ .gap-top{ grid-template-columns:1fr; gap:clamp(20px,4vw,32px); } }
/* the evidence under the before picture: the survey figures, a step quieter
   than the lede so the owner's own situation reads first */
.gap-top .evidence{ font-size:1rem; }

/* ---------- /ai-check hero: who's asking ----------
   Their faces, names and roles above the ledger. On a phone this column sits
   under the starter question, so the first input stays above the fold. */
.asking > .note{ margin-bottom:12px; }
.askers{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; max-width:400px; }
.askers figure{ margin:0; }
.askers img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.askers figcaption{ margin-top:10px; font-size:.9375rem; line-height:1.4; color:var(--sage-lit); }
.askers figcaption b{ display:block; font-weight:600; font-size:1rem; color:var(--mist); }
/* the faces sit up beside the headline, against the right edge, rather than
   under it; the headline, lede and starter question stay together on the left */
.hero-grid.with-asking{ margin-top:0; }
.with-asking h1 + .lede{ margin-top:clamp(24px,3vw,40px); }
.with-asking .asking{ justify-self:end; width:100%; max-width:400px; }
@media (max-width:900px){ .with-asking .asking{ justify-self:start; } }

/* the pain points under "Every app does part of the job": owners' own words, on hairlines */
.pains{ list-style:none; margin:28px 0 24px; padding:0; max-width:40em; }
.pains li{ border-top:1px solid var(--rule); padding:12px 0; font-size:var(--t-body); }
.pains li:last-child{ border-bottom:1px solid var(--rule); }
.gap-top h2{ align-self:start; }  /* the pain list makes the copy column tall; keep the headline at the top */

/* Nick and Ash in the hero, so the page matches the ad's red-cap photo straight away */
.hero-who{ display:flex; align-items:center; gap:10px; margin-top:28px; }
.hero-who img{ width:56px; height:56px; object-fit:cover; display:block; }
.hero-who p{ margin:0 0 0 8px; font-family:var(--mono); font-size:var(--t-note); letter-spacing:.04em; text-transform:uppercase; color:var(--sage-lit); line-height:1.5; }
.hero-who p b{ display:block; color:var(--mist); font-weight:400; }
/* a second way to the form, halfway down */
.mid-cta{ margin-top:clamp(32px,5vw,56px); }
/* /numbers: the phone beside the questions, then two labelled groups */
/* /numbers: the questions run down the left, the phone stays in view beside them */
.ask-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); column-gap:clamp(40px,7vw,120px); align-items:start; }
.ask-grid > *{ grid-column:1; }
.ask-grid > .ask-phone{ grid-column:2; grid-row:1 / span 6; position:sticky; top:40px; }
.ask-top .copy{ margin-top:20px; max-width:28em; }
.ask-phone{ width:100%; height:auto; display:block; }
.ask-grid .shapes li{ grid-template-columns:1fr; gap:8px; padding:clamp(20px,2.4vw,28px) 0; }
.ask-grid .shapes h3{ font-size:clamp(1.375rem,2.2vw,1.875rem); }
@media (max-width:900px){
  .ask-grid{ grid-template-columns:1fr; }
  .ask-grid > .ask-phone{ grid-column:1; grid-row:auto; position:static; max-width:300px; margin-top:clamp(28px,6vw,40px); }
}
.group{ font-family:var(--body); font-size:1.1875rem; font-weight:600; color:var(--forest); margin:clamp(40px,6vw,64px) 0 0; }
.group + .shapes{ margin-top:12px; }