/* ==========================================================================
   Trinstar Home Wi-Fi — implements capture/design-direction.md
   Concept: "The signal reaches you" — warm editorial headlines over a cool,
   precise technical UI. Navy-dominant so the brand red never reads as
   Frontier's telco red (competitive-brief D7).
   All text colors meet WCAG AA (>=4.5:1) by construction, not retrofit.
   ========================================================================== */

/* [presentation polish] Metric-matched fallback for the Fraunces display face.
   Google Fonts loads with display=swap, so on a cold load headings first paint
   in the fallback, then swap to Fraunces. Plain Georgia is wider and wrapped
   the hero H1 to 3 lines vs Fraunces's 2 — a ~63px reflow (CLS 0.108 at
   1280px). size-adjust shrinks the fallback so it wraps the same as Fraunces;
   ascent/descent overrides match the line box. Result: the swap no longer
   shifts layout. Numbers calibrated by measuring the built page, not guessed. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 82%;
  ascent-override: 105%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* Palette — derived from the logo (red T + silver star + cyan wifi glow) */
  --brand-red: #ED1A46;   /* large accents / signal motif only — never body text */
  --crimson:   #B31239;   /* AA text, links, primary buttons on light (5.6:1 on --paper) */
  --crimson-dark: #8E0E2E;
  --navy:      #0E1B33;   /* dominant dark: bands, headings, footer */
  --navy-soft: #1B2B4A;
  --cyan:      #0E7490;   /* signal accent on light (4.8:1 on --paper) */
  --cyan-lit:  #38D8EE;   /* signal accent on navy */
  --paper:     #F7F7F5;
  --ink:       #1A2230;
  --muted:     #566072;   /* 5.3:1 on --paper */
  --line:      #E4E7EC;
  --white:     #FFFFFF;
  --gold:      #A96F09;  /* star icons: 4.23:1 on white — comfortably over the
                            3:1 graphical-object floor, unlike a brighter gold */

  /* Type */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale */
  --r: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* One shadow depth — no shadow zoo */
  --shadow: 0 6px 24px -8px rgba(14, 27, 51, 0.18);
  --wrap: 1140px;

  /* [P8] Comfortable density (design-direction §2): 80px desktop sections,
     hero 96px top as the single written exception. Mobile values override
     at ≤760px. Measured at 1280/390, not eyeballed. */
  --sec-y: 80px;
  --hero-top: 96px;
}

@media (max-width: 760px) {
  :root { --sec-y: 48px; --hero-top: 56px; }
}

/* --- Reset / base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}

/* [P8] Fraunces at its expressive extremes, not its tasteful defaults:
   headlines take the display optical size with a SOFT lift so the ink-trap
   warmth shows at size (design-direction §2). */
h1, h2 { font-variation-settings: "opsz" 144, "SOFT" 50; }

/* [P8] The one WONK italic pull-word per major headline. Crimson on light;
   dusk/navy surfaces switch it to signal cyan below. */
.wonk {
  font-style: italic;
  font-weight: 650;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  color: var(--crimson);
}
.section--dusk .wonk,
.cta-band .wonk { color: var(--cyan-lit); }

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 var(--s4); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); margin: 0 0 var(--s4); }
h3 { font-size: 1.2rem; margin: 0 0 var(--s2); }
p  { margin: 0 0 var(--s4); }

a { color: var(--crimson); }
a:hover { color: var(--crimson-dark); }

img { max-width: 100%; height: auto; }

ul { padding: 0; margin: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--s1);
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--navy); color: var(--white);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s4); color: var(--white); }

.section { padding-block: var(--sec-y); }

/* [P8] Dusk sections: navy claims ~half the scroll (design-direction §1).
   Why-us joins stats/CTA/footer on navy; cards restyle for the dark field. */
.section--dusk { background: var(--navy); color: #D3DAE6; }
.section--dusk h2, .section--dusk h3 { color: var(--white); }
.section--dusk .card {
  background: var(--navy-soft);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.section--dusk .card p { color: #C3CCDB; }
.section--dusk .card__icon {
  background: rgba(56, 216, 238, 0.14);
  color: var(--cyan-lit);
}
.section--dusk .section__intro { color: #C3CCDB; }

/* [P8] Testimonials at dusk: the neighbors' cards restyle for the navy
   field; the gold stars brighten — stars come out at dusk. All pairs
   computed AA: quote #E7ECF5 13.4:1 and body #C3CCDB 8.7:1 on navy-soft;
   dusk gold #D9950F 5.5:1 (role=img floor is 3:1). */
.section--dusk .testimonial {
  background: var(--navy-soft);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.section--dusk .testimonial__quote p { color: #E7ECF5; }
.section--dusk .testimonial__name { color: var(--white); }
.section--dusk .testimonial__place { color: #C3CCDB; }
.section--dusk .testimonial__who { border-top-color: rgba(255, 255, 255, 0.14); }
.section--dusk .testimonial__stars { color: #D9950F; }
/* Monogram tints re-derived for the navy-soft card field (white text ≥4.5:1,
   and distinguishable from the card behind them). */
.section--dusk .monogram { background: #43598A; }
.section--dusk .monogram--1 { background: var(--crimson); }
.section--dusk .monogram--2 { background: #0B5B70; }
.section--dusk .monogram--3 { background: var(--cyan); }

/* [P8] Signal horizons: every paper↔navy handoff crosses a shallow arc, not
   a straight border (design-direction §4). The div carries the UPPER field
   as background; the path is filled with the LOWER field. */
.horizon { display: block; height: clamp(36px, 5vw, 72px); }
.horizon svg { display: block; width: 100%; height: 100%; }
.horizon--paper-navy { background: var(--paper); }
.horizon--paper-navy path { fill: var(--navy); }
.horizon--navy-white { background: var(--navy); }
.horizon--navy-white path { fill: var(--white); }
.horizon--white-navy { background: var(--white); }
.horizon--white-navy path { fill: var(--navy); }
.section__heading { text-align: center; max-width: 22ch; margin-inline: auto; }
.section__intro {
  text-align: center; color: var(--muted);
  max-width: 52ch; margin: 0 auto var(--s7);
}

.eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--cyan);
  margin: 0 0 var(--s2);
}
/* [P8] Arc-tick marker: the signature as list grammar (design-direction §4). */
.eyebrow::before {
  content: "";
  display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px; margin-right: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.5" cy="17.5" r="2.4" fill="%230E7490"/><path d="M6.5 10.5a7 7 0 0 1 7 7" fill="none" stroke="%230E7490" stroke-width="2.6" stroke-linecap="round"/><path d="M6.5 4.5A13 13 0 0 1 19.5 17.5" fill="none" stroke="%230E7490" stroke-width="2.6" stroke-linecap="round"/></svg>') no-repeat center / contain;
}
.eyebrow--center { text-align: center; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--crimson); color: var(--white); }
.btn--primary:hover { background: var(--crimson-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--onnavy { background: var(--white); color: var(--crimson); }
.btn--onnavy:hover { background: var(--paper); color: var(--crimson-dark); }
.btn--lg { padding: var(--s4) var(--s6); font-size: 1.0625rem; }
.btn--sm { padding: var(--s2) var(--s4); font-size: 0.9375rem; }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* The glass fill lives on a pseudo-element ON PURPOSE. `backdrop-filter` on
   .site-header itself makes the header a containing block for position:fixed
   DESCENDANTS — and .site-nav is one. That silently re-anchored the mobile
   overlay's `inset: 72px 0 0` to the 72px header box instead of the viewport,
   collapsing the full-screen menu to a 57px strip. The CSS read correctly,
   so it survived three browser-less design rounds; only a rendered
   measurement caught it. Keep the filter off .site-header. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(247, 247, 245, 0.94);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 72px;
}
.site-header__brand { display: flex; align-items: center; margin-right: auto; }
.site-header__brand img { width: auto; height: 42px; }

.site-nav__list { display: flex; gap: var(--s5); }
.site-nav a {
  color: var(--navy); text-decoration: none; font-weight: 500;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--crimson); border-bottom-color: var(--crimson); }
.site-nav a[aria-current="page"] { color: var(--crimson); border-bottom-color: var(--crimson); }

.site-header__actions { display: flex; align-items: center; gap: var(--s3); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle__bar {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The header is sticky (72px), so every in-page jump — the #about/#services/
   #testimonials nav anchors and the skip link's #main — lands with its target
   underneath the bar. Measured at 375px: tapping "About" left the section's
   first line 9px under the header. 88px = 72px bar + 16px breathing room. */
[id] { scroll-margin-top: 88px; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(56, 216, 238, 0.12), transparent 60%),
    linear-gradient(180deg, var(--white), var(--paper));
  /* [P8] no border-bottom: the signal-horizon arc replaces the hairline. */
  padding-block: var(--hero-top) var(--sec-y);
}
.hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s8); align-items: center;
}
.hero__heading { margin-bottom: var(--s5); }
.hero__sub {
  font-size: 1.125rem; color: var(--muted);
  max-width: 48ch; margin-bottom: var(--s5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__note { margin-top: var(--s4); font-size: 0.9375rem; color: var(--muted); }

/* 2-up grid so the four feature pills always balance [2,2] instead of
   flex-wrapping to a ragged [3,1] orphan in the hero's content column.
   The ≤760px rule below stretches them full-width (1fr 1fr) on phones. */
.pills { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--s2); }
.pill {
  display: inline-flex; align-items: center;
  padding: var(--s2) var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 500; color: var(--navy);
}
/* [P8] Arc-tick markers on the feature pills (signature grammar, §4). */
.pill::before {
  content: "";
  flex: 0 0 12px; width: 12px; height: 12px; margin-right: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.5" cy="17.5" r="2.4" fill="%230E7490"/><path d="M6.5 10.5a7 7 0 0 1 7 7" fill="none" stroke="%230E7490" stroke-width="2.6" stroke-linecap="round"/><path d="M6.5 4.5A13 13 0 0 1 19.5 17.5" fill="none" stroke="%230E7490" stroke-width="2.6" stroke-linecap="round"/></svg>') no-repeat center / contain;
}

/* Signature: signal rings radiating from a star anchor over a town-and-home
   ground line. [P8] rings take the red→cyan gradient stroke from the SVG
   defs; opacity fades outward. */
.hero__signal { display: flex; justify-content: center; }
.signal { width: 100%; max-width: 420px; height: auto; }
.signal__ring { stroke-width: 2.5; opacity: 0.85; }
.signal__ring:nth-child(2) { stroke-width: 2; opacity: 0.6; }
.signal__ring:nth-child(3) { stroke-width: 2; opacity: 0.38; }
.signal__ring:nth-child(4) { stroke-width: 1.5; opacity: 0.24; }
.signal__star { fill: var(--brand-red); }
.signal__ground {
  fill: none; stroke: var(--navy); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.55;
}
@media (prefers-reduced-motion: no-preference) {
  .signal__ring--pulse {
    transform-origin: 200px 210px;
    animation: signal-pulse 4.5s ease-out infinite;
  }
  @keyframes signal-pulse {
    0%   { transform: scale(0.86); opacity: 0.30; }
    70%  { transform: scale(1.06); opacity: 0; }
    100% { transform: scale(1.06); opacity: 0; }
  }
}

/* --- Stats band --------------------------------------------------------- */

.stats {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  /* [P8] slim proof BAND between two horizons, not a content section —
     written density exception (design-direction §2). No border-top: the
     horizon arc replaces the straight cyan hairline. */
  padding-block: var(--s7);
}
/* [P8] The signature as grammar: one oversized quarter-ring, cropped
   off-canvas, seating the numerals (design-direction §4). */
.stats__echo {
  position: absolute; inset: 0; z-index: -1;
  color: var(--cyan-lit);
  opacity: 0.26;
  pointer-events: none;
}
.stats__echo svg { width: 100%; height: 100%; display: block; }
.stats__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s5); text-align: center;
}
.stats__item { display: flex; flex-direction: column; gap: var(--s1); }
.stats__value {
  /* [P8] wght 900 — the numerals are the moment. Optical size held at 60,
     not the display max of 144: at 144 Fraunces gives the "3" a flat
     horizontal top bar that reads as a "5" (owner-caught on the $39.99
     price). At opsz ~60 that top becomes an open rounded bowl — an
     unambiguous 3 — while keeping the heavy display contrast. */
  font-family: var(--font-display); font-weight: 900;
  font-variation-settings: "opsz" 60;
  font-size: clamp(2.4rem, 5.5vw, 3.5rem); line-height: 1;
  color: var(--white);
}
.stats__label {
  font-size: 0.9375rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: #C3CCDB;
}

/* --- About -------------------------------------------------------------- */

/* [P8 r2] columns stretch and the checklist centers inside a full-height
   panel — the right column previously ran out ~224px before the copy did,
   exposing exactly the dead space FEEDBACK §2 complains about. */
.about__grid {
  display: grid; grid-template-columns: 1.35fr 0.65fr;
  gap: var(--s8); align-items: stretch;
}
.about__copy h2 { margin-bottom: var(--s5); }
.about__copy p { color: var(--muted); }
.about__copy .btn { margin-top: var(--s3); }

/* Photo-light substitute (design-direction §5): the checklist sits on a quiet
   signal-tinted panel rather than bare page, so the column isn't dead space
   while licensed photography is pending (HUMAN-TODO #4). */
.checklist {
  display: grid; gap: var(--s3);
  align-content: center;
  padding: var(--s5);
  border-radius: var(--r);
  background:
    radial-gradient(420px 260px at 80% 0%, rgba(56, 216, 238, 0.16), transparent 70%),
    linear-gradient(160deg, rgba(14, 27, 51, 0.05), rgba(14, 27, 51, 0.02));
}
.checklist__item {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  font-weight: 600; color: var(--navy);
  box-shadow: var(--shadow);
}
.checklist__mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(14, 116, 144, 0.1); color: var(--cyan);
}

/* --- Cards -------------------------------------------------------------- */

.card-grid { display: grid; gap: var(--s5); margin-top: var(--s7); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s6) var(--s5);
  box-shadow: var(--shadow);
}
.card p { color: var(--muted); margin-bottom: 0; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: var(--s4);
  border-radius: var(--r-sm);
  background: rgba(14, 116, 144, 0.09); color: var(--cyan);
}
.card--service .card__icon { background: rgba(179, 18, 57, 0.08); color: var(--crimson); }

.services { background: var(--white); }

/* --- Testimonials ------------------------------------------------------- */

.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
/* 7 testimonials never fill a 3- or 2-col grid evenly, so the last card would
   sit alone against empty space. Centre it when — and only when — it is a
   trailing orphan (the :nth-child math self-disables if the count ever becomes
   even). Guarded to the grid breakpoints; the ≤600px carousel below is flex,
   where these rules don't apply. Polish only — all 7 quotes stay verbatim. */
@media (min-width: 1001px) {
  .testimonial-grid > li:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.testimonial {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s6) var(--s5);
  box-shadow: var(--shadow);
}
.testimonial__stars { display: flex; gap: 2px; color: var(--gold); }
.testimonial__quote { margin: 0; flex: 1; }
.testimonial__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0;
}
.testimonial__who {
  display: flex; align-items: center; gap: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.monogram {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.03em;
}
/* [P8] Partial cyan halo arc — the signature reaching each neighbor
   (design-direction §4). Decorative; ::after keeps it out of the DOM. */
.monogram::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  border-right-color: var(--cyan);
  transform: rotate(-40deg);
}
/* Tinted per card so adjacent testimonials never read alike. Each background
   clears 4.5:1 against white monogram text. */
.monogram--1 { background: var(--crimson); }
.monogram--2 { background: #0B5B70; }
.monogram--3 { background: var(--navy-soft); }
.testimonial__name { display: block; font-weight: 600; color: var(--navy); }
.testimonial__place { display: block; font-size: 0.875rem; color: var(--muted); }
/* [P8] Small star beside the town name — customers plotted on the signal
   map. CSS-only so screen readers hear just the town. */
.testimonial__place::before {
  content: "";
  display: inline-block; vertical-align: -1px;
  width: 10px; height: 10px; margin-right: 5px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2.6 2.9 6 6.6.95-4.8 4.65 1.14 6.55L12 17.66 6.16 20.75 7.3 14.2 2.5 9.55l6.6-.95Z" fill="%23A96F09"/></svg>') no-repeat center / contain;
}

.testimonial-dots { display: none; }

/* --- CTA band ----------------------------------------------------------- */

.cta-band {
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(237, 26, 70, 0.22), transparent 65%),
    var(--navy);
  color: var(--white);
  padding-block: var(--sec-y);
}
.cta-band__inner { text-align: center; max-width: 62ch; margin-inline: auto; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #D3DAE6; margin-bottom: var(--s6); }

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: var(--navy); color: #C3CCDB; padding-block: var(--s8) var(--s5); }
.site-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: var(--s8);
}
/* The footer uses the dark-background mark (white outlines baked in), so the
   old brightness(0) invert(1) whitening hack is gone — it would have wrecked
   the red gradient and the star. */
.site-footer__logo { height: 45px; width: auto; }
.site-footer__brand p { margin-top: var(--s4); max-width: 40ch; }
.site-footer__heading {
  font-family: var(--font-ui);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--white); margin: 0 0 var(--s4);
}
.site-footer a { color: #C3CCDB; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__links li + li,
.site-footer__contact-list li + li { margin-top: var(--s2); }
.site-footer address { font-style: normal; }
.site-footer__hours { margin-top: var(--s5); font-size: 0.9375rem; }
.site-footer__hours li + li { margin-top: var(--s1); }
.site-footer__day { font-weight: 600; color: var(--white); }
.site-footer__legal {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
}
.site-footer__legal p { margin: 0; }

/* --- Forms -------------------------------------------------------------- */

.page-head { padding-block: var(--s8) var(--s6); }
.page-head h1 { margin-bottom: var(--s4); }
.page-head__intro { font-size: 1.125rem; color: var(--muted); max-width: 60ch; }

/* [P8 r2] The signature grammar reaches the secondary pages: a quiet ring
   echo cropped into the page-head / thank-you corner (CSS-only, decorative).
   overflow:hidden clips the rings to the box — corner-arc crop, and no
   horizontal scroll from the negative offsets. */
.page-head, .thanks { position: relative; overflow: hidden; }
.page-head::before, .page-head::after,
.thanks::before, .thanks::after {
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%; pointer-events: none;
}
.page-head::before, .thanks::before {
  top: -190px; right: -110px; width: 380px; height: 380px;
  border: 2px solid rgba(237, 26, 70, 0.16);
}
.page-head::after, .thanks::after {
  top: -130px; right: -50px; width: 260px; height: 260px;
  border: 2px solid rgba(14, 116, 144, 0.18);
}
.thanks::before { right: auto; left: -150px; }
.thanks::after { right: auto; left: -90px; }

.form-layout {
  display: grid; grid-template-columns: 1.4fr 0.6fr;
  gap: var(--s8); align-items: start;
  padding-bottom: var(--s9);
}
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s6);
  box-shadow: var(--shadow);
}
.form-note { font-size: 0.9375rem; color: var(--muted); margin-bottom: var(--s5); }
.field { margin-bottom: var(--s5); }
.field label { display: block; font-weight: 600; color: var(--navy); margin-bottom: var(--s2); }
.field .req { color: var(--crimson); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  min-height: 44px;
  font: inherit; color: var(--ink);
  background: var(--white);
  /* #767F8E measures 4.04:1 on the white form card — the border is the only
     visual boundary of these fields, so it must clear the 3:1 UI-component
     floor (WCAG 1.4.11). The previous #C6CCD6 measured 1.61:1. */
  border: 1px solid #767F8E;
  border-radius: var(--r-sm);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--cyan); }

.field--consent { display: flex; gap: var(--s3); align-items: flex-start; }
.field--consent input { width: 24px; height: 24px; min-height: 0; flex: 0 0 24px; margin-top: 2px; }
.field--consent label { font-weight: 400; font-size: 0.9375rem; color: var(--muted); }

/* Honeypot: hidden from sighted users AND from keyboard/AT. */
.hp-field { position: absolute; left: -5000px; opacity: 0; height: 0; overflow: hidden; }

.form-aside {
  background: var(--navy); color: #C3CCDB;
  border-radius: var(--r); padding: var(--s6);
}
.form-aside h2 { color: var(--white); font-size: 1.3rem; }
.form-aside li { display: flex; gap: var(--s3); align-items: flex-start; }
.form-aside li + li { margin-top: var(--s3); }
.form-aside .checklist__mark { background: rgba(56, 216, 238, 0.14); color: var(--cyan-lit); }
.form-aside__contact { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,0.14); }
.form-aside a { color: var(--white); }

/* --- Thank you ---------------------------------------------------------- */

.thanks { text-align: center; max-width: 62ch; margin-inline: auto; padding-block: var(--sec-y); }
.thanks__hours { display: inline-flex; flex-direction: column; gap: var(--s1); margin-block: var(--s5); }
.thanks__phone {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 600; color: var(--crimson); text-decoration: none;
}

/* --- Legal pages -------------------------------------------------------- */

.legal { padding-block: var(--s8) var(--s9); }
.legal__body { max-width: 72ch; }
.legal__body h2 { font-size: 1.5rem; margin-top: var(--s7); }
.legal__body h3 { font-size: 1.15rem; margin-top: var(--s6); }
.legal__body ul { list-style: disc; padding-left: var(--s5); margin-bottom: var(--s4); }
.legal__body li { margin-bottom: var(--s2); }
.legal__updated { color: var(--muted); font-size: 0.9375rem; }

/* --- 404 ---------------------------------------------------------------- */

.error-page { text-align: center; }
.error-page__actions {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; margin-bottom: var(--s7);
}
.error-page__help { color: var(--muted); }

/* ==========================================================================
   Responsive — mobile designed here, never retrofitted (design-direction §3)
   ========================================================================== */

@media (max-width: 1000px) {
  .hero__inner { gap: var(--s6); }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* Orphan guard for the 2-col testimonial band only. Bounded at 601px so it
   never reaches the ≤600px swipe carousel below — where the last card is a
   flex item and a stray max-width:50% made it a tall, skinny half-width
   card. The trailing odd card spans both tracks and centres at one column. */
@media (min-width: 601px) and (max-width: 1000px) {
  .testimonial-grid > li:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--s5) / 2);
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .card-grid--3 { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .form-layout { grid-template-columns: 1fr; gap: var(--s6); }
}

@media (max-width: 820px) {
  /* Hamburger nav; the Check Address CTA stays visible in the bar. */
  .nav-toggle { display: flex; }
  /* Full-screen overlay (design-direction §3.1) — covers to the bottom of
     the viewport so the page beneath never shows through. */
  .site-nav {
    position: fixed; inset: 72px 0 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s5) 0 var(--s6);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list {
    flex-direction: column; gap: 0;
    width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  }
  .site-nav__list a {
    display: block; padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.125rem;
  }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
  /* Suppressing the desktop crimson underline above leaves COLOR as the only
     current-page cue in the overlay (crimson vs navy is 2.5:1 — far below a
     distinguishable difference). Weight restores a non-color cue (WCAG 1.4.1,
     G182). */
  .site-nav a[aria-current="page"] { font-weight: 700; }
}

@media (max-width: 760px) {
  .hero { position: relative; overflow: hidden; }
  .hero__inner { grid-template-columns: 1fr; }
  /* Overlap layout: the signature becomes a backdrop the copy flows over,
     bleeding off the top-right, instead of a 260px block stacked above the
     text. That block pushed the primary CTA below the fold (measured: CTA
     top 845px in a 844px viewport). As a backdrop the copy starts at the
     top and the CTA rises ~260px, above the fold. Decorative + aria-hidden,
     so nothing load-bearing sits behind text; the star stays in the corner
     where the left-aligned copy is sparse. */
  .hero__signal {
    position: absolute;
    top: -48px; right: -82px;
    width: 300px; margin: 0;
    z-index: 0; opacity: 0.6;
    pointer-events: none;
  }
  .signal { max-width: 300px; }
  /* Drop the town/home ground line on the overlap: at low opacity behind the
     body paragraph it read as noise. The star + rings carry the signature. */
  .hero__signal .signal__ground { display: none; }
  .hero__copy { position: relative; z-index: 1; }
  .pills { display: grid; grid-template-columns: 1fr 1fr; }
  .pill { justify-content: center; text-align: center; }
  .hero__actions .btn { width: 100%; }
  .stats__list { grid-template-columns: 1fr; gap: var(--s6); }
}

@media (max-width: 600px) {
  /* Testimonials become a swipe carousel with dot indicators (BRIEF §6). */
  .testimonial-grid {
    display: flex; grid-template-columns: none;
    /* Cards size to their own content, not to the tallest card. Without this
       the flex row stretches every card to the longest quote's height and
       .testimonial__quote's flex:1 opens a big gap above the attribution —
       ~400px of dead space on the shorter cards. flex-start keeps each card
       as tall as it needs to be. */
    align-items: flex-start;
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--s1);
  }
  .testimonial-grid::-webkit-scrollbar { display: none; }
  .testimonial-grid > li { flex: 0 0 87%; scroll-snap-align: center; }

  .testimonial-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: var(--s5); }
  .testimonial-dot {
    width: 26px; height: 26px;
    padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .testimonial-dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    /* 0.55 alpha composites to #7D8289 on --paper = 3.61:1 — clears the
       3:1 UI-component floor (WCAG 1.4.11). The original 0.24 alpha
       measured 1.63:1: near-invisible to low-vision users. */
    background: rgba(26, 34, 48, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .testimonial-dot[aria-current="true"]::before {
    background: var(--crimson); transform: scale(1.35);
  }
  /* [P8] Dot palette on the dusk field: white@0.55 composites to ≈#929AA3
     on navy = 5.0:1; active cyan-lit = 10.0:1 (floors are 3:1). */
  .section--dusk .testimonial-dot::before { background: rgba(255, 255, 255, 0.55); }
  .section--dusk .testimonial-dot[aria-current="true"]::before { background: var(--cyan-lit); }
  .testimonial-dot:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; border-radius: 50%; }

  /* Footer collapses to ONE readable column (explicit run-1 bug fix). */
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--s7); }
  .site-footer__brand { grid-column: auto; }

  .card-grid--4 { grid-template-columns: 1fr; }
  .site-header__inner { gap: var(--s3); }
  .site-header__brand img { height: 34px; }
}

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