/* melisacull.com: the one stylesheet (spec 40 R7). The look is docs/design/visual-direction.md,
   "Treasure Valley foothills" (approved 2026-11-04): its tokens, type, layout rules and don'ts.
   Palette and type are set once, in :root below; test/site-tokens.test.ts checks them against
   the direction and checks every text/ground pair for contrast. Melisa changes words and photos
   through Claude, not styles. Mobile-first from 360 px.
   Don'ts: cream, terracotta, all-caps eyebrows, numbered markers on non-sequences, card grids,
   drop shadows, gradient washes, fade-in-on-scroll, emoji, arrows on link text.
   After editing, run `npm run css:hash`: it renames this file to match its content. */

/* Self-hosted (public/fonts/, OFL): no request to any font service. */
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/libre-caslon-display-400-latin-v5.3.0.woff2") format("woff2");
}
/* The bold cut of the same Caslon, for the header wordmark only (Display has no bold). */
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/libre-caslon-text-700-latin-v5.3.0.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-wght-latin-v5.3.0.woff2") format("woff2");
}

:root {
  --sage-mist: #E9ECE4;     /* page ground */
  --snowline: #F7F8F4;      /* inputs, text on basalt */
  --basalt: #1E2B2A;        /* ink, primary buttons, the guide band */
  --body: #33413F;          /* body text on sage mist */
  --muted: #4F5D4C;         /* secondary text */
  --river-slate: #2F4D57;   /* links, focus ring */
  --foothill-gold: #B08A3E; /* the ridgeline, the guide panel's border and button. Never text on sage mist */
  --placeholder: #C7CDBF;   /* photo placeholders */
  --rule: rgba(30, 43, 42, .14); /* basalt at 14%: the header's faint rule */
  --display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --wordmark: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --max: 1240px;
  --gutter: 24px;
  --measure: 34em;
  --space: clamp(56px, 8vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sage-mist);
  color: var(--body);
  font: 400 18px/1.6 var(--sans);
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; height: auto; }
h1, h2 { font-family: var(--display); font-weight: 400; color: var(--basalt); margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 4.8vw, 68px); line-height: 1.02; max-width: 14ch; letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--basalt); margin: 0 0 .4em; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--river-slate); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--basalt); }
:focus-visible { outline: 3px solid var(--river-slate); outline-offset: 3px; }
/* River slate is 1.6:1 on basalt: on the guide band the ring is snowline (#138 review, WCAG 1.4.11). */
.guide-band :focus-visible { outline-color: var(--snowline); }
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--basalt); vertical-align: top; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: var(--gutter); background: var(--snowline); color: var(--basalt); padding: 12px; z-index: 20; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Buttons: 2px radius, 48-56 px tall, basalt solid (primary) or a 1px basalt outline. Header and
   page sections share the look (.btn in the header, .button from sections/shared.tsx ButtonLink). */
.btn, .btn-primary, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 2px;
  border: 1px solid var(--basalt);
  background: var(--basalt);
  color: var(--snowline);
  font: 600 17px/1.25 var(--sans);
  text-align: center;
  text-decoration: none;
  max-width: 100%;
}
.btn:hover, .button:hover { background: var(--river-slate); border-color: var(--river-slate); color: var(--snowline); }
.button.button--secondary { background: transparent; color: var(--basalt); }
.button.button--secondary:hover { background: var(--snowline); border-color: var(--basalt); color: var(--basalt); }
/* The guide panel's button: gold with basalt text (4.6:1), only ever on the basalt band. */
.button.button--gold { background: var(--foothill-gold); border-color: var(--foothill-gold); color: var(--basalt); }
.button.button--gold:hover { background: var(--snowline); border-color: var(--snowline); color: var(--basalt); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; margin-bottom: 0; max-width: none; }

/* Header. Phones (to 900 px): the wordmark and one 48 px menu button, never wrapping. Wider: the
   nav and both next steps join them on one line (the @media block at the end). */
.site-header { position: relative; border-bottom: 1px solid var(--rule); }
.site-header__row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: block; flex: 0 1 auto; min-width: 0; color: var(--basalt); text-decoration: none; }
.brand:hover { color: var(--basalt); }
/* Wordmark: smaller and bold (Andrew, 2026-11-05). 19px to 900 px, 22px above. */
.brand__name { display: block; font: 700 19px/1 var(--wordmark); letter-spacing: .01em; }
/* The brokerage is her setting (up to 120 characters): it wraps, even inside the nowrap desktop row,
   so a long name never makes the page scroll sideways (#138 review). */
.brand__firm { display: block; margin-top: 6px; font-size: 13px; line-height: 1.2; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.site-nav, .header-ctas { display: none; flex: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 44px; }
.site-nav a { display: block; padding: 12px 0; color: var(--basalt); text-decoration: none; font-size: 16px; font-weight: 500; }
.site-nav a:hover { text-decoration: underline; }
.header-link { color: var(--basalt); font-weight: 600; font-size: 16px; padding: 12px 0; }
.site-header .btn { min-height: 48px; padding: 10px 20px; font-size: 16px; }

/* The menu: a <details> disclosure, so it opens without JavaScript. */
.menu { flex: none; }
.menu__button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 48px; padding: 0 18px;
  border: 1px solid var(--basalt); border-radius: 2px;
  color: var(--basalt); font-weight: 600; font-size: 16px;
  cursor: pointer; list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }
.menu[open] .menu__button { background: var(--basalt); color: var(--snowline); }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: var(--sage-mist); border-bottom: 1px solid var(--rule);
  padding: 8px var(--gutter) 32px;
}
.menu__panel ul { list-style: none; margin: 0; padding: 0; }
.menu__panel li + li { border-top: 1px solid var(--rule); }
.menu__panel nav a { display: block; padding: 14px 0; color: var(--basalt); text-decoration: none; font-size: 20px; }
.menu__panel .buttons { flex-direction: column; margin-top: 16px; }

/* Page body: sections separated by space, not boxes or alternating grounds. */
main { display: block; flex: 1 0 auto; }
.section { padding: var(--space) 0 0; }
.section > * { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section:last-child { padding-bottom: var(--space); }
.notfound__body h1 { max-width: 14ch; }

/* Hero: big Caslon h1, the lede, both next steps, the photo, then the ridgeline. Below 900 px the
   two CTAs stack full width straight under the lede, so both are on the first screen at 360 px. */
.section--hero { padding-top: 32px; }
.hero__body { display: flex; flex-direction: column; gap: 40px; }
.hero__text > :last-child { margin-bottom: 0; }
.hero__subhead { font-size: 20px; line-height: 1.5; color: var(--body); }
.section--hero .buttons, .first-ctas { flex-direction: column; margin-top: 24px; }
.first-ctas { margin-bottom: 32px; }
.section--hero .first-ctas { margin-bottom: 0; }
.section--hero .button, .first-ctas .button, .menu__panel .button { width: 100%; }
.hero__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; border-radius: 2px; background: var(--placeholder); }
/* The hero photo is a 4:5 crop (image.tsx HERO_ASPECT). Its `photo_focus` picks one of these steps
   (focusPositionX), as a class because the CSP allows no inline style. */
.hero__photo--x0 { object-position: 0% 50%; } .hero__photo--x10 { object-position: 10% 50%; } .hero__photo--x20 { object-position: 20% 50%; } .hero__photo--x30 { object-position: 30% 50%; } .hero__photo--x40 { object-position: 40% 50%; } .hero__photo--x50 { object-position: 50% 50%; } .hero__photo--x60 { object-position: 60% 50%; } .hero__photo--x70 { object-position: 70% 50%; } .hero__photo--x80 { object-position: 80% 50%; } .hero__photo--x90 { object-position: 90% 50%; } .hero__photo--x100 { object-position: 100% 50%; }

/* The ridgeline: two thin gold contour lines, full width. The one decorative element. */
.ridgeline { display: block; width: 100%; height: 48px; fill: none; stroke: var(--foothill-gold); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.section > .ridgeline { max-width: none; padding: 0; margin-top: var(--space); }
.ridgeline path { vector-effect: non-scaling-stroke; }
@media print { .ridgeline { display: none; } }

/* Section contents (sections/*.tsx). Everything stacks at 360 px. */
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.25em; max-width: var(--measure); }
.prose li { margin-bottom: .4em; }
.photo-text__photo { display: block; width: 100%; height: auto; border-radius: 2px; margin-bottom: 32px; background: var(--placeholder); }
.photo-text__text > :last-child { margin-bottom: 0; }

/* side_by_side (Home's "Who I help"): groups next to each other, each under a hairline. Keyed to its
   own section kind, never to bold text in a text section (#138 review). */
.side-by-side { display: flex; flex-wrap: wrap; gap: 0 48px; margin-top: 32px; }
.side-by-side__item { flex: 1 1 18rem; padding: 24px 0 32px; border-top: 1px solid var(--basalt); }
.side-by-side__item h3 { margin: 0 0 8px; font: 400 28px/1.2 var(--display); color: var(--basalt); }

/* Steps are a sequence, so they keep their numbers: Caslon numerals, no circles. */
.steps { list-style: none; counter-reset: step; margin-top: 32px; margin-bottom: 0; display: flex; flex-direction: column; }
.step { counter-increment: step; position: relative; padding: 24px 0 24px 56px; border-top: 1px solid var(--basalt); }
.step::before { content: counter(step); position: absolute; left: 0; top: 18px; font: 400 36px/1 var(--display); color: var(--basalt); }

.faq__item { border-top: 1px solid var(--basalt); padding-top: 8px; padding-bottom: 8px; }
.faq__item:last-of-type { border-bottom: 1px solid var(--basalt); }
.faq__item summary { cursor: pointer; font-weight: 600; color: var(--basalt); padding: 12px 0; min-height: 48px; }
.faq__item[open] summary { margin-bottom: 8px; }

.table-scroll { overflow-x: auto; }
.table-scroll table { display: table; min-width: 100%; }
.table-scroll thead th { color: var(--basalt); font-weight: 600; }

/* Areas: a large-type index, rows ruled by hairlines. Not a card grid. */
.area-index { list-style: none; margin-top: 32px; margin-bottom: 0; }
.area-index__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 40px; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid var(--basalt); }
.area-index__name { flex: 0 1 8em; margin: 0; font: 400 52px/1.05 var(--display); color: var(--basalt); }
.area-index__feel { flex: 1 1 18rem; margin: 0; color: var(--body); }
.area-index__link { flex: none; margin: 0; font-weight: 600; }
.area-index__row:last-child { border-bottom: 1px solid var(--basalt); }

/* An area's own page (areas.tsx): the brief as label + text rows under hairlines, stacking at 360 px. */
.area-brief__rows { list-style: none; margin-top: 32px; margin-bottom: 0; }
.area-brief__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 40px; padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--basalt); }
.area-brief__row:last-child { border-bottom: 1px solid var(--basalt); }
.area-brief__label { flex: 0 1 10em; margin: 0; font: 400 28px/1.2 var(--display); color: var(--basalt); }
.area-brief__text { flex: 1 1 18rem; margin: 0; color: var(--body); }
.area-brief__back { margin-top: 32px; margin-bottom: 0; font-weight: 600; }

/* Testimonials: one large Caslon pull quote, then the others smaller. Never cards. */
.testimonial { margin-top: 0; margin-bottom: 0; }
.testimonial blockquote { margin: 0 0 16px; font-family: var(--display); color: var(--basalt); font-size: 24px; line-height: 1.35; }
.testimonial blockquote p { max-width: 30em; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial--lead { margin-top: 24px; }
.testimonial--lead blockquote { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
.testimonial--lead blockquote p { max-width: 26em; }
.testimonials__more { display: flex; flex-wrap: wrap; gap: 40px 64px; margin-top: 56px; }
.testimonials__more .testimonial { flex: 1 1 22rem; padding-top: 24px; border-top: 1px solid var(--basalt); }
.testimonial figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.testimonial__photo { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--placeholder); }
.testimonial__name { font-weight: 600; color: var(--basalt); }
.testimonial__from { color: var(--muted); }
.testimonial__source { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.stars { color: var(--basalt); letter-spacing: .12em; margin-right: 4px; }

/* The guide band: basalt, the chapter list (a sequence, so an <ol>) and the gold-bordered panel. */
.guide-band { background: var(--basalt); color: var(--snowline); margin-top: var(--space); padding: var(--space) 0; }
.guide-band h2, .guide-band h3 { color: var(--snowline); }
.guide-band a:not(.button) { color: var(--snowline); }
.guide-band__inner { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.guide-band__text { flex: 1 1 26rem; }
.guide-band__chapters { margin: 32px 0 0; padding-left: 1.6em; max-width: var(--measure); }
.guide-band__chapters li { padding: 8px 0 8px 4px; border-top: 1px solid rgba(247, 248, 244, .2); }
.guide-band__panel { flex: 1 1 20rem; max-width: 28rem; border: 2px solid var(--foothill-gold); border-radius: 2px; padding: 32px 28px; }
.guide-band__panel .button { width: 100%; }
.guide-band__panel p:last-child { margin-bottom: 0; }
/* The guide page's "Download the relocation guide" button jumps to the form (#signup, #196). The
   header isn't sticky; the margin is so the jump doesn't land with the form flush to the top.
   Stacked (a phone), it lands on the panel with about 24 px of basalt above the gold border: the
   panel puts 2 px border + 32 px padding + its h3 (26 + 8) + its line (two lines at 360 px, 57.6
   + 18) = 144 px above the form, measured in Chrome. A one-line box text (600 px) lands ~53 px up.
   TODO(spec): she can lengthen the box's words (guide_band_panel_*, 300 characters); a much
   longer text pushes the form down and the border then lands above the screen. Pointing the link
   at the band itself would hold for any copy, but changes markup and the seeded link (#196 asked
   for CSS). */
.guide-band #signup { scroll-margin-top: 168px; }
/* Two columns from 53.5rem (26rem text + 20rem panel + the 72 px gap + 2 × 24 px gutters = 856 px,
   measured): the panel's top is the heading's top, so it lands on the top of the band (its
   --space padding + the ~115 px of panel above the form), heading, chapter list and form in view.
   Longer box text keeps the heading in view for up to --space more. */
@media (min-width: 53.5rem) {
  .guide-band #signup { scroll-margin-top: calc(var(--space) + 115px); }
}

/* Forms (the booking page, spec 30): inputs on snowline, labels above, 48 px targets, no boxes
   around groups beyond a hairline. Everything stacks at 360 px. */
.section--book { padding-top: 56px; }
.book-form { max-width: 44rem; }
.book-form fieldset { border: 0; border-top: 1px solid var(--basalt); margin: 0 0 24px; padding: 16px 0 0; min-width: 0; }
.book-form legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 600; color: var(--basalt); }
.book-form legend + * { clear: both; }
.book-form__zone, .book-form__note { color: var(--muted); font-size: 16px; }
.book-form__messages { max-width: 44rem; margin: 0 0 24px; padding: 12px 16px; border-left: 4px solid var(--basalt); font-weight: 600; }
.book-form__messages ul { margin: 0; padding-left: 1.2em; }
.book-day { padding-bottom: 8px; }
.book-day__times { display: flex; flex-wrap: wrap; gap: 8px; }
.book-days ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.book-days a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 12px; color: var(--basalt); font-weight: 600; }
.book-day__more { margin-top: 8px; }
.book-day__more summary { display: inline-flex; align-items: center; min-height: 48px; cursor: pointer; color: var(--basalt); font-weight: 600; text-decoration: underline; }
.book-day__more .book-day__times { margin-top: 8px; }
.book-time, .book-choice { position: relative; display: inline-flex; cursor: pointer; }
.book-choice { display: flex; margin-bottom: 8px; }
.book-time input, .book-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.book-time span, .book-choice span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px;
  border: 1px solid var(--basalt); border-radius: 2px; background: var(--snowline); color: var(--basalt);
}
.book-time span { min-width: 6.5rem; justify-content: center; }
.book-time input:checked + span, .book-choice input:checked + span { background: var(--basalt); color: var(--snowline); }
.book-time input:focus-visible + span, .book-choice input:focus-visible + span { outline: 3px solid var(--river-slate); outline-offset: 3px; }
.field { display: block; margin: 0 0 20px; color: var(--basalt); font-weight: 600; max-width: 32rem; }
.field label { display: block; }
.field input, .field select {
  display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--basalt); border-radius: 2px; background: var(--snowline); color: var(--basalt);
  font: 400 18px/1.4 var(--sans);
}
.book-form button { cursor: pointer; }
.book-form button:disabled { cursor: not-allowed; }

/* The guide signup form, in the band's panel on /relocation-guide (50-T5). Snowline inputs on basalt,
   one field per row so it reads the same at 360 px; the submit is the panel's gold button. */
.signup { display: flex; flex-direction: column; gap: 16px; }
.signup label { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; }
.signup input, .signup select, .signup textarea { font: inherit; font-weight: 400; font-size: 18px; color: var(--basalt); background: var(--snowline); border: 1px solid var(--snowline); border-radius: 2px; min-height: 48px; padding: 10px 12px; width: 100%; }
.signup textarea { min-height: 96px; resize: vertical; }
.signup .button { margin-top: 8px; }
/* Held until Turnstile has a token (turnstile-gate.ts): visibly not ready yet. */
.signup .button[disabled] { opacity: 0.6; cursor: wait; }
/* Turnstile's widget: room kept for it so the button doesn't jump when it loads. */
.cf-turnstile { min-height: 65px; }
.signup__noscript, .signup__fallback, .signup__error { font-size: 16px; }
/* The honeypot (spec 20 R2): off screen, never display:none (some bots skip hidden fields). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer: the ridgeline, then contact, brokerage and EHO on every page (spec 40 R2). No call to action. */
.site-footer { margin-top: 0; }
.site-footer > .ridgeline { margin-top: var(--space); }
.footer-main { display: flex; flex-wrap: wrap; gap: 32px 96px; padding-top: 48px; padding-bottom: 40px; }
.footer-name { font-size: 30px; margin-bottom: 12px; }
.footer-contact { font-style: normal; }
.footer-contact p { margin: 0 0 4px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.footer-nav a { display: inline-block; padding: 12px 0; }
.footer-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.eho { display: flex; gap: 16px; align-items: flex-start; font-size: 14px; color: var(--muted); padding-top: 24px; padding-bottom: 40px; }
.eho img { flex: none; width: 40px; height: 40px; }
.eho p { margin: 0; max-width: 48em; }

/* From 48rem: photos sit beside the words (image.tsx SIZES: hero 45vw, photo_text 50vw). */
@media (min-width: 48rem) {
  .hero__body { flex-direction: row; align-items: flex-end; gap: 56px; }
  .hero__text { flex: 1 1 0; min-width: 0; }
  .hero__photo { flex: 0 0 45%; width: 45%; }
  .photo-text--left, .photo-text--right {
    display: flex; align-items: center; gap: 56px;
    padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  }
  .photo-text--left > *, .photo-text--right > * { flex: 1 1 0; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .photo-text--right .photo-text__photo { order: 2; }
  /* A first photo_text's added CTAs get their own row above, not a third column (#138 review). */
  .photo-text--left, .photo-text--right { flex-wrap: wrap; row-gap: 0; }
  .photo-text--left > .first-ctas, .photo-text--right > .first-ctas { flex: 0 0 100%; margin-bottom: 32px; }
}

/* Hero CTAs side by side above 900 px. */
@media (min-width: 901px) {
  .brand__name { font-size: 22px; }
  .section--hero .buttons { flex-direction: row; }
  .section--hero .button { width: auto; }
}

/* From 1024 px: the full header on one line (nowrap), and no menu button. Measured in Chrome
   (40-T2b): the wordmark, nav and both next steps need about 960 px with these gaps, so below
   1024 px they would crowd or squash the wordmark; the menu stays until then, still one line. Why
   it isn't 901 px: docs/design/visual-direction.md, "Where the desktop header starts". The first section's added CTAs go too, since
   the header carries both next steps here. */
@media (min-width: 1024px) {
  .site-header__row { padding-top: 44px; padding-bottom: 40px; gap: 32px; white-space: nowrap; }
  .brand { min-width: min-content; }
  .site-nav { display: block; margin-left: auto; }
  .site-nav ul { gap: 28px; }
  .site-nav a { font-size: 15px; }
  .header-ctas { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; margin: 0; max-width: none; }
  .menu, .first-ctas, .first-cta { display: none; }
}

/* From 1280 px: the direction's full header spacing (44 px nav gaps; Andrew asked for more white
   space in the nav, 2026-11-04). */
@media (min-width: 1280px) {
  .site-header__row { gap: 44px; }
  .site-nav ul { gap: 44px; }
  .site-nav a { font-size: 16px; }
  .header-ctas { gap: 28px; }
}