/* ==========================================================================
   Lawn Care Little Elm — surface pack CSS
   Macrostructure: Stat-Led · Nav: N12 (banner + retracting bar) · Footer: Ft5
   Fonts: Clash Display (display) / Literata (body) / Martian Mono (mono)
   Tokens are locked per brand/DESIGN.md — no inline hex/font values below.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Fonts — self-hosted, woff2 only, font-display: swap. Latin subset.
   Licenses alongside each family in assets/fonts/.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Tokens — colour (OKLCH), light default; dark via system pref then toggle.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* paper */
  --color-paper:    oklch(96% 0.012 228); /* #EAF4F8 */
  --color-paper-2:  oklch(93% 0.014 228); /* #DFEAEF */
  --color-paper-3:  oklch(89% 0.016 228); /* #D0DDE3 */

  /* ink */
  --color-ink:      oklch(20% 0.014 228); /* #0F171B */
  --color-ink-2:    oklch(38% 0.012 228); /* #3C4447 */

  /* rules & neutrals */
  --color-rule:     oklch(78% 0.014 228); /* #AFB9BE */
  --color-rule-2:   oklch(84% 0.012 228); /* #C3CCD1 */
  --color-muted:    oklch(50% 0.012 228); /* #5C6569 */
  --color-neutral:  oklch(46% 0.012 228); /* #51595D */

  /* accent */
  --color-accent:      oklch(48% 0.150 228); /* #006A9F */
  --color-accent-ink:  oklch(98% 0.008 228); /* #F3FAFD — text on accent fill */
  --color-focus:       oklch(54% 0.200 228); /* #007EC8 — :focus-visible only */

  /* functional secondary — callout-warning ONLY, never decorative */
  --color-clay: oklch(52% 0.140 35); /* #AA442B */

  /* typography */
  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Literata", Georgia, "Times New Roman", serif;
  --font-mono:    "Martian Mono", "SF Mono", Consolas, monospace;

  --text-xs:  clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13px floor (design director 2026-09-15) */
  --text-sm:  clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-md:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg:  clamp(1.125rem, 1.08rem + 0.25vw, 1.3125rem);
  --text-xl:  clamp(1.375rem, 1.28rem + 0.5vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
  --text-display-s: clamp(2.25rem, 1.9rem + 2vw, 3.5rem);
  --text-display:   clamp(2.75rem, 2.1rem + 3.5vw, 5rem);
  --text-stat:      clamp(6rem, 3rem + 16vw, 13rem); /* hero figure only */

  /* spacing / radius / shadow / motion */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-sm:  1rem;    --space-md:  1.5rem;  --space-lg: 2rem;
  --space-xl:  3rem;    --space-2xl: 4rem;    --space-3xl: 6rem;
  --space-4xl: 8rem;    --space-5xl: 10rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --rule-hair: 1px; --rule-thick: 2px;

  --shadow-sm: 0 1px 2px oklch(20% 0.014 228 / 0.08);
  --shadow-md: 0 4px 16px oklch(20% 0.014 228 / 0.10);
  --scroll-shade: oklch(20% 0.014 228 / 0.16); /* right-edge cue on horizontally scrolling tables */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 150ms; --dur-med: 250ms; --dur-long: 400ms;

  /* layout floors — one of each, used everywhere, no ad hoc values */
  --max-w:     1080px;
  --article-w: 52rem;
  --pad-x:     clamp(1.5rem, 5vw, 3.5rem);
  --reading-w: 52rem; /* utility pages: capped narrower than nothing, per floor */
}

/* Dark mode: system preference first, explicit toggle always wins */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper:    oklch(16% 0.018 228);
    --color-paper-2:  oklch(20% 0.020 228);
    --color-paper-3:  oklch(24% 0.022 228);
    --color-ink:      oklch(94% 0.012 228);
    --color-ink-2:    oklch(76% 0.012 228);
    --color-rule:     oklch(32% 0.018 228);
    --color-rule-2:   oklch(28% 0.016 228);
    --color-muted:    oklch(64% 0.012 228);
    --color-neutral:  oklch(60% 0.012 228);
    --color-accent:      oklch(70% 0.150 228);
    --color-accent-ink:  oklch(14% 0.010 228);
    --color-focus:       oklch(76% 0.190 228);
    --color-clay:     oklch(68% 0.130 35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:    oklch(16% 0.018 228);
  --color-paper-2:  oklch(20% 0.020 228);
  --color-paper-3:  oklch(24% 0.022 228);
  --color-ink:      oklch(94% 0.012 228);
  --color-ink-2:    oklch(76% 0.012 228);
  --color-rule:     oklch(32% 0.018 228);
  --color-rule-2:   oklch(28% 0.016 228);
  --color-muted:    oklch(64% 0.012 228);
  --color-neutral:  oklch(60% 0.012 228);
  --color-accent:      oklch(70% 0.150 228);
  --color-accent-ink:  oklch(14% 0.010 228);
  --color-focus:       oklch(76% 0.190 228);
  --color-clay:     oklch(68% 0.130 35);
}
:root[data-theme="light"] {
  color-scheme: light;
  /* explicit light re-declares the tokens above, unchanged from :root defaults */
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
main, section, article, aside, figure, header, footer, nav { display: block; }
/* `pretty`, not `balance`: balance evened long guide titles into 2-words-per-line
   towers at 390px (qa-deai 2026-09-15, rubric #28). Short centered heroes opt back in. */
/* word-spacing: Clash Display's word space is ~0.22 of an "n", so display lines read
   run-together ("Whatisthe1/3rule") without it (design director 2026-09-15). */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--space-md); text-wrap: pretty; font-style: normal; word-spacing: 0.1em; }
h1 { font-size: var(--text-display-s); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
@media (max-width: 40rem) { h2 { font-size: var(--text-xl); } }
/* Above phone width, balance again: pretty left 13 single-word last lines at 1366
   (design director re-run N6). At the old 38px phone size balance caused towers at 390;
   at the smaller phone sizes below it measured clean. */
@media (min-width: 40.0625rem) { h1, h2 { text-wrap: balance; } }
/* Phone H1: at 38px in a 342px column, 15 titles stacked 4-6 lines and 12 left one word
   alone (pass 3, P5). 1.625-1.875rem cleared the hiring-help and tall-grass-rule
   single-word lines with no new ones on 29 routes (qa/css-measurements-2026-09-15.md T2).
   Phone H2 balance cleared 6 of 7 single-word lines, 0 routes regressed (T4). */
@media (max-width: 40rem) {
  h1 { font-size: clamp(1.625rem, 6.5vw, 1.875rem); text-wrap: balance; }
  h2 { text-wrap: balance; }
}
/* H3s and FAQ questions ended on one or two words on 17 routes (pass 3, P14). */
h3, .faq-item summary { text-wrap: balance; }
p { margin: 0 0 var(--space-md); text-wrap: pretty; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:not([class]) { text-decoration-line: underline; }
ul, ol { padding-left: 1.2em; }
blockquote { margin: 0; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.nb { white-space: nowrap; }

/* Skip link — fully hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* -------------------------------------------------------------------------
   Shared layout primitives
   ------------------------------------------------------------------------- */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--article {
  max-width: var(--article-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--reading {
  max-width: var(--reading-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: var(--space-2xl) var(--space-3xl);
}
/* Text fills its column: nothing inside a wrap gets a second max-width */
.wrap :where(p, ul, ol, h1, h2, h3, h4, blockquote, table) { max-width: none; }

/* -------------------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------------------- */
.breadcrumb { padding-block: var(--space-sm); }
/* Same left edge as the article head and reading column (was --max-w, 124px apart). */
body.article .breadcrumb, body.hub .breadcrumb, body.page .breadcrumb { max-width: var(--article-w); }
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-3xs); }
.breadcrumb__list li:not(:last-child)::after { content: "/"; margin-left: var(--space-3xs); color: var(--color-rule); }
.breadcrumb__list a { color: var(--color-muted); text-decoration: none; padding-block: var(--space-2xs); } /* "Home" hit area was 40x22 (pass 3, P24) */
.breadcrumb__list a:hover { color: var(--color-accent); }
.breadcrumb__list li[aria-current="page"] { color: var(--color-ink-2); }

/* -------------------------------------------------------------------------
   N12 — announcement banner + retracting nav
   ------------------------------------------------------------------------- */
.banner {
  background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper));
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-ink-2);
  overflow: hidden;
  max-height: 4rem;
  transition: max-height var(--dur-med) var(--ease-in-out), opacity var(--dur-med) var(--ease-out);
}
.banner__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-2xs) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
}
.banner__text {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
}
.banner__text a { color: var(--color-accent); font-weight: 600; }
.banner__short { display: none; }
.banner__dismiss {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-3xs);
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.banner__dismiss:hover { color: var(--color-ink); }
.banner.is-dismissed,
.banner.is-retracted {
  max-height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-rule-2);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
}
@supports (backdrop-filter: blur(6px)) {
  .site-header.is-scrolled { backdrop-filter: blur(6px); }
}
.site-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-sm) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  word-spacing: 0.1em;
}

/* The disclosure ships `open` in the markup (see header.html) and STAYS
   open at desktop — closed <details> content is rendered with an internal
   `content-visibility: hidden` in modern Chromium that zeroes intrinsic
   sizing no matter what CSS a page author applies to the light-DOM
   children, so no override here can make a genuinely-closed <details>
   report a real width. Collapsing on narrow viewports is a JS
   enhancement (sets `.open = false` on load) layered on top; without JS
   the menu simply starts expanded, which is still fully usable. */
.nav-disclosure { display: block; }
.nav-disclosure__trigger { display: none; }
.nav {
  min-width: 0;
}
.nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: inline-block;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-3xs);
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--color-accent); }
.nav-link[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 40rem) {
  .banner__full { display: none; }
  .banner__short { display: inline; }
}
/* Disclosure menu up to 56rem: the six links wrapped to two rows between 641 and 894px and
   the sticky header grew from 66px to 123px (design director pass 3, P4). Keep in step
   with the matchMedia query in header.html. */
@media (max-width: 56rem) {
  .nav-disclosure { display: block; position: relative; }
  .nav-disclosure__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    list-style: none;
  }
  .nav-disclosure__trigger::-webkit-details-marker { display: none; }
  .nav-disclosure__trigger::marker { content: ""; }
  .nav-disclosure__icon { position: relative; width: 1rem; height: 2px; background: var(--color-ink); }
  .nav-disclosure__icon::before, .nav-disclosure__icon::after {
    content: ""; position: absolute; left: 0; width: 1rem; height: 2px; background: var(--color-ink);
    transition: transform var(--dur-short) var(--ease-out);
  }
  .nav-disclosure__icon::before { top: -0.375rem; }
  .nav-disclosure__icon::after { top: 0.375rem; }
  .nav-disclosure[open] .nav-disclosure__icon { background: transparent; }
  .nav-disclosure[open] .nav-disclosure__icon::before { transform: translateY(0.375rem) rotate(45deg); }
  .nav-disclosure[open] .nav-disclosure__icon::after { transform: translateY(-0.375rem) rotate(-45deg); }
  /* Below 56rem the native open/closed state on <details> IS the show/hide
     mechanism (a <summary> click toggles it with zero JS). The markup ships
     `open`, so this starts expanded until the enhancement script in
     header.html collapses it on load for narrow viewports. */
  .nav {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2xs));
    background: var(--color-paper);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm);
    min-width: 12rem;
  }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .nav__list .nav-link { padding-block: var(--space-2xs); } /* 32px rows were small tap targets */
}

/* -------------------------------------------------------------------------
   Hero — H4 Stat-Led (homepage only)
   ------------------------------------------------------------------------- */
.hero-stat {
  background: var(--color-paper);
  padding-block-start: var(--space-3xl);
  padding-block-end: var(--space-4xl); /* >=1.3x start, per gate 44 */
  text-align: center;
}
.hero-stat__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.hero-stat__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-stat);
  font-variant-numeric: tabular-nums;
  line-height: 0.85;
  color: var(--color-accent);
}
.hero-stat__qualifier { margin-top: var(--space-lg); }
.hero-stat__qualifier p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-ink-2);
  margin: 0 auto var(--space-2xs);
  max-width: 40ch;
  text-wrap: balance;
}
/* The homepage's one <h1> is the first qualifier line. It was body serif at --text-lg
   (1.2x body): the de-AI gate failed the homepage on it (#2 same family as body, #3 ratio)
   and the design director listed it as owner call 31. Display face at --text-display-s
   measured 3.29x body, no single-word lines, and the figure, H1, second line and CTA still
   fit a 1280x800 viewport with 9px to spare (qa/css-measurements-2026-09-15.md T7).
   Recorded as a DESIGN.md build deviation. */
.hero-stat__qualifier h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-s);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 auto var(--space-2xs);
  max-width: 40ch;
  text-wrap: balance;
  word-spacing: 0.1em;
}
@media (max-width: 40rem) {
  .hero-stat__qualifier h1 { font-size: clamp(1.625rem, 6.5vw, 1.875rem); }
}
.hero-stat__cta { margin-top: var(--space-xl); }

/* Chip CTA — rectangular outlined, editorial genre (no pill) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  border: var(--rule-thick) solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.chip:hover { background: var(--color-accent); color: var(--color-accent-ink); }

/* -------------------------------------------------------------------------
   Trust strip — T4 numbered stat strip (3-up)
   ------------------------------------------------------------------------- */
.trust-strip {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
  padding-block: var(--space-xl);
}
.trust-strip__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
}
.trust-strip__item {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0; /* the base p margin left the band off-centre */
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.trust-strip__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  word-spacing: 0.1em;
  color: var(--color-accent);
}
/* Mono for numerals only (Ross's rule): mark the figure, not the words. */
.trust-strip__item strong.num { font-family: var(--font-mono); word-spacing: normal; }

/* -------------------------------------------------------------------------
   Directory — S5 bottom-anchored head + listing grid
   ------------------------------------------------------------------------- */
.directory { padding-block: var(--space-3xl); }
.directory__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
/* No measure cap: a 60ch cap left-stranded the intro in a 968px column (qa-deai 2026-09-15). */
.directory__intro { max-width: none; }
.directory__head {
  /* S5: heading sits below the intro copy */
  order: 2;
  margin-top: var(--space-lg);
  font-size: var(--text-2xl);
}
.directory__intro { order: 1; }
.directory__head-wrap { display: flex; flex-direction: column; }

.listing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
/* No flex-grow: a growing card let the lone trailing card stretch to full width
   (design director 2026-09-15). Basis per breakpoint; the row centres the remainder. */
.listing-card {
  flex: 0 1 calc((100% - 2 * var(--space-lg)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.listing-card__name {
  text-wrap: pretty; /* pass 3 P26: 8 names ended on one word; balance then split "The / Colony" and "the / Truck" (pass 4) */
  font-size: var(--text-lg);
  margin: 0;
}
.listing-card__location,
.listing-card__rating {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.listing-card__rating { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }
/* flex: 1 on the last block, so spare card height falls below the text, not above it */
.listing-card__desc { margin: 0; font-size: var(--text-sm); color: var(--color-ink); line-height: 1.5; flex: 1; }
.listing-card__contact {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
}
.listing-card__contact a { overflow-wrap: anywhere; }
.listing-card__services {
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  align-content: flex-start; /* wrapped rows stretched chips into tall empty boxes */
}
.listing-card__services li {
  font-size: var(--text-xs);
  color: var(--color-neutral);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.55em;
}

@media (max-width: 60rem) {
  .listing-card { flex-basis: calc(50% - var(--space-lg) / 2); }
}
@media (max-width: 40rem) {
  .listing-card { flex-basis: 100%; }
}
/* Trailing row centred at every breakpoint — never left-flush */
.listing-grid { justify-content: center; }

/* Note line under the cards, not a grid cell. As a dashed cell it stretched to the row
   height: 596px tall and 83% empty at 1366 (design director pass 3, P3). The 19th card
   now centres alone in the last row, which the re-run judged acceptable. */
.listing-note {
  flex: 0 0 100%;
  padding-top: var(--space-md);
  text-align: center;
  text-wrap: balance;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.listing-note p { margin: 0; }
.listing-note p + p { margin-top: var(--space-2xs); }

/* -------------------------------------------------------------------------
   Methodology teaser — S2 hanging head + callout-tip
   ------------------------------------------------------------------------- */
.methodology-teaser { padding-block: var(--space-2xl); }
.methodology-teaser__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }

/* S2 hanging head: label in a left column, heading beside it — used only
   where content is genuinely ordinal/labelled (methodology, hub intros,
   utility pages). */
.hanging-head {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-md);
  align-items: start;
}
.hanging-head__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: 0.3em;
}
/* Pinned to column 2 explicitly: a page with no .hanging-head__tag (a 404,
   or any label-less use) must not let grid auto-placement drop the body
   into the narrow 8rem tag column instead — that squeezed a "Page Not
   Found" h1 into a word-tower one word per line at desktop width. */
.hanging-head__body { grid-column: 2; }
.hanging-head__body h2,
.hanging-head__body h1 { margin-bottom: var(--space-sm); }
@media (max-width: 40rem) {
  .hanging-head { grid-template-columns: 1fr; gap: var(--space-2xs); }
  /* the desktop column-2 pin forced an implicit second column on phones */
  .hanging-head__body { grid-column: 1; }
}

/* -------------------------------------------------------------------------
   Guides discovery rail — two columns + one flagship card
   ------------------------------------------------------------------------- */
.guides-rail { padding-block: var(--space-3xl); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule-2); }
.guides-rail__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.guides-rail__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}
.guides-col__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.guides-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.guides-list a {
  display: block;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-md);
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.guides-list a:hover { color: var(--color-accent); }

.guide-flagship {
  margin-top: var(--space-2xl);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}
.guide-flagship__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.guide-flagship h3 { margin: var(--space-2xs) 0 var(--space-2xs); }
.guide-flagship p { margin: 0 0 var(--space-sm); }

@media (max-width: 60rem) {
  .guides-rail__cols { grid-template-columns: 1fr; gap: var(--space-xl); }
}
@media (max-width: 40rem) { .guide-flagship { padding: var(--space-lg); } }

/* -------------------------------------------------------------------------
   FAQ — conversational, details/summary accordion
   ------------------------------------------------------------------------- */
.faq { padding-block: var(--space-3xl); }
/* On the site axis (--max-w) like every other homepage section; at desktop the
   heading takes a left column so answers keep a readable measure without a void. */
.faq__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
@media (min-width: 60rem) {
  .faq__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }
  /* smaller and balanced: at 2xl in a 301px column it broke into a 4-line tower */
  .faq__inner > h2 { grid-column: 1; grid-row: 1 / span 20; font-size: var(--text-xl); text-wrap: balance; }
  /* Heading stays in view as answers open; the left column sat empty for ~1,400px (pass 3, P15) */
  .faq__inner > h2 { position: sticky; top: 6rem; align-self: start; }
  .faq__inner > .faq-item { grid-column: 2; }
}
.faq-item {
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.faq-item summary {
  cursor: pointer;
  word-spacing: 0.1em;
  list-style: none;
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-item__answer { padding-block: 0 var(--space-md); color: var(--color-ink-2); }
.faq-item .faq-item__answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Closing band (plain — home + article's cta-band share this base)
   ------------------------------------------------------------------------- */
.closing-band {
  padding-block: var(--space-2xl);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
  text-align: center;
}
.closing-band__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }
.closing-band p { max-width: 48ch; margin-inline: auto; margin-bottom: var(--space-lg); font-size: var(--text-lg); text-wrap: balance; }

.cta-band {
  padding-block: var(--space-2xl);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
  text-align: center;
}
.cta-band__text { font-size: var(--text-lg); max-width: 48ch; margin-inline: auto; margin-bottom: var(--space-lg); text-wrap: balance; }
/* .band's outer margin left a plain strip between the CTA band and the footer */
.band.cta-band { margin: 0; }

/* -------------------------------------------------------------------------
   Hub guide index (list of every guide in the hub)
   ------------------------------------------------------------------------- */
.hub-index { list-style: none; margin: var(--space-lg) 0 var(--space-xl); padding: 0; display: flex; flex-direction: column; }
.hub-index li { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.hub-index a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-lg);
}
.hub-index a:hover { color: var(--color-accent); }
.hub-index .hub-index__meta { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); align-self: center; }

/* -------------------------------------------------------------------------
   Related-guides block (articles)
   ------------------------------------------------------------------------- */
.related-guides { margin-block: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); }
.related-guides__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}
/* Stacked list: 3-up cards were 224px wide and wrapped titles to 3-4 lines. */
.related-guides__grid { display: flex; flex-direction: column; gap: var(--space-2xs); }
.related-guides__card {
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.related-guides__card a { color: var(--color-ink); text-decoration: none; font-weight: 600; }
.related-guides__card a:hover { color: var(--color-accent); }
.related-guides__grid { justify-content: flex-start; }
@media (max-width: 40rem) {
  .related-guides__grid { justify-content: center; }
}

/* -------------------------------------------------------------------------
   Editor note (byline block, editor page card)
   ------------------------------------------------------------------------- */
.byline {
  margin: var(--space-lg) auto 0;
  max-width: var(--article-w);
  padding-inline: var(--pad-x);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.byline a { color: var(--color-muted); text-decoration: underline; }
.byline a:hover { color: var(--color-accent); }

.editor-note {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
}
.editor-note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Hero figure (article + hub nested pages — mandatory, no conditionals)
   ------------------------------------------------------------------------- */
/* Sized by height at full width. A max-height on an aspect-ratio box shrank its width and
   left it flush left (design director re-run 2026-09-15, N1); uncapped, 16:7 of a 1920
   viewport pushed body copy to y=1360. */
/* 46vh / 440px: at 56vh the first body line sat below the 900px fold on 19 of 19 guides
   at 1366 (design director pass 3, P13). Hubs keep their own height below. */
.hero-figure {
  margin: 0;
  width: 100%;
  height: min(calc(100vw * 7 / 16), 46vh, 440px);
  overflow: hidden;
  background: var(--color-paper-2);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure--hub { height: min(calc(100vw * 6 / 21), 56vh, 540px); }
@media (max-width: 40rem) { .hero-figure--hub { height: calc(100vw * 9 / 16); } }

/* -------------------------------------------------------------------------
   Article body
   ------------------------------------------------------------------------- */
/* Article head: H1 from the page title, then the byline (DESIGN.md article order). */
.entry-head {
  max-width: var(--article-w);
  margin-inline: auto;
  padding: var(--space-xl) var(--pad-x) var(--space-lg);
}
.entry-head h1 { margin-bottom: var(--space-sm); }
/* 3rem, not the 3.5rem display-s ceiling: at 56px balance isolated "Identification" on
   brown-patch; 3rem left all 19 guides at 2-3 lines with no single-word line
   (qa/css-measurements-2026-09-15.md T2). */
@media (min-width: 40.0625rem) { .entry-head h1 { font-size: 3rem; } }
.entry-head .byline { margin: 0; padding-inline: 0; max-width: none; }

.entry-body { padding-block: var(--space-lg) var(--space-xl); }
.entry-body h1 { font-size: var(--text-display-s); }
/* No dek styling: opening paragraphs run 58-147 words, which made a screen of large
   grey text (design director 2026-09-15). Headings group with the section below. */
.entry-body h2, .wrap--reading h2 { margin-top: var(--space-xl); }
.entry-body h3, .wrap--reading h3 { margin-top: var(--space-lg); }
.entry-body > h2:first-child, .wrap--reading > h2:first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
   Utility pages (about / methodology / editor / contact / privacy)
   ------------------------------------------------------------------------- */
.main--page { padding-block: 0; } /* .wrap--reading already pads; both doubled it */

/* -------------------------------------------------------------------------
   Engine directive classes
   ------------------------------------------------------------------------- */
.stat-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
  justify-content: flex-start;
}
.stat-item { flex: 1 1 10rem; min-width: 0; }
.stat-number {
  display: block;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.stat-label { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }
/* Stat blocks stay left-aligned with the prose on phones. A stray paragraph inside a
   block renders as a full-width footnote, never as a third stat. */
.stat-block > p { flex-basis: 100%; font-size: var(--text-xs); color: var(--color-muted); margin: 0; }

.callout {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-left: 3px solid var(--color-rule);
  border-radius: var(--radius-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout-tip { border-left-color: var(--color-accent); }
.callout-warning { border-left-color: var(--color-clay); }
.callout-note, .callout-summary { border-left-color: var(--color-rule); background: var(--color-paper-3); }
/* A visible kind label: tip and warning were told apart only by a 3px border colour. */
.callout::before {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.callout-tip::before { content: "Tip"; color: var(--color-accent); }
.callout-warning::before { content: "Watch for"; color: var(--color-clay); }
.callout-note::before { content: "Note"; }
/* privacy: the top box restates each section, so it is labelled as a summary (pass 6, N12) */
.callout-summary::before { content: "Summary"; }

.pullquote {
  margin: var(--space-2xl) 0;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-ink);
}
.pullquote p:last-child { margin-bottom: 0; }

.band {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl) var(--pad-x);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.band > :first-child { margin-top: 0; }
.band > :last-child { margin-bottom: 0; }
/* any band-<kind> at minimum keeps the tinted treatment; named kinds vary it */
[class*="band-"] { background: var(--color-paper-2); }
.band-quiet { background: var(--color-paper); border-color: var(--color-rule-2); }

.table-wrap {
  overflow-x: auto;
  margin: var(--space-xl) 0;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  /* Scroll cue: a shade on the right edge that the paper-coloured cover slides over once
     the table is scrolled to its end (grass-types hid 3 of 5 columns with no cue). */
  background:
    linear-gradient(to left, var(--color-paper) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right / 1rem 100% no-repeat scroll;
}
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table-wrap th, .table-wrap td { padding: var(--space-2xs) var(--space-sm); text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.table-wrap thead th {
  font-family: var(--font-display);
  word-spacing: 0.1em;
  font-weight: 600;
  background: var(--color-paper-2);
  color: var(--color-ink);
}

/* -------------------------------------------------------------------------
   Ft5 — statement footer
   ------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule-2);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.foot-stmt__line {
  font-family: var(--font-display);
  word-spacing: 0.1em;
  text-wrap: balance;
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.15;
  max-width: 38ch;
  margin: 0 0 var(--space-lg);
  color: var(--color-ink);
}
.foot-stmt__wordmark {
  font-family: var(--font-display);
  word-spacing: 0.1em;
  font-weight: 600;
  font-size: var(--text-md);
  margin: 0 0 var(--space-lg);
  color: var(--color-ink-2);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule-2);
  margin-bottom: var(--space-md);
}
.foot-links a { display: inline-block; padding-block: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.foot-links a:hover { color: var(--color-accent); }
@media (max-width: 40rem) { .foot-links { column-gap: var(--space-sm); } } /* all five links on one row at 390 */
/* below ~368px that gap still wrapped "Privacy" alone onto a second row (pass 6, N13) */
@media (max-width: 23rem) { .foot-links { column-gap: var(--space-2xs); } }
.foot-copyright { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */
.error-404__home { margin-top: var(--space-xl); }

/* -------------------------------------------------------------------------
   Phone type scale (last in the file so it overrides the class rules above)
   H1 26 > H2 19 > H3 17 > body 16. At 22.4px H2 and H3 matched, and the footer
   statement (28px) and directory heading (28.7px) outranked the page H1 (pass 5,
   F20). Measured on 29 routes: 0 H2 single-word lines or towers at 390, 2 at 360
   (both content), no overflow (qa/css-measurements-phone-scale-2026-09-15.md, K4).
   ------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  h2 { font-size: 1.1875rem; }
  h3 { font-size: 1.0625rem; }
  /* questions measured 0.11px under their own answers (pass 6, N16) */
  .faq-item summary { font-size: 1.0625rem; }
  /* the heading sat 0.75px above the 19 card names under it (pass 6, N3) */
  .directory__head { font-size: 1.375rem; }
  /* at 19px the closing line matched a section H2 (pass 6, N2); 22 stays under H1 26 */
  .foot-stmt__line { font-size: 1.375rem; }
  /* the quote was the largest text in the article body, over H2 and H3 (pass 6, N1) */
  .pullquote { font-size: 1.125rem; }
}