/* =============================================================================
   LandClearingAndExcavation.com

   Positioning is "serious cost research", so the type does the heavy lifting:
   a serif for headings (editorial authority) against a clean sans for body.
   Both are system stacks — zero webfont downloads, which keeps LCP under the
   2.5s target without a font-loading strategy to maintain.
   ============================================================================= */

:root {
  /* ink */
  --ink:      #16180f;
  --ink-2:    #3f4536;
  --ink-3:    #6e7562;
  --ink-4:    #979d8a;

  /* surfaces */
  --bg:       #ffffff;
  --sand:     #f8f7f2;
  --sand-2:   #efeee6;
  --sand-3:   #e3e2d6;
  --line:     #e2e3d9;
  --line-2:   #cbcdbe;

  /* brand */
  --clay:     #a85f24;
  --clay-dk:  #7c4515;
  --clay-lt:  #f7efe5;
  --forest:   #23402a;
  --forest-2: #35583c;
  --forest-lt:#eaf0ea;
  --amber:    #d69a2d;
  --water:    #3f7799;

  --wrap:     78rem;
  --text-w:   43rem;
  --r:        8px;
  --r-lg:     16px;
  --sh:       0 1px 2px rgba(22,24,15,.05), 0 4px 14px rgba(22,24,15,.05);
  --sh-lg:    0 2px 8px rgba(22,24,15,.06), 0 20px 48px rgba(22,24,15,.10);

  --serif:    ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --sans:     ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
/* Set by nav.js while the mobile drawer is open, so the page behind it does
   not scroll along with a touch drag inside the panel. */
body.nav-lock { overflow: hidden; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17.5px/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }

/* ------------------------------------------------------------------- type */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.18;
  letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); margin-top: 2.8rem; }
h3 { font-size: 1.28rem; margin-top: 1.9rem; }
h4 { font-size: 1.08rem; font-family: var(--sans); font-weight: 700; }

p, ul, ol { margin: 0 0 1.2rem; }
li { margin-bottom: .45rem; }

a { color: var(--clay-dk); text-decoration-thickness: 1.5px; text-underline-offset: 2.5px; }
a:hover { color: var(--clay); }

.lede { font-size: 1.22rem; line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.eyebrow { font-family: var(--sans); font-size: .74rem; font-weight: 750;
  letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: .6rem; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.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; }

/* ----------------------------------------------------------------- header */
.site-header { background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-block: .8rem; }

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand picture { display: contents; }
.brand img { display: block; width: 205px; height: auto; }

/* ---------------------------------------------------------- desktop nav */
.main-nav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0;
  align-items: center; flex-wrap: wrap; }
.main-nav > ul > li { position: relative; }
.main-nav a { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none;
  color: var(--ink-2); font-weight: 620; font-size: .95rem; padding: .6rem .85rem;
  border-radius: var(--r); }
.main-nav a:hover { color: var(--clay-dk); background: var(--sand); }
.main-nav a[aria-current="page"] { color: var(--forest); background: var(--forest-lt); }

.nav-cta { background: var(--forest); color: #fff !important; padding: .58rem 1.1rem !important;
  border-radius: 100px; margin-left: .4rem; font-size: .9rem; }
.nav-cta:hover { background: var(--forest-2); color: #fff !important; }

/* Caret on items that carry a mega-panel — purely decorative, so it never
   competes with the link's own accessible name. */
.mega-caret { width: .5rem; height: .5rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  opacity: .55; transition: transform .15s ease; }
.has-mega:hover .mega-caret, .has-mega:focus-within .mega-caret { transform: rotate(225deg) translateY(2px); }

/* Desktop mega-menu: pure CSS, no JS involved. :focus-within means it is fully
   reachable by keyboard — Tab onto any link inside opens the same panel hover
   would, and it closes the moment focus leaves the <li>. */
.mega-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(.4rem);
  min-width: 16.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: .6rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease; z-index: 50; }
.has-mega:hover .mega-panel, .has-mega:focus-within .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-panel ul { list-style: none; margin: 0; padding: 0; }
.mega-panel li { margin: 0; }
.mega-panel li a { display: block; padding: .55rem .7rem; border-radius: var(--r);
  font-size: .89rem; font-weight: 560; color: var(--ink-2); white-space: nowrap; }
.mega-panel li a:hover { background: var(--sand); color: var(--clay-dk); }
.mega-viewall { display: block; margin-top: .3rem; padding: .6rem .7rem !important;
  border-top: 1px solid var(--line); font-size: .85rem !important; font-weight: 700 !important;
  color: var(--clay-dk) !important; }
.mega-viewall:hover { background: var(--clay-lt) !important; }

/* --------------------------------------------------------- mobile toggle */
/* Real button (not the checkbox-hack) for proper aria-expanded state, an
   Escape-key handler and a focus trap — see assets/js/nav.js. Hidden by
   default; only .js shows it, and only under the drawer breakpoint. */
.nav-toggle { display: none; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--r); flex: 0 0 auto; }
.nav-toggle:hover { background: var(--sand); }
.nav-toggle-box { position: relative; display: block; width: 1.35rem; height: 2px;
  background: var(--ink); }
.nav-toggle-box::before, .nav-toggle-box::after { content: ""; position: absolute; left: 0;
  width: 100%; height: 2px; background: var(--ink); transition: transform .18s ease, opacity .18s ease; }
.nav-toggle-box::before { top: -.4rem; }
.nav-toggle-box::after  { top: .4rem; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box::after  { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------- drawer */
.nav-backdrop { position: fixed; inset: 0; background: rgba(16,18,11,.5); z-index: 60;
  opacity: 0; transition: opacity .2s ease; }
.nav-backdrop.is-open { opacity: 1; }

.mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(21rem, 86vw);
  background: #fff; z-index: 61; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--sh-lg);
  overflow-y: auto; }
.mobile-drawer.is-open { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.drawer-head .brand img { width: 148px; }
.drawer-close { width: 2.4rem; height: 2.4rem; border: 0; background: var(--sand);
  border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--ink-2); cursor: pointer; }
.drawer-close:hover { background: var(--sand-3); }

.drawer-nav { padding: .6rem 1.2rem 1.5rem; flex: 1 1 auto; }
.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-list > li { border-bottom: 1px solid var(--line); }
.drawer-list > li > a { display: block; padding: 1rem .2rem; text-decoration: none;
  font-weight: 650; color: var(--ink); font-size: 1.02rem; }
.drawer-divider { border-bottom: none !important; height: .6rem; }

.drawer-toggle { display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem .2rem; background: none; border: 0; cursor: pointer;
  font: 650 1.02rem/1.3 var(--sans); color: var(--ink); text-align: left; }
.chev { width: .55rem; height: .55rem; border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s ease; }
.drawer-toggle[aria-expanded="true"] .chev { transform: rotate(225deg); }

.drawer-sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden;
  transition: max-height .22s ease; }
.drawer-sub.is-open { max-height: 26rem; }
.drawer-sub li { margin: 0; }
.drawer-sub a { display: block; padding: .65rem .2rem .65rem 1rem; text-decoration: none;
  color: var(--ink-2); font-size: .93rem; border-left: 2px solid var(--line); margin-left: .1rem; }
.drawer-sub a:hover { color: var(--clay-dk); border-left-color: var(--clay); }
.drawer-viewall { font-weight: 700 !important; color: var(--clay-dk) !important; }

.drawer-cta { margin-top: 1.3rem; }

/* Locked behind .js so a no-JS visit never hides content behind a control
   that cannot open it — see header.php's inline class swap. The toggle only
   actually turns on inside the max-width:62rem query below; this covers the
   no-JS case at every width. */
.no-js .nav-toggle, .no-js .mobile-drawer, .no-js .nav-backdrop { display: none !important; }

/* -------------------------------------------------------------- crumbs */
.breadcrumbs { background: var(--sand); border-bottom: 1px solid var(--line); font-size: .83rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .6rem 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .4rem; color: var(--line-2); }
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; color: var(--clay-dk); }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 640; }

/* Banner styles removed 2026-08-07 with the banners themselves (header.php).
   .env-banner / .draft-banner / .scheduled-banner no longer render anywhere;
   the status they carried is an HTML comment now. */

/* -------------------------------------------------------------- layout */
main { padding-bottom: 4rem; }
main > * { max-width: var(--text-w); }
main > .full, main > .hero, main > .photo-strip, main > .trust-bar,
main > .card-grid, main > .cost-table-wrap, main > .page-cols { max-width: none; }

/* two-column article layout with a sticky rail */
.page-cols { display: grid; grid-template-columns: minmax(0,1fr) 17rem; gap: 3rem; align-items: start; }
.page-main { min-width: 0; max-width: var(--text-w); }
.page-main > * { max-width: 100%; }
.page-rail { position: sticky; top: 5.25rem; font-size: .9rem; }

/* ================================================================== MEDIA */
.media { margin: 0; position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--sand-2); }
/* <picture> wraps the img on the responsive path, so match on descendant rather
   than child. `display: contents` keeps <picture> out of the layout entirely. */
.media picture { display: contents; }
.media img { display: block; width: 100%; height: auto; aspect-ratio: var(--media-ratio);
  object-fit: cover; }
.media figcaption { font-size: .84rem; color: var(--ink-3); padding: .55rem .1rem 0; line-height: 1.55; }

.media-motif { position: relative; aspect-ratio: var(--media-ratio); border-radius: var(--r);
  overflow: hidden; background: var(--sand-2); }
.media-motif .motif { display: block; width: 100%; height: 100%; }

/* dev-only overlay naming the missing file */
.motif-hint { position: absolute; inset: auto .5rem .5rem .5rem; display: flex;
  flex-direction: column; gap: .15rem; pointer-events: none; }
.motif-hint code { font: 600 .64rem/1.3 var(--mono); background: rgba(255,255,255,.92);
  color: var(--clay-dk); padding: .12rem .35rem; border-radius: 3px; align-self: flex-start;
  word-break: break-all; }
.motif-hint em { font: 500 .62rem/1.35 var(--sans); font-style: normal; color: var(--ink-3);
  background: rgba(255,255,255,.82); padding: .1rem .3rem; border-radius: 3px; align-self: flex-start; }

/* ================================================================== HERO */
.hero { position: relative; margin-bottom: 2.5rem; }

.hero-full { min-height: 30rem; display: grid; }
.hero-full .hero-media, .hero-full .hero-body { grid-area: 1 / 1; }
.hero-full .hero-media .media,
.hero-full .hero-media .media-motif { border-radius: 0; height: 100%; aspect-ratio: auto; }
.hero-full .hero-media .media img { height: 100%; aspect-ratio: auto; }
/* Both children sit in grid-area 1/1, but .media is position:relative and so
   paints in a later layer than a static sibling — which put the image on top of
   the headline and made white-on-image hero text invisible. Position the body
   too so the declared order wins. */
.hero-full .hero-body { position: relative; z-index: 1;
  display: flex; align-items: center; padding-block: 4rem;
  background: linear-gradient(96deg, rgba(18,20,12,.9) 0%, rgba(18,20,12,.72) 48%, rgba(18,20,12,.3) 100%); }
.hero-full .hero-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.hero-full h1 { color: #fff; max-width: 19ch; }
.hero-full .hero-sub { color: #e8eade; font-size: 1.18rem; max-width: 46ch; line-height: 1.6; }
.hero-full .eyebrow { color: var(--amber); }

.hero-compact { display: grid; gap: 2.5rem; align-items: center;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  max-width: var(--wrap); margin-inline: auto; padding: 2.25rem 1.5rem 1rem; }
.hero-compact .hero-body { order: -1; }
.hero-compact h1 { margin-bottom: .55rem; }
.hero-compact .hero-sub { color: var(--ink-2); font-size: 1.12rem; margin-bottom: 0; }
.hero-compact .media, .hero-compact .media-motif { box-shadow: var(--sh-lg); border-radius: var(--r-lg); }

.hero-cta { display: flex; gap: 1.3rem; flex-wrap: wrap; align-items: center; margin-top: 1.7rem; }

/* -------------------------------------------------------------- buttons */
.btn, .qf button { display: inline-block; background: var(--clay); color: #fff; border: 0;
  padding: .82rem 1.7rem; border-radius: var(--r); font: 700 1rem/1.3 var(--sans);
  cursor: pointer; text-decoration: none; box-shadow: var(--sh);
  transition: background .15s ease, transform .15s ease; }
.btn:hover, .qf button:hover { background: var(--clay-dk); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.06rem; }
.btn-block { display: block; width: 100%; text-align: center; }

.btn-ghost { color: #fff; text-decoration: none; font-weight: 650; font-size: .96rem;
  border-bottom: 2px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.btn-ghost:hover { color: #fff; border-bottom-color: #fff; }
.hero-compact .btn-ghost { color: var(--clay-dk); border-bottom-color: var(--line-2); }

/* -------------------------------------------------------------- trust bar */
/* Bleeds to the wrap gutter so it lines up exactly with the .band sections
   below it — two full-width blocks at different widths reads as a mistake. */
.trust-bar { background: var(--forest); color: #dfe7e0;
  margin-inline: -1.5rem; margin-bottom: 0; }
.trust-bar ul { list-style: none; margin: 0 auto; padding: 1.6rem 1.5rem;
  max-width: calc(var(--wrap) - 3rem); display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.trust-bar li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; }
.trust-icon { grid-row: span 2; font-size: 1.35rem; line-height: 1.15; opacity: .9; }
.trust-bar strong { font-size: .96rem; color: #fff; font-family: var(--sans); }
.trust-text { font-size: .86rem; color: #b9c6bc; line-height: 1.5; }

/* ------------------------------------------------------- answer-first / facts */
.answer-first { background: var(--sand); border-left: 4px solid var(--forest);
  padding: 1.25rem 1.45rem; margin: 1.6rem 0; border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.08rem; line-height: 1.65; }
.answer-first p:last-child { margin-bottom: 0; }

/* Scannable stat block — extractable facts near the top of the page, which is
   where the majority of AI-Overview citations are pulled from. */
.key-facts { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem 1.5rem;
  margin: 1.75rem 0; background: #fff; box-shadow: var(--sh); }
.key-facts h2 { margin: 0 0 .9rem; font-size: 1.1rem; font-family: var(--sans);
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.key-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem,1fr));
  gap: 1.1rem 1.5rem; margin: 0; }
.key-facts dt { font-size: .82rem; color: var(--ink-3); margin-bottom: .15rem; }
.key-facts dd { margin: 0; font: 700 1.32rem/1.2 var(--serif); color: var(--forest); }
.key-facts dd small { display: block; font: 400 .78rem/1.4 var(--sans); color: var(--ink-3); margin-top: .2rem; }

/* -------------------------------------------------------------- TOC rail */
.toc { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem;
  background: var(--sand); }
.toc h2 { margin: 0 0 .7rem; font: 750 .74rem/1.3 var(--sans); text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a { display: block; padding: .38rem 0 .38rem 1.5rem; text-decoration: none;
  color: var(--ink-2); font-size: .87rem; line-height: 1.45; position: relative; }
.toc a::before { content: counter(toc); position: absolute; left: 0; top: .42rem;
  font: 700 .7rem/1 var(--mono); color: var(--line-2); }
.toc a:hover { color: var(--clay-dk); }
.toc a:hover::before { color: var(--clay); }

.rail-cta { margin-top: 1.25rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg);
  background: var(--forest); color: #fff; }
.rail-cta p { font-size: .88rem; color: #c7d5ca; margin: 0 0 .8rem; }
.rail-cta strong { display: block; color: #fff; font-family: var(--serif); font-size: 1.08rem;
  margin-bottom: .35rem; }

/* -------------------------------------------------------------- cost table */
.cost-table-wrap { overflow-x: auto; margin: 1.9rem 0; }
.cost-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.cost-table caption { text-align: left; font: 700 1.1rem/1.3 var(--serif); padding-bottom: .65rem; }
.cost-table th, .cost-table td { padding: .8rem .95rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top; }
.cost-table thead th { background: var(--forest); color: #fff; font: 700 .74rem/1.3 var(--sans);
  text-transform: uppercase; letter-spacing: .08em; }
.cost-table tbody th { font-weight: 650; }
.cost-table tbody tr:nth-child(even) { background: var(--sand); }
.cost-table tbody tr:last-child th, .cost-table tbody tr:last-child td { border-bottom: 0; }
.cost-table .basis { color: var(--ink-3); font-size: .84rem; }
/* The unit a range is quoted in ("per acre", "per linear foot"). Secondary to
   the number but load-bearing -- "$25 to $100" means nothing without it. */
.cost-table .cost-unit { display: block; color: var(--ink-3); font-size: .8rem;
  font-weight: 400; }
mark.warn { background: #fbdcdc; color: #8c1f1f; font-weight: 700; padding: .06rem .38rem; border-radius: 3px; }
.freshness { font-size: .87rem; color: var(--ink-3); }

/* Quoted source text — statutes, regulations, contractors in their own words.
   Visually distinct from .answer-first (which is OUR voice) so a reader can tell
   at a glance what we are asserting from what we are citing. */
blockquote { margin: 1.7rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--clay);
  background: #faf8f4; border-radius: 0 var(--r) var(--r) 0; }
blockquote p { font: italic 400 1.06rem/1.6 var(--serif); color: var(--ink-2); }
blockquote p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- cards */
/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a grid
   holding a single live card stretches it across the full width and renders its
   image at ~1200px. Silos fill up one page at a time, so one-card grids are the
   normal state for months — the card must keep its column either way. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1.35rem; margin: 1.9rem 0; list-style: none; padding: 0; }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card:hover { border-color: var(--clay); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.card .media, .card .media-motif { border-radius: 0; }
.card-body { padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.card h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0; font-size: .91rem; color: var(--ink-3); line-height: 1.58; }
.card-meta { margin-top: .7rem !important; font: 700 .72rem/1.3 var(--sans);
  letter-spacing: .07em; text-transform: uppercase; color: var(--clay) !important; }

/* compact link list, no images */
.link-list { list-style: none; padding: 0; margin: 1.5rem 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap: .1rem 2rem; }
.link-list li { margin: 0; border-bottom: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .65rem 0; text-decoration: none; color: var(--ink); font-weight: 560; font-size: .95rem; }
.link-list a:hover { color: var(--clay-dk); }
.link-list .ll-meta { font-size: .78rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- area cards (homepage) */
/* One card per state, city chips inside. Replaces a plain 3-row text list that
   was the visually weakest section on the page next to the photo card grids
   above and below it -- same border/hover/lift language as .card, so it reads
   as part of the same design system rather than a bolted-on list. */
.area-grid { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem,1fr)); gap: 1.4rem; }
.area-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.6rem 1.7rem; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.area-card:hover { border-color: var(--clay); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.area-card-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin-bottom: 1.1rem; padding-bottom: .95rem; border-bottom: 1px solid var(--line); }
.area-card-head h3 { margin: 0; font-size: 1.22rem; }
.area-card-head h3 a { color: var(--ink); text-decoration: none; }
.area-card-head h3 a:hover { color: var(--clay-dk); }
.area-card-count { font-size: .76rem; color: var(--ink-4); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.area-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.area-chips a { display: inline-block; padding: .42rem .85rem; border-radius: 999px;
  background: var(--sand); color: var(--ink-2); text-decoration: none;
  font-size: .87rem; font-weight: 580; transition: background .15s ease, color .15s ease; }
.area-chips a:hover { background: var(--forest-lt); color: var(--forest); }

/* -------------------------------------------------------------- photo strip */
.photo-strip { background: var(--sand); padding-block: 3rem; margin-block: 3.5rem; }
.photo-strip > * { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.photo-strip h2 { margin-top: 0; }
.strip-sub { color: var(--ink-3); }
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.strip-item .media, .strip-item .media-motif { box-shadow: var(--sh); }
.strip-credit { font-size: .8rem; color: var(--ink-3); margin: .55rem 0 0; }

/* -------------------------------------------------------------- chain */
.chain { background: var(--clay-lt); border: 1px solid #ecdcc7; border-radius: var(--r-lg);
  padding: 1.6rem; margin: 3rem 0; }
.chain h2 { margin-top: 0; }
.chain-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.chain-card { flex: 1 1 13rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.15rem; text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease; }
.chain-card:hover { border-color: var(--clay); transform: translateY(-2px); }
.chain-label { display: block; font: 700 .7rem/1.3 var(--sans); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); margin-bottom: .2rem; }
.chain-card strong { font-family: var(--serif); font-size: 1.1rem; color: var(--clay-dk); }

/* -------------------------------------------------------------- author */
.author-box { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.2rem; align-items: start;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.35rem; margin: 3rem 0; }
.author-photo { border-radius: 50%; overflow: hidden; }
.author-photo .media-motif { border-radius: 50%; }
.author-photo .motif-hint { display: none; }
.author-name { margin: 0; font-size: 1.02rem; }
.author-role { margin: .12rem 0 .55rem; font-size: .85rem; color: var(--ink-3); }
.author-bio  { margin: 0 0 .55rem; font-size: .91rem; color: var(--ink-2); }
.author-date { margin: 0; font-size: .8rem; color: var(--ink-3); }
/* Stands in for a headshot until there is one. A monogram reads as a deliberate
   choice; an empty figure reads as a broken image. */
.author-monogram { display: grid; place-items: center; width: 5.5rem; height: 5.5rem;
  margin: 0; border-radius: 50%; background: var(--forest); color: #fff;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; }
.author-editor { margin: 0 0 .55rem; font-size: .83rem; color: var(--ink-2); }

/* -------------------------------------------------------------- author pages */
.author-head { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem;
  align-items: start; margin-bottom: 2.2rem; }
.author-head .author-monogram { width: 7rem; height: 7rem; font-size: 2.1rem; }
.author-head h2 { margin-top: 0; }
.author-card { background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.35rem; margin-bottom: 1.4rem; }
.author-card h3 { margin-top: 0; }
.author-card p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- sources */
/* The reference block. Visually quieter than the FAQ above it -- it is for the
   reader who wants to check us, not for the one skimming for a number. */
.sources { margin: 3rem 0; padding: 1.5rem 1.6rem; background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.sources h2 { margin-top: 0; font-size: 1.25rem; }
.sources > p { font-size: .9rem; color: var(--ink-2); }
.source-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.source-list li { margin-bottom: .85rem; padding-left: 1.05rem; position: relative; }
.source-list li::before { content: "\2197"; position: absolute; left: 0; top: .05rem;
  color: var(--ink-3); font-size: .85rem; }
.source-note { display: block; font-size: .84rem; color: var(--ink-3); margin-top: .12rem; }
.sources .freshness { margin: 1.1rem 0 0; }
/* Inline citation link. Underlined on purpose -- a citation should look like
   one, not like body text that happens to be clickable. */
a.cite { text-decoration: underline; text-underline-offset: .14em; }

/* -------------------------------------------------------------- FAQ */
.faq { margin: 3.2rem 0; }
.faq-item { border-top: 1px solid var(--line); padding-top: 1.15rem; margin-bottom: 1.4rem; }
.faq-item h3 { margin-top: 0; font-size: 1.16rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- quote form */
.quote-form { background: var(--forest); color: #fff; border-radius: var(--r-lg);
  padding: 2rem; margin: 3.2rem 0; box-shadow: var(--sh-lg); }
.quote-form h2 { margin-top: 0; color: #fff; }
.quote-sub { color: #c7d5ca; }
.qf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .95rem; }
.qf label { display: block; margin-bottom: .95rem; }
.qf label span { display: block; font-size: .84rem; font-weight: 650; margin-bottom: .32rem; }
.qf input, .qf textarea { width: 100%; padding: .7rem .78rem; border: 1px solid #517059;
  border-radius: var(--r); font: inherit; font-size: .95rem; background: #fff; color: var(--ink); }
.qf textarea { resize: vertical; }
.qf .hp { position: absolute; left: -9999px; }
.qf-legal { font-size: .77rem; color: #a9bcae; margin: 1rem 0 0; }
.qf-legal a { color: #dfe9e1; }
/* "(optional)" next to a field label — present but visibly secondary, so the
   four required fields still read as the ask. */
.qf label span em { font-style: normal; font-weight: 400; color: #a9bcae; }

/* -------------------------------------------------------------- listings */
.listings-soon { border: 2px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 1.6rem; margin: 2.5rem 0; background: var(--sand); }
.listings-soon h2 { margin-top: 0; }

.service-tabs { background: var(--sand); border-block: 1px solid var(--line); margin-bottom: 2.2rem; }
.service-tabs ul { display: flex; gap: .35rem; list-style: none; margin: 0 auto;
  padding: .65rem 1.5rem; max-width: var(--wrap); overflow-x: auto; scrollbar-width: thin; }
.service-tabs li { margin: 0; flex: 0 0 auto; }
.service-tabs a { display: block; padding: .45rem .9rem; border-radius: 100px; text-decoration: none;
  font: 620 .87rem/1.4 var(--sans); color: var(--ink-2); white-space: nowrap; }
.service-tabs a:hover { background: #fff; color: var(--clay-dk); }
.service-tabs a[aria-current] { background: var(--forest); color: #fff; }

.area-list { columns: 2; column-gap: 2rem; }
.area-list li { break-inside: avoid; }

/* ==================================================== LOCATION PAGES
   State and city hubs. Redesigned 2026-08-07 -- these were the weakest
   template on the site: an H1 on bare white, a ragged card grid and two
   bulleted lists. They now use the same full-bleed hero and banded sections
   as the homepage and service hubs.

   Everything below is scoped to .location-page so none of it can leak into
   the article templates, which share .band and .section-head. */

/* The quote form is injected by footer.php inside the article measure, which
   on a banded page left a wall of white to its right. Give it the full band
   width and its own breathing room. */
.location-page .quote-form { max-width: none; margin-inline: auto; }

/* First band sits directly under the hero -- close the gap the hero's own
   margin would otherwise leave. */
.location-page .loc-band-first { margin-top: -2.5rem; }

/* ---- facts strip ---- */
.loc-facts { list-style: none; margin: 0 0 2.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; }
.loc-facts li { margin: 0; padding: 1.25rem 1.35rem; background: #fff;
  display: flex; flex-direction: column; gap: .28rem; }
.lf-label { font: 700 .7rem/1.3 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; color: var(--clay); }
.lf-value { font: 700 1.32rem/1.15 var(--serif); color: var(--forest); }
.lf-note  { font-size: .8rem; color: var(--ink-3); line-height: 1.45; }

.location-page .loc-lede { margin-bottom: 0; }

/* ---- service cards ---- */
.loc-services { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.loc-service { position: relative; margin: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem 1.45rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.loc-service:hover { border-color: var(--clay); box-shadow: var(--sh-lg); transform: translateY(-2px); }
/* Unlinked cards must not pretend to be interactive. */
.loc-service.is-plain { background: var(--sand); border-style: dashed; }
.loc-service.is-plain:hover { border-color: var(--line); box-shadow: none; transform: none; }
.loc-service h3 { margin: 0 0 .4rem; font-size: 1.06rem; line-height: 1.3; }
.loc-service h3 a { text-decoration: none; color: var(--ink); }
.loc-service h3 a:hover { color: var(--clay-dk); }
.loc-service.is-plain h3 { color: var(--ink-3); }
.loc-service p { margin: 0; font-size: .87rem; color: var(--ink-3); line-height: 1.55; }
.loc-badge { display: inline-block; margin-top: .7rem; padding: .2rem .55rem;
  border-radius: 100px; background: var(--forest-lt); color: var(--forest);
  font: 700 .68rem/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; }

/* ---- service-area tiles ---- */
.loc-areas { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
.loc-areas li { margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: .95rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.loc-areas li.is-hub { background: var(--forest); border-color: var(--forest); }
.loc-areas li.is-hub .la-name { color: #fff; }
.loc-areas li.is-hub .la-county { color: #b7c8bc; }
.la-name   { font-weight: 650; font-size: .97rem; color: var(--ink); }
.la-county { font-size: .79rem; color: var(--ink-4); }

/* ---- metro cards (state hub) ---- */
.loc-metros { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.2rem; }
.loc-metros li { margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem 1.6rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.loc-metros li:hover { border-color: var(--clay); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.loc-metros h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.loc-metros h3 a { text-decoration: none; color: var(--ink); }
.loc-metros h3 a:hover { color: var(--clay-dk); }
.lm-county { margin: 0 0 .9rem; font-size: .82rem; color: var(--ink-4); }
.lm-exurbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lm-exurbs li { margin: 0; padding: .3rem .65rem; border: 0; border-radius: 100px;
  background: var(--sand); font-size: .8rem; color: var(--ink-2); }
.loc-metros li:hover .lm-exurbs li { background: var(--sand-2); }

/* ---- cost links ---- */
.loc-costlinks { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; }
.loc-costlinks li { margin: 0; }
.loc-costlinks a { display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: .85rem 1.05rem; text-decoration: none;
  font-weight: 620; font-size: .93rem; color: var(--ink);
  transition: border-color .15s ease, color .15s ease; }
.loc-costlinks a:hover { border-color: var(--clay); color: var(--clay-dk); }

/* ---- licence lookups (on the forest band) ---- */
.loc-licenses { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.loc-licenses li { margin: 0; }
.loc-licenses a { display: flex; flex-direction: column; gap: .22rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg); padding: 1.15rem 1.3rem; text-decoration: none;
  transition: background .15s ease, border-color .15s ease; }
.loc-licenses a:hover { background: rgba(255,255,255,.11); border-color: var(--amber); }
.ll-type  { font-weight: 680; font-size: 1rem; color: #fff; }
.ll-state { font-size: .82rem; color: #b7c8bc; }

@media (max-width: 40rem) {
  .location-page .loc-band-first { margin-top: -1.5rem; }
  .loc-facts { grid-template-columns: repeat(2, 1fr); }
  .loc-facts li { padding: 1rem; }
}

/* -------------------------------------------------------------- footer */
.footer-top { border-bottom: 1px solid #2b2f22; padding-bottom: 2rem; margin-bottom: 2.4rem;
  display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; align-items: flex-end; justify-content: space-between; }
.footer-brand { display: inline-block; text-decoration: none; flex: 0 0 auto; }
.footer-brand picture { display: contents; }
.footer-brand img { display: block; width: 240px; height: auto; opacity: .92; }
.footer-brand:hover img { opacity: 1; }
.footer-tagline { margin: 0; max-width: 30rem; color: #8b9280; font-size: .92rem; line-height: 1.6; }

.site-footer { background: var(--ink); color: #b0b6a5; margin-top: 4rem;
  padding-block: 3.2rem 1.8rem; font-size: .9rem; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1.9rem 1.6rem; margin-bottom: 2.4rem; }
.footer-col h2 { font: 750 .73rem/1.3 var(--sans); text-transform: uppercase;
  letter-spacing: .11em; color: #fff; margin: 0 0 .85rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .48rem; }
.footer-col a { color: #b0b6a5; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.disclosure { border-top: 1px solid #2b2f22; padding-top: 1.35rem; color: #8b9280; font-size: .84rem; }
.copyright { color: #6d7464; font-size: .79rem; margin: 0; }

@media (max-width: 40rem) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 62rem) {
  .page-cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .page-rail { position: static; order: -1; }
  .toc { background: var(--sand); }

  /* Drawer breakpoint. The plain .main-nav list is the no-JS fallback, so it
     only disappears once .js confirms the hamburger will actually work. */
  .js .main-nav { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .mega-panel { display: none; } /* hover has no meaning on touch; the drawer replaces it */
}
@media (max-width: 56rem) {
  .hero-compact { grid-template-columns: 1fr; gap: 1.4rem; }
  .hero-compact .hero-body { order: 0; }
  .author-box { grid-template-columns: 4rem 1fr; }
  .author-box .author-monogram { width: 4rem; height: 4rem; font-size: 1.25rem; }
  .author-head { grid-template-columns: 1fr; }
  .area-list { columns: 1; }
}
@media (max-width: 40rem) {
  body { font-size: 16.5px; }
  /* Sticky at every width now: the header carries the drawer trigger, and a
     hamburger that scrolls out of reach defeats the point of having one. */
  .brand img { width: 172px; }
  .footer-brand img { width: 208px; }
  .hero-full { min-height: 22rem; }
  .hero-full .hero-body { padding-block: 2.75rem; }
  .quote-form, .chain { padding: 1.25rem; }
  .key-facts { padding: 1.1rem 1.2rem; }
  .mobile-drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================================================================== HOME
   The homepage is a landing page, not an article.

   `main > * { max-width: var(--text-w) }` is right for a cost guide — a 43rem
   measure is comfortable to read. On the homepage it capped every heading and
   paragraph at 43rem inside a 78rem wrap and left-aligned them, so the right
   45% of every text section was empty while the card grids ran full width.
   That mismatch is what read as "unfinished".

   Here, everything spans the wrap and the rhythm comes from alternating bands.
   ========================================================================= */
/* .location-page joined .home here 2026-08-07 when the state and city hubs were
   rebuilt on bands. Without it, main > * caps every band at --text-w and the
   coloured backgrounds stop dead at ~55% of the viewport with a wall of white
   beside them -- which is exactly how the old location pages looked. */
body.home main > *,
body.location-page main > * { max-width: none; }

/* Full-bleed to the wrap edge. Negative margin cancels main's padding, so a
   band's background reaches the gutter on desktop and the screen edge on a
   phone. No 100vw, so no scrollbar overflow. */
.band { margin-inline: -1.5rem; padding: 4.25rem 1.5rem; }
.band + .band { margin-top: 0; }
.band-sand   { background: var(--sand); }
.band-forest { background: var(--forest); color: #cfdcd2; }
.band-forest h2, .band-forest h3, .band-forest strong { color: #fff; }
.band-inner { max-width: calc(var(--wrap) - 3rem); margin-inline: auto; }

/* Section header: eyebrow + heading + one supporting line. */
.section-head { max-width: 44rem; margin-bottom: 2.5rem; }
.section-head h2 { margin-top: 0; margin-bottom: .5rem; }
.section-head p { margin-bottom: 0; color: var(--ink-3); font-size: 1.09rem; line-height: 1.6; }
.band-forest .section-head p { color: #b7c8bc; }

/* -------------------------------------------- opening statement + real figures */
.statement { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3.5rem; align-items: start; }
.statement-lede { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em;
  font-size: clamp(1.42rem, 1.05rem + 1.15vw, 2rem); line-height: 1.34; margin: 0 0 1.1rem; }
.statement-body { color: var(--ink-2); font-size: 1.06rem; margin-bottom: 0; }
.statement-body + .statement-body { margin-top: 1rem; }

.stat-grid { display: grid; gap: 1.6rem; margin: 0; }
.stat { border-left: 3px solid var(--clay); padding-left: 1.1rem; }
.stat-num { display: block; font: 700 clamp(1.5rem, 1.2rem + .9vw, 1.95rem)/1.15 var(--serif);
  color: var(--forest); letter-spacing: -.015em; }
.stat-label { display: block; font-size: .97rem; color: var(--ink-2); margin-top: .3rem; }
.stat-src { display: block; font-size: .78rem; color: var(--ink-4); margin-top: .3rem; }

/* --------------------------------------------- six-cluster price grid (home) */
/* One sourced figure per service the site covers. This is the homepage's job:
   show breadth immediately, not just whichever cluster we published first. */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem; margin: 2.6rem 0 0; list-style: none; padding: 0; }
/* Six figures want 3+3, not the 4+2 that auto-fit lands on at this width. */
@media (min-width: 62rem) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
/* .price-cell is an <a> (the whole card is the click target), so it has to
   shed the default link underline/color itself — otherwise every child span
   inherits an underline that its own explicit color rule does not cancel. */
.price-cell { display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.4rem 1.5rem; margin: 0; text-decoration: none;
  color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.price-cell:hover { border-color: var(--clay); box-shadow: var(--sh); }
.price-cell:hover .pc-service { color: var(--clay-dk); }
.pc-service { display: block; font: 700 .73rem/1.3 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; color: var(--clay); margin-bottom: .6rem; }
.pc-num { display: block; font: 700 1.48rem/1.15 var(--serif); color: var(--forest);
  letter-spacing: -.015em; }
.pc-unit { display: block; font-size: .91rem; color: var(--ink-2); margin-top: .32rem; line-height: 1.5; }
.pc-src { display: block; font-size: .76rem; color: var(--ink-4); margin-top: .6rem; }

/* -------------------------------------------------------- featured guide card */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-lg); }
.feature .media { border-radius: 0; height: 100%; }
.feature .media img { height: 100%; aspect-ratio: auto; min-height: 19rem; }
.feature-body { padding: 2.4rem 2.6rem; display: flex; flex-direction: column;
  justify-content: center; }
.feature-body h3 { margin: .45rem 0 .7rem; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.85rem); }
.feature-body h3 a { text-decoration: none; color: var(--ink); }
.feature-body h3 a:hover { color: var(--clay-dk); }
.feature-body > p { color: var(--ink-2); margin-bottom: 1.3rem; }
.feature-figs { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 0 0 1.5rem;
  padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.feature-figs div { display: flex; flex-direction: column; }
.feature-figs b { font: 700 1.22rem/1.2 var(--serif); color: var(--forest); }
.feature-figs span { font-size: .8rem; color: var(--ink-3); margin-top: .15rem; }

/* ------------------------------------------------------------- method columns */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.2rem; }
.method-step { font: 700 .74rem/1 var(--mono); letter-spacing: .1em; color: var(--amber);
  display: block; margin-bottom: .8rem; }
.method h3 { margin: 0 0 .5rem; font-size: 1.16rem; }
.method p { margin: 0; font-size: .95rem; line-height: 1.65; color: #b7c8bc; }

/* --------------------------------------------------------------- home FAQ grid */
.home .faq { margin: 0; }
.home .faq > h2 { margin-top: 0; }
.home .faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 0 3rem; }
.home .faq-item { border-top: 2px solid var(--line-2); padding-top: 1.2rem; margin-bottom: 2rem; }
.home .faq-item h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.home .faq-answer p { font-size: .96rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ CTA band */
.cta-band { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem; align-items: center; }
.cta-band h2 { margin: 0 0 .6rem; }
.cta-band p { margin: 0; color: #b7c8bc; font-size: 1.06rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center;
  justify-content: flex-end; margin: 0; }
.cta-actions .btn-ghost { align-self: center; }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: #e8ac3d; color: var(--ink); }

@media (max-width: 62rem) {
  .statement, .cta-band { grid-template-columns: 1fr; gap: 2.2rem; }
  /* Stacked: the media no longer has a definite height to fill, so hand the
     sizing back to the aspect ratio or the image collapses to a blank box. */
  .feature { grid-template-columns: 1fr; }
  .feature .media { height: auto; }
  .feature .media img { height: auto; min-height: 0; aspect-ratio: 3/2; }
  .feature-body { padding: 1.8rem; }
  .cta-actions { justify-content: flex-start; }
}
@media (max-width: 40rem) {
  .band { padding-block: 3rem; }
  .section-head { margin-bottom: 1.8rem; }
}

/* .planned list removed 2026-08-07 with the roadmap blocks it styled — the
   homepage "Publishing next" and the silo-index "Coming next". */

/* Trailing "browse everything" link under a homepage band. */
.section-more { margin: 2.2rem 0 0; }
.section-more a { font-weight: 620; font-size: .97rem; }

/* ---------------------------------------------------------------- CALCULATORS
   The widget is a plain GET form and the math runs in PHP (see
   data/calculators.php), so everything here is presentation only. Nothing below
   is required for the calculator to produce a correct answer, which is what lets
   the same markup work inside somebody else's iframe. */
.calc { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  box-shadow: var(--sh-lg); margin: 0 0 2.2rem; overflow: hidden; }
.calc-form { padding: 1.5rem 1.5rem 1.6rem; background: var(--sand); border-bottom: 1px solid var(--line); }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem 1.4rem; margin-bottom: 1.3rem; }
.calc-field { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.calc-field label { font: 650 .82rem/1.3 var(--sans); letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3); display: flex; gap: .5rem; align-items: baseline; }
.calc-opt { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .78rem;
  color: var(--ink-4); }
.calc-field select, .calc-field input[type=number] { width: 100%; font: 400 1rem/1.4 var(--sans);
  color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px;
  padding: .62rem .7rem; -webkit-appearance: none; appearance: none; }
.calc-field select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236e7562' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: .7rem;
  padding-right: 2rem; }
.calc-field select:focus, .calc-field input:focus { outline: 2px solid var(--forest);
  outline-offset: 1px; border-color: var(--forest); }
.calc-num { position: relative; display: block; }
.calc-suffix { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  font-size: .82rem; color: var(--ink-4); pointer-events: none; }
.calc-num input { padding-right: 4.2rem; }

.calc-result { padding: 1.5rem; }
.calc-headline { margin: 0 0 .3rem; display: flex; flex-direction: column; gap: .15rem; }
.calc-headline-label { font: 650 .78rem/1.3 var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.calc-headline strong { font: 700 2.3rem/1.15 var(--serif); color: var(--forest);
  letter-spacing: -.01em; }
.calc-secondary { margin: .1rem 0 1.2rem; font-size: .97rem; color: var(--ink-3); }
.calc-secondary strong { color: var(--ink); }
.calc-lines { margin-top: 1.4rem; font-size: .9rem; }
.calc-lines caption { font-size: 1rem; }
.calc-notes { margin: 1.3rem 0 0; padding-left: 1.15rem; font-size: .93rem; color: var(--ink-3); }
.calc-notes li { margin-bottom: .5rem; line-height: 1.6; }
.calc-basis { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.calc-brand { margin: 1.2rem 0 0; font-size: .88rem; }

.calc-embed-code { background: var(--forest); color: #eaf0ea; border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem; overflow-x: auto; font-size: .82rem; line-height: 1.65; }
.calc-embed-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre; }

/* Busy state, set by calc.js while a recalculation is in flight. Never shown
   without JS, because without JS the page simply reloads. */
.calc.is-busy .calc-result { opacity: .45; transition: opacity .12s; }

@media (max-width: 40rem) {
  .calc-form, .calc-result { padding: 1.15rem; }
  .calc-fields { grid-template-columns: 1fr; }
  .calc-headline strong { font-size: 1.9rem; }
}

/* ── Quote checker ──────────────────────────────────────────────────────────
   /tools/survey-quote-checker/. Shares .calc chrome, adds the per-quote block
   and the scope checklist. Text inputs need the same treatment as the number
   and select controls above, which were the only two types the calculators
   used. */
.calc-field input[type=text] { width: 100%; font: 400 1rem/1.4 var(--sans);
  color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px;
  padding: .62rem .7rem; -webkit-appearance: none; appearance: none; }

.quote-block { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff;
  padding: 1.1rem 1.2rem 1.2rem; margin: 0 0 1.1rem; }
.quote-block legend { font: 650 .8rem/1.3 var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--forest); padding: 0 .45rem; }
.quote-block .calc-fields { margin-bottom: .9rem; }

.quote-scope-label { margin: 0 0 .5rem; font: 650 .82rem/1.3 var(--sans); letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3); }
.quote-scope { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .4rem .9rem; }
.quote-scope li { margin: 0; }
.quote-scope label { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem;
  line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.quote-scope input[type=checkbox] { margin: .18rem 0 0; flex: 0 0 auto; width: 1rem; height: 1rem;
  accent-color: var(--forest); }

@media (max-width: 40rem) {
  .quote-block { padding: .95rem 1rem 1.05rem; }
  .quote-scope { grid-template-columns: 1fr; }
}

/* ── Print ──────────────────────────────────────────────────────────────────
   Turns a calculator or quote-checker result into a sheet you can carry to
   three surveyors. This is the point of it: the tool's job does not end on
   screen, it ends in a conversation with a contractor, and paper survives that
   conversation better than a phone does.

   Everything that cannot be acted on off-screen goes: nav, hero art, forms,
   embed code, author box, related links. What stays is the number, the
   breakdown, the notes and the basis — the basis especially, because a figure
   handed to a surveyor with no source behind it invites exactly the argument
   the sheet exists to prevent. */
@media print {
  @page { margin: 16mm 14mm; }

  html, body { background: #fff !important; color: #000; font-size: 11pt; }

  header, footer, nav, .site-header, .site-footer, .toc, .breadcrumbs,
  .calc-form, .calc-embed-code, .quote-form, .trust-bar, .photo-strip,
  .what-comes-next, .author-box, .media-motif, .hero-media, .silo-index,
  .btn, .skip-link { display: none !important; }

  .calc { border: 1px solid #000; box-shadow: none; border-radius: 0; }
  .calc-result { padding: 0.6cm; }
  .calc-headline strong { font-size: 20pt; color: #000; }
  .calc-basis { border-top: 1px solid #000; }

  h1 { font-size: 18pt; }
  h2 { font-size: 13pt; page-break-after: avoid; }
  h3 { font-size: 11.5pt; page-break-after: avoid; }
  table, figure, ul, ol { page-break-inside: avoid; }
  tr, li { page-break-inside: avoid; }

  a { color: #000; text-decoration: underline; }
  /* Print the destination of real links, so a paper copy is still checkable —
     but not for in-page anchors, which would be noise. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }

  .scope-sheet { display: block !important; page-break-before: always; }
}

/* The scope sheet is a print-first artifact: hidden on screen, because on
   screen the interactive tool is strictly better, and the page is already long
   enough without a second copy of the same checklist. */
.scope-sheet { display: none; }
.scope-sheet table { width: 100%; border-collapse: collapse; margin-top: .4cm; }
.scope-sheet th, .scope-sheet td { border: 1px solid #000; padding: .18cm .22cm;
  text-align: left; vertical-align: top; font-size: 10pt; }
.scope-sheet .sheet-blank { height: 1.1cm; }