/* ==========================================================================
   PWSI - Pressure Washing Services of Idaho - Site Styles
   Implementation of the Claude Design "Steel & Signal" system (project
   export 2026-08-26; source .dc.html files archived in the PWSI folder).
   Role split: Claude Design authored the visuals; this file translates them
   measurement-faithfully. Owner-directed and accessibility adjustments are
   logged in build/design-rationale.md.

   Consistency audit 08-26 (stamp 2608AF): the ad-hoc sizes that accumulated
   across owner rounds (13/13.5/14/15/16/17/18/19) collapsed to a 4-step
   type scale, and every remaining hardcoded color moved into a token.
   Nothing below the token block introduces a new font-size or color value
   without one.
   ========================================================================== */

:root {
  /* Steel & Signal palette (verbatim from design source) */
  --c-navy:        #0e2233;   /* dark bands, hero overlay base */
  --c-navy-deep:   #0a1a28;   /* footer */
  --c-ink:         #13202e;   /* headings ink */
  --c-slate:       #31414f;   /* nav links, form labels */
  --c-body:        #1a1d21;   /* body copy on light (owner 08-26 r4: darker again); 16.9:1 white, 14.9:1 band */
  --c-band:        #eef1f4;   /* light section band */
  --c-line:        #d7dde3;   /* grid lines / rules on light */
  --c-line-soft:   #e3e8ed;   /* header border */
  --c-accent:      #3b7dc0;   /* THE accent - logo blue, one value sitewide (owner pick 08-26,
                                 /test-blue promotion; replaced the orange). Computed: 4.30:1
                                 white, 3.80:1 band, 3.77:1 navy, 4.10:1 navy-deep - passes
                                 everywhere as large/bold text; white labels on it 4.30:1,
                                 navy on it 3.77:1 */
  --c-link:        #3570ad;   /* accent one step darker for SMALL text (links in copy):
                                 5.16:1 white, 4.55:1 band - the 19px/400 4.5 bar */
  --c-mist:        #c8d4de;   /* hover state for white links on navy. 10.8:1 navy / 11.7:1 navy-deep */
  --c-tint:        #f2f7fc;   /* service cell hover wash (accent-tinted) */
  --c-logo-sky:    #2ac0eb;   /* logo light blue, sampled from the letters' bottom edge (owner 09-01).
                                 7.6:1 on navy / 8.3:1 on navy-deep = AA text on dark; only 2.1:1 on
                                 white, so on light backgrounds DECORATIVE use only (underline, marks) */
  --c-input-line:  #c6d0d8;   /* form field borders */
  --c-note:        #64747f;   /* build-note monospace. 4.8:1 */
  --c-focus:       #ffdd00;   /* focus ring */
  --c-shadow-soft: rgba(10,26,40,0.65);   /* outer layer of the hero text halo */

  /* Type scale (audit 08-26). Display sizes are per-component clamps; all
     running text uses one of these four steps. */
  --fs-micro: 15px;   /* fine print, copyright, utility bar, form note */
  --fs-small: 16px;   /* captions, form UI, footer text, inline links, toggle */
  --fs-copy:  17px;   /* compact copy: service cards/rows, lists, ticks */
  --fs-body:  19px;   /* body, nav, buttons, ledes, condensed labels */

  --f-body: 'Barlow', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', 'Barlow', sans-serif;

  --pad-x: 48px;
  --max-w: 1280px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* Sticky footer (owner 09-01, fleet rule): on short pages (thankyou, 404) the
   footer meets the viewport bottom - no white void below it. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

body {
  margin: 0;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-navy); }

h1, h2, h3 {
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

/* Accessibility baseline */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--c-ink);
  padding: 10px 16px;
  z-index: 100;
}

.skip-link:focus-visible { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

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

.wrap { max-width: var(--max-w); margin: 0 auto; }

/* Shared spacing helpers (were inline styles; audit 08-26) */
.mt-action { margin-top: 28px; }     /* button/action row after a paragraph */
.band h2.h2-gap { margin-bottom: 34px; }     /* standalone h2 above a photo trio. Specificity must beat
                                                    .band h2's margin:10px 0 0, which silently zeroed this gap
                                                    until 2026-09-01 (owner-flagged: heading touched the trio) */

/* ---------- Buttons (19px condensed bold = large text; accent 4.30:1 w/ white) */
.btn,
.btn-outline-light,
.btn-navy,
.btn-outline-navy {
  display: inline-block;
  font-family: var(--f-cond);
  font-size: var(--fs-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 15px 28px;
  border: 0;
  cursor: pointer;
}

.btn { background: var(--c-accent); color: #fff; }
.btn:visited { color: #fff; }
.btn:hover { background: var(--c-navy); color: #fff; }

.btn-outline-light { border: 2px solid rgba(255,255,255,0.6); color: #fff; padding: 13px 26px; font-weight: 700; }  /* 700 = large-text-bold; 600 forced the 4.5:1 bar */
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }

.btn-navy { background: var(--c-navy); color: #fff; }
.btn-navy:hover { background: var(--c-ink); color: #fff; }

.btn-outline-navy { border: 2px solid var(--c-navy); color: var(--c-navy); padding: 13px 26px; font-weight: 700; letter-spacing: 0.04em; }
.btn-outline-navy:hover { background: rgba(14,34,51,0.08); color: var(--c-navy); }

/* ---------- Utility bar ---------- */
.utility {
  background: var(--c-navy);
  color: var(--c-mist);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 4px var(--pad-x);   /* owner 08-26 r4: bar shorter, type larger */
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 1px vertical padding keeps the link hit area at 24.5px - the WCAG 2.5.8
   minimum target size - while the bar itself gets shorter. Weight 700 on both
   links: at 15px on navy, 500-weight strokes let the background bleed into the
   glyph edges and pure white reads grey next to the bold CTA (owner 08-26). */
.utility a { color: #fff; padding: 1px 0; font-weight: 700; }
.utility a:hover { color: var(--c-logo-sky); }   /* owner 09-01: sky hover on dark surfaces (7.6:1 on navy). NEVER sky-hover on light */
.utility-sep { color: var(--c-mist); }

/* ---------- Header / nav ---------- */
.site-header {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px var(--pad-x);
  border-bottom: 1px solid var(--c-line-soft);
  gap: 24px;
}

.site-header .brand img { height: 80px; display: block; }   /* owner 09-01: original client logo promoted from /logo-test at its test size */

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--c-slate);
  padding: 8px 12px;
  font-family: var(--f-cond);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-slate);
  cursor: pointer;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: var(--fs-body);
  font-weight: 600;
}

/* Scoped :not(.btn) so the estimate button keeps .btn's white label.
   (Unscoped, .site-nav a (0,1,1) out-ranked .btn (0,1,0) and painted the
   button text slate - the 2.91:1 pa11y catch, audit 08-26.) */
/* Every link carries the underline space as a transparent border, so the
   active state only recolors it - geometry never changes and nothing shifts
   between pages (owner 08-26: active-only border popped the label ~2px). */
.site-nav a:not(.btn) {
  color: var(--c-slate);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:not(.btn):hover { color: var(--c-navy); }

.site-nav a.active {
  color: var(--c-ink);                      /* text stays ink; the accent lives in
                                               the underline, which has no text
                                               contrast requirement */
  border-bottom-color: var(--c-logo-sky);   /* owner 09-01: logo-sky set promoted from /color-test */
}

.site-nav .btn { padding: 12px 22px; }

/* ---------- Hero (homepage) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 84px var(--pad-x);
  background-color: var(--c-navy);   /* the declared backdrop behind the photo:
      scanners (WAVE/htmlcs) cannot see an <img>, they walk ancestors for a
      background-color and were scoring the hero text against the body's
      white. Navy is truthfully what sits behind the photo, computes 16.2:1
      with the white text, and doubles as the photo-load-failure fallback.
      The text halo remains the guarantee against the photo's real pixels. */
}

.hero > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;   /* the photo's real content is its right
      half (left is expanded fill for the overlay zone) - anchor the camera
      pixels to the right edge at every aspect ratio */
  filter: brightness(1.06);        /* owner 08-27: the source photo runs dark;
      lift shows only where the overlay does not cover */
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(78deg, rgba(10,26,40,0.95) 0%, rgba(10,26,40,0.85) 40%, rgba(10,26,40,0) 62%);  /* owner 08-27: overlay releases at 62% so the right 38% shows the photo untinted */
}

.hero-content { position: relative; z-index: 1; max-width: 960px; color: #fff; }

/* Halo, not decoration: WCAG 2.2 Understanding 1.4.3 - a wide halo that fills
   the inner details of the letters "acts as a halo and would be considered
   background". Navy-deep halo vs the white glyphs = 17.6:1, independent of
   whatever photo pixel sits behind (owner 08-26; the H1 crossed into white
   steam at widths where the wrap or stacked layout reaches the bright zone). */
.hero h1,
.hero p {
  text-shadow:
    0 0 3px var(--c-navy-deep),
    0 0 8px var(--c-navy-deep),
    0 0 18px var(--c-shadow-soft);
}

/* Desktop-only line break: H1 as two deliberate lines (owner 08-26).
   Below 1081px the break disappears and text-wrap handles it. */
.br-desk { display: none; }

@media (min-width: 1081px) {
  .br-desk { display: block; }
}

.hero-badge {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--f-cond);
  font-size: var(--fs-body);   /* 19px/700 = WCAG large text on the accent */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 5px 12px;
}

.hero h1 {
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.hero p { font-size: var(--fs-body); font-weight: 500; line-height: 1.55; margin: 20px 0 0; max-width: 520px; }  /* 500 on dark: 400 strokes read grey (owner 08-26) */

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--c-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 56px;
  padding: 18px var(--pad-x);
  font-family: var(--f-cond);
  font-size: var(--fs-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.trust-bar span { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.trust-bar i { width: 8px; height: 8px; background: var(--c-logo-sky); flex: none;   /* owner 09-01: logo-sky */
  margin-top: calc(0.8em - 4px); }  /* CD A1: pins the square to the FIRST text line when an
                                       item wraps (line box 1.6em; half minus half-marker) */

/* ---------- Sections ---------- */
.band { padding: 80px var(--pad-x); }
.band-light { background: var(--c-band); }
.band-navy { background: var(--c-navy); color: #fff; }
.band-white { background: #fff; }

.eyebrow {
  font-family: var(--f-cond);
  font-size: var(--fs-body);   /* large-text threshold: the accent passes on white/navy */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-accent);   /* light backgrounds: accent for now - bright sky is 1.9:1 on the band
                               (fails even large-text); owner deciding the light-bg treatment 09-01 */
}

.band-navy .eyebrow { color: var(--c-logo-sky); }   /* owner 09-01: logo-sky (AA on navy) */
.page-hero .eyebrow { color: var(--c-logo-sky); }   /* owner 09-01: page heroes are navy - bright sky */

.band h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.04;
  margin: 10px 0 0;
}

.band p { font-size: var(--fs-body); line-height: 1.6; color: var(--c-body); margin: 22px 0 0; }  /* owner 09-01: NO measure cap - text fills its container (65ch cap removed; CD B2 overruled) */
.band p + p { margin-top: 14px; }
.band-navy p { color: #fff; font-weight: 500; }   /* owner 08-26: dark-bg text pure white; hierarchy by size, never tinting */

/* Page hero (interior pages, navy) */
.page-hero { background: var(--c-navy); color: #fff; padding: 72px var(--pad-x); }
.page-hero h1 { font-size: clamp(42px, 4.5vw, 64px); line-height: 1; margin: 14px 0 0; max-width: 880px; text-wrap: pretty; }
.page-hero p { font-size: var(--fs-body); font-weight: 500; line-height: 1.6; color: #fff; margin: 20px 0 0; }  /* owner 09-01: 660px measure cap removed - text fills its container */

/* Wide variant scoped to the HEADLINE only (CD review B1: the paragraph at
   full container ran ~118ch, double the 65ch standard; owner 08-26 had asked
   for full-width - flagged for his confirm) */
.page-hero-wide h1 { max-width: none; }

/* ---------- Services grid (homepage) ---------- */
.svc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin: 0 0 44px;
}

.svc-head h2 { white-space: nowrap; }

.svc-link {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-navy);
  border-bottom: 3px solid var(--c-accent);
  padding-bottom: 4px;
  white-space: nowrap;
}

.svc-link:hover { border-bottom-width: 4px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.svc-cell { background: #fff; padding: 30px 28px; }
.svc-cell:hover { background: var(--c-tint); }

.svc-num { font-family: var(--f-cond); font-size: var(--fs-body); font-weight: 700; color: var(--c-accent); }

/* Icon variant of the cell eyebrow (test-icons page; owner exploring
   replacing the templatish 01-06 numbers) */
.svc-ico { color: var(--c-logo-sky); height: 30px; }   /* owner 09-01: logo-sky */
.svc-ico svg { width: 30px; height: 30px; display: block; }

.svc-cell h3 { font-size: 24px; font-weight: 600; margin: 8px 0 8px; }
.svc-cell p { font-size: var(--fs-copy); line-height: 1.55; color: var(--c-body); margin: 0; }

/* ---------- Services page rows ---------- */
.svc-rows { display: flex; flex-direction: column; gap: 2px; }

.svc-row {
  background: #fff;
  display: grid;
  grid-template-columns: 110px 340px 1fr;
  gap: 32px;
  align-items: center;
  padding: 34px 36px;
}

.svc-row .num { font-family: var(--f-cond); font-size: 34px; font-weight: 700; color: var(--c-accent); }
.svc-row h2 { font-size: 28px; font-weight: 600; margin: 0; }
.svc-row p { font-size: var(--fs-copy); line-height: 1.6; color: var(--c-body); margin: 0; }

/* ---------- Two-column feature bands ---------- */
.cols-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; }
.cols-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.cols-center { align-items: center; }

/* Service-area band (homepage; was inline styles - audit 08-26) */
.area-band { padding-top: 68px; padding-bottom: 68px; }
.area-band .cols-2 { grid-template-columns: 1.2fr 1fr; gap: 56px; }
.area-band h2 { font-size: clamp(32px, 3vw, 40px); }
.area-band p { margin-top: 18px; }

.num-list { display: flex; flex-direction: column; justify-content: flex-start; }  /* CD B3: DESIGN-STANDARD s4 - never center vs sibling height */

.num-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.16);
}

.num-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.16); }

.num-item .num { font-family: var(--f-cond); font-size: 22px; font-weight: 700; color: var(--c-logo-sky); flex: none; }   /* owner 09-01: logo-sky */
.num-item span:last-child { font-size: var(--fs-copy); line-height: 1.5; color: #fff; font-weight: 500; }

/* Light variant (About page process list) */
.num-list-light .num-item { border-top: 1px solid var(--c-line); }
.num-list-light .num-item:last-of-type { border-bottom: 1px solid var(--c-line); }
.num-list-light .num-item .num { color: var(--c-accent); }
.num-list-light .num-item span:last-child { color: var(--c-slate); font-weight: 400; }

.fine-print { font-size: var(--fs-micro); color: #fff; margin: 16px 0 0; }   /* size alone de-emphasizes; no tinting on dark */

/* ---------- Photo trio + figures ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.trio figure, .photo-fig { margin: 0; }
.trio img { width: 100%; height: 280px; object-fit: cover; display: block; }
.photo-fig img { width: 100%; height: 380px; object-fit: cover; display: block; }
.trio figcaption, .photo-fig figcaption { font-size: var(--fs-small); color: var(--c-body); margin: 10px 0 0; }

.cap-label {
  color: var(--c-accent);
  text-transform: uppercase;
  font-family: var(--f-cond);
  font-size: var(--fs-body);   /* large-text threshold */
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ---------- Service area shields ---------- */
.shields { display: flex; gap: 28px; justify-content: center; }
.shields img { height: 160px; width: auto; }   /* width:auto is LOAD-BEARING: the img tags carry width="128",
                       so height-only CSS grew the box while the SVG stayed 128px wide, letterboxed -
                       three rounds of "bigger" rendered zero visible change (owner-caught 09-01) */

/* ---------- CTA band ---------- */
.cta-band { background: var(--c-accent); color: #fff; padding: 64px var(--pad-x); text-align: center; }   /* owner 09-01: white content (was navy - passed WCAG but read low-contrast); white 4.10:1 on accent */
.cta-band h2 { font-size: clamp(34px, 3.3vw, 46px); line-height: 1.08; text-wrap: pretty; }   /* display leading; unset it inherited body 1.6, visible once mobile wraps to 3 lines */
.cta-band .cta-sub { font-size: var(--fs-body); font-weight: 700; margin: 12px 0 0; color: #fff; }  /* owner 09-01: white; 19px/700 large-text-bold, 4.10:1 on accent */
.cta-band .cta-phone { font-family: var(--f-cond); font-size: clamp(30px, 3vw, 40px); font-weight: 700; margin: 20px 0 0; }
.cta-band .cta-phone a { color: #fff; }   /* owner 09-01: white */
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 24px 0 0; }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }

.contact-phone { font-family: var(--f-cond); font-size: clamp(38px, 4vw, 52px); font-weight: 700; margin: 12px 0 0; }
.contact-phone a { color: var(--c-navy); }
.contact-phone a:hover { color: var(--c-accent); }

.contact-note { max-width: 420px; }

.tick-list { display: flex; flex-direction: column; margin: 32px 0 0; }

.tick {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-copy);
  color: var(--c-body);
}

.tick:last-child { border-bottom: 1px solid var(--c-line); }
.tick i { width: 8px; height: 8px; background: var(--c-accent); margin-top: 10px; flex: none; }  /* (line-box 27px - 8px)/2 */

.form-card {
  background: #fff;
  border-top: 4px solid var(--c-accent);
  padding: 40px 44px;
  box-shadow: 0 1px 3px rgba(14,34,51,0.08);
}

.form-card h2 { font-size: 30px; }
.form-card .form-sub { font-size: var(--fs-small); color: var(--c-body); margin: 8px 0 26px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-slate);
}

.form-grid .full { grid-column: 1 / -1; }

.form-grid input,
.form-grid textarea {
  border: 1px solid var(--c-input-line);
  padding: 12px 14px;
  font-size: var(--fs-small);   /* 16px also stops iOS zoom-on-focus */
  font-family: var(--f-body);
  color: var(--c-ink);
  background: #fff;
}

.form-grid textarea { resize: vertical; }

.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 26px 0 0; flex-wrap: wrap; }
.form-note { font-size: var(--fs-micro); color: var(--c-note); font-family: ui-monospace, monospace; }

/* ---------- Legal pages ---------- */
.legal-body { }   /* owner 09-01: 820px measure cap REMOVED - legal text fills .wrap like every other section (repeat correction; see DESIGN-STANDARD 2.4) */
.legal-body h2 { font-size: 26px; margin: 40px 0 0; }
.legal-body p { margin: 14px 0 0; }
.legal-body ul { margin: 14px 0 0; padding-left: 24px; }
.legal-body li { margin: 8px 0 0; }
.legal-meta { font-size: var(--fs-small); margin: 18px 0 0; }

/* ---------- Footer ---------- */
/* Owner 08-26 r4: everything except the accent column headings runs white */
.site-footer { background: var(--c-navy-deep); color: #fff; padding: 56px var(--pad-x) 28px; }
.site-footer .wrap { max-width: none; }   /* owner 08-27: footer runs full fluid width */
.site-footer .footer-grid img { display: block; }
.site-footer .logo-block { height: 80px; width: auto; background: #fff; padding: 12px 16px; box-sizing: content-box; }   /* owner 09-01: no white/reversed logo exists - color logo on a white block; square corners + 80px per owner (matches header) */

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-grid p { font-size: var(--fs-small); line-height: 1.6; margin: 12px 0 0; text-wrap: balance; }   /* owner 08-27: even out the two-line rag */

.footer-h { font-family: var(--f-cond); font-size: var(--fs-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-logo-sky); }  /* owner 09-01: logo-sky; 8.3:1 on navy-deep (up from accent's 4.10:1) */

.footer-links { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; font-size: var(--fs-small); }
.footer-links a { color: #fff; }
.footer-links a:hover { color: var(--c-logo-sky); }   /* owner 09-01: sky hover on navy-deep (8.3:1) */
.footer-links a.footer-cta { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }   /* owner 08-27: underlined by default */
.footer-links a.footer-cta:hover { color: var(--c-logo-sky); }

.footer-bottom { font-size: var(--fs-micro); padding: 22px 0 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-version { margin: 0; }

/* ==========================================================================
   Responsive layer (design shipped desktop-first; translation below)
   ========================================================================== */
@media (max-width: 1080px) {
  :root { --pad-x: 24px; }

  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--c-line-soft);
    box-shadow: 0 12px 24px rgba(14,34,51,0.12);
    z-index: 50;
  }

  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 12px 0; }
  .site-nav .btn { margin-top: 8px; }

  .site-header { position: relative; }

  .svc-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .svc-head h2 { white-space: normal; }

  .svc-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 56px 1fr; gap: 8px 24px; align-items: baseline; }  /* CD A2 */
  .svc-row p { grid-column: 2; }   /* heading + copy share one left edge */

  .cols-2, .cols-2-even, .contact-grid, .footer-grid,
  .area-band .cols-2 { grid-template-columns: 1fr; gap: 40px; }
  .trio { grid-template-columns: 1fr; }
  .trio img { height: 240px; }

  /* Stacked footer centers (owner 08-27, fleet standard): blocks center,
     LISTS center as shrink-wrapped blocks - items keep their shared left
     edge (width fit-content + auto margins), never per-item centering. */
  .site-footer { text-align: center; }
  .site-footer .footer-grid img { margin-left: auto; margin-right: auto; }
  .footer-grid p { margin-left: auto; margin-right: auto; }
  .footer-links { align-items: center; }   /* owner 08-27: on THIS site each item centers
      (per-site pick; the fleet default stays shared-left-edge) */
  .footer-bottom { justify-content: center; }

  .band { padding: 56px var(--pad-x); }
  .page-hero { padding: 56px var(--pad-x); }
  .hero { padding: 64px var(--pad-x); }

  /* Stacked layout (owner 08-26, final): the photo STAYS at every width and
     the tight halo on the text is the compliance mechanism - 17.6:1 glyph vs
     halo regardless of the photo behind (WCAG 1.4.3 halo-as-background).
     The desktop gradient carries through unchanged for design continuity. */
  .hero-content { max-width: 620px; }   /* owner 08-27: contain the heading to
      the dark side - at ~1020px the H1 was running to the right edge over
      the bright steam */

  .trust-bar { gap: 12px 32px; font-size: var(--fs-small); }
  .form-card { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .utility { justify-content: center; }
}