/* ---------------------------------------------------------------- tokens */
:root {
  --ink-900: #0c302e;
  --ink-800: #123e3b;
  --ink-700: #265650;
  --ink-600: #3e6861;
  --accent-700: #086c66;
  --accent-600: #087d78;
  --accent-500: #087d78;
  --accent-200: #d9e891;
  --accent-100: #eaf4ef;
  --sand-100: #f2f8f5;
  --clay-600: #087d78;

  --paper: #ffffff;
  --paper-2: #f2f8f5;
  --paper-3: #eaf4ef;
  --line: #d5e5de;
  --line-strong: #98b8ae;

  --text: #123e3b;
  --text-muted: #526c65;
  --text-invert: #ffffff;

  --danger: #a4232c;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 8px;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 12px 38px rgba(18, 62, 59, 0.09);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --measure: 68ch;
  --container: 1120px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}/* ------------------------------------------------------------- base/reset */
*,
*::before,
*::after { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}img,
svg { max-width: 100%; height: auto; }a { color: var(--accent-700); text-decoration: none; }a:hover { text-decoration: underline; }h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 var(--space-3);
  line-height: 1.22;
  color: var(--ink-800);
  font-weight: 700;
  letter-spacing: -0.01em;
}h1, h2 {
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -0.04em;
}
h1 { font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); line-height: 1.08; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.4vw, 2.35rem); }h3 { font-size: 1.2rem; }h4 { font-size: 1.05rem; }h5,
.h5 { font-size: 1rem; }p { margin: 0 0 var(--space-4); }ul,
ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }li { margin-bottom: var(--space-1); }hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }code,
pre { font-family: var(--font-mono); font-size: 0.9em; }:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }* { transition: none !important; animation: none !important; }
}/* ------------------------------------- utility subset (was Bootstrap CDN) */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }.container-fluid { width: 100%; }.row { display: flex; flex-wrap: wrap; margin-inline: calc(-1 * var(--space-3)); }.row > * { padding-inline: var(--space-3); width: 100%; }.g-3 > * { margin-bottom: var(--space-3); }.g-4 > * { margin-bottom: var(--space-4); }.col-lg-4,
.col-lg-8,
.col-md-6 { width: 100%; }
@media (min-width: 768px) {.col-md-6 { width: 50%; }
}
@media (min-width: 992px) {.col-lg-4 { width: 33.3333%; }.col-lg-8 { width: 66.6667%; }
}
@media (min-width: 1200px) {
}.d-grid { display: grid; }.align-items-start { align-items: flex-start; }.h-100 { height: 100%; }.mb-0 { margin-bottom: 0; }.mb-1 { margin-bottom: var(--space-1); }.mb-2 { margin-bottom: var(--space-2); }.mb-3 { margin-bottom: var(--space-3); }.mb-4 { margin-bottom: var(--space-4); }.mt-3 { margin-top: var(--space-3); }.me-0 { margin-right: 0; }.px-0 { padding-inline: 0; }.px-2 { padding-inline: var(--space-2); }.pt-3 { padding-top: var(--space-5); }.pb-5 { padding-bottom: var(--space-7); }.text-danger { color: var(--danger); }.small { font-size: 0.85rem; }.muted { color: var(--text-muted); }.h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); font-weight: 700; }.h3 { font-size: 1.2rem; font-weight: 700; }/* ---------------------------------------------------------------- header */
.site-header { background: var(--paper-2); color: var(--ink-800); }
.site-header a { color: var(--ink-800); }
.site-header a:hover { text-decoration: none; }
.site-nav-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--line-strong); }
.navbar { display: block; }
.site-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.brand-mark { display: block; width: 38px; height: 38px; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-title { font: 2rem / 1 var(--font-display); letter-spacing: -0.06em; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); }
.nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; font-size: 0.88rem; font-weight: 600; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-link:hover { color: var(--accent-700); border-bottom-color: var(--accent-700); }
.nav-cta { border-bottom-color: var(--ink-800); font-weight: 600; }
.nav-cta::after { content: "↗"; margin-left: var(--space-3); }
/* ---------------------------------------------------------------- footer */
footer { background: var(--ink-800); color: var(--text-invert); margin-top: var(--space-8); padding-top: var(--space-7); }
footer a { color: var(--text-invert); text-decoration: underline; text-decoration-color: #ffffff55; text-underline-offset: 4px; }
footer a:hover { text-decoration-color: currentColor; }
footer .section-kicker { color: var(--accent-200); }
footer h2 { color: var(--text-invert); }
.site-footer { padding-bottom: var(--space-6); }
.footer-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--space-8); padding: var(--space-5) 0 var(--space-7); }
.footer-title { font-size: 1.65rem; line-height: 1.3; max-width: 25ch; margin: var(--space-3) 0 0; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.footer-nav-title { font: 0.75rem / 1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-200); margin: 0 0 var(--space-3); }
.footer-nav a { font-size: 0.9rem; line-height: 1.6; padding-block: var(--space-2); }
.footer-policy-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-4) 0 0; font-size: 0.95rem; }
.footer-contact-item { white-space: nowrap; }
.footer-disclosure { border-top: 1px solid #ffffff44; }
.footer-legal { font-size: 0.88rem; color: #cbd1d4; line-height: 1.8; max-width: 90ch; padding: 0 0 var(--space-4); margin: 0; }
.disclosure > summary, .footer-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 60px; padding-block: var(--space-4); font-size: 0.9rem; font-weight: 500; cursor: pointer; list-style: none; }
.disclosure > summary::-webkit-details-marker, .footer-disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after, .footer-disclosure > summary::after { content: "+"; font: 1.4rem / 1 var(--font-mono); flex-shrink: 0; }
.disclosure[open] > summary::after, .footer-disclosure[open] > summary::after { content: "−"; }
.disclosure > summary:hover { color: var(--accent-700); }
.footer-disclosure > summary:hover { color: var(--accent-200); }
.disclosure-content { padding: var(--space-2) 0 var(--space-5); }
.disclosure-content .disclosure-title:not(:first-child) { margin-top: var(--space-5); }
@media (max-width: 991px) {
  .footer-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .footer-intro { grid-column: 1 / -1; }
  .footer-title { max-width: 32ch; }
  .footer-nav a { min-height: 44px; }
}
.section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-700);
  margin-bottom: var(--space-1);
}/* ------------------------------------------------------------ typography */
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-700);
  margin-bottom: var(--space-1);
}.lede { font-size: 1.1rem; color: var(--text-muted); max-width: var(--measure); }.section-copy,
.prose { max-width: var(--measure); }.prose p:last-child { margin-bottom: 0; }
.legal-prose > h2:not(:first-child) { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }.notice {
  background: var(--accent-100);
  border-left: 4px solid var(--accent-600);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--ink-700);
}.notice-danger { background: #fdeced; border-left-color: var(--danger); color: var(--danger); }/* Vertical rhythm for the content sections every page is built from. */
.section { margin-bottom: var(--space-8); }.section > h2 { max-width: 34ch; }.section > .prose,
.section > .section-copy { margin-bottom: var(--space-4); }.section:last-child { margin-bottom: var(--space-5); }/* Plain (non-linked) lists of vocabulary, projects and problems. */
.service-list-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
  padding-left: 1.1rem;
  max-width: var(--measure);
}.service-list-list li { margin: 0; }/* --------------------------------------------------------- skip to main */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink-800);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  box-shadow: var(--shadow);
}.skip-link:focus { left: 0; }/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line-strong);
  padding: var(--space-7) 0;
  margin-bottom: var(--space-7);
}
.hero > * { position: relative; z-index: 1; }
/* A ruled block directly under the hero draws the divider itself, so the hero
   drops its own line: two rules a few pixels apart read as a smudge. */
.hero:has(+ .family-grid),
.hero:has(+ .section-rule) { border-bottom: 0; }
.hero-title { max-width: 22ch; }.hero-lede,
.hero-lead { font-size: 1.15rem; color: var(--text-muted); max-width: var(--measure); }.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }.surface-card,
.search-card,
.home-search-card {
  background: transparent;
  border-top: 1px solid var(--line-strong);
  padding: var(--space-5) 0;
}/* A card is a light surface, so it owns its text colour: without it, a wrapper
   carrying a light text colour made every unstyled descendant (form labels
   above all) white on white. */
.search-card { color: var(--text); }.hero-graphic { display: block; margin: 0 auto var(--space-4); max-width: 320px; }.hero-graphic svg { width: 100%; height: auto; }.hero-graphic-directory { max-width: 300px; }.reading-graphic { display: block; margin: 0 auto; max-width: 340px; }.reading-graphic svg { width: 100%; height: auto; }/* Homepage composition: editorial copy, drawing, then the working search. */
.home-hero {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) 0;
}
.home-hero-intro { min-width: 0; }
.home-hero .hero-title { max-width: 16ch; font-size: clamp(2.65rem, 4.8vw, 4.4rem); }
.home-hero .hero-lede { max-width: 43ch; }
.home-hero .hero-actions { align-items: center; }
.home-hero .cta-secondary { padding-inline: 0; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.home-drawing { min-width: 0; margin: 0; }
.home-drawing img { display: block; width: 100%; height: auto; }
.home-drawing figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-3);
  color: var(--text-muted);
  font: 0.65rem / 1.5 ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-project-search {
  border-top: 2px solid var(--ink-800);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--space-5) 0;
  margin-bottom: var(--space-7);
}
.home-project-search h2 { font-size: 1.65rem; margin-bottom: var(--space-4); }
.home-project-search .home-search-card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.home-search-card .search-field { min-width: 0; }
.home-search-note { font-size: 0.88rem; color: var(--text-muted); margin: 0; }
@media (min-width: 768px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .home-project-search .home-search-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; }
  .home-search-note { grid-column: 1 / -1; }
  .home-search-card .search-button { min-height: 46px; }
}
/* --------------------------------------------------------------- buttons */
.btn,
.btn-primary,
.btn-outline-secondary,
.cta-secondary,
.unlock-button,
.cta-button,
.search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}.btn-primary,
.cta-button,
.search-button,
.unlock-button {
  background: var(--ink-800);
  color: #fff;
}.btn-primary:hover,
.cta-button:hover,
.search-button:hover,
.unlock-button:hover {
  background: var(--accent-700);
  color: #fff;
  text-decoration: none;
}.btn-outline-secondary,
.cta-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-700);
}.btn-outline-secondary:hover,
.cta-secondary:hover { border-color: var(--accent-600); color: var(--accent-700); text-decoration: none; }.btn-sm { min-height: 36px; padding-inline: var(--space-3); font-size: 0.9rem; }.feature-link { font-weight: 600; }/* ----------------------------------------------------------------- cards */
.card-grid { display: grid; gap: var(--space-4); }.card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }.card {
  background: transparent;
  border-top: 1px solid var(--line-strong);
  padding: var(--space-5) 0;
}.card { display: flex; flex-direction: column; gap: var(--space-2); }/* A card whose only content is a destination link reads as part of an index,
   so it does not need a destination-sized box around a single line. */
.card-compact { padding: var(--space-4) 0; }.card-title { font-size: 1.08rem; font-weight: 500; margin: 0; line-height: 1.45; }.card-title a { color: var(--ink-800); }.card-title a:hover { color: var(--accent-700); }.card-copy { margin: 0; color: var(--text-muted); font-size: 0.95rem; }.card-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; color: var(--accent-700); }.long { grid-column: 1 / -1; }/* ------------------------------------------------------- service listings */
.service-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }.family-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }.family-title { margin-bottom: var(--space-1); }.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }/* Chips already sit in a flex row with its own gap, so the link variant's
   inline margin would double the spacing. */
.chip-row .chip-link { margin: 0; }.chip-row li { margin: 0; }.chip {
  display: inline-block;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: 0.82rem;
  color: var(--ink-700);
}.chip-link {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 7px var(--space-3);
  font-size: 0.85rem;
  margin: 0 var(--space-2) var(--space-2) 0;
}/* ------------------------------------------------------------------- CTA */
.cta-block {
  background: var(--ink-800);
  color: var(--text-invert);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  margin: var(--space-7) 0;
}.cta-block h2,
.cta-title { color: var(--text-invert); margin-bottom: var(--space-2); }.cta-copy { color: rgba(242, 247, 248, 0.88); max-width: var(--measure); }.cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }.cta-block .cta-button { background: var(--accent-200); color: var(--ink-900); }.cta-block .cta-button:hover { background: #fff; color: var(--ink-900); }.cta-block .cta-secondary { border-color: rgba(242, 247, 248, 0.5); color: var(--text-invert); }.cta-block .cta-secondary:hover { border-color: #fff; color: #fff; }/* ----------------------------------------------------------- breadcrumbs */
.breadcrumbs { padding: var(--space-4) 0 0; }.breadcrumbs-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--text-muted); }.breadcrumbs-item + .breadcrumbs-item::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }/* ---------------------------------------------------------------- forms */
.search-form { display: grid; gap: var(--space-3); }.search-field { display: grid; gap: var(--space-1); }.search-input,
.form-control {
  width: 100%;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: var(--paper);
}.search-input:focus,
.form-control:focus { border-color: var(--accent-600); outline: 2px solid var(--accent-500); outline-offset: 1px; }textarea.form-control { min-height: 140px; padding: var(--space-3); line-height: 1.6; resize: vertical; }.form-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: var(--space-1); }.form-hint { font-size: 0.85rem; color: var(--text-muted); margin: var(--space-1) 0 0; }.quote-form {
  display: grid;
  gap: var(--space-5);
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  box-shadow: var(--shadow-sm);
}.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }/* align-content keeps a field's rows at their natural height: without it the
   row holding a control stretches to match the tallest field in the grid, and
   a hint under one field made its neighbour's input taller than the rest. */
.form-field { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }.form-actions { display: grid; gap: var(--space-3); justify-items: start; }.form-actions .cta-button { min-width: 220px; }/* Combo picker: an input that suggests places or services as you type. It is a
   plain text field without JavaScript, which is why the service it names is
   resolved from the text server-side as well as from the hidden slug. */
.combo { position: relative; }.combo-input { padding-right: var(--space-8); }.combo-chevron {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}.combo-list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 30;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 288px;
  overflow-y: auto;
}.combo-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}.combo-option:hover,
.combo-option[aria-selected="true"] { background: var(--accent-100); }.combo-option-kind { color: var(--text-muted); font-size: 0.8rem; flex: 0 0 auto; }.combo-empty { padding: var(--space-2) var(--space-3); color: var(--text-muted); font-size: 0.9rem; }/* The reassurance that sits beside the submit button. A visitor about to hand
   over a phone number wants to know who will see it, so this reads as a heading
   rather than as small print. */
.quote-assurance {
  border-left: 4px solid var(--accent-600);
  background: var(--accent-100);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}.quote-assurance-title { font-size: 1.08rem; margin: 0 0 var(--space-1); color: var(--ink-800); }.quote-assurance-copy { margin: 0; color: var(--ink-700); font-size: 0.95rem; }.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }/* -------------------------------------------------- engineer result cards */
.result-row {
  margin: 0 0 var(--space-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}.result-row:last-child { margin-bottom: 0; }.result-row h3 { font-size: 1.02rem; margin-bottom: var(--space-1); }.result-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}.result-name { font-weight: 700; color: var(--ink-800); margin: 0 0 var(--space-1); }.result-location { font-size: 0.88rem; color: var(--ink-600); }.result-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }.result-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; color: var(--accent-700); margin: 0 0 var(--space-1); }.compact-results-layout { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }.compact-results-column { min-width: 0; }.table,
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }.table th,
.table td,
.data-table th,
.data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; }.table th,
.data-table th { background: var(--paper-2); font-weight: 700; color: var(--ink-700); }.advertise-placements { display: block; }.ad-preview { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-5); background: var(--paper-2); }/* The reveal script adds this while the dialog is open; without a rule the page
   behind it kept scrolling. */
body.modal-open { overflow: hidden; }/* --------------------------------------------------------------- modal */
.contact-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 34, 50, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);  z-index: 50;
}.contact-modal-backdrop[hidden] { display: none; }.contact-modal-panel {
  background: var(--paper-2);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(760px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.contact-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 2; background: var(--paper-2); }
.contact-modal-heading { font-size: clamp(1.25rem, 3vw, 1.65rem); margin: 0; }
.contact-modal-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-800); font: 1.8rem / 1 var(--font-sans); cursor: pointer; }
.contact-modal-close:hover { background: var(--paper-3); }
.contact-modal-body { padding: var(--space-5); }
.contact-modal-record { min-height: 80px; }
.contact-profile-shell { display: grid; gap: var(--space-6); }
.contact-profile-hero { display: grid; gap: var(--space-2); }
.contact-profile-title { margin: 0; font: clamp(1.65rem, 4vw, 2.2rem) / 1.15 var(--font-display); letter-spacing: -0.025em; }
.contact-profile-subtitle { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.contact-profile-location { margin: 0; }
.contact-profile-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.contact-profile-badge { border: 1px solid var(--line-strong); padding: 2px var(--space-2); font-size: 0.75rem; color: var(--ink-700); }
.contact-profile-columns { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); align-items: start; }
.contact-profile-column { display: grid; gap: var(--space-3); }
.contact-profile-panel { min-width: 0; border-top: 1px solid var(--ink-800); padding-top: var(--space-4); }
.contact-profile-panel h3 { font: 1.4rem / 1.25 var(--font-display); margin-bottom: var(--space-4); }
.contact-profile-list { display: grid; gap: var(--space-3); margin: 0; }
.contact-profile-row { display: grid; grid-template-columns: minmax(100px, 40%) minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); margin: 0; }
.contact-profile-row-wide { grid-template-columns: 1fr; }
.contact-profile-label { font: 0.7rem / 1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.contact-profile-value { margin: 0; overflow-wrap: anywhere; font-size: 0.92rem; }
.contact-profile-empty { color: var(--text-muted); }
.contact-profile-skeleton { background: linear-gradient(90deg, var(--paper-3), var(--paper-2), var(--paper-3)); border-radius: var(--radius-sm); height: 14px; }
/* Skeleton size modifiers used by the reveal loading state. */
.contact-profile-skeleton.short { width: 45%; }.contact-profile-skeleton.medium { width: 70%; }.contact-profile-loading-shell,
.contact-profile-loading-panel,
.contact-profile-loading-hero,
.contact-profile-loading-columns { display: grid; gap: var(--space-3); }/* --------------------------------------------------------- disclosure */
.disclosure { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--ink-600); border-radius: var(--radius); padding: var(--space-5); margin: var(--space-6) 0; }.disclosure-title { font-size: 0.95rem; margin-bottom: var(--space-2); }.disclosure p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--space-2); }.disclosure p:last-child { margin-bottom: 0; }/* --------------------------------------------------------- sponsor slot */
.engineering-feature { display: block; border-radius: var(--radius); overflow: hidden; }.engineering-feature img { display: block; width: 100%; }

/* What a service family covers, under the family name on the homepage cards
   and on the services index. The name is a taxonomy label, so this is the only
   place a visitor is told which work belongs to it. */
.family-note { margin: var(--space-1) 0 0; max-width: var(--measure); color: var(--text-muted); font-size: 0.92rem; }

/* --------------------------------------------------- editorial details */
.kicker, .section-kicker, .card-kicker, .result-eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.1em; }
.breadcrumbs { padding-top: var(--space-3); }
.breadcrumbs-list { font-size: 0.78rem; }
.family-grid { gap: var(--space-7) var(--space-6); counter-reset: family; }
/* The services index lists full families, each a long service index of its own.
   Side-by-side columns left the shorter families with hundreds of pixels of
   empty space below them and pushed the last row to one side, so the families
   stack full width and their service cards use the width instead. */
.family-stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
/* The homepage shows the same five families as short cards. Flex lets the last
   row share the full width rather than leaving a cell empty beside it. */
.family-cards { display: flex; flex-wrap: wrap; }
.family-cards > * { flex: 1 1 min(320px, 100%); }
/* Four levels across three columns leaves one card alone on a second row. */
.family-pairs { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
/* The locations index is a run of sibling sections rather than one family grid,
   so it opens each block with the same rule the services families get. */
.section-rule { border-top: 1px solid var(--ink-800); padding-top: var(--space-5); }
/* Without the extra air the card rules below read as underlines on the intro
   paragraph rather than as the top of a card row. */
.section-rule > .section-copy + .family-grid,
.section-rule > .section-copy + .card-grid { margin-top: var(--space-5); }
.family-grid > * { min-width: 0; border-top: 1px solid var(--ink-800); padding-top: var(--space-5); counter-increment: family; }
/* The number is the family's place in the index, so it sits in its own badge
   instead of floating above the rule as a bare digit. Leading zeroes come from
   the counter style so the sequence survives a tenth entry. Dark ground and
   light digits, the same pairing the footer uses, so the sequence carries real
   weight next to the light rule and the pale page. */
.family-grid > *::before {
  content: counter(family, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--ink-800);
  border-radius: 8px;
  background: var(--ink-800);
  color: var(--text-invert);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.family-grid > .surface-card > .card-title, .family-title { font: 1.7rem / 1.15 var(--font-display); letter-spacing: -0.025em; }
/* The level titles link into the sections below. Keeping them in ink matches
   the services family titles, and the hover says which one is a link. */
.family-title a { color: var(--ink-800); }
.family-title a:hover { color: var(--accent-700); text-decoration: none; }
.family-grid .chip-row { display: block; margin-top: var(--space-5); }
.family-grid .chip-row li { border-bottom: 1px solid var(--line); }
.family-grid .chip-link { display: block; background: none; border: 0; border-radius: 0; margin: 0; padding: 10px 0; font-size: 0.92rem; color: var(--ink-800); }
.family-grid .chip-link:hover { color: var(--accent-700); }
/* The rest of a family's services, collapsed. The links stay in the document
   for search engines; only the presentation hides them. */
.services-more { margin-top: var(--space-4); }
.services-more > summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--accent-700); }
.services-more > summary:hover { text-decoration: underline; }
.services-more[open] > summary { margin-bottom: var(--space-2); }
.services-more .chip-row { margin-top: var(--space-2); }
/* One label or the other, depending on whether the drawer is open. */
.services-more:not([open]) summary .more-open,
.services-more[open] summary .more-closed { display: none; }
.card-title a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-1); }
.card-title a::after { content: "↗"; flex-shrink: 0; color: var(--accent-700); font-size: 1rem; }
.card-copy { font-size: 0.9rem; }
/* The index fact that goes with a card's prose -- record counts, counties
   covered. Mono so a grid of them can be read down rather than across. */
.card-meta { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text-muted); }
.advertise-placements .result-card { display: block; background: none; border: 0; border-top: 1px solid var(--line); padding: var(--space-5) 0; }
/* The local-context block is the last thing before the engineer listing, so it
   reads as a dark panel: it separates the page's editorial copy from the
   records instead of blending into the next section. */
.section.content-section-contrast {
  background: var(--ink-800);
  color: var(--text-invert);
  border-top: 0;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}
.content-section-contrast h2 { color: var(--text-invert); }
.content-section-contrast .kicker { color: var(--accent-200); }
.content-section-contrast .prose p { color: rgba(242, 247, 248, 0.9); }
.content-section-contrast .chip { background: rgba(255, 255, 255, 0.1); border-color: transparent; color: var(--text-invert); }
.content-section-contrast a { color: var(--text-invert); }
.advertise-placements .result-card h3 { font: 1.5rem / 1.2 var(--font-display); }

.service-list-list { list-style: square; gap: var(--space-3); }
.service-list-list li::marker { color: var(--accent-600); }
.chip { background: var(--paper-3); border: 0; padding: var(--space-1) var(--space-3); }
.cta-block { border-left: 4px solid var(--accent-600); }
.cta-block .cta-button { background: var(--paper-2); color: var(--ink-800); }
.quote-page { display: grid; gap: var(--space-6); padding-top: var(--space-6); }
.quote-page .hero { border: 0; margin: 0; padding: 0; }
.quote-page .hero::after { display: none; }
.quote-page .hero-title { font-size: clamp(2.5rem, 4vw, 3.5rem); padding: 0; }
.quote-page .hero-lede { font-size: 1.05rem; }
.quote-form { border: 0; border-top: 2px solid var(--ink-800); box-shadow: none; max-width: none; }
.quote-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.quote-assurance { background: var(--paper-2); border-left-width: 2px; }
.quote-assurance-title { font-size: 1.3rem; }
.result-row { background: transparent; border: 0; border-top: 1px solid var(--line-strong); padding: var(--space-5) 0; }
.result-row h3 { font: 1.35rem / 1.3 var(--font-display); }
.disclosure { background: none; border: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); padding: 0; }
.disclosure-title { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; }
.disclosure p { max-width: 90ch; }
.hero .search-form { max-width: 680px; margin-top: var(--space-5); }
.hero .search-button { justify-self: start; }
@media (min-width: 992px) {
  .quote-page { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); padding-top: var(--space-7); }
  .quote-page .hero { padding-top: var(--space-4); }
  .content-section { display: grid; grid-template-rows: min-content 1fr; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: var(--space-8); align-content: start; border-top: 1px solid var(--line); padding-top: var(--space-5); margin-bottom: var(--space-7); }
  .content-section > .kicker { grid-column: 1; grid-row: 1; }
  .content-section > h2 { grid-column: 1; grid-row: 2; align-self: start; font-size: 2rem; }
  .content-section > .prose { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .hero + .content-section { border-top: 0; padding-top: 0; }
  /* The listing shows at most RESULT_SAMPLE_SIZE (12) records, split into two
     balanced columns by the renderer; two tracks keep that split on desktop. */
  .compact-results-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 720px) {body { font-size: 15.5px; }.container { padding-inline: var(--space-3); }.container { padding-inline: var(--space-5); }
.brand-title { font-size: 1.5rem; }
.brand-mark { width: 30px; height: 30px; }
.hero { padding: var(--space-6) 0; }
.home-hero { padding: var(--space-6) 0; }
.quote-form { padding: var(--space-5) var(--space-4); }
.quote-form .form-grid { grid-template-columns: 1fr; }
.family-grid { grid-template-columns: 1fr; }

/* 16px keeps iOS Safari from zooming the viewport when a field is focused. */
  .search-input,
.form-control,
textarea.form-control { font-size: 16px; }
.hero-actions .btn,
.hero-actions .cta-button { width: 100%; }.card-grid,
.service-list { grid-template-columns: 1fr; }.result-card { flex-direction: column; align-items: flex-start; }.result-actions { width: 100%; }.result-actions > * { flex: 1 1 auto; justify-content: center; }.contact-modal-header { padding-inline: var(--space-4); }.contact-modal-body { padding: var(--space-5) var(--space-4); }.contact-profile-row { grid-template-columns: 1fr; }.cta-actions .btn,
.cta-actions .cta-button,
.cta-actions .cta-secondary { width: 100%; }.cta-block { border-radius: var(--radius); }
}

@media (max-width: 360px) {
  .container { padding-inline: var(--space-4); }
  .brand-title { font-size: 1.3rem; }
  .brand-mark { width: 26px; height: 26px; }
  .form-actions .cta-button { min-width: 0; width: 100%; }
}

/* ----------------------------------------------- shared quote request */
body.quote-open { overflow: hidden; }
.quote-dialog { width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: var(--space-6); border: 1px solid var(--ink-800); background: var(--paper-2); color: var(--text); box-shadow: var(--shadow-lg); overflow-y: auto; }
.quote-dialog::backdrop { background: rgba(16, 34, 50, 0.65); }
.quote-close { float: right; position: sticky; top: 0; z-index: 2; width: 44px; height: 44px; margin: -12px -12px 0 0; border: 1px solid var(--line-strong); background: var(--paper-2); color: var(--ink-800); font: 1.8rem / 1 var(--font-sans); cursor: pointer; }
.quote-dialog-intro { margin-bottom: var(--space-5); }
/* The success panel replaces the form it belongs to, so the block that
   introduced that form goes with it: the dialog's heading and intro, and the
   standalone page's hero. Stated here as well as in the script, because a
   browser still running a cached copy of the script must not leave two headings
   stacked -- which is exactly what a stale script did. */
.quote-page > .hero:has(+ .quote-form-shell [data-quote-success]:not([hidden])),
.quote-dialog-intro:has(+ .quote-form-shell [data-quote-success]:not([hidden])) { display: none; }
.quote-dialog-intro h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); padding-right: var(--space-6); }
.quote-dialog-intro p { max-width: 48ch; color: var(--text-muted); }
.quote-dialog .quote-form { padding: 0; border: 0; background: none; gap: var(--space-4); }
.quote-form-shell { min-width: 0; }
.quote-form select { padding-right: var(--space-5); }
.quote-form [data-quote-verification]:empty { display: none; }
.quote-consent { margin: 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; }
.quote-phone { margin: 0; font-size: 0.9rem; }
.quote-phone a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.quote-success { border-top: 2px solid var(--ink-800); padding: var(--space-5) 0; }
[data-quote-form][hidden], [data-quote-success][hidden], [data-quote-status][hidden] { display: none; }
.quote-form [data-quote-status] { margin: 0; }
.quote-form button:disabled { opacity: 0.65; cursor: wait; }
@media (max-width: 720px) {
  .quote-dialog { padding: var(--space-5) var(--space-4); }
  .quote-dialog .form-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .quote-dialog .form-actions, .quote-dialog .form-actions .cta-button { width: 100%; }
}

/* ---------------------------------------------------------------- print */
@media print {.site-header,
footer,
.cta-block,
.contact-modal-backdrop,
.quote-dialog,
.nav-cta,
.hero-actions { display: none !important; }body { color: #000; background: #fff; font-size: 11pt; }a { color: #000; text-decoration: underline; }.container { max-width: none; padding: 0; }.card,
.surface-card,
.hero { border: 1px solid #999; box-shadow: none; }
}
/* Coastal Fieldwork: open white space, forest teal, and project line drawings. */
.site-header { background: var(--paper); }
.site-nav-shell { border-bottom: 1px solid var(--line); padding-block: 22px; }
.brand-title { font: 750 1.8rem / 1 var(--font-sans); letter-spacing: -0.045em; }
.brand-accent { color: var(--accent-600); }
.nav-cta { padding: 10px 20px; border: 0; border-radius: var(--radius); color: white !important; background: var(--ink-800); }
.nav-cta:hover { background: var(--accent-700); }
.nav-cta::after { display: none; }
.kicker, .section-kicker, .card-kicker, .result-eyebrow { font-family: var(--font-sans); font-weight: 650; letter-spacing: 0.06em; }
.hero { padding: 50px 0; border-bottom-color: var(--line); }
.hero-title { padding-right: 0; max-width: 23ch; }
.hero::after { display: none; }
.hero-art { display: none; }
.hero-illustrated { padding-right: 0; }
.home-hero { display: block; padding: 58px 0 40px; }
.home-hero .hero-title { max-width: 23ch; font-size: clamp(2.5rem, 4.5vw, 4.35rem); }
.home-hero .hero-lede { max-width: 62ch; font-size: 1.13rem; margin-top: 20px; }
.home-hero .hero-actions { gap: 20px; margin-top: 28px; }
.home-panorama { margin: 0 -16px; position: relative; }
.home-panorama img { display: block; width: 100%; height: clamp(220px, 27vw, 350px); object-fit: cover; }
.home-project-search { position: relative; z-index: 1; margin: -12px 32px 68px; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.home-search-heading { margin-bottom: 22px; }
.home-project-search h2 { font-size: 1.55rem; margin-bottom: 6px; }
.home-search-note { max-width: 85ch; font-size: 0.93rem; }
.home-project-search .home-search-card { padding: 0; border: 0; background: none; }
.home-search-card .search-button { min-height: 50px; background: var(--accent-700); }
.home-section-heading { align-items: flex-start; margin-bottom: 30px; }
.home-section-heading .section-copy { max-width: 64ch; }
.home-index-link { font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; }
.family-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.family-grid > *::before { display: none; }
.family-cards > .surface-card { display: grid; grid-template-columns: 64px minmax(180px, 0.72fr) minmax(0, 1.5fr); gap: 16px 24px; padding: 30px 0; border-color: var(--line); }
.line-icon { color: var(--accent-700); width: 48px; height: 48px; flex-shrink: 0; }
.family-cards .line-icon { grid-column: 1; grid-row: 1 / span 3; padding: 6px; background: var(--paper-2); border-radius: 10px; width: 58px; height: 58px; }
.family-grid > .surface-card > .card-title { grid-column: 2; grid-row: 1; font: 700 1.4rem / 1.25 var(--font-sans); letter-spacing: -0.025em; padding-top: 8px; }
.family-cards .family-note { grid-column: 3; grid-row: 1; font-size: 0.96rem; margin: 0; }
.family-cards .chip-row { grid-column: 3; display: flex; gap: 8px 20px; margin-top: 0; }
.family-cards .chip-row li { border: 0; }
.family-cards .chip-link { padding: 5px 0; font-size: 0.88rem; color: var(--accent-700); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.family-cards .chip-link:hover { text-decoration-color: currentColor; }
.family-cards .services-more { grid-column: 3; margin: 0; }
.services-more > summary { font: 600 0.86rem / 1.6 var(--font-sans); letter-spacing: 0; min-height: 36px; }
.family-title { font: 700 1.9rem / 1.2 var(--font-sans); }
.family-stack > .section { border-color: var(--line); padding-block: 32px 0; }
.family-stack > .section > .line-icon { margin-bottom: 16px; }
.family-stack .family-note { max-width: 82ch; margin-bottom: 26px; font-size: 1rem; }
.card-grid { gap: 16px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card-title { font-weight: 650; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-copy { font-size: 0.94rem; line-height: 1.65; }
.card-meta { font-family: var(--font-sans); font-size: 0.82rem; }
.home-regions { background: var(--paper-2); border-radius: var(--radius-lg); padding: 26px; }
.home-regions .card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 20px 0; }
.home-group-title { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; }
.home-planning-grid { gap: 48px; }
.home-preparation { background: var(--paper-2); border: 0; border-radius: var(--radius-lg); padding: 28px; }
.home-preparation .line-illustration { width: 180px; margin: -10px 0 10px; }
.home-preparation li { border-color: var(--line); }
.cta-block { position: relative; border: 0; overflow: hidden; padding: 40px; }
.cta-art { display: none; }
.cta-block .cta-button { background: var(--accent-200); }
.cta-block .cta-actions > a { min-width: 230px; }
.content-section-contrast { background: var(--paper-2) !important; color: var(--text) !important; }
.content-section-contrast h2 { color: var(--ink-800); }
.content-section-contrast .kicker { color: var(--accent-700); }
.content-section-contrast .prose p, .content-section-contrast a { color: var(--text); }
.content-section-contrast .chip { background: white; color: var(--text); border: 1px solid var(--line); }
.search-input, .form-control { min-height: 50px; border-color: var(--line-strong); }
.quote-form { border: 1px solid var(--line); background: var(--paper-2); }
.quote-form .form-control { background: white; }
.quote-assurance { background: white; border-color: var(--accent-700); }
.result-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: white; }
.result-row h3 { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 650; }
.section-rule { border-top-color: var(--line); padding-top: 32px; }
.footer-nav-title { font-family: var(--font-sans); letter-spacing: 0.06em; }
footer .brand-title { color: white; font-size: 1.6rem; }
footer .brand-accent { color: var(--accent-200); }
.footer-legal { color: #d1e2de; }
@media (min-width: 992px) {
  .hero-illustrated { padding-right: 340px; min-height: 300px; }
  .hero-art { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 280px; color: var(--accent-700); }
  .cta-block { padding-right: 300px; }
  .cta-art { display: block; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 235px; color: #b9d8cc; }
  .cta-art circle { fill: #1d514c; }
}
@media (max-width: 991px) {
  .family-cards > .surface-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px 20px; }
  .family-cards .family-note { grid-column: 2; grid-row: 2; }
  .family-cards .chip-row, .family-cards .services-more { grid-column: 2; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .brand-title { font-size: 1.45rem; }
  .home-hero { padding: 34px 0 32px; }
  .home-hero .hero-title { font-size: clamp(2.25rem, 6vw, 3.5rem); max-width: 20ch; }
  .home-hero .hero-lede { font-size: 1.05rem; }
  .home-hero .hero-actions { gap: 10px; align-items: flex-start; }
  .home-hero .cta-button { padding-inline: 18px; }
  .home-panorama { margin-inline: -24px; }
  .home-panorama img { height: 220px; }
  .home-project-search { margin: -12px 0 48px; padding: 24px; }
  .home-search-heading { margin-bottom: 20px; }
  .home-search-card .search-button { width: 100%; margin-top: 8px; }
  .family-cards > .surface-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-block: 26px; }
  .family-cards .line-icon { width: 44px; height: 44px; padding: 5px; }
  .family-grid > .surface-card > .card-title { font-size: 1.25rem; padding-top: 3px; }
  .family-cards .family-note, .family-cards .chip-row, .family-cards .services-more { grid-column: 1 / -1; }
  .family-cards .chip-link { padding-block: 10px; }
  .home-planning-grid { gap: 24px; }
  .home-preparation, .home-regions { padding: 24px; }
  .cta-block { padding: 28px 24px; }
  .cta-block .cta-actions > a { width: 100%; min-width: 0; }
  .card { padding: 20px; }
  .footer-layout { gap: 28px; }
}
@media (max-width: 360px) {
  .brand-title { font-size: 1.25rem; }
  .home-panorama { margin-inline: -16px; }
  .home-project-search { padding: 20px; }
}

.home-search-heading { display: block; }
.home-section-heading { display: flex; justify-content: space-between; gap: 32px; }
.home-section-heading > div { min-width: 0; }
.home-index-link { flex-shrink: 0; padding-block: 8px; border-bottom: 1px solid var(--line); }
.home-index-link:hover { text-decoration: none; border-color: currentColor; }
.homepage .section { margin-bottom: 72px; }
.home-locations, .home-planning { border-top: 1px solid var(--line); padding-top: 40px; }
.home-coverage { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 32px; }
.home-metros .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-regions .card-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-group-title { margin-bottom: 20px; }
.home-planning > h2 { margin-bottom: 28px; }
.home-planning-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.home-planning .prose { color: var(--text-muted); line-height: 1.75; }
.home-about .prose { color: var(--text-muted); }
.home-preparation ul { list-style: none; padding: 0; margin: 0; }
.home-preparation li { display: grid; gap: 4px; margin-bottom: 20px; }
.home-preparation li span { color: var(--text-muted); font-size: 0.92rem; }
.home-preparation h3 { margin-bottom: 24px; }
@media (max-width: 991px) {
  .home-coverage { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
  .home-metros .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .home-section-heading { display: block; }
  .home-index-link { display: inline-block; margin-top: 12px; }
  .home-coverage, .home-planning-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .homepage .section { margin-bottom: 48px; }
}
.preview-note { background: var(--paper-2); color: var(--ink-700); padding: 10px 20px; font-size: 0.82rem; text-align: center; }
/* A folded screen has two equal local links and a full-width related-site link.
   Keep the navigation container intact instead of redistributing its children
   through display:contents, which tied their widths to the quote column. */
@media (max-width: 900px) {
  .site-nav-shell { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 12px; padding-block: 16px; }
  .site-brand { grid-row: 1; grid-column: 1; gap: 8px; min-width: 0; }
  .site-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-row: 2; grid-column: 1 / -1; gap: 10px; }
  .site-nav .nav-link { justify-content: center; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); font-size: 0.9rem; }
  .site-nav .nav-link:hover { border-color: var(--accent-700); color: var(--accent-700); }
  .site-nav .related-site-link { grid-column: 1 / -1; }
  .site-nav-shell > .nav-cta { grid-row: 1; grid-column: 2; justify-content: center; min-height: 44px; padding: 8px 14px; font-size: 0.85rem; }
}
@media (max-width: 380px) {
  .site-nav-shell .brand-title { font-size: 1.25rem; }
  .site-nav-shell .brand-mark { width: 26px; height: 26px; }
  .site-nav-shell > .nav-cta { padding-inline: 12px; font-size: 0.82rem; }
}