/* Terradyne Group — site shell v3 "field-proven authority".
   Brand-true navy + green, Lexend/Source Sans 3, contour-line motif.
   Copy contract: this file changes presentation only — page copy is gate-locked. */
:root {
  --navy-950: #081c33;
  --navy-900: #0d2848;
  --navy-800: #10345e;
  --blue-700: #1d5ba6;
  --blue-100: #e8f0f9;
  --green-800: #1e5c33;
  --green-700: #26743c;   /* CTA green: 4.5:1+ under white text */
  --green-600: #2e8b47;
  --green-100: #e9f4ec;
  --gold-300: #ffd98a;
  --ink: #16202e;
  --ink-soft: #4a5568;
  --line: #ccd7e0;
  --bg: #ffffff;
  --bg-alt: #e4ebf2;
  --max: 74rem;
  --prose: 46rem;
  --font-display: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.33, 1, .68, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-900); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, .btn, .site-nav, .foot-h, .foot-brand {
  font-family: var(--font-display);
}

/* visible keyboard focus everywhere; gold ring on dark bands */
:focus-visible {
  outline: 3px solid var(--blue-700);
  outline-offset: 2px;
  border-radius: .2rem;
}
.hero :focus-visible, .work-band :focus-visible, .cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-300);
}

/* skip link (visually hidden until focused) */
.skip {
  position: absolute; left: -999px; top: .5rem; z-index: 200;
  background: var(--navy-900); color: #fff; font-weight: 600;
  padding: .6rem 1.1rem; border-radius: .35rem; text-decoration: none;
}
.skip:focus { left: .5rem; color: #fff; }

/* ---------- header (white, sticky, real logo) ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 8px rgba(13, 40, 72, .07);
}
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; padding: .8rem 1.25rem; }
.brand { margin-right: auto; display: flex; align-items: center; }
.brand img { height: 48px; width: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: .1rem .3rem; align-items: center; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 500;
  padding: .6rem .7rem; border-radius: .35rem; border-bottom: 2px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.site-nav a:hover { color: var(--green-800); background: var(--green-100); }
.site-nav a.active { border-bottom-color: var(--green-600); color: var(--green-800); }
.site-nav a.cta {
  background: var(--green-700); color: #fff; font-weight: 600; letter-spacing: .01em;
  padding: .6rem 1.15rem; border-radius: .4rem; margin-left: .4rem;
}
.site-nav a.cta:hover { background: var(--green-800); color: #fff; }
.brand-bar { height: 3px; background: linear-gradient(90deg, var(--green-600), var(--blue-700) 55%, var(--navy-900)); }

/* dropdown menus (CSS-only: hover + keyboard focus) */
.has-menu { position: relative; }
.has-menu .caret { font-size: .7em; opacity: .6; }
.has-menu .menu {
  visibility: hidden; opacity: 0; pointer-events: none;
  position: absolute; left: 0; top: 100%; z-index: 50;
  min-width: 15rem; padding: .5rem 0; background: #fff;
  border: 1px solid var(--line); border-top: 3px solid var(--green-600);
  border-radius: 0 0 .45rem .45rem;
  box-shadow: 0 14px 30px rgba(8, 28, 51, .18);
}
.has-menu:hover .menu, .has-menu:focus-within .menu {
  visibility: visible; opacity: 1; pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .has-menu .menu { transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
  .has-menu:hover .menu, .has-menu:focus-within .menu { transform: translateY(0); }
}
.has-menu .menu a {
  display: block; padding: .48rem 1.1rem; color: var(--ink);
  border: none; font-size: .92rem; white-space: nowrap; border-radius: 0;
}
.has-menu .menu a:hover { background: var(--green-100); color: var(--green-800); }

/* ---- expandable dropdown categories (2026-08-10) ----
   A category with children gets its own link plus a separate disclosure button. The button is
   a real <button>, not a styled span, so it is focusable and announces its state. Submenus are
   in the HTML expanded and collapsed by nav.js, so a no-JS visitor still sees every link. */
.has-menu .menu-row { display: flex; align-items: stretch; }
.has-menu .menu-row > a { flex: 1 1 auto; }
.has-menu .sub-toggle {
  flex: 0 0 auto; width: 2.15rem; border: 0; background: none; cursor: pointer;
  color: var(--ink-600, #6b7280); font-size: .78rem; line-height: 1;
  border-left: 1px solid var(--line);
}
.has-menu .sub-toggle:hover { background: var(--green-100); color: var(--green-800); }
.has-menu .sub-toggle span { display: inline-block; transition: transform .15s var(--ease); }
.has-menu .sub-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.has-menu .submenu { background: var(--bg-soft, #f6f8fa); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.has-menu .submenu a {
  padding: .38rem 1.1rem .38rem 1.9rem; font-size: .86rem; color: var(--ink-600, #4a5568);
}
/* Literal bullet, not a CSS escape — "\2022" needs a single backslash and is one doubled
   backslash away from printing itself on screen. The character is unambiguous. */
.has-menu .submenu a::before { content: "•"; margin-right: .5rem; opacity: .45; }
@media (prefers-reduced-motion: reduce) { .has-menu .sub-toggle span { transition: none; } }
@media (max-width: 900px) {
  .has-menu .menu { display: none !important; }  /* children reachable via division hubs on mobile */
  .has-menu .caret { display: none; }
}

/* ---------- article prose → content cards (verified page bodies) ---------- */
.page { padding: 2.8rem 0 3.5rem; background: var(--bg-alt); }
.prose { max-width: 54rem; }
.prose h1 { font-size: 2.05rem; line-height: 1.15; letter-spacing: -.015em; color: var(--navy-900); margin: 0 0 1rem; }
.prose h3 { font-size: 1.08rem; color: var(--green-800); margin: 1.5rem 0 .4rem; }
.prose p { margin: 0 0 1rem; }
.prose a { font-weight: 500; }
.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.prose li { margin: .3rem 0; }

.page-intro { max-width: var(--prose); margin-bottom: 1.8rem; }
.page-intro p { font-size: 1.12rem; color: var(--ink-soft); }

.content-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: .8rem;
  padding: 1.6rem 1.9rem 1.2rem; margin: 0 0 1.3rem;
  box-shadow: 0 5px 16px rgba(16, 42, 74, .10);
}
.content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(16, 42, 74, .17);
  border-color: #b9c9d6;
}
.content-card > h2 {
  font-size: 1.3rem; letter-spacing: -.01em; color: var(--navy-900); margin: 0 0 .8rem;
  padding: 0 0 .7rem; border-bottom: 2px solid var(--green-100);
}
.content-card p:last-child { margin-bottom: .4rem; }
.faq-card { background: linear-gradient(180deg, var(--blue-100), var(--bg) 26%); }
.faq-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: .6rem;
  padding: 1rem 1.2rem;
  box-shadow: 0 3px 10px rgba(16, 42, 74, .07);
}
.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(16, 42, 74, .15);
}
.faq-item h3 { margin: 0 0 .45rem; }
.faq-item p { margin: 0; font-size: .97rem; color: var(--ink-soft); }
.cta-card { background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: 0 8px 22px rgba(16, 42, 74, .28); }
.cta-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(16, 42, 74, .34); }
.cta-card > h2 { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
.cta-card p { color: #c9d6e4; }
.cta-card a { color: #ffd98a; font-weight: 600; }
.cta-card a:hover { color: #fff; }

/* hover motion: fast, GPU-composited, site-wide */
.content-card, .faq-item, .card, .res-item {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* scroll-driven card reveal (JS adds .reveal at load, .in entering viewport;
   no-JS and reduced-motion users always see everything) */
.reveal {
  opacity: 0; transform: perspective(900px) translateY(26px) rotateX(5deg);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1; transform: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .3s ease;
}
.faq-item.reveal { transition-delay: .06s; }
.faq-item.reveal:nth-child(2) { transition-delay: .14s; }
.faq-item.reveal:nth-child(3) { transition-delay: .22s; }
.faq-item.reveal:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--green-700); color: #fff;
  font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  padding: .8rem 1.5rem; border-radius: .45rem; text-decoration: none;
  margin-right: .6rem;
  transition: background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover {
  background: var(--green-800); color: #fff;
  box-shadow: 0 6px 18px rgba(8, 28, 51, .25);
}
.btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.btn.ghost.dark { color: var(--navy-900); border-color: var(--blue-700); }
.btn.ghost.dark:hover { background: var(--blue-100); color: var(--navy-900); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
}

/* section heading device: survey-tick rule */
.divisions h2::before, .how h2::before {
  content: ""; display: block; width: 3rem; height: 4px; margin-bottom: .8rem;
  background: linear-gradient(90deg, var(--green-600) 60%, var(--gold-300));
  border-radius: 2px;
}

/* ---------- homepage hero (photo + brand overlay + contour texture) ---------- */
.home { padding-bottom: 0; background: var(--bg-alt); }
.hero {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 52px),
    linear-gradient(112deg, rgba(8, 28, 51, .95) 0%, rgba(13, 40, 72, .87) 42%, rgba(17, 60, 52, .68) 76%, rgba(30, 92, 51, .58) 100%),
    url('/assets/img/hero-wide.jpg') center 40% / cover no-repeat;
  color: #fff; padding: 5.5rem 0 0;
}
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 600;
  font-family: var(--font-display); color: var(--gold-300); margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 2px; background: var(--gold-300); flex: none;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 3.7rem); font-weight: 650; line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 1.1rem; max-width: 48rem; text-wrap: balance;
}
.hero .lede {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55;
  max-width: 42rem; color: #dbe6f2; margin: 0 0 1.9rem;
}
.hero-cta { margin: 0 0 3.6rem; }
.identity-chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 2.2rem; padding-top: 1.4rem; padding-bottom: 1.9rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.chip {
  display: block; color: #fff; text-decoration: none; font-size: .95rem; line-height: 1.4;
  border-left: 3px solid var(--gold-300); padding: .3rem 0 .3rem 1rem; border-radius: 0;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.chip:hover { color: #fff; background: rgba(255,255,255,.07); border-left-color: #fff; }
.chip-k {
  display: block; font-family: var(--font-display); font-weight: 600;
  color: var(--gold-300); letter-spacing: .02em; margin: 0 0 .1rem;
}
.chip:hover .chip-k { color: #fff; }

/* hero load sequence (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero .eyebrow { animation: rise .55s var(--ease) both; }
  .hero h1 { animation: rise .55s var(--ease) .08s both; }
  .hero .lede { animation: rise .55s var(--ease) .16s both; }
  .hero .hero-cta { animation: rise .55s var(--ease) .24s both; }
  .hero .identity-chips { animation: rise .55s var(--ease) .32s both; }
}

/* ---------- division cards with photos ---------- */
.divisions { padding: 4.2rem 1.25rem 1rem; }
.divisions h2, .how h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem); font-weight: 650; letter-spacing: -.015em;
  color: var(--navy-900); margin: 0 0 1.6rem;
}
/* ---------- service spectrum (homepage "Everything a site needs, in order") ----------
   Founder redline 2026-08-10: the old three-card "How Terradyne works" strip led with a
   jurisdiction tidbit. Replaced with the full service spectrum as ordered steps, so the
   homepage shows breadth and routes into the real service pages. Numbered via a counter
   rather than <ol> markers so the badge can be styled. */
.how-lede { max-width: 46rem; color: var(--ink-600, #4a5568); margin: -.6rem 0 1.9rem; }
.spectrum { list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; gap: 1.35rem; }
.spectrum > li { position: relative; padding: 0 0 1.35rem 3.6rem;
  border-bottom: 1px solid var(--line); }
.spectrum > li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.spectrum > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .98rem; font-weight: 650;
  color: var(--green-800, #1d5b33); background: var(--green-100, #e6f2ea);
  border: 1px solid var(--green-600, #2e8b57);
}
.spectrum h3 { margin: .18rem 0 .3rem; font-size: 1.06rem; font-weight: 650;
  color: var(--navy-900); }
.spectrum > li > p { margin: 0 0 .55rem; max-width: 44rem; }
.how-foot { margin: 1.9rem 0 0; }
@media (max-width: 560px) {
  .spectrum > li { padding-left: 3rem; }
  .spectrum > li::before { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
}

.card-grid { display: grid; gap: 1.5rem; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .card-grid.two { grid-template-columns: 1fr; } }
.card-grid.three { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  border: 1px solid var(--line); border-radius: .8rem; background: var(--bg);
  overflow: hidden; box-shadow: 0 5px 16px rgba(13, 40, 72, .10);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.card:hover {
  box-shadow: 0 16px 34px rgba(8, 28, 51, .18);
  border-color: var(--green-600);
}
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-4px); }
  .card-img img { transition: transform .35s var(--ease); }
  .card:hover .card-img img { transform: scale(1.04); }
}
.card-img { display: block; overflow: hidden; }
.card-img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: 1.3rem 1.5rem 1.4rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1.24rem; font-weight: 600; letter-spacing: -.01em; }
.card h3 a { color: var(--navy-900); text-decoration: none; }
.card h3 a:hover { color: var(--green-800); text-decoration: underline; }
.card p { margin: 0 0 .7rem; color: var(--ink-soft); }
.card-links { font-size: .92rem; line-height: 1.9; }
.card.plain {
  border: 1px solid var(--line); border-top: 3px solid var(--green-600);
  background: #fff; padding: 1.4rem 1.5rem; border-radius: .6rem;
  box-shadow: 0 4px 12px rgba(13, 40, 72, .08);
}
.card.plain h3 { color: var(--green-800); font-size: 1.06rem; }
.secondary { margin-top: 1.5rem; }

/* ---------- full-bleed work band ---------- */
.work-band {
  margin-top: 4.2rem;
  background:
    linear-gradient(rgba(8, 28, 51, .68), rgba(8, 28, 51, .68)),
    /* 2026-08-10: was 35%, which framed nothing but cloud. The band is very wide and short,
       so cover crops a thin horizontal slice; 35% landed it above the horizon. 55% puts the
       mower, the horizon and the cut field in frame. */
    url('/assets/img/band-hydromulch.jpg') center 55% / cover no-repeat;
  color: #fff; padding: 5.2rem 0; text-align: center;
}
.band-line {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.35;
  max-width: 46rem; margin: 0 auto 1.4rem; text-wrap: balance;
}

/* ---------- how + cta ---------- */
.how { padding: 4.2rem 1.25rem; }
.cta-band {
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--navy-950);
  background-size: 34px 34px, 34px 34px, auto;
  color: #fff; margin-top: 0; padding: 4.4rem 0; text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 650; letter-spacing: -.015em;
  margin: 0 0 .6rem;
}
.cta-band h2::before {
  content: ""; display: block; width: 3rem; height: 4px; margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, var(--green-600) 60%, var(--gold-300));
  border-radius: 2px;
}
.cta-band p { max-width: 38rem; margin: 0 auto 1.2rem; color: #c9d6e4; font-size: 1.08rem; }

/* ---------- request a bid ---------- */
.bid-contact .btn { margin-bottom: .5rem; }

/* ---------- resources ---------- */
.res-item { margin: 0 0 1.1rem; }
.res-title { margin: 0; font-weight: 600; }
.res-meta { font-weight: 400; font-size: .85rem; color: var(--ink-soft); margin-left: .4rem; }
.res-note { margin: .15rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.res-foot { margin-top: 2rem; font-size: .9rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 1rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy-950); color: #c3d2e2; margin-top: 3.5rem;
  font-size: .95rem; border-top: 3px solid var(--green-700);
}
main.home + .site-footer { margin-top: 0; }
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding: 3rem 1.25rem 1.2rem; }
.foot-brand { font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 .4rem; }
.foot-h {
  font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-300); margin: 0 0 .5rem;
}
.site-footer a { color: #c3d2e2; }
.site-footer a:hover { color: #fff; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.14); padding: 1.1rem 1.25rem; }
.foot-legal p { margin: 0; font-size: .85rem; opacity: .8; }

@media (max-width: 640px) {
  .hero { padding-top: 3.4rem; }
  .hero h1 { font-size: 2.05rem; }
  .prose h1 { font-size: 1.65rem; }
  .header-row { padding: .7rem 1rem; }
  .brand img { height: 40px; }
  .band-line { font-size: 1.15rem; }
  .hero-cta .btn { margin-bottom: .6rem; }
}


/* ---------- per-page hero band (photo under the H1) ---------- */
.page-hero { margin: 0 0 1.9rem; border-radius: 12px; overflow: hidden;
  box-shadow: 0 3px 22px rgba(10,20,30,.16); background: #e8eaec; }
.page-hero img { display: block; width: 100%; aspect-ratio: 16 / 6.5;
  object-fit: cover; }
@media (max-width: 700px) { .page-hero img { aspect-ratio: 3 / 2; } }


/* ================================================================
   FACELIFT v4 — "the site line"
   A dashed survey line starts in the hero and runs the page: the
   perimeter Terradyne draws around a site, from permit to closeout.
   ================================================================ */

/* --- hero: taller, two-weight headline, line begins here --- */
.hero.v4 { padding: 6.4rem 0 0; position: relative; }
.hero.v4 h1 { font-size: clamp(2.6rem, 5.6vw, 4.05rem); line-height: 1.02; max-width: 52rem; }
.hero.v4 h1 .h1-lead { display: block; font-weight: 300; letter-spacing: -.015em; opacity: .93; }
.hero.v4 h1 .h1-key  { display: block; font-weight: 700; letter-spacing: -.028em; }
.hero.v4 .lede { max-width: 40rem; }
.hero-rule {
  display: block; width: 100%; max-width: 52rem; height: 1px; margin: 0 0 1.5rem;
  background: linear-gradient(90deg, var(--gold-300) 0 3.5rem, rgba(255,255,255,.28) 3.5rem 100%);
}
.line-start { position: relative; padding-bottom: 3.1rem; }
.line-start::after {
  content: ""; position: absolute; left: 1rem; bottom: 0; width: 2px; height: 2.6rem;
  background: repeating-linear-gradient(to bottom, var(--gold-300) 0 7px, transparent 7px 14px);
}

/* --- the lifecycle rail (signature) --- */
.lifecycle { background: #fff; padding: 4.4rem 0 4.8rem; }
.lifecycle .lc-head { max-width: 44rem; margin: 0 0 3rem; }
.lifecycle h2 {
  font-family: var(--font-display); font-weight: 650; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 3.1vw, 2.4rem); color: var(--navy-900); margin: 0 0 .7rem;
}
.lifecycle .lc-head p { color: var(--ink-soft); font-size: 1.08rem; margin: 0; max-width: 40rem; }
.lc-rail { position: relative; padding-left: 3.4rem; }
.lc-rail::before {
  content: ""; position: absolute; left: 1rem; top: .3rem; bottom: 2.2rem; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--green-600) 0 7px, transparent 7px 14px);
}
.lc-stage { position: relative; padding: 0 0 2.9rem; }
.lc-stage:last-child { padding-bottom: .4rem; }
.lc-stage::before {                       /* survey tick / fence post */
  content: ""; position: absolute; left: -2.85rem; top: .34rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green-600);
  box-shadow: 0 0 0 5px #fff;
}
.lc-when {
  font-family: var(--font-display); font-size: .74rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .17em; color: var(--green-800);
  margin: 0 0 .3rem;
}
.lc-stage h3 {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.62rem);
  font-weight: 600; letter-spacing: -.015em; color: var(--navy-900); margin: 0 0 .5rem;
}
.lc-body { display: grid; grid-template-columns: 1fr minmax(0, 24rem); gap: 1.4rem 2.2rem; align-items: start; }
.lc-body > p { margin: 0 0 .9rem; color: var(--ink-soft); }
.lc-shot { border-radius: .7rem; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(13,40,72,.10); }
.lc-shot img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.lc-links { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lc-links a {
  display: inline-block; font-family: var(--font-display); font-size: .86rem; font-weight: 500;
  color: var(--navy-800); text-decoration: none; background: var(--blue-100);
  border: 1px solid transparent; padding: .34rem .72rem; border-radius: 1.2rem;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.lc-links a:hover { background: var(--green-100); color: var(--green-800); border-color: var(--green-600); }
@media (max-width: 760px) {
  .lc-body { grid-template-columns: 1fr; }
  .lc-shot { max-width: 26rem; }
  .lc-rail { padding-left: 2.5rem; }
  .lc-stage::before { left: -2.05rem; }
}

/* --- proof strip (replaces the generic photo band's caption) --- */
.proof-band { margin-top: 0; }
.proof-band .band-line { max-width: 44rem; }
.proof-kicker {
  font-family: var(--font-display); font-size: .74rem; font-weight: 650; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold-300); margin: 0 auto .9rem; text-align: center;
}

/* ================================================================
   ALL SERVICES — problem-first router + synonym search
   ================================================================ */
.svc-intro { background: var(--navy-950); color: #fff; padding: 3.4rem 0 3.6rem;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px; }
.svc-intro h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 650; letter-spacing: -.022em;
  margin: 0 0 .7rem; color: #fff; }
.svc-intro p { color: #c9d6e4; max-width: 44rem; margin: 0 0 1.7rem; font-size: 1.08rem; }
.svc-search { position: relative; max-width: 34rem; }
.svc-search input {
  width: 100%; font: 500 1.02rem/1.4 var(--font-body); color: var(--ink);
  padding: .85rem 1rem .85rem 2.6rem; border-radius: .5rem;
  border: 2px solid transparent; background: #fff;
}
.svc-search input:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }
.svc-search::before {
  content: ""; position: absolute; left: .95rem; top: 50%; width: 1rem; height: 1rem;
  transform: translateY(-50%);
  background: var(--ink-soft);
  clip-path: path("M6.5 0a6.5 6.5 0 104.03 11.62l3.42 3.42 1.06-1.06-3.42-3.42A6.5 6.5 0 006.5 0zm0 1.5a5 5 0 110 10 5 5 0 010-10z");
}
.svc-hint { font-size: .88rem; color: #9fb3c8; margin: .6rem 0 0; }

.problems { padding: 3.4rem 0 1rem; }
.problems h2, .svc-all h2 { font-family: var(--font-display); font-weight: 650; color: var(--navy-900);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -.018em; margin: 0 0 .5rem; }
.problems > .wrap > p, .svc-all > .wrap > p { color: var(--ink-soft); margin: 0 0 1.7rem; max-width: 44rem; }
.prob-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.prob {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green-600);
  border-radius: .5rem; padding: 1.05rem 1.2rem 1.1rem;
  box-shadow: 0 3px 10px rgba(13,40,72,.07);
}
.prob-q { font-family: var(--font-display); font-weight: 600; color: var(--navy-900);
  font-size: 1.03rem; margin: 0 0 .55rem; }
.prob-q::before { content: "\201C"; color: var(--green-600); font-size: 1.5em; line-height: 0;
  vertical-align: -.22em; margin-right: .12em; }
.prob ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.prob ul a { font-size: .87rem; text-decoration: none; color: var(--navy-800);
  background: var(--blue-100); padding: .3rem .65rem; border-radius: 1.1rem; }
.prob ul a:hover { background: var(--green-100); color: var(--green-800); }

.svc-all { padding: 2.6rem 0 3.6rem; }
.svc-fam { margin: 0 0 2.2rem; }
.svc-fam-h {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin: 0 0 1.1rem;
}
.svc-fam-h h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 650;
  letter-spacing: .01em; color: var(--navy-900); margin: 0; }
.svc-fam-h .div-tag { font-size: .72rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-800); font-family: var(--font-display); }
.svc-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.svc {
  display: flex; gap: .85rem; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: .55rem; padding: .7rem .8rem;
  text-decoration: none; color: inherit;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.svc:hover { border-color: var(--green-600); box-shadow: 0 8px 20px rgba(8,28,51,.13); color: inherit; }
@media (prefers-reduced-motion: no-preference) { .svc:hover { transform: translateY(-2px); } }
.svc-thumb { flex: 0 0 4.3rem; height: 3.4rem; border-radius: .35rem; overflow: hidden;
  background: var(--blue-100); }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.svc-thumb.none { display: flex; align-items: center; justify-content: center; }
.svc-thumb.none::after { content: ""; width: 1.5rem; height: 2px; background: var(--line); }
.svc-txt { min-width: 0; }
.svc-name { font-family: var(--font-display); font-weight: 600; font-size: .97rem;
  color: var(--navy-900); line-height: 1.28; display: block; }
.svc:hover .svc-name { color: var(--green-800); }
.svc-also { font-size: .8rem; color: var(--ink-soft); margin: .18rem 0 0; line-height: 1.35; }
.svc-empty { display: none; padding: 1.4rem 0; color: var(--ink-soft); }
.is-hidden { display: none !important; }

/* card chips (division cards) — RESTORED 2026-08-02: these rules previously lived as unowned
   hand-evolution after this block and were destroyed by the old strip-to-EOF regex below.
   Now owned here. */
.card-chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: .65rem 0 0; padding: 0; }
.card-chips a { display: inline-block; font-family: var(--font-display); font-size: .82rem; font-weight: 500;
  color: var(--navy-800); text-decoration: none; background: var(--blue-100);
  padding: .3rem .68rem; border-radius: 1.2rem; border: 1px solid transparent;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
.card-chips a:hover { background: var(--green-100); color: var(--green-800); border-color: var(--green-600); }
/* ===== END FACELIFT v4 ===== */

/* ===== SERVICES BOARD v5 (gen_services_board.py) ===== */
main.services-page.sb{background:var(--bg-alt)}
.sb-wrap{max-width:var(--max);margin:0 auto;padding:0 1.2rem}
.sb-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---- band 1: console ---- */
.sb-console{background:var(--navy-950);color:#fff;padding:2.1rem 0 1.5rem;position:relative}
.sb-console:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
 background:linear-gradient(90deg,var(--green-600) 0 25%,var(--blue-700) 25% 50%,var(--gold-300) 50% 52%,transparent 52%)}
.sb-eyebrow{font-family:var(--font-display);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300);display:flex;gap:.55rem;flex-wrap:wrap}
.sb-eyebrow .sb-dot{color:#56718e}
.sb-console h1{font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.08;margin:.4rem 0 .25rem;color:#fff}
.sb-console h1 b{font-weight:700}
.sb-lede{color:#c8d6e6;font-size:.95rem;max-width:56ch;margin:0}
.sb-cbar{display:flex;gap:1rem;margin-top:1.05rem;flex-wrap:wrap;align-items:flex-start}
.sb-searchwrap{flex:1;min-width:280px;position:relative;max-width:34rem}
.sb-searchbox{display:flex;align-items:center;background:#fff;border:2px solid var(--green-600);padding:.5rem .75rem;gap:.55rem}
.sb-searchbox.alt{border-color:var(--blue-700);max-width:22rem}
.sb-mag{width:15px;height:15px;color:var(--ink-soft);flex:none}
.sb-searchbox input{border:0;outline:0;flex:1;font:inherit;font-size:.95rem;color:var(--ink);background:transparent;min-width:0}
.sb-key{font-family:var(--font-display);font-size:.62rem;border:1px solid #b9c5d2;color:#7a8798;padding:.08rem .42rem;border-radius:3px}
.sb-sugg{position:absolute;z-index:30;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:#fff;border:1px solid var(--navy-900);border-top:0;box-shadow:0 18px 30px rgba(8,28,51,.35);color:var(--ink);max-height:20rem;overflow:auto}
.sb-sugg li{padding:.5rem .8rem;border-top:1px dotted var(--line);cursor:pointer}
.sb-sugg li b{display:block;font-weight:600;color:var(--navy-800);font-size:.9rem}
.sb-sugg li span{display:block;font-size:.72rem;color:var(--ink-soft)}
.sb-sugg li.on,.sb-sugg li:hover{background:var(--green-100);border-left:3px solid var(--green-600);padding-left:calc(.8rem - 3px)}
.sb-findwrap .sb-sugg{position:absolute;max-width:22rem}
.sb-tallies{display:flex;gap:1.15rem;flex-wrap:wrap;padding-top:.3rem}
.sb-tally b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1}
.sb-tally i{display:block;font-style:normal;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#9fb2c8}
.sb-tally.t-s b{color:var(--gold-300)}.sb-tally.t-e b{color:#6fd08c}.sb-tally.t-m b{color:#8ab8f0}.sb-tally.t-lc b{color:#fff}
.sb-count{min-height:1.2rem;font-size:.8rem;color:var(--gold-300);margin-top:.5rem;font-family:var(--font-display);letter-spacing:.04em}
.sb-chips{display:flex;gap:.45rem;margin-top:.55rem;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:thin}
.sb-chip{flex:none;font:inherit;font-size:.8rem;color:#dfe9f4;background:transparent;border:1px solid #335072;padding:.3rem .75rem;border-radius:99px;white-space:nowrap;cursor:pointer}
.sb-chip:before{content:"\201C";color:var(--green-600);font-weight:700;margin-right:.1rem}
.sb-chip:after{content:"\201D";color:var(--green-600);font-weight:700;margin-left:.1rem}
.sb-chip:hover{border-color:var(--green-600);color:#fff}
/* ---- band 2: board ---- */
.sb-board{padding:2.4rem 0 2.8rem}
.sb-bhead h2{font-family:var(--font-display);font-weight:700;color:var(--navy-950);font-size:1.35rem;margin:0}
.sb-bhead p{color:var(--ink-soft);font-size:.92rem;margin:.25rem 0 1.2rem;max-width:64ch}
/* ---- hero: THE REAL SHEET ---- */
.sb-hero{background:var(--navy-950)}
.sh-stage{background:linear-gradient(180deg,#7e8a99,#67737f);padding:1.6rem 1.2rem}
.sh-paper{position:relative;max-width:66rem;margin:0 auto;background:#fdfdfb;box-shadow:0 16px 44px rgba(8,28,51,.5)}
.sh-paper svg{display:block;width:100%}
.zn{cursor:pointer;outline:none}
.zn image{filter:url(#shDuo);opacity:.88}
.zn.lit image,.zn:hover image{filter:none;opacity:1}
.zn .zn-edge{fill:none;stroke:#0d2848;stroke-width:1.2}
.zn.lit .zn-edge,.zn:hover .zn-edge{stroke:var(--green-600);stroke-width:3}
.zn.k-glow .zn-edge{stroke:var(--gold-600);stroke-width:3}
.zn:focus-visible .zn-edge{stroke:var(--gold-300);stroke-width:3.5}
.sh-lbl{font-size:9px;letter-spacing:.12em;fill:#3d4a5c}
.sh-kn circle{fill:#081c33;stroke:#ffd98a;stroke-width:1.6}
.sh-kn text{font-size:10px;font-weight:600;fill:#ffd98a}
.sh-chips{position:absolute;z-index:8;min-width:13rem;max-width:17rem;background:#fff;border:1.5px solid var(--green-800);box-shadow:0 12px 26px rgba(8,28,51,.4);padding:.55rem .7rem;transform:translateX(-50%)}
.sh-chips b{display:block;font-family:var(--font-display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-800);margin-bottom:.2rem}
.sh-chips a{display:block;font-size:.82rem;font-weight:600;color:var(--navy-800);text-decoration:none;padding:.12rem 0;border-bottom:1px dotted var(--line)}
.sh-chips a:last-child{border-bottom:0}
.sh-chips a:hover{color:var(--green-700);text-decoration:underline}
.sh-loupe{position:absolute;z-index:7;width:140px;height:140px;border-radius:50%;overflow:hidden;border:4px solid #0d2848;box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 0 0 2px var(--gold-300);pointer-events:none;opacity:0;background:#fdfdfb}
.sb-herobar{max-width:var(--max);margin:0 auto;padding:.65rem 1.2rem .9rem;display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap}
.sb-herocap{color:#9fb2c8;font-size:.74rem;font-style:italic;margin:0;flex:1 1 16rem;padding-top:.15rem}
.sb-plan{width:100%;display:block}
/* ---- the permit line ---- */
.sb-pline{background:#fff;border-top:1px solid var(--line);padding:2rem 0 2.2rem}
.sb-pline h2{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--navy-950);margin:0}
.pl-intro{color:var(--ink-soft);font-size:.9rem;max-width:70ch;margin:.25rem 0 1.2rem}
.pl-track{position:relative;height:66px}
.pl-dash{position:absolute;left:2%;right:2%;top:30px;border-top:3px dashed var(--navy-950)}
.pl-st{position:absolute;top:0;transform:translateX(-50%);background:none;border:0;cursor:pointer;text-align:center;font-family:var(--font-display);padding:0}
.pl-st i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--navy-950);margin:19px auto 0}
.pl-st.on i{background:var(--green-600);box-shadow:0 0 0 5px var(--green-100)}
.pl-st b{display:block;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-950);margin-top:.3rem;white-space:nowrap}
.pl-st.on:before{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid var(--gold-600)}
.pl-panel{display:grid;grid-template-columns:7fr 5fr;border:1.5px solid var(--navy-950);margin-top:.6rem;min-height:250px}
.pl-panel figure{position:relative;margin:0;background:#000;overflow:hidden}
.pl-panel img{width:100%;height:100%;object-fit:cover;display:block;opacity:.94}
.pl-panel figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(8,28,51,.85);color:#fff;font-family:var(--font-display);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem}
.pl-svcs{background:var(--navy-950);color:#fff;padding:1rem 1.2rem}
.pl-k{font-family:var(--font-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.pl-svcs h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin:.15rem 0 .1rem}
.pl-blurb{color:#c8d6e6;font-size:.85rem;margin:0 0 .5rem}
.pl-svcs a{display:block;color:#dfe9f4;font-size:.86rem;text-decoration:none;padding:.15rem 0;border-bottom:1px dotted rgba(51,80,114,.45)}
.pl-svcs a:before{content:"— ";color:var(--green-600)}
.pl-svcs a:hover{color:#fff;text-decoration:underline}
.pl-more{display:block;font-size:.72rem;color:#9fb2c8;font-style:italic;margin-top:.4rem}
body[data-plstage="1"] .sb-r:not([data-stage="1"]),body[data-plstage="2"] .sb-r:not([data-stage="2"]),
body[data-plstage="3"] .sb-r:not([data-stage="3"]),body[data-plstage="4"] .sb-r:not([data-stage="4"]){opacity:.45}
body[data-plstage] .sb-r{transition:opacity .2s}
.sb-kn{position:absolute;z-index:6;width:24px;height:24px;transform:translate(-50%,-50%);background:var(--navy-950);color:var(--gold-300);border:2px solid var(--gold-300);border-radius:50%;font-family:var(--font-display);font-weight:600;font-size:.7rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4);padding:0}
.sb-kn.g{background:var(--green-800);border-color:#bfe8cd;color:#fff}
.sb-kn.hl,.sb-kn:hover{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sb-legend{color:#fff;display:flex;flex-wrap:wrap;gap:.1rem .9rem;flex:2 1 30rem}
.sb-li{display:flex;gap:.5rem;align-items:baseline;background:transparent;border:0;color:inherit;font:inherit;font-size:.72rem;text-align:left;cursor:pointer;padding:.1rem .2rem}
.sb-li b{font-family:var(--font-display);color:var(--gold-300);font-weight:600;font-size:.64rem}
.sb-li span{color:#c8d6e6}
.sb-li.hl span,.sb-li:hover span{color:#fff;text-decoration:underline}
.sb-tree{background:#fff;border:1px solid var(--line);padding:1rem 1.25rem 1.4rem;box-shadow:0 5px 16px rgba(8,28,51,.08)}
@media (min-width: 1100px){.sb-tree.wide .sb-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sb-divh{display:flex;align-items:baseline;gap:.6rem;margin:1.15rem 0 .3rem;padding-bottom:.28rem;border-bottom:2px solid var(--navy-950)}
.sb-divh:first-child{margin-top:0}
.sb-dk{width:.65rem;height:.65rem;flex:none;transform:translateY(1px)}
.sb-dn{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--navy-950);text-decoration:none}
.sb-dn:hover{color:var(--green-700)}
.sb-dct{margin-left:auto;font-family:var(--font-display);font-size:.64rem;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:.3rem}
.sb-kref{width:16px;height:16px;border-radius:50%;border:1px solid var(--gold-600);color:var(--gold-600);background:transparent;font-family:var(--font-display);font-size:.56rem;line-height:1;cursor:pointer;padding:0}
.sb-kref.hl,.sb-kref:hover{background:var(--gold-300);color:var(--navy-950)}
.sb-fam{margin:.45rem 0;padding:.15rem .4rem;border-left:3px solid transparent}
.sb-fam.k-hl{background:var(--green-100);border-left-color:var(--green-600)}
.sb-famh{display:block;font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);margin:.4rem 0 .15rem}
.sb-famh.link{text-decoration:none}
.sb-famh.link:hover{color:var(--green-800);text-decoration:underline}
.sb-famh .sb-go{margin-left:.3rem}
.sb-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.05rem 1.5rem;align-items:start}
.sb-r{border-bottom:1px dotted var(--line)}
.sb-r a{display:block;padding:.26rem 0;text-decoration:none}
.sb-nm{color:var(--navy-800);font-weight:600;font-size:.87rem;text-wrap:balance}
.sb-r a:hover .sb-nm{color:var(--green-700);text-decoration:underline}
.sb-cw{display:block;font-size:.7rem;font-style:italic;color:var(--green-700)}
.sb-cw:before{content:"aka: ";color:var(--ink-soft);font-style:normal;font-size:.64rem}
.sb-fam[data-fam="__LC__"] .sb-cw:before,.sb-fam[data-div="LC"] .sb-cw:before{content:""}
.sb-lcmore{font-size:.8rem;color:var(--ink-soft);margin:.5rem 0 0}
.sb-empty{background:var(--blue-100);border-left:3px solid var(--blue-700);padding:.7rem .9rem;font-size:.86rem}
.off{display:none!important}
/* ---- band 3: territory ---- */
.sb-terr{background:#fff;border-top:1px solid var(--line);padding:2.4rem 0 2.6rem}
.sb-thead h2{font-family:var(--font-display);font-weight:700;color:var(--navy-950);font-size:1.35rem;margin:0}
.sb-cov{color:var(--ink);font-size:.95rem;margin:.3rem 0 0;max-width:62ch;font-weight:600}
.sb-tsub{color:var(--ink-soft);font-size:.86rem;margin:.2rem 0 1rem;max-width:66ch}
.sb-findwrap{position:relative;max-width:22rem;margin:.4rem 0 1.1rem}
.sb-tgrid{display:grid;grid-template-columns:11fr 8fr;gap:1.6rem;align-items:start}
.sb-map{position:relative;border:1px solid var(--line);background:#f2f6f9}
.sb-map svg{width:100%;display:block}
.sb-lakes ellipse{fill:#a8cbe6}
.sb-roads polyline{fill:none;stroke:#d9b25e;stroke-width:2.2}
.sb-rlbl text{font-family:var(--font-display);font-size:8px;fill:#8a7433;letter-spacing:.06em}
.sb-cty path{fill:#fff;stroke:#9fb2c4;stroke-width:1.4;transition:fill .15s}
.sb-cty.core path{fill:var(--green-100);stroke:var(--green-800);stroke-width:2}
.sb-cty text{font-family:var(--font-display);font-size:9px;letter-spacing:.1em;fill:var(--ink-soft);text-anchor:middle;pointer-events:none}
.sb-cty.core text{fill:var(--green-800);font-weight:600}
.sb-cty.on path,.sb-cty:hover path{fill:#dcebf7}
.sb-cty.core.on path,.sb-cty.core:hover path{fill:#d3ecd9}
.sb-cty{cursor:pointer;outline-offset:2px}
.sb-mk{position:absolute;z-index:5;width:11px;height:11px;transform:translate(-50%,-50%);border-radius:50%;background:var(--navy-800);border:2px solid #fff;box-shadow:0 1px 4px rgba(8,28,51,.4);cursor:pointer;padding:0}
.sb-mk.b{background:var(--green-700);width:13px;height:13px}
.sb-mk.p{background:var(--gold-300);border-color:#081c33}
.sb-mk.b.p{background:var(--green-700);border-color:var(--gold-300);border-width:2.5px}
.sb-mk:hover,.sb-mk.pulse{transform:translate(-50%,-50%) scale(1.5)}
.sb-pop{position:absolute;z-index:9;min-width:12rem;max-width:16rem;background:#fff;border:1.5px solid var(--navy-900);box-shadow:0 12px 26px rgba(8,28,51,.3);padding:.6rem .75rem .55rem;font-size:.82rem}
.sb-pop b{display:block;font-family:var(--font-display);color:var(--navy-950);font-size:.92rem}
.sb-pop #popCounty{display:block;color:var(--ink-soft);font-size:.72rem;margin:.05rem 0 .3rem}
.sb-pop #popLink a{color:var(--green-700);font-weight:600;text-decoration:none}
.sb-pop #popLink a:hover{text-decoration:underline}
.sb-pop #popLink i{color:var(--ink-soft);font-size:.76rem}
.sb-popx{position:absolute;top:.15rem;right:.3rem;background:none;border:0;font-size:1rem;color:var(--ink-soft);cursor:pointer;padding:.1rem .3rem}
.sb-mapnote{position:absolute;left:.5rem;bottom:.35rem;font-size:.58rem;color:#8a94a3;font-family:var(--font-display);letter-spacing:.05em}
.sb-index{columns:2;column-gap:1.6rem;font-size:.84rem}
.sb-ctg{break-inside:avoid;margin:0 0 .8rem;padding:.1rem .35rem;border-left:3px solid transparent}
.sb-ctg.hl{background:var(--blue-100);border-left-color:var(--blue-700)}
.sb-ctg h3{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-950);margin:.1rem 0 .2rem}
.sb-ctr{padding:.12rem 0;border-bottom:1px dotted var(--line);display:flex;align-items:center;gap:.45rem}
.sb-ctr.flash{background:var(--green-100)}
.sb-ctr a.sb-gd{text-decoration:none;color:var(--navy-800);font-weight:600;display:flex;align-items:center;gap:.45rem}
.sb-ctr a.sb-gd:hover{color:var(--green-700)}
.sb-ctr.q span:first-child{color:var(--ink-soft)}
.sb-b{font-family:var(--font-display);font-size:.55rem;letter-spacing:.06em;color:#fff;background:var(--green-700);padding:.06rem .4rem;border-radius:2px;font-style:normal}
.sb-q{font-size:.66rem;color:var(--ink-soft);font-style:italic;margin-left:auto;white-space:nowrap}
.sb-qq{display:inline-block;width:.55rem;height:.55rem;border:1.5px solid var(--ink-soft);border-radius:50%}
.sb-pp{display:inline-block;width:.55rem;height:.55rem;background:var(--gold-300);border:1.5px solid #081c33;border-radius:50%}
.sb-pcap{color:var(--ink-soft);font-size:.78rem;margin:.35rem 0 0;max-width:72ch}
.sb-tlegend{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1rem;font-size:.74rem;color:var(--ink-soft);align-items:center}
.sb-tlegend span{display:flex;align-items:center;gap:.4rem}
/* ---- band 4 ---- */
.sb-cta{max-width:var(--max);margin:2.2rem auto 3rem}
.sb-ctarow{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.sb-mail{font-weight:600}
.sb-tel{color:inherit;font-weight:600}
/* ---- motion & focus ---- */
@media (prefers-reduced-motion: no-preference){
 .sb-kn{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
 .sb-mk{transition:transform .18s var(--ease)}
 .sb-ctr.flash{transition:background .3s}
}
.sb-kn:focus-visible,.sb-chip:focus-visible,.sb-kref:focus-visible,.sb-li:focus-visible,
.sb-mk:focus-visible,.sb-cty:focus-visible,.sb-searchbox input:focus-visible,.sb-popx:focus-visible{
 outline:3px solid var(--gold-300);outline-offset:2px}
/* ---- responsive ---- */
@media (max-width: 980px){
 .sb-tgrid{grid-template-columns:1fr}
 .sb-index{max-height:none;columns:2}
 .pl-panel{grid-template-columns:1fr}
 .pl-panel figure{max-height:220px}
 .pl-st b{font-size:.54rem}
 .sh-stage{padding:.8rem .4rem}
 .sh-loupe{display:none}
}
@media (max-width: 620px){
 .sb-rows{grid-template-columns:1fr}
 .sb-index{columns:1}
 .sb-legend{grid-template-columns:1fr}
 .sb-tallies{gap:.9rem}
 .sb-cbar{flex-direction:column}
}
/* ===== END SERVICES BOARD v5 ===== */

/* ===== HUB INDEX v1 (gen_hub_indexes.py) ===== */
.hub-index .hub-index-head{display:flex;align-items:baseline;gap:.8rem;border-bottom:2px solid var(--navy-950);padding-bottom:.3rem}
.hub-index h2{margin:0}
.hub-count{margin-left:auto;font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hub-lede{color:var(--ink-soft);font-size:.9rem;margin:.5rem 0 .3rem}
.hub-index .sb-famh{margin:.7rem 0 .1rem;font-size:.72rem}
.hub-famlink{color:inherit;text-decoration:none}
.hub-famlink:hover{color:var(--green-800);text-decoration:underline}
.hub-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.05rem 1.6rem;align-items:start}
@media (min-width:1100px){.hub-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.hub-rows{grid-template-columns:1fr}}
/* ===== END HUB INDEX v1 ===== */

/* ===== HUB MEDIA v1 (gen_hub_media.py) ===== */
.content-card.has-media{display:grid;grid-template-columns:7fr 5fr;gap:0 1.6rem;align-items:start}
.content-card.has-media > *{grid-column:1}
.content-card.has-media > figure.hub-media{grid-column:2;grid-row:1 / span 30;height:100%;max-height:32rem;margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:#000}
.content-card.media-left{grid-template-columns:5fr 7fr}
.content-card.media-left > *{grid-column:2}
.content-card.media-left > figure.hub-media{grid-column:1;grid-row:1 / span 30}
.hub-media img{width:100%;height:100%;min-height:230px;object-fit:cover;display:block;opacity:.96}
/* long-list card: photo runs as a banner across the top, list runs in columns beneath */
.content-card.media-banner{display:block}
.content-card.media-banner > figure.hub-media{width:100%;height:auto;aspect-ratio:24/7;max-height:15rem;margin:.2rem 0 1.2rem}
.content-card.media-banner > figure.hub-media img{height:100%;min-height:0}
.guide-list{list-style:none;margin:1.15rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:0 1.9rem}
.guide-list li{margin:0;padding:.62rem 0 .68rem;border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.45;color:var(--ink-600,#4a5568)}
/* City name is the scannable thing here, so it gets the display face on its own line and the
   requirement summary sits under it in body text. Anchor text is the registry Nav Label. */
.guide-list li strong{display:block;font-weight:650;margin:0 0 .2rem}
.guide-list li strong a{font-family:var(--font-display);font-size:1.08rem;letter-spacing:-.012em;
  color:var(--navy-900);text-decoration:none}
.guide-list li strong a:hover,.guide-list li strong a:focus-visible{
  color:var(--green-800,#1d5b33);text-decoration:underline;text-underline-offset:.16em}
.hub-media figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(8,28,51,.85);color:#fff;font-family:var(--font-display);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .55rem}
@media (max-width: 860px){
 .content-card.has-media,.content-card.media-left{display:block}
 .content-card.has-media > figure.hub-media{height:auto;margin:0 0 .9rem}
 .hub-media img{min-height:0;max-height:240px}
 .guide-list{grid-template-columns:1fr}
}

.mds-grid{display:grid;gap:.7rem;margin:1rem 0 .3rem}
.mds-grid.mds-4{grid-template-columns:repeat(4,1fr)}
.mds-grid.mds-3{grid-template-columns:repeat(3,1fr)}
.mds{display:block;background:#fff;border:1.5px solid var(--navy-950);text-decoration:none;overflow:hidden}
.mds-ph{display:block;overflow:hidden;position:relative}
.mds-ph img{width:100%;height:112px;object-fit:cover;display:block;filter:saturate(.22) brightness(.97);transition:filter .25s var(--ease),transform .25s var(--ease)}
.mds:hover .mds-ph img,.mds:focus-visible .mds-ph img{filter:none;transform:scale(1.04)}
.mds-ph b{position:absolute;top:.4rem;left:.4rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--navy-950);color:var(--gold-300);border:1.5px solid var(--gold-300);font-family:var(--font-display);font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.mds-bar{display:block;width:100%;border-top:1.4px solid var(--navy-950);padding:.5rem .6rem .55rem;font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-950);line-height:1.3;text-wrap:balance}
.mds:hover .mds-bar{color:var(--green-800)}
.mds:focus-visible{outline:3px solid var(--gold-300);outline-offset:2px}
@media (max-width:900px){.mds-grid.mds-4,.mds-grid.mds-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.mds-grid.mds-4,.mds-grid.mds-3{grid-template-columns:1fr}.mds-ph img{height:140px}}
/* ===== END HUB MEDIA v1 ===== */

/* ---------- customer-hub explorer (gen_customer_hub.py) ---------- */
.hx-wrap{margin:0 0 1.9rem}
.hx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.hx-box{background:#fff;border:1.5px solid var(--navy-950);border-radius:0;overflow:hidden}
.hx-box summary{list-style:none;cursor:pointer;display:block}
.hx-box summary::-webkit-details-marker{display:none}
.hx-ph{display:block;overflow:hidden;position:relative}
.hx-ph img{width:100%;height:118px;object-fit:cover;display:block;filter:saturate(.22) brightness(.97);transition:filter .25s var(--ease),transform .25s var(--ease)}
.hx-box[open] .hx-ph img,.hx-box summary:hover .hx-ph img,.hx-box summary:focus-visible .hx-ph img{filter:none;transform:scale(1.04)}
.hx-ph b{position:absolute;top:.4rem;left:.4rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--navy-950);color:var(--gold-300);border:1.5px solid var(--gold-300);font-family:var(--font-display);font-size:.72rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.hx-bar{display:flex;align-items:center;justify-content:space-between;gap:.4rem;border-top:1.4px solid var(--navy-950);padding:.5rem .6rem .55rem;font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-950);line-height:1.3}
.hx-bar::after{content:"+";font-size:1rem;font-weight:600;color:var(--green-800)}
.hx-box[open] .hx-bar::after{content:"–"}
.hx-box summary:focus-visible{outline:3px solid var(--gold-300);outline-offset:2px}
.hx-box[open]{grid-column:1 / -1}
.hx-panel{padding:.75rem .85rem .85rem;border-top:1px dotted var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1rem}
.hx-panel p{margin:0;color:var(--ink-soft);font-size:.92rem}
.hx-panel a{font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--green-800);text-decoration:none;border-bottom:1.5px solid var(--gold-300);white-space:nowrap}
.hx-panel a:hover{color:var(--navy-950)}
.hx-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;counter-reset:hxstep}
.hx-step{position:relative;background:#fff;border:1.5px solid var(--navy-950);overflow:hidden}
.hx-step .hx-ph img{height:96px}
.hx-step .hx-bar{font-size:.7rem}
.hx-step p{margin:0;padding:.5rem .6rem .6rem;font-size:.82rem;color:var(--ink-soft)}
.hx-step:not(:first-child)::before{content:"";position:absolute;left:-0.66rem;top:52px;width:0;height:0;border:7px solid transparent;border-left-color:var(--navy-950)}
@media (max-width:900px){.hx-grid,.hx-loop{grid-template-columns:repeat(2,1fr)}.hx-step::before{display:none}}
@media (max-width:480px){.hx-grid,.hx-loop{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hx-ph img{transition:none}}
/* ---------- end customer-hub explorer ---------- */

/* ===== CTA BUTTONS v1 (gen_cta_buttons.py) ===== */
.cta-card .cta-link{color:var(--gold-300);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,217,138,.5)}
.cta-card .cta-link:hover{color:#fff;border-bottom-color:#fff}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:.9rem}
.cta-actions .cta{display:inline-block;background:var(--gold-300);color:var(--navy-950);
 font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:.02em;
 padding:.6rem 1.15rem;text-decoration:none;border:1.5px solid var(--gold-300)}
.cta-actions .cta:hover{background:#fff;border-color:#fff;color:var(--navy-950)}
.cta-actions .cta.ghost{background:transparent;color:var(--gold-300)}
.cta-actions .cta.ghost:hover{background:var(--gold-300);color:var(--navy-950)}
@media (max-width:560px){.cta-actions{flex-direction:column;align-items:stretch}.cta-actions .cta{text-align:center}}
/* ===== END CTA BUTTONS v1 ===== */