/* ==========================================================================
   Premium water-treatment design system
   Brand palette: steel blue #2F6283,
   warm sand #E1B380, warm cream #F8F4ED, ink #333.

   COLOUR IDENTITY, owner instruction 2026-09-01.
   The brand colour is the steel blue #2F6283, read from the live original
   site by computed style: it is the background of every "Get Free Quote"
   button, the Submit button and the menu toggle there, and the colour of its
   navigation links. Blue therefore carries conversion here too.

   The raspberry #CC3366 that used to hold the accent role is RETIRED. It was
   sampled from the original site's link colour, but it reads as a second
   brand and it is not approved. No pink, magenta, rose or fuchsia value
   remains in this file. Red, amber and green survive only where they carry
   meaning: error, warning and success.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand-primary:      #2F6283;
  --brand-primary-dark: #24506D;
  --brand-primary-deep: #16394F;
  --brand-ink:          #0E2635;   /* deepest surface, derived from primary */
  --brand-ink-2:        #143247;

  /* The conversion accent IS the brand blue. These three names are kept
     because the rest of the sheet and the generator address the accent role
     by name; repointing them here moves every accent surface at once. */
  --brand-accent:       var(--brand-primary);        /* #2F6283, exact original */
  --brand-accent-dark:  var(--brand-primary-dark);   /* #24506D, hover */
  --brand-accent-soft:  #E8F0F7;   /* light blue surface, replaced #F7E4EC */

  /* Interaction blue for hover on text and card links. Darker than the base
     so a hover is visible without introducing a second hue. */
  --brand-link-hover:   var(--brand-primary-dark);

  --brand-secondary:    #E1B380;   /* warm sand */
  --brand-secondary-dk: #C99659;
  --brand-secondary-sf: #F6EADA;

  --brand-aqua:         #6FB4D4;   /* light tint of primary, data emphasis */

  /* ---- Surfaces ------------------------------------------------------- */
  --surface:        #FFFFFF;
  --surface-alt:    #F8F4ED;       /* the brand's warm cream */
  --surface-alt-2:  #F2EDE4;
  --surface-cool:   #F4F7F9;
  --surface-dark:   var(--brand-ink);
  --surface-tint:   #EEF4F8;

  /* ---- Text ----------------------------------------------------------- */
  --text-primary:   #1C2B33;
  --text-secondary: #5A6B76;
  --text-tertiary:  #607080;   /* was #8395A0: 2.83:1 on cream, below AA */
  --text-on-dark:   #EAF1F6;
  --text-on-dark-2: #A9C2D2;
  --text-on-dark-3: #7E9DB1;

  /* ---- Lines / depth -------------------------------------------------- */
  --border-subtle:  #E7DFD3;       /* warm */
  --border-cool:    #DCE6EC;
  --border-strong:  #CBBFAE;
  --line-on-dark:   rgba(255,255,255,.13);
  --panel-on-dark:  rgba(255,255,255,.055);

  --shadow-sm: 0 1px 2px rgba(14,38,53,.05);
  --shadow-md: 0 8px 24px -12px rgba(14,38,53,.18);
  --shadow-lg: 0 28px 64px -34px rgba(14,38,53,.42);
  --shadow-cta: 0 12px 28px -12px rgba(47,98,131,.5);

  /* ---- Status --------------------------------------------------------- */
  --ok:      #1F7A5C;
  --ok-soft: #E4F2EC;
  --warn:      #8A5810;   /* was #9A6414: 3.82:1 on --warn-soft, below AA */
  --warn-soft: #FBF0DC;
  --warn-line: #E7CB98;
  --error:   #B3402B;

  /* ---- Type ----------------------------------------------------------- */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(2.35rem, 1.5rem + 2.5vw, 3.9rem);
  --t-h1:      clamp(2rem, 1.35rem + 2vw, 3.1rem);
  --t-h2:      clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem);
  --t-h3:      clamp(1.15rem, 1.02rem + .45vw, 1.4rem);
  --t-body-lg: clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --t-body:    1rem;
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;
  --t-label:   .75rem;

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.65;

  /* Body copy stays 55–75 characters */
  --measure-text: 68ch;
  --measure-lede: 54ch;

  /* ---- Space ---------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --sp-9: 6.5rem;  --sp-10: 9rem;

  --shell: 1280px;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 3rem);

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 32px;  --r-pill: 999px;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: .18s var(--ease);
  --mid:  .32s var(--ease);
  --slow: .6s var(--ease);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contain sideways bleed without turning <body> into a scroll container —
   that breaks window scrolling and, with it, IntersectionObserver reveals.
   `clip` does not establish one; `hidden` on <html> is the fallback. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

a { color: var(--brand-primary); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--brand-link-hover); }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: var(--lh-head); }
p { margin: 0; }
ul, ol { margin: 0; }

::selection { background: var(--brand-secondary); color: var(--brand-ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-ink); color: #fff;
  padding: .875rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   Shell + rhythm
   -------------------------------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 940px; }

.band { padding-block: var(--sp-9); }
.band--sm { padding-block: var(--sp-8); }
.band--lg { padding-block: var(--sp-10); }
.band--flush-top { padding-top: 0; }

.band--alt  { background: var(--surface-alt); }
.band--cool { background: var(--surface-cool); }
.band--tint { background: var(--surface-tint); }
.band--dark { background: var(--brand-ink); color: var(--text-on-dark); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #fff; }

@media (max-width: 767px) {
  .band { padding-block: var(--sp-8); }
  .band--sm, .band--lg { padding-block: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display { font-size: var(--t-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.032em; }
.h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.03em; }
.h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.026em; }
.h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.018em; }
.h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.012em; }

.lede { font-size: var(--t-body-lg); line-height: 1.55; color: var(--text-secondary); max-width: var(--measure-lede); }
.copy { font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-secondary); max-width: var(--measure-text); }
.copy + .copy { margin-top: var(--sp-4); }
.small { font-size: var(--t-sm); color: var(--text-secondary); }
.on-dark .lede, .band--dark .lede, .on-dark .copy, .band--dark .copy { color: var(--text-on-dark-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-primary);
}
.eyebrow::before {
  content: ""; width: 1.5rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-secondary), var(--brand-accent));
}
.eyebrow--on-dark { color: var(--brand-secondary); }
.eyebrow--plain::before { display: none; }

.accent { color: var(--brand-accent); }

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

.btn {
  --btn-bg: var(--brand-accent);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .875rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  font: inherit; font-size: var(--t-sm); font-weight: 700; line-height: 1;
  letter-spacing: -.005em; cursor: pointer; text-align: center;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast), color var(--fast);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }

.btn--primary { --btn-bg: var(--brand-accent); --btn-fg:#fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { --btn-bg: var(--brand-accent-dark); }

.btn--solid { --btn-bg: var(--brand-primary); --btn-fg:#fff; }
.btn--solid:hover { --btn-bg: var(--brand-primary-dark); }

/* The secondary conversion button, "Call Now". Deliberately not equal to the
   primary: no fill, no shadow, brand-blue rule and brand-blue label. */
.btn--outline { --btn-bg: transparent; --btn-fg: var(--brand-primary); --btn-bd: rgba(47,98,131,.42); }
.btn--outline:hover { --btn-bd: var(--brand-primary); --btn-bg: var(--brand-accent-soft); }

.btn--ghost-dark { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); }
.btn--ghost-dark:hover { --btn-bg: rgba(255,255,255,.14); --btn-bd: rgba(255,255,255,.5); }

.btn--lg { min-height: 3.375rem; padding: 1rem 2rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: var(--t-sm); color: var(--brand-primary);
}
.link-arrow::after { content: "→"; transition: transform var(--fast); }
.link-arrow:hover { color: var(--brand-link-hover); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--on-dark { color: var(--brand-secondary); }
.link-arrow--on-dark:hover { color: #fff; }

@media (max-width: 520px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

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

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,244,237,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--mid), border-color var(--mid), box-shadow var(--mid);
}
.hdr__in {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: 5rem; transition: min-height var(--mid);
}
.hdr[data-stuck="true"] {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 6px 20px -18px rgba(14,38,53,.6);
}
.hdr[data-stuck="true"] .hdr__in { min-height: 4.125rem; }

.brand { display: flex; align-items: center; gap: .7rem; color: var(--text-primary); flex: none; }
.brand:hover { color: var(--text-primary); }
.brand__mark {
  width: 2.375rem; height: 2.375rem; border-radius: 12px; flex: none;
  background: linear-gradient(150deg, var(--brand-primary), var(--brand-ink));
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-sm);
}
.brand__name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.024em; }
.brand__sub {
  display: block; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 1px;
}

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .8rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--text-primary);
  transition: color var(--fast), background var(--fast);
}
.nav__link:hover { color: var(--brand-primary); background: rgba(47,98,131,.07); }
.nav__link[aria-current] { color: var(--brand-primary); }
.nav__link[aria-current]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem;
  height: 2px; border-radius: 2px; background: var(--brand-accent);
}
.nav__chev { width: .5rem; height: .5rem; transition: transform var(--fast); opacity: .55; }
.nav__item:hover .nav__chev, .nav__item:focus-within .nav__chev { transform: rotate(180deg); }

/* Structured dropdown */
.mega {
  position: absolute; top: calc(100% + .5rem); left: 50%; translate: -50% 0;
  min-width: 30rem; padding: 1.25rem;
  background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}
.nav__item:hover > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.mega__link {
  display: block; padding: .7rem .8rem; border-radius: var(--r-sm);
  transition: background var(--fast);
}
.mega__link:hover { background: var(--surface-alt); }
.mega__t { display: block; font-weight: 700; font-size: var(--t-sm); color: var(--text-primary); }
.mega__d { display: block; font-size: var(--t-xs); color: var(--text-tertiary); margin-top: 2px; line-height: 1.4; }
.mega__foot {
  margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}

.hdr__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.hdr__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: var(--t-sm); color: var(--text-primary);
  padding: .6rem .9rem; border-radius: var(--r-pill);
  transition: background var(--fast);
}
.hdr__phone:hover { background: rgba(47,98,131,.08); color: var(--brand-primary); }

.burger {
  display: none; width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; place-items: center;
}
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform var(--fast), opacity var(--fast); }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav, .hdr__phone { display: none; }
  .burger { display: grid; }
  .hdr__cta { margin-left: auto; }
  .hdr__in { min-height: 4.25rem; }
}
@media (max-width: 560px) {
  .hdr__cta .btn { display: none; }
  .brand__sub { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(14,38,53,.45); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--mid), visibility var(--mid);
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(23rem, 88vw);
  background: var(--surface-alt); padding: 1.25rem var(--gutter) 2rem;
  overflow-y: auto; transform: translateX(100%); transition: transform var(--mid);
  display: flex; flex-direction: column; gap: .25rem;
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; margin-bottom: .5rem; }
.drawer__close {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle); background: #fff; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--text-primary);
}
.drawer a.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem .25rem; border-bottom: 1px solid var(--border-subtle);
  font-weight: 700; font-size: 1.0625rem; color: var(--text-primary);
}
.drawer a.drawer__link:hover { color: var(--brand-primary); }
.drawer__group { padding: .5rem 0 .25rem; }
.drawer__glabel {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-tertiary); padding: .5rem .25rem;
}
.drawer__sub { display: block; padding: .55rem .25rem; font-size: var(--t-sm); color: var(--text-secondary); }
.drawer__sub:hover { color: var(--brand-primary); }
.drawer__actions { margin-top: auto; padding-top: 1.25rem; display: grid; gap: .6rem; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.crumbs { padding-block: .875rem; font-size: var(--t-xs); color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); background: var(--surface-alt); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs a { color: var(--text-tertiary); }
.crumbs a:hover { color: var(--brand-primary); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--border-strong); }
.crumbs [aria-current] { color: var(--text-primary); font-weight: 600; }
.crumbs--on-dark { background: transparent; border-bottom-color: var(--line-on-dark); color: var(--text-on-dark-3); }
.crumbs--on-dark a { color: var(--text-on-dark-3); }
.crumbs--on-dark a:hover { color: #fff; }
.crumbs--on-dark [aria-current] { color: var(--text-on-dark); }

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

.hero { position: relative; background: var(--brand-ink); color: var(--text-on-dark); overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(111,180,212,.20), transparent 60%),
    radial-gradient(80% 70% at 8% 95%, rgba(47,98,131,.18), transparent 62%),
    linear-gradient(155deg, var(--brand-ink-2), var(--brand-ink) 62%);
}
/* Sparing water-curve geometry */
.hero::after {
  content: ""; position: absolute; inset: auto -10% -35% -10%; height: 60%; z-index: -1;
  background: radial-gradient(50% 100% at 50% 100%, rgba(47,98,131,.35), transparent 70%);
  pointer-events: none;
}
.hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; padding-block: var(--sp-9); }
.hero--compact .hero__in { padding-block: var(--sp-8); }
.hero__body { max-width: 40rem; }
.hero h1 { margin-block: .9rem 1.1rem; color: #fff; }
.hero .lede { color: var(--text-on-dark-2); margin-bottom: 1.75rem; }

.hero__tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem .4rem .55rem; border-radius: var(--r-pill);
  background: rgba(225,179,128,.14); border: 1px solid rgba(225,179,128,.32);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-secondary);
}
.hero__tag i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--brand-secondary); box-shadow: 0 0 0 3px rgba(225,179,128,.22); }

.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; font-size: var(--t-sm); color: var(--text-on-dark-2); }
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { flex: none; color: var(--brand-secondary); }

@media (max-width: 1023px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-8); }
  .hero__body { max-width: 40rem; }
}

/* Hero visual stack */
.hviz { position: relative; }
.hviz__media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.1);
  aspect-ratio: 4 / 3.2;
}
.hviz__card {
  position: absolute; left: -1.25rem; bottom: -1.25rem; width: min(17rem, 78%);
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-lg); color: var(--text-primary);
}
.hviz__card .k { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.hviz__card .v { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: .3rem; }
.hviz__card .v small { font-size: .875rem; font-weight: 700; color: var(--text-secondary); }
.hviz__card .n { font-size: var(--t-xs); color: var(--text-secondary); margin-top: .25rem; }

@media (max-width: 1023px) { .hviz__card { left: auto; right: 1rem; bottom: -1rem; } }
@media (max-width: 560px) { .hviz__card { position: static; width: 100%; margin-top: .9rem; } }

/* --------------------------------------------------------------------------
   Media frames (photography slots + designed visuals)
   -------------------------------------------------------------------------- */

.frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-alt-2); border: 1px solid var(--border-subtle);
}
.frame--tall { aspect-ratio: 3 / 3.6; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.frame:hover img { transform: scale(1.02); }

/* Photography placeholder — designed, not a broken grey box */
.photo-slot {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .6rem;
  justify-items: center; text-align: center; padding: var(--sp-5);
  background:
    linear-gradient(135deg, rgba(47,98,131,.09), rgba(225,179,128,.12)),
    var(--surface-alt);
}
.photo-slot::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(47,98,131,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,98,131,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.photo-slot svg { position: relative; color: var(--brand-primary); opacity: .5; }
.photo-slot b {
  position: relative; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand-primary); font-weight: 500;
}
.photo-slot span { position: relative; font-size: var(--t-xs); color: var(--text-secondary); max-width: 26ch; line-height: 1.45; }
.frame--on-dark { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.frame--on-dark .photo-slot { background: linear-gradient(135deg, rgba(111,180,212,.14), rgba(47,98,131,.16)); }
.frame--on-dark .photo-slot b { color: var(--brand-secondary); }
.frame--on-dark .photo-slot span { color: var(--text-on-dark-3); }
.frame--on-dark .photo-slot svg { color: var(--brand-aqua); opacity: .6; }

/* --------------------------------------------------------------------------
   Split media section — the core narrative component
   -------------------------------------------------------------------------- */

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center;
}
.split--55 { grid-template-columns: 1.12fr .88fr; }
.split--45 { grid-template-columns: .88fr 1.12fr; }
.split--top { align-items: start; }
.split__media { position: relative; }
/* Alternation: the modifier flips visual order without touching DOM order,
   so the reading order stays logical for screen readers. */
.split--flip .split__media { order: -1; }

@media (max-width: 900px) {
  .split, .split--55, .split--45 { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--flip .split__media { order: 0; }
}

.sect-head { max-width: 46rem; margin-bottom: var(--sp-6); }
.sect-head h2 { margin-top: .75rem; }
.sect-head .lede { margin-top: .9rem; max-width: var(--measure-lede); }
.sect-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); max-width: none; }
@media (max-width: 767px) { .sect-head--split { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } }

/* --------------------------------------------------------------------------
   Cards — deliberately several distinct treatments, not one rounded box
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--sp-5); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* 1 — borderless feature (icon + text, no box) */
.feat { display: grid; gap: .7rem; }
.feat__icon {
  width: 2.75rem; height: 2.75rem; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--surface-tint), #fff);
  border: 1px solid var(--border-cool); color: var(--brand-primary);
}
.band--dark .feat__icon, .on-dark .feat__icon {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--brand-secondary);
}
.feat h3 { font-size: 1.0625rem; }
.feat p { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.55; }
.band--dark .feat p, .on-dark .feat p { color: var(--text-on-dark-2); }

/* 2 — outlined data card */
.dcard {
  border: 1px solid var(--border-cool); border-radius: var(--r-md);
  padding: 1.35rem 1.4rem; background: #fff;
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.dcard:hover { border-color: var(--brand-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dcard__k { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.dcard__v { font-size: 1.0625rem; font-weight: 700; margin-top: .5rem; letter-spacing: -.015em; }
.dcard__n { font-size: var(--t-xs); color: var(--text-secondary); margin-top: .4rem; line-height: 1.5; }

/* 3 — photo card (image top, content below) */
.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: #fff;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-primary); }
.pcard__media { aspect-ratio: 16/10; position: relative; }
.pcard__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: 1.125rem; }
.pcard__body p { font-size: var(--t-sm); color: var(--text-secondary); margin: .5rem 0 1rem; line-height: 1.55; }
.pcard__body .link-arrow { margin-top: auto; }

/* 4 — horizontal card */
.hcard {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center;
  padding: 1.1rem 1.25rem; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: #fff; color: var(--text-primary);
  transition: border-color var(--fast), transform var(--fast), background var(--fast);
}
.hcard:hover { color: var(--text-primary); border-color: var(--brand-primary); transform: translateX(3px); background: var(--surface-alt); }
.hcard__ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: var(--surface-tint); color: var(--brand-primary); flex: none; }
.hcard__t { font-weight: 700; font-size: var(--t-body); display: block; letter-spacing: -.012em; }
.hcard__d { font-size: var(--t-xs); color: var(--text-tertiary); display: block; margin-top: 2px; }
.hcard__go { color: var(--brand-primary); transition: transform var(--fast); }
.hcard:hover .hcard__go { transform: translateX(3px); }

/* 5 — image-overlay card */
.ocard { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 20rem; display: flex; align-items: flex-end; color: #fff; }
.ocard__media { position: absolute; inset: 0; }
.ocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,38,53,.9) 12%, rgba(14,38,53,.25) 55%, transparent); }
.ocard__body { position: relative; z-index: 1; padding: 1.5rem; }
.ocard h3 { color: #fff; font-size: 1.25rem; }
.ocard p { color: rgba(255,255,255,.82); font-size: var(--t-sm); margin-top: .4rem; }

/* 6 — large featured service (asymmetric showcase) */
.showcase { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
.showcase > :first-child { grid-row: span 2; }
@media (max-width: 980px) { .showcase { grid-template-columns: 1fr 1fr; } .showcase > :first-child { grid-row: auto; grid-column: span 2; } }
@media (max-width: 620px) { .showcase { grid-template-columns: 1fr; } .showcase > :first-child { grid-column: auto; } }

.svc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border-subtle); background: #fff;
  color: var(--text-primary); min-height: 15rem;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.svc:hover { color: var(--text-primary); transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-primary); }
.svc__media { position: relative; flex: 1; min-height: 9rem; }
.svc__body { padding: 1.2rem 1.3rem 1.35rem; }
.svc__k { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-accent); }
.svc h3 { font-size: 1.1875rem; margin-top: .45rem; }
.svc p { font-size: var(--t-sm); color: var(--text-secondary); margin-top: .45rem; line-height: 1.5; }
.svc__go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 700; font-size: var(--t-sm); color: var(--brand-primary); }
.svc:hover .svc__go { color: var(--brand-link-hover); }
.svc--lead { min-height: 24rem; }
.svc--lead .svc__media { flex: 0 0 56%; }
.svc--lead .svc__body { padding: 1.5rem 1.6rem 1.7rem; }
.svc--lead h3 { font-size: 1.5rem; }
.svc--lead p { font-size: var(--t-body); }

/* 7 — compact trust item */
.tstrip { display: grid; grid-template-columns: repeat(var(--tstrip-cols, 5), 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; }
.tstrip > div { background: #fff; padding: 1.35rem 1.25rem; display: grid; gap: .3rem; align-content: start; }
.tstrip .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand-primary); line-height: 1; }
.tstrip .l { font-size: var(--t-xs); color: var(--text-secondary); line-height: 1.4; }
.tstrip--3 { --tstrip-cols: 3; }
.tstrip--4 { --tstrip-cols: 4; }
.tstrip--5 { --tstrip-cols: 5; }
@media (max-width: 980px) { .tstrip { --tstrip-cols: 3; } .tstrip--4 { --tstrip-cols: 2; } }
@media (max-width: 560px) { .tstrip, .tstrip--3, .tstrip--4, .tstrip--5 { --tstrip-cols: 2; } }

/* --------------------------------------------------------------------------
   Problem → solution (independent cards; never a comparison)
   -------------------------------------------------------------------------- */

.psol {
  display: grid; gap: .9rem; padding: 1.35rem 1.4rem;
  border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: #fff;
  align-content: start; transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
  color: var(--text-primary);
}
.psol:hover { color: var(--text-primary); border-color: var(--brand-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.psol__ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand-accent-soft); color: var(--brand-accent); }
.psol h3 { font-size: 1.0625rem; }
.psol p { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.55; }
.psol__fix {
  display: inline-flex; align-items: center; gap: .4rem; align-self: start;
  padding: .4rem .75rem; border-radius: var(--r-pill);
  background: var(--surface-tint); color: var(--brand-primary);
  font-size: var(--t-xs); font-weight: 700;
}
.psol__fix::before { content: "→"; opacity: .6; }
/* Linked problem cards carry the sitewide "Learn More →" navigation label with
   the arrow in the text, like every other Learn More label, so the prefix arrow
   is suppressed. Non-link diagnostic chips (repair triage) keep the base style. */
.psol__fix--go::before { content: none; }
.psol:hover .psol__fix--go { color: var(--brand-link-hover); }

/* --------------------------------------------------------------------------
   Process timeline
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); counter-reset: s; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { position: relative; padding-top: 2.75rem; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500;
  color: var(--brand-accent); letter-spacing: .1em;
}
.step::after {
  content: ""; position: absolute; top: .55rem; left: 2.4rem; right: -1.5rem; height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.0625rem; }
.step p { font-size: var(--t-sm); color: var(--text-secondary); margin-top: .4rem; line-height: 1.55; }
.band--dark .step p, .on-dark .step p { color: var(--text-on-dark-2); }
.band--dark .step::after, .on-dark .step::after { background: linear-gradient(90deg, rgba(255,255,255,.24), transparent); }
@media (max-width: 900px) { .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } }
@media (max-width: 520px) { .steps, .steps--3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Water data panel / local snapshot
   -------------------------------------------------------------------------- */

.wpanel {
  border-radius: var(--r-xl); padding: var(--sp-6);
  background: linear-gradient(158deg, var(--brand-ink-2), var(--brand-ink));
  color: var(--text-on-dark); position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.wpanel::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 26rem; height: 26rem;
  background: radial-gradient(circle, rgba(111,180,212,.22), transparent 65%);
}
.wpanel__top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wpanel__fig { position: relative; font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: .6rem; color: #fff; }
.wpanel__fig small { font-size: 1rem; font-weight: 700; color: var(--text-on-dark-3); letter-spacing: 0; }
.wpanel__cls { position: relative; color: var(--text-on-dark-2); margin-top: .5rem; font-size: var(--t-sm); }
.wpanel__rows { position: relative; margin-top: var(--sp-5); display: grid; gap: 0; }
.wpanel__row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line-on-dark); font-size: var(--t-sm); }
.wpanel__row dt, .wpanel__row .k { color: var(--text-on-dark-3); }
.wpanel__row .v { font-weight: 700; text-align: right; color: #fff; }
.wpanel__src { position: relative; margin-top: var(--sp-4); padding-top: .9rem; border-top: 1px solid var(--line-on-dark); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; color: var(--text-on-dark-3); line-height: 1.6; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .1em; padding: .35rem .6rem; border-radius: var(--r-xs); white-space: nowrap;
}
.badge--ok { background: rgba(31,122,92,.2); color: #7BE0BB; }
.badge--warn { background: rgba(225,179,128,.18); color: var(--brand-secondary); }
/* Conflict is a caution state, not a brand accent, so it takes the warning
   family rather than the retired raspberry. */
.badge--conflict { background: rgba(225,179,128,.22); color: #F0CC9B; }

/* Hardness meter — data made visual, no comparison framing */
.meter { position: relative; display: grid; gap: .45rem; }
.meter__bar { height: .5rem; border-radius: var(--r-pill); background: rgba(255,255,255,.12); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-aqua), var(--brand-secondary)); }
.meter__row { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--text-on-dark-2); }
.meter__row b { color: #fff; font-family: var(--font-mono); font-weight: 500; }

/* --------------------------------------------------------------------------
   Service-area explorer
   -------------------------------------------------------------------------- */

.areas { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 980px) { .areas { grid-template-columns: 1fr; gap: var(--sp-6); } }

.band--dark .map .lbl, .on-dark .map .lbl { fill: var(--text-on-dark-2); }
.band--dark .map .colbl, .on-dark .map .colbl { fill: var(--text-on-dark-3); }

.citylist { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (max-width: 520px) { .citylist { grid-template-columns: 1fr; } }
.citychip {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-on-dark); background: var(--panel-on-dark);
  color: var(--text-on-dark); font-size: var(--t-sm); font-weight: 600;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.citychip:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); transform: translateX(3px); }
.citychip em { font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; color: var(--text-on-dark-3); }
.citychip--light { background: #fff; border-color: var(--border-subtle); color: var(--text-primary); }
.citychip--light:hover { color: var(--text-primary); background: var(--surface-alt); border-color: var(--brand-primary); }
.citychip--light em { color: var(--text-tertiary); }


/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.note {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: var(--r-md);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
}
.note b {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em;
  color: var(--warn); background: rgba(154,100,20,.12); padding: .25rem .5rem;
  border-radius: var(--r-xs); white-space: nowrap; flex: none; font-weight: 500;
}
.note p { font-size: var(--t-sm); color: #6A4B18; line-height: 1.55; }
.note--dark { background: rgba(225,179,128,.1); border-color: rgba(225,179,128,.3); }
.note--dark p { color: var(--text-on-dark-2); }
.note--dark b { color: var(--brand-secondary); background: rgba(225,179,128,.16); }

.ph {
  font-family: var(--font-mono); font-size: .94em; font-weight: 500;
  background: rgba(138,88,16,.10); border-bottom: 1px dashed rgba(138,88,16,.55);
  padding: 0 .2em; border-radius: 3px; color: inherit;
}

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

.formcard {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  padding: var(--sp-6); box-shadow: var(--shadow-md);
}
.formcard--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.formcard--dark .field { color: var(--text-on-dark-2); }
.formcard--dark input, .formcard--dark select, .formcard--dark textarea {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff;
}
.formcard--dark input::placeholder, .formcard--dark textarea::placeholder { color: rgba(255,255,255,.4); }
.formcard--dark .form__note { color: var(--text-on-dark-2); }
.formcard--dark .form__note a { color: var(--brand-secondary); }
/* The hero form sits on the dark hero, so its supporting text has to use the
   on-dark tokens. Without these it inherited the light-surface greys and the
   intro and consent lines dropped to about 1.9:1. */
.formcard--dark h2, .formcard--dark .h3 { color: var(--text-on-dark); }
.formcard--dark p.small { color: var(--text-on-dark-2); }
.formcard--dark .consent, .formcard--dark .consent span { color: var(--text-on-dark-2); }
.formcard--dark .consent a { color: var(--brand-secondary); }

.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .4rem; font-size: var(--t-xs); font-weight: 700; color: var(--text-secondary); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; font-weight: 500;
  padding: .85rem .95rem; color: var(--text-primary);
  background: var(--surface-alt); border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-sm); outline: none; width: 100%;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-primary); background: #fff;
  box-shadow: 0 0 0 4px rgba(47,98,131,.13);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.field__err { font-weight: 600; font-size: var(--t-xs); color: var(--error); }
.form__note { font-size: var(--t-xs); color: var(--text-tertiary); line-height: 1.55; }
.form__ok { display: none; padding: 1rem 1.15rem; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); font-size: var(--t-sm); font-weight: 600; }

/* Honeypot: visually hidden, never display:none */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-xs); color: var(--text-secondary); line-height: 1.5; font-weight: 500; }
.consent input { width: 1.05rem; height: 1.05rem; margin-top: .12rem; flex: none; accent-color: var(--brand-primary); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--border-subtle); }
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.2rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-weight: 700; font-size: 1.0625rem; color: var(--text-primary);
  transition: color var(--fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-primary); }
.faq summary::after {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background:
    linear-gradient(var(--text-secondary), var(--text-secondary)) center/ .6rem 1.5px no-repeat,
    linear-gradient(var(--text-secondary), var(--text-secondary)) center/ 1.5px .6rem no-repeat;
  transition: transform var(--mid), border-color var(--fast);
}
.faq details[open] summary::after { transform: rotate(135deg); border-color: var(--brand-primary); }
.faq__a { padding: 0 0 1.35rem; font-size: var(--t-sm); line-height: 1.65; color: var(--text-secondary); max-width: 70ch; }
.faq details[open] .faq__a { animation: faqIn .32s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Data table (reference data only — never a service comparison)
   -------------------------------------------------------------------------- */

.tscroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 34rem; }
table.data caption { text-align: left; padding: 1.1rem 1.25rem 0; font-size: var(--t-xs); color: var(--text-tertiary); }
table.data th, table.data td { text-align: left; padding: .95rem 1.25rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
table.data thead th {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); background: var(--surface-alt);
}
table.data tbody tr:last-child td, table.data tbody tr:last-child th { border-bottom: none; }
table.data th[scope="row"] { font-weight: 700; color: var(--text-primary); }
table.data td.num { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }

@media (max-width: 767px) {
  .tscroll { overflow-x: visible; }
  table.data { min-width: 0; display: block; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  table.data tbody, table.data tr, table.data th, table.data td { display: block; width: auto; }
  table.data tr { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
  table.data tr:last-child { border-bottom: none; }
  table.data th, table.data td { border: none; padding: 0; }
  table.data th[scope="row"] { font-size: 1.0625rem; margin-bottom: .6rem; }
  table.data td { padding-top: .55rem; }
  table.data td::before {
    content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-tertiary); margin-bottom: .15rem;
  }
  table.data td.num { white-space: normal; }
}

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

.cta {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--brand-primary-deep), var(--brand-ink) 65%);
  color: var(--text-on-dark); padding: var(--sp-8);
  border: 1px solid rgba(255,255,255,.08);
}
.cta::before {
  content: ""; position: absolute; inset: auto auto -55% -12%; width: 30rem; height: 30rem;
  background: radial-gradient(circle, rgba(47,98,131,.55), transparent 62%);
}
.cta::after {
  content: ""; position: absolute; inset: -45% -10% auto auto; width: 26rem; height: 26rem;
  background: radial-gradient(circle, rgba(111,180,212,.2), transparent 65%);
}
.cta__in { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-7); align-items: center; }
.cta h2 { color: #fff; max-width: 18ch; }
.cta .lede { color: var(--text-on-dark-2); margin-top: .9rem; max-width: 46ch; }
.cta__pts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
/* Default is the LIGHT surface case. This list is used inside conversion
   blocks and split sections on cream as well as inside the dark CTA band, and
   it previously carried the dark-surface colors everywhere: 1.69:1 for the
   text and 1.75:1 for the tick. Light is now the default and the pale
   treatment is scoped to dark contexts only. */
.cta__pts li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: var(--t-sm); line-height: 1.55; color: var(--text-secondary);
}
.cta__pts svg { flex: none; margin-top: .2rem; color: var(--brand-primary); }

.cta .cta__pts li, .band--dark .cta__pts li, .on-dark .cta__pts li, .hero .cta__pts li { color: var(--text-on-dark-2); }
.cta .cta__pts svg, .band--dark .cta__pts svg, .on-dark .cta__pts svg, .hero .cta__pts svg { color: var(--brand-secondary); }
@media (max-width: 900px) { .cta { padding: var(--sp-6); } .cta__in { grid-template-columns: 1fr; gap: var(--sp-5); } }

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

.ftr { background: var(--brand-ink); color: var(--text-on-dark-2); padding-block: var(--sp-8) var(--sp-5); }
.ftr__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line-on-dark); }
.ftr__brand { display: flex; align-items: center; gap: .7rem; color: #fff; }
.ftr__brand:hover { color: #fff; }
.ftr__blurb { font-size: var(--t-sm); line-height: 1.6; margin-top: 1rem; max-width: 30ch; }
.ftr__phone { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.ftr__phone:hover { color: var(--brand-secondary); }
.ftr h3 { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-secondary); margin-bottom: 1rem; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.ftr a { font-size: var(--t-sm); color: var(--text-on-dark-2); }
.ftr a:hover { color: #fff; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: var(--sp-5); font-size: var(--t-xs); color: var(--text-on-dark-3); }
.ftr__base nav { display: flex; gap: 1.25rem; }
@media (max-width: 980px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* --------------------------------------------------------------------------
   Sticky mobile action bar
   -------------------------------------------------------------------------- */

.abar { display: none; }
@media (max-width: 767px) {
  .abar {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    position: fixed; inset: auto 0 0 0; z-index: 90;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
  }
  .abar .btn { min-height: 2.875rem; font-size: var(--t-sm); padding: .75rem 1rem; }
  body { padding-bottom: 5rem; }
}

/* --------------------------------------------------------------------------
   Editorial — blog posts only
   -------------------------------------------------------------------------- */

.article { max-width: 44rem; margin-inline: auto; }
.article h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); margin-top: var(--sp-7); }
.article h2:first-child { margin-top: 0; }
.article p { font-size: 1.0625rem; line-height: 1.72; color: var(--text-secondary); margin-top: 1rem; max-width: 70ch; }
.article ul { margin-top: 1rem; padding-left: 1.15rem; }
.article li { font-size: 1.0625rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: .6rem; }
.article .tscroll, .article .note, .article .callout { margin-top: var(--sp-5); }
.callout {
  border-left: 3px solid var(--brand-accent); padding: .35rem 0 .35rem 1.25rem;
  margin-top: var(--sp-5);
}
.callout h2, .callout h3 { font-size: 1.0625rem; letter-spacing: -.015em; }
.callout p { margin-top: .5rem; }

/* --------------------------------------------------------------------------
   Motion — scoped to .js so content is never stuck hidden
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .rv-d1 { transition-delay: .06s; }
  .js .rv-d2 { transition-delay: .12s; }
  .js .rv-d3 { transition-delay: .18s; }
}

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

@media print {
  .hdr, .abar, .drawer, .ftr { display: none !important; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Photography inside pre-sized containers
   -------------------------------------------------------------------------- */

/* .hviz__media, .svc__media, .pcard__media and .ocard__media already own their
   box (ratio, radius, clipping). The frame emitted by pic() must fill that box
   rather than impose a second ratio inside it. */
.hviz__media > .frame,
.svc__media > .frame,
.pcard__media > .frame,
.ocard__media > .frame {
  position: absolute; inset: 0;
  aspect-ratio: auto; border: 0; border-radius: 0; background: none;
}
.hviz__media > .frame img,
.svc__media > .frame img,
.pcard__media > .frame img,
.ocard__media > .frame img { width: 100%; height: 100%; object-fit: cover; }

/* Subject in these frames sits centre-to-upper, so bias the crop upward:
   a centred crop cuts heads off on tall mobile viewports. */
.frame img { object-position: 50% 42%; }

/* Gallery tiles */
.gal { position: relative; }
.gal .frame { border-radius: var(--r-md); }

@media (max-width: 620px) {
  /* Keep hero photography from dominating the fold on a phone. */
  .hviz__media { aspect-ratio: 3 / 2; }
}

/* Showcase media needs a declared ratio. As a flex child it collapsed to
   whatever height the card body left over, which cropped equipment photos to a
   letterbox slice. */
.svc__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
.svc--lead .svc__media { aspect-ratio: 4 / 3; }
@media (max-width: 980px) {
  .svc--lead .svc__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .svc__media, .svc--lead .svc__media { aspect-ratio: 16 / 10; }
}
/* The card is sized by its content now, so the old floor can go. */
.svc { min-height: 0; }
.svc--lead { min-height: 0; }

/* --------------------------------------------------------------------------
   City directory, Service Areas hub
   -------------------------------------------------------------------------- */

.cdir { display: grid; gap: var(--sp-7); }

.cdir__county {
  display: flex; align-items: baseline; gap: .75rem;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand-primary);
  padding-bottom: .8rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
.cdir__county span {
  font-size: var(--t-label); letter-spacing: .1em;
  color: var(--text-tertiary); margin-left: auto;
}

.cdir__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 980px) { .cdir__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cdir__grid { grid-template-columns: 1fr; } }

/* Equal height regardless of copy length: the link is pushed to the bottom. */
.ccard {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.25rem 1.35rem 1.15rem;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  color: var(--text-primary);
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.ccard:hover {
  color: var(--text-primary); border-color: var(--brand-primary);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.ccard:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.ccard__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -.018em; }
.ccard__line {
  font-size: var(--t-sm); line-height: 1.5; color: var(--text-secondary);
  margin-top: .35rem; margin-bottom: 1rem;
}
.ccard__go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto;
  font-size: var(--t-xs); font-weight: 700; color: var(--brand-primary);
}
.ccard__go svg { transition: transform var(--fast); }
.ccard:hover .ccard__go { color: var(--brand-link-hover); }
.ccard:hover .ccard__go svg { transform: translateX(3px); }

/* Service-navigation cards carry a text label rather than a bare arrow.
   Grids of resources or cities keep the arrow, so only this variant changes. */
.hcard__go--label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
@media (max-width: 480px) {
  /* Give the label its own row rather than squeezing the title column. */
  .hcard:has(.hcard__go--label) { grid-template-columns: auto 1fr; }
  .hcard__go--label { grid-column: 2; margin-top: .35rem; }
}

/* --------------------------------------------------------------------------
   Designed content cards — 2026-09-21
   Approved prose sections (cost, warranty, local water, plan selection) are
   presented as structured panels rather than running blog text. Existing
   palette and tokens only; no new colours.
   -------------------------------------------------------------------------- */
.ccard {
  position: relative; background: var(--surface); border: 1px solid var(--border-cool);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.ccard::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(180deg, var(--brand-secondary), var(--brand-primary));
}
.ccard__head {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem) clamp(1.4rem, 1rem + 2vw, 2.6rem) 0;
}
.ccard__icon {
  flex: none; width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-accent-soft); color: var(--brand-primary); border: 1px solid var(--border-cool);
}
.ccard__eyebrow {
  display: block; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-primary); margin-bottom: .35rem;
}
.ccard__head h2 { font-size: var(--t-h2); line-height: 1.15; }
.ccard__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.4rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 2vw, 2.4rem);
}
.ccard__grid--single { grid-template-columns: minmax(0, 1fr); }
.ccard__main p { font-size: var(--t-body-lg); line-height: 1.7; color: var(--text-secondary); }
.ccard__main p + p { margin-top: 1rem; }
.ccard__aside {
  background: var(--surface-tint); border: 1px solid var(--border-cool); border-radius: var(--r-md);
  padding: 1.35rem 1.4rem; align-self: start;
}
.ccard__aside h3 {
  display: flex; align-items: center; gap: .6rem; font-size: 1.0625rem; color: var(--brand-ink);
}
.ccard__aside h3 svg { color: var(--brand-secondary-dk); flex: none; }
.ccard__aside p { font-size: var(--t-sm); line-height: 1.65; color: var(--text-secondary); margin-top: .75rem; }
.ccard__src {
  display: inline-block; margin-top: .9rem; font-size: var(--t-xs); color: var(--text-tertiary);
  font-family: var(--font-mono); letter-spacing: .02em;
}
.fig {
  color: var(--brand-ink); font-weight: 700; background: var(--brand-secondary-sf);
  padding: .05em .35em; border-radius: var(--r-xs); white-space: nowrap;
}
.ccard a, .icard a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Numbered inclusion cards — "What is included" lists */
.igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.icard {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border-cool); border-radius: var(--r-md);
  padding: 1.35rem 1.4rem; transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.icard:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.icard__n {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-primary); color: #fff; font-weight: 700; font-size: .9375rem;
}
.icard h3 { font-size: 1.0625rem; }
.icard p { font-size: var(--t-sm); line-height: 1.6; color: var(--text-secondary); margin-top: .4rem; }

/* PFAS / published-figure list */
.flist { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.flist__i {
  background: var(--surface); border: 1px solid var(--border-cool); border-radius: var(--r-sm);
  padding: .9rem 1rem;
}
.flist__k { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.flist__v { font-size: 1.125rem; font-weight: 700; color: var(--brand-ink); margin-top: .25rem; }

@media (max-width: 860px) {
  .ccard__grid { grid-template-columns: minmax(0, 1fr); }
  .igrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ccard__head { flex-direction: column; align-items: flex-start; }
}

/* Published-figure value on city data cards (2026-09-21). */
.dcard__big { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: var(--brand-primary); line-height: 1.1; margin-bottom: .5rem; }
.src { font-weight: 600; }
.ocard h3 { font-size: 1.125rem; }

/* ==========================================================================
   2026 water-technology layer — owner brief 2026-09-22
   Deep navy, clean white, controlled aqua. Existing tokens plus aqua tints
   derived from --brand-aqua. Restrained motion, no neon, no glass.
   ========================================================================== */
:root {
  --aqua: var(--brand-aqua);
  --aqua-soft: rgba(111,180,212,.14);
  --aqua-line: rgba(111,180,212,.38);
  --navy-grad: radial-gradient(120% 90% at 85% 0%, rgba(111,180,212,.18), transparent 55%),
               radial-gradient(90% 70% at 0% 100%, rgba(47,98,131,.35), transparent 60%),
               linear-gradient(160deg, #0E2635 0%, #102c3e 55%, #0b1f2c 100%);
}

/* Tighter vertical rhythm: no large empty bands. */
.band { padding-block: clamp(3.25rem, 2.2rem + 3.2vw, 5.5rem); }
.band--sm { padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); }
.sect-head { margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem); }

/* Dark surfaces carry the water-tech gradient and a faint flow-line pattern. */
.hero, .band--dark { background: var(--navy-grad); position: relative; isolation: isolate; }
.hero::after, .band--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' viewBox='0 0 600 220'%3E%3Cg fill='none' stroke='%236FB4D4' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M0 40c75-24 150 24 225 0s150-24 225 0 150 24 150 0'/%3E%3Cpath d='M0 95c75-24 150 24 225 0s150-24 225 0 150 24 150 0'/%3E%3Cpath d='M0 150c75-24 150 24 225 0s150-24 225 0 150 24 150 0'/%3E%3Cpath d='M0 205c75-24 150 24 225 0s150-24 225 0 150 24 150 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 220px;
}
.eyebrow, .ccard__eyebrow { color: var(--brand-primary); }
.eyebrow--on-dark, .hero .eyebrow, .band--dark .eyebrow { color: var(--aqua); }
.hero__tag { border: 1px solid var(--aqua-line); background: rgba(111,180,212,.08); color: #d9eef7; }
.hero__tag i { background: var(--aqua); box-shadow: 0 0 0 4px rgba(111,180,212,.18); }

/* Accessible focus: visible aqua ring on every interactive element. */
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--aqua); outline-offset: 2px;
}
.btn--primary { box-shadow: 0 10px 24px -12px rgba(47,98,131,.65); }

/* ---------------------------------------------------------- split visual --
 * Text column + image column. The image column stretches to the height of
 * the text column and the photo fills it with object-fit: cover, so the
 * picture always matches its section instead of floating in whitespace. */
.sv {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.5rem, 1rem + 2.6vw, 3.5rem); align-items: stretch;
}
.sv--flip > .sv__media { order: -1; }
.sv__body { align-self: center; min-width: 0; }
.sv__body > .sect-head:last-child { margin-bottom: 0; }
.sv__media {
  position: relative; min-height: 360px; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 30px 60px -38px rgba(14,38,53,.55); border: 1px solid var(--border-cool);
  background: var(--surface-tint);
}
.sv__media .frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.sv__media .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(14,38,53,.35));
}
.sv__tag, .hero__mtag {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: #eaf6fb; background: rgba(14,38,53,.62); border: 1px solid rgba(255,255,255,.18);
  padding: .3rem .55rem; border-radius: var(--r-pill);
}
.band--dark .sv__media { border-color: rgba(255,255,255,.12); }
@media (max-width: 900px) {
  .sv { grid-template-columns: minmax(0, 1fr); }
  .sv--flip > .sv__media { order: 0; }
  .sv__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Hero with image column (service + city pages). */
.hero--split .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
.hero--split .hero__body { align-self: center; }
.hero__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 340px;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.hero__media .frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; background: transparent; }
.hero__media .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero--split .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------ connected process line -- */
.steps { gap: 1rem; }
.step {
  background: var(--surface); border: 1px solid var(--border-cool); border-radius: var(--r-md);
  padding: 3.6rem 1.25rem 1.35rem; box-shadow: 0 16px 34px -28px rgba(14,38,53,.5);
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.step:hover { transform: translateY(-3px); border-color: var(--aqua-line); }
.step::before {
  top: 1.1rem; left: 1.25rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; letter-spacing: 0;
  color: #fff; background: linear-gradient(145deg, var(--brand-primary), #3f86ad);
  box-shadow: 0 0 0 5px var(--aqua-soft);
}
.step::after { top: 2.15rem; left: 3.7rem; right: -1.1rem; height: 2px; background: linear-gradient(90deg, var(--aqua-line), transparent); }
.band--dark .step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.steps--rail { grid-template-columns: minmax(0, 1fr) !important; gap: .75rem; }
.steps--rail .step::after { display: none; }
.steps--rail .step { padding: 1rem 1.25rem 1rem 4.2rem; }
.steps--rail .step::before { top: 50%; transform: translateY(-50%); }

/* ------------------------------------------ cards and panels, refined ---- */
.dcard, .icard, .ccard, .flist__i { box-shadow: 0 18px 40px -34px rgba(14,38,53,.55); }
.dcard:hover, .icard:hover { border-color: var(--aqua-line); }
.dcard__big { background: linear-gradient(120deg, var(--brand-primary), #3f86ad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band--dark .dcard { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.band--dark .dcard__k { color: var(--aqua); }
.band--dark .dcard__v { color: #fff; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); }
.band--dark .dcard__n { color: var(--text-on-dark-2); font-size: var(--t-sm); }
.icard__n { background: linear-gradient(145deg, var(--brand-primary), #3f86ad); box-shadow: 0 0 0 4px var(--aqua-soft); }
.igrid--1 { grid-template-columns: minmax(0, 1fr) !important; gap: .7rem; }
.igrid--1 .icard { padding: .95rem 1.15rem; }
.ccard::before { background: linear-gradient(180deg, var(--aqua), var(--brand-primary)); }
.ccard__aside { background: linear-gradient(160deg, var(--surface-tint), #fff); }
.ccard--flat { box-shadow: none; }
.ccard__main p, .sv__body p.copy, .sv__body .lede { max-width: 62ch; }

/* Warranty / spec panel beside cost copy. */
.spec { border-radius: var(--r-md); background: var(--navy-grad); color: var(--text-on-dark); padding: 1.35rem 1.4rem; margin-top: 1.25rem; }
.spec h3 { color: #fff; font-size: 1.0625rem; display: flex; gap: .55rem; align-items: center; }
.spec h3 svg { color: var(--aqua); }
.spec p { color: var(--text-on-dark-2); font-size: var(--t-sm); line-height: 1.65; margin-top: .6rem; }
.spec .fig { background: rgba(111,180,212,.18); color: #fff; }

/* FAQ accordion: clear state, accessible target size. */
.faq summary { min-height: 3rem; }
.faq details[open] summary { color: var(--brand-primary); }

/* Form: compact secondary consent, prominent privacy line. */
.form__note--lead { text-align: center; font-size: var(--t-xs); color: var(--text-secondary); margin-top: .85rem; }
.consent--compact { display: flex; gap: .5rem; margin-top: .65rem; font-size: .75rem; line-height: 1.45; color: var(--text-tertiary); align-items: flex-start; }
.consent--compact input { width: 1rem; height: 1rem; margin-top: .1rem; flex: none; }

/* Footer base: hours + illustration disclosure. */
.ftr__base { gap: 1rem 2rem; flex-wrap: wrap; align-items: flex-start; }
.ftr__legal { display: grid; gap: .35rem; }
.ftr__hours { color: var(--text-on-dark-2); }
.ftr__disc { color: var(--text-on-dark-3); max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  .step, .dcard, .icard, .btn, .frame img { transition: none !important; transform: none !important; }
}

/* Grid children may shrink below intrinsic image width (mobile overflow fix, 2026-09-22). */
.split > *, .sv > *, .hero__in > * { min-width: 0; }
@media (max-width: 900px) { .split, .split--55, .split--45 { grid-template-columns: minmax(0, 1fr); } }

/* Image under the FAQ heading. Explicit width so a min-height never widens it past its column. */
.sv__media--aside { width: 100%; margin-top: 1.75rem; min-height: 260px; }
@media (max-width: 900px) { .sv__media--aside { min-height: 0; aspect-ratio: 16 / 10; } }

/* --------------------------------------------------------------------------
   Homepage service cards — "What each piece does" (2026-09-22)
   Equal-height cards, image header, icon badge over the image edge, link
   pinned to the bottom. Navy/white/aqua, restrained motion.
   -------------------------------------------------------------------------- */
.svcx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, .6rem + .8vw, 1.4rem); }
.svcx__card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border-cool); border-radius: var(--r-lg);
  overflow: hidden; color: inherit; text-decoration: none;
  box-shadow: 0 22px 44px -36px rgba(14,38,53,.6);
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.svcx__card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--aqua), var(--brand-primary));
  transform: scaleX(0); transform-origin: left; transition: transform var(--slow);
}
.svcx__card:hover, .svcx__card:focus-visible {
  transform: translateY(-4px); border-color: var(--aqua-line);
  box-shadow: 0 30px 56px -34px rgba(14,38,53,.55);
}
.svcx__card:hover::after, .svcx__card:focus-visible::after { transform: scaleX(1); }
.svcx__media { position: relative; display: block; }
.svcx__media .frame { border: 0; border-radius: 0; aspect-ratio: 16 / 11; }
.svcx__media .frame img { transition: transform var(--slow); }
.svcx__card:hover .svcx__media .frame img { transform: scale(1.04); }
.svcx__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,38,53,0) 45%, rgba(14,38,53,.45));
}
.svcx__num {
  position: absolute; top: .8rem; left: .8rem; z-index: 1;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em;
  color: #eaf6fb; background: rgba(14,38,53,.6); border: 1px solid rgba(255,255,255,.2);
  padding: .28rem .55rem; border-radius: var(--r-pill);
}
.svcx__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 1.3rem 1.35rem; }
.svcx__icon {
  width: 3rem; height: 3rem; margin-top: -1.5rem; position: relative; z-index: 2;
  display: grid; place-items: center; border-radius: 14px;
  color: #fff; background: linear-gradient(145deg, var(--brand-primary), #3f86ad);
  box-shadow: 0 0 0 4px var(--surface), 0 10px 22px -10px rgba(47,98,131,.8);
}
.svcx__t { font-size: 1.125rem; line-height: 1.25; margin-top: 1rem; color: var(--brand-ink); }
.svcx__d { display: block; font-size: var(--t-sm); line-height: 1.6; color: var(--text-secondary); margin-top: .6rem; flex: 1; }
.svcx__go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
  font-weight: 700; font-size: var(--t-sm); color: var(--brand-primary);
}
.svcx__go em { font-style: normal; transition: transform var(--fast); }
.svcx__card:hover .svcx__go em { transform: translateX(4px); }
.svcx__callout {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding: 1.15rem 1.4rem;
  border-radius: var(--r-md); background: linear-gradient(120deg, var(--surface-tint), #fff);
  border: 1px solid var(--border-cool); text-align: center;
}
.svcx__callout svg { color: var(--brand-primary); flex: none; }
.svcx__callout p { margin: 0; color: var(--text-secondary); }
.svcx__callout a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .svcx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .svcx { grid-template-columns: minmax(0, 1fr); }
  .svcx__callout { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .svcx__card, .svcx__card::after, .svcx__media .frame img, .svcx__go em { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   /services/ hub — bento services grid + city directory (2026-09-22)
   Distinct from the homepage card row: asymmetric bento with overlay copy,
   and a tiled city directory. Navy/white/aqua, restrained motion.
   -------------------------------------------------------------------------- */
.bento {
  display: grid; gap: clamp(.9rem, .6rem + .8vw, 1.35rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(15rem, 1fr));
}
.bento__card--1 { grid-column: 1; grid-row: 1 / span 2; }
.bento__card--2 { grid-column: 2 / span 2; grid-row: 1; }
.bento__card--3 { grid-column: 2; grid-row: 2; }
.bento__card--4 { grid-column: 3; grid-row: 2; }
.bento__card {
  position: relative; display: flex; align-items: flex-end; min-width: 0; min-height: 15rem;
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none;
  box-shadow: 0 30px 60px -40px rgba(14,38,53,.7);
  transition: transform var(--fast), box-shadow var(--fast);
}
.bento__media { position: absolute; inset: 0; z-index: -2; }
.bento__media .frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.bento__media .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.bento__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(14,38,53,.92) 0%, rgba(14,38,53,.55) 38%, rgba(14,38,53,.08) 70%),
    linear-gradient(90deg, rgba(14,38,53,.35), transparent 60%);
}
.bento__body { position: relative; display: grid; gap: .45rem; padding: clamp(1.2rem, 1rem + .8vw, 1.8rem); max-width: 32rem; }
.bento__icon {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px; margin-bottom: .35rem;
  color: #fff; background: rgba(111,180,212,.22); border: 1px solid rgba(111,180,212,.45);
}
.bento__t { color: #fff; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); line-height: 1.15; margin: 0; }
.bento__card--1 .bento__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.bento__d { color: #d6e7f0; font-size: var(--t-body-lg); line-height: 1.45; }
.bento__go {
  position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem; color: #fff;
  background: rgba(14,38,53,.45); border: 1px solid rgba(255,255,255,.28);
  transition: background var(--fast), transform var(--fast), border-color var(--fast);
}
.bento__card:hover, .bento__card:focus-visible { transform: translateY(-4px); box-shadow: 0 36px 70px -38px rgba(14,38,53,.75); }
.bento__card:hover .bento__media .frame img { transform: scale(1.05); }
.bento__card:hover .bento__go, .bento__card:focus-visible .bento__go {
  background: var(--aqua); border-color: var(--aqua); color: var(--brand-ink); transform: rotate(-45deg);
}
.bento__cta { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

/* City directory: tiles with pin + name + arrow. */
.citydir .h2 { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.citydir__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.citytile {
  display: flex; align-items: center; gap: .7rem; min-width: 0;
  padding: .95rem 1.05rem; border-radius: var(--r-md); text-decoration: none; color: var(--brand-ink);
  background: var(--surface); border: 1px solid var(--border-cool);
  box-shadow: 0 14px 30px -28px rgba(14,38,53,.6);
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.citytile__pin {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  color: var(--brand-primary); background: var(--aqua-soft);
}
.citytile__n { flex: 1; font-weight: 600; min-width: 0; }
.citytile__go { color: var(--text-tertiary); transition: transform var(--fast), color var(--fast); }
.citytile:hover, .citytile:focus-visible { background: var(--surface-tint); border-color: var(--aqua-line); transform: translateY(-2px); }
.citytile:hover .citytile__go, .citytile:focus-visible .citytile__go { color: var(--brand-primary); transform: translateX(3px); }
.citytile:hover .citytile__pin { background: var(--brand-primary); color: #fff; }

@media (max-width: 1100px) {
  .citydir__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(14rem, auto); }
  .bento__card--1, .bento__card--2, .bento__card--3, .bento__card--4 { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(13rem, auto); }
  .citydir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .bento__card, .bento__media .frame img, .bento__go, .citytile, .citytile__go { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   /service-areas/ — service areas only (2026-09-22)
   County jump panel in the hero, portrait photo cards per county.
   -------------------------------------------------------------------------- */
.sa-hero .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; }
.sa-jump { display: grid; gap: .75rem; }
.sa-jump__i {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .15rem; align-items: center;
  padding: 1.05rem 3.2rem 1.05rem 1.15rem; border-radius: var(--r-md); text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.sa-jump__n {
  grid-row: 1 / span 2; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 12px;
  font-size: 1.35rem; font-weight: 800; color: var(--brand-ink); background: var(--aqua);
}
.sa-jump__k { font-weight: 700; font-size: 1.05rem; }
.sa-jump__c { color: var(--text-on-dark-2); font-size: var(--t-xs); line-height: 1.45; }
.sa-jump__go { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--aqua); font-size: 1.1rem; }
.sa-jump__i:hover, .sa-jump__i:focus-visible { background: rgba(111,180,212,.14); border-color: var(--aqua-line); transform: translateX(4px); }

.sa-county { scroll-margin-top: 5.5rem; }
.sa-county__head { display: flex; align-items: center; gap: .85rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.sa-county__pin {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, var(--brand-primary), #3f86ad); box-shadow: 0 0 0 5px var(--aqua-soft);
}
.sa-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + .7vw, 1.15rem); }
.sa-card {
  position: relative; display: flex; align-items: flex-end; min-width: 0; aspect-ratio: 3 / 4;
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none;
  box-shadow: 0 26px 50px -36px rgba(14,38,53,.7); transition: transform var(--fast), box-shadow var(--fast);
}
.sa-card__media { position: absolute; inset: 0; z-index: -2; }
.sa-card__media .frame { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.sa-card__media .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.sa-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14,38,53,.92) 0%, rgba(14,38,53,.45) 42%, rgba(14,38,53,0) 72%);
}
.sa-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--aqua), var(--brand-primary)); transform: scaleX(0); transform-origin: left; transition: transform var(--slow);
}
.sa-card__body { display: grid; gap: .3rem; padding: 1.1rem 1.15rem 1.2rem; width: 100%; }
.sa-card__n { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.sa-card__go { font-size: var(--t-xs); font-weight: 600; color: #cfe6f1; display: inline-flex; gap: .35rem; align-items: center; }
.sa-card__go em { font-style: normal; transition: transform var(--fast); }
.sa-card:hover, .sa-card:focus-visible { transform: translateY(-5px); box-shadow: 0 34px 64px -34px rgba(14,38,53,.75); }
.sa-card:hover .sa-card__media .frame img { transform: scale(1.06); }
.sa-card:hover::after, .sa-card:focus-visible::after { transform: scaleX(1); }
.sa-card:hover .sa-card__go em { transform: translateX(4px); }

.sa-cta__in .btn-row { justify-content: flex-end; }
@media (max-width: 900px) { .sa-cta__in .btn-row { justify-content: flex-start; } }

@media (max-width: 1100px) { .sa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sa-hero .hero__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-card__n { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-card, .sa-card::after, .sa-card__media .frame img, .sa-jump__i { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   /about/ — editorial hero, quote panels, numbered city ribbon, framed CTA
   (2026-09-22)
   -------------------------------------------------------------------------- */
.abt-hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background:
    radial-gradient(60rem 30rem at 100% 0%, var(--aqua-soft), transparent 60%),
    linear-gradient(180deg, var(--surface-tint), var(--surface));
}
.abt-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.abt-hero__h { margin-top: .9rem; color: var(--brand-ink); }
.abt-hero__body .lede { margin-top: 1.1rem; max-width: 36rem; }
.abt-hero__body .btn-row { margin-top: 1.9rem; }
.abt-hero__media { position: relative; padding: 0 0 2.2rem 2.2rem; }
.abt-hero__media .frame { border-radius: 28px 28px 28px 120px; box-shadow: 0 40px 80px -48px rgba(14,38,53,.7); }
.abt-hero__media::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 55%; height: 55%; z-index: -1;
  border-radius: 24px; background: repeating-linear-gradient(135deg, var(--aqua-soft) 0 2px, transparent 2px 12px);
}
.abt-badge {
  position: absolute; display: inline-flex; align-items: center; gap: .6rem; max-width: calc(100% - 1rem);
  padding: .7rem 1rem .7rem .7rem; border-radius: 999px; font-weight: 600; font-size: var(--t-sm);
  background: var(--surface); color: var(--brand-ink); text-decoration: none;
  box-shadow: 0 18px 40px -22px rgba(14,38,53,.55); border: 1px solid var(--border-cool);
}
.abt-badge__i { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-primary); }
.abt-badge--phone { top: 1.4rem; right: -0.6rem; transition: transform var(--fast); }
.abt-badge--phone:hover, .abt-badge--phone:focus-visible { transform: translateY(-2px); }
.abt-badge--hours { left: 0; bottom: 0; background: var(--brand-ink); color: #fff; border-color: transparent; }
.abt-badge--hours .abt-badge__i { background: var(--aqua); color: var(--brand-ink); }

.abt-facts { gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); align-items: stretch; }
.abt-panel {
  position: relative; height: 100%; padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-cool);
  box-shadow: 0 24px 50px -40px rgba(14,38,53,.6);
}
.abt-panel::before {
  content: "\201C"; position: absolute; top: -.35rem; right: 1.4rem; font-family: var(--font-display, Georgia, serif);
  font-size: 6.5rem; line-height: 1; color: var(--aqua-soft); pointer-events: none;
}
.abt-panel__i {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px; margin-bottom: 1.1rem;
  color: var(--brand-primary); background: var(--aqua-soft);
}
.abt-panel__t { position: relative; font-size: var(--t-body-lg); line-height: 1.65; color: var(--text-secondary); margin: 0; }
.abt-panel--dark { background: linear-gradient(150deg, var(--brand-ink), #12405a); border-color: transparent; }
.abt-panel--dark::before { color: rgba(111,180,212,.18); }
.abt-panel--dark .abt-panel__i { color: var(--brand-ink); background: var(--aqua); }
.abt-panel--dark .abt-panel__t { color: #e3eff5; }

.abt-cities__head { display: flex; align-items: center; gap: .9rem; margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); }
.abt-cities__pin {
  flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, var(--brand-primary), #3f86ad); box-shadow: 0 0 0 6px var(--aqua-soft);
}
.abt-ribbon {
  list-style: none; margin: 0; padding: 0; counter-reset: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .7rem;
}
.abt-chip {
  display: flex; align-items: center; gap: .85rem; min-width: 0; padding: .55rem 1rem .55rem .55rem;
  border-radius: 999px; text-decoration: none; color: var(--brand-ink); font-weight: 600;
  background: var(--surface-tint); border: 1px solid var(--border-cool);
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.abt-chip__n {
  flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; color: var(--brand-primary); background: var(--surface);
  border: 1px solid var(--aqua-line);
}
.abt-chip__t { flex: 1; min-width: 0; }
.abt-chip__go { color: var(--text-tertiary); transition: transform var(--fast), color var(--fast); }
.abt-chip:hover, .abt-chip:focus-visible { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); transform: translateY(-2px); }
.abt-chip:hover .abt-chip__n, .abt-chip:focus-visible .abt-chip__n { background: var(--aqua); color: var(--brand-ink); border-color: var(--aqua); }
.abt-chip:hover .abt-chip__go, .abt-chip:focus-visible .abt-chip__go { color: var(--aqua); transform: translateX(3px); }


@media (max-width: 900px) {
  .abt-hero__in { grid-template-columns: minmax(0, 1fr); }
  .abt-hero__media { max-width: 34rem; }
}
@media (max-width: 600px) {
  .abt-hero__media { padding: 0 0 1.6rem 1rem; }
  .abt-hero__media .frame { border-radius: 22px 22px 22px 70px; }
  .abt-badge--phone { right: .4rem; top: .8rem; }
  .abt-badge { font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .abt-chip, .abt-chip__go, .abt-badge--phone { transition: none !important; transform: none !important; }
}
@media (max-width: 600px) {
  .abt-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .abt-chip { gap: .55rem; padding: .4rem .7rem .4rem .4rem; font-size: var(--t-sm); }
  .abt-chip__n { width: 2.1rem; height: 2.1rem; }
  .abt-chip__go { display: none; }
}

/* --------------------------------------------------------------------------
   Completed work — genuine job photos only (2026-09-22)
   Shared base + one design per service:
     .wk--stagger  softeners   navy band, staggered cards, overlapping captions
     .wk--frame    filtration  mounted prints on a light band, middle one navy
     .wk--pair     RO          sticky heading beside a two-photo pair
   -------------------------------------------------------------------------- */
.wk__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.wk__head .lede { margin: 0; }
.wk__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.5vw, 2rem); align-items: start; }
.wk-card { margin: 0; min-width: 0; position: relative; }
.wk-card__ph { position: relative; overflow: hidden; }
.wk-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--slow); }
.wk-card:hover .wk-card__ph img { transform: scale(1.04); }
.wk-card__t { margin: 0; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.25; color: var(--brand-ink); }
.wk-card__d { margin: .55rem 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--text-secondary); }
.wk-card__n {
  position: absolute; top: .85rem; left: .85rem; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
  display: grid; place-items: center; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .05em; color: var(--brand-ink); background: var(--aqua);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
}

/* stagger — softeners */
.wk--stagger .wk__head .h2 { color: #fff; }
.wk--stagger .wk__head .lede { color: var(--text-on-dark-2); }
.wk--stagger .wk-card:nth-child(2) { margin-top: clamp(0rem, -2rem + 5vw, 3.5rem); }
.wk--stagger .wk-card__ph { border-radius: 22px; aspect-ratio: 444 / 293; box-shadow: 0 30px 60px -36px rgba(0,0,0,.7); outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.wk--stagger .wk-card__cap { position: relative; margin: -2.25rem .9rem 0; padding: 1.25rem 1.3rem 1.35rem; border-radius: 18px; background: var(--surface); border-top: 3px solid var(--aqua); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }

/* frame — filtration: mounted prints */
.wk--frame .wk__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 52rem; margin-inline: auto; }
.wk--frame .wk__head .lede { max-width: 36rem; }
.wk--frame .wk__grid { align-items: stretch; }
.wk--frame .wk-card {
  display: flex; flex-direction: column; padding: .8rem .8rem 0; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border-cool); box-shadow: 0 26px 50px -40px rgba(14,38,53,.6);
  transition: transform var(--fast), box-shadow var(--fast);
}
.wk--frame .wk-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -38px rgba(14,38,53,.7); }
.wk--frame .wk-card__ph { border-radius: 13px; aspect-ratio: 3 / 2; }
.wk--frame .wk-card__n { top: auto; bottom: .7rem; left: auto; right: .7rem; background: var(--surface); color: var(--brand-primary); }
.wk--frame .wk-card__cap { padding: 1.15rem .55rem 1.4rem; border-top: 1px dashed var(--border-cool); margin-top: .8rem; }
.wk--frame .wk-card:nth-child(2) { background: linear-gradient(160deg, var(--brand-ink), #12405a); border-color: transparent; }
.wk--frame .wk-card:nth-child(2) .wk-card__t { color: #fff; }
.wk--frame .wk-card:nth-child(2) .wk-card__d { color: #d6e7f0; }
.wk--frame .wk-card:nth-child(2) .wk-card__cap { border-top-color: rgba(255,255,255,.18); }
.wk--frame .wk-card:nth-child(2) .wk-card__n { background: var(--aqua); color: var(--brand-ink); }

/* pair — reverse osmosis: heading column beside two photos */
.wk--pair { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.wk--pair .wk__head { grid-template-columns: minmax(0, 1fr); align-items: start; margin: 0; position: sticky; top: 6.5rem; padding-left: 1.25rem; border-left: 3px solid var(--aqua); }
.wk--pair .wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk--pair .wk-card__ph { border-radius: 999px 999px 20px 20px; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -40px rgba(14,38,53,.7); }
.wk--pair .wk-card:nth-child(2) { margin-top: 3rem; }
.wk--pair .wk-card__n { top: auto; bottom: .9rem; left: 50%; transform: translateX(-50%); }
.wk--pair .wk-card__cap { padding: 1.2rem .25rem 0; text-align: center; }

@media (max-width: 1024px) {
  .wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk--stagger .wk-card:nth-child(2) { margin-top: 0; }
  .wk--pair { grid-template-columns: minmax(0, 1fr); }
  .wk--pair .wk__head { position: static; }
}
@media (max-width: 900px) { .wk__head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .wk__grid, .wk--pair .wk__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .wk--stagger .wk-card__cap { margin: -1.75rem .6rem 0; }
  .wk--pair .wk-card:nth-child(2) { margin-top: 0; }
  .wk--pair .wk-card__ph { aspect-ratio: 4 / 3.4; border-radius: 180px 180px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .wk-card__ph img, .wk--frame .wk-card { transition: none !important; transform: none !important; } }

/* rail — installation: numbered nodes on an aqua line, cards hang beneath */
.wk--rail .wk__head { grid-template-columns: minmax(0, 1fr) auto; }
.wk--rail .wk__grid { position: relative; padding-top: 3.25rem; }
.wk--rail .wk__grid::before {
  content: ""; position: absolute; top: 1.3rem; left: 1.3rem; right: 1.3rem; height: 2px;
  background: linear-gradient(90deg, var(--aqua), var(--brand-primary) 50%, var(--aqua));
}
.wk--rail .wk-card { padding: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 26px 50px -40px rgba(14,38,53,.6); overflow: visible; }
.wk--rail .wk-card::before {
  content: ""; position: absolute; top: -2rem; left: 1.35rem; width: 2px; height: 2rem; background: var(--aqua-line);
}
.wk--rail .wk-card__n {
  top: -3.25rem; left: 0; width: 2.6rem; min-width: 0; padding: 0; background: var(--brand-ink); color: #fff;
  box-shadow: 0 0 0 6px var(--surface-tint, #fff), 0 0 0 7px var(--aqua-line);
}
.wk--rail .wk-card__ph { overflow: visible; position: relative; }
.wk--rail .wk-card__ph img { border-radius: 22px 22px 0 0; aspect-ratio: 3 / 2; }
.wk--rail .wk-card__cap { padding: 1.2rem 1.35rem 1.45rem; border-left: 3px solid var(--aqua); margin: 0 0 0; border-radius: 0 0 22px 22px; }
.wk--rail .wk-card:hover .wk-card__ph img { transform: none; }
.wk--rail .wk-card { transition: transform var(--fast); }
.wk--rail .wk-card:hover { transform: translateY(-4px); }
@media (max-width: 1024px) {
  .wk--rail .wk__grid::before { right: auto; width: 2px; height: auto; bottom: 1rem; top: 1.3rem; }
  .wk--rail .wk__grid { padding-top: 0; padding-left: 3.5rem; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .wk--rail .wk-card::before { top: 1.3rem; left: -2.2rem; width: 2.2rem; height: 2px; }
  .wk--rail .wk-card__n { top: 0; left: -3.5rem; }
  .wk--rail .wk__head { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .wk--rail .wk-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .wk--rail .wk-card__ph img { border-radius: 22px 0 0 22px; height: 100%; aspect-ratio: auto; }
  .wk--rail .wk-card__cap { border-radius: 0 22px 22px 0; align-self: center; }
}
@media (max-width: 640px) {
  .wk--rail .wk__grid { padding-left: 2.9rem; }
  .wk--rail .wk-card__n { left: -2.9rem; width: 2.2rem; height: 2.2rem; }
  .wk--rail .wk__grid::before { left: 1.1rem; }
  .wk--rail .wk-card::before { left: -1.8rem; width: 1.8rem; top: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .wk--rail .wk-card { transition: none !important; transform: none !important; } }

/* mosaic — Dallas: bento with two wide landscape cards and one tall card */
.wk--mosaic .wk__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; align-items: stretch;
}
.wk--mosaic .wk-card {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 22px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-cool); box-shadow: 0 26px 50px -40px rgba(14,38,53,.6);
}
.wk--mosaic .wk-card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.wk--mosaic .wk-card:nth-child(2) { grid-column: 3; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; background: var(--brand-ink); border-color: transparent; }
.wk--mosaic .wk-card:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.wk--mosaic .wk-card:nth-child(3) .wk-card__ph { order: 2; }
.wk--mosaic .wk-card__ph { min-height: 15rem; }
.wk--mosaic .wk-card__ph img { position: absolute; inset: 0; }
.wk--mosaic .wk-card__cap { align-self: center; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.wk--mosaic .wk-card:nth-child(2) .wk-card__ph { min-height: 18rem; }
.wk--mosaic .wk-card:nth-child(2) .wk-card__t { color: #fff; }
.wk--mosaic .wk-card:nth-child(2) .wk-card__d { color: #d6e7f0; }
.wk--mosaic .wk-card__n { background: var(--brand-ink); color: #fff; }
.wk--mosaic .wk-card:nth-child(2) .wk-card__n { background: var(--aqua); color: var(--brand-ink); }
@media (max-width: 1024px) {
  .wk--mosaic .wk__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .wk--mosaic .wk-card:nth-child(n) { grid-column: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .wk--mosaic .wk-card:nth-child(3) .wk-card__ph { order: 0; }
}
@media (max-width: 640px) {
  .wk--mosaic .wk-card:nth-child(n) { grid-template-columns: minmax(0, 1fr); }
  .wk--mosaic .wk-card__ph, .wk--mosaic .wk-card:nth-child(2) .wk-card__ph { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ledger — Fort Worth: numbered rows, photo beside caption, ruled like a job log */
.wk--ledger { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.wk--ledger .wk__head { grid-template-columns: minmax(0, 1fr); margin: 0; position: sticky; top: 6.5rem; }
.wk--ledger .wk__grid { display: block; border-top: 2px solid var(--brand-ink); }
.wk--ledger .wk-card {
  display: grid; grid-template-columns: 3.5rem minmax(0, 17rem) minmax(0, 1fr); gap: 1.5rem; align-items: center;
  padding: 1.5rem 0; border-bottom: 1px solid var(--border-cool);
}
.wk--ledger .wk-card__ph { order: 2; border-radius: 16px; aspect-ratio: 3 / 2; box-shadow: 0 20px 40px -30px rgba(14,38,53,.6); overflow: hidden; position: static; }
.wk--ledger .wk-card__cap { order: 3; }
.wk--ledger .wk-card__n {
  order: 1; position: static; align-self: start; width: 3.5rem; height: 3.5rem; min-width: 0; padding: 0;
  font-size: 1.05rem; background: transparent; color: var(--brand-primary); box-shadow: none;
  border: 2px solid var(--aqua); border-radius: 50%;
}
.wk--ledger .wk-card__ph { display: contents; }
.wk--ledger .wk-card__ph img { order: 2; border-radius: 16px; aspect-ratio: 3 / 2; height: auto; box-shadow: 0 20px 40px -30px rgba(14,38,53,.6); }
.wk--ledger .wk-card:hover { background: linear-gradient(90deg, var(--aqua-soft), transparent 70%); }
.wk--ledger .wk-card:hover .wk-card__ph img { transform: none; }
@media (max-width: 1024px) {
  .wk--ledger { grid-template-columns: minmax(0, 1fr); }
  .wk--ledger .wk__head { position: static; }
}
@media (max-width: 640px) {
  .wk--ledger .wk-card { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .9rem 1rem; }
  .wk--ledger .wk-card__n { width: 2.75rem; height: 2.75rem; font-size: .9rem; }
  .wk--ledger .wk-card__ph img { grid-column: 2; }
  .wk--ledger .wk-card__cap { grid-column: 2; }
}

.wk__cta { grid-column: 1 / -1; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.wk--frame .wk__cta { justify-content: center; }
.wk--ledger .wk__cta, .wk--pair .wk__cta { grid-column: 2; }
@media (max-width: 1024px) { .wk--ledger .wk__cta, .wk--pair .wk__cta { grid-column: 1; } }

/* orbit — Plano: round photos in aqua rings joined by a dashed line, centred captions */
.wk--orbit .wk__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 50rem; margin-inline: auto; }
.wk--orbit .wk__grid { position: relative; align-items: start; }
.wk--orbit .wk__grid::before {
  content: ""; position: absolute; top: calc(clamp(12rem, 9rem + 9vw, 17rem) / 2); left: 16%; right: 16%; height: 0;
  border-top: 2px dashed var(--aqua-line); z-index: 0;
}
.wk--orbit .wk-card { text-align: center; z-index: 1; }
.wk--orbit .wk-card__ph {
  width: clamp(12rem, 9rem + 9vw, 17rem); aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  border: 8px solid var(--surface); outline: 2px solid var(--aqua); outline-offset: 4px; overflow: visible;
  box-shadow: 0 30px 60px -36px rgba(14,38,53,.7);
}
.wk--orbit .wk-card__ph img { border-radius: 50%; }
.wk--orbit .wk-card__n { top: auto; bottom: -.6rem; left: 50%; transform: translateX(-50%); background: var(--brand-ink); color: #fff; box-shadow: 0 0 0 4px var(--surface); }
.wk--orbit .wk-card:hover .wk-card__ph img { transform: none; }
.wk--orbit .wk-card:hover .wk-card__ph { outline-color: var(--brand-primary); }
.wk--orbit .wk-card__cap { padding: 1.75rem .5rem 0; max-width: 22rem; margin-inline: auto; }
.wk--orbit .wk__cta { justify-content: center; }
@media (max-width: 1024px) {
  .wk--orbit .wk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk--orbit .wk-card__ph { width: min(100%, 13rem); }
  .wk--orbit .wk__grid::before { top: 6.5rem; }
}
@media (max-width: 640px) {
  .wk--orbit .wk__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .wk--orbit .wk__grid::before { top: 2rem; bottom: 2rem; left: 50%; right: auto; height: auto; border-top: 0; border-left: 2px dashed var(--aqua-line); }
  .wk--orbit .wk-card__cap { background: var(--surface-tint, #fff); }
}

/* film — Frisco: photos framed on a filmstrip with perforated edges */
.wk--film .wk__head .h2 { color: #fff; }
.wk--film .wk__head .lede { color: var(--text-on-dark-2); }
.wk--film .wk__grid {
  gap: 0; padding: 2.1rem 1rem; border-radius: 18px; background-color: #07121a;
  background-image:
    radial-gradient(circle, rgba(111,180,212,.35) 0 3px, transparent 3.5px),
    radial-gradient(circle, rgba(111,180,212,.35) 0 3px, transparent 3.5px);
  background-size: 22px 22px, 22px 22px; background-repeat: repeat-x, repeat-x;
  background-position: 11px 10px, 11px calc(100% - 10px);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.9);
}
.wk--film .wk-card { padding: 0 .75rem; border-right: 1px solid rgba(255,255,255,.08); }
.wk--film .wk-card:last-child { border-right: 0; }
.wk--film .wk-card__ph { border-radius: 6px; aspect-ratio: 3 / 2; }
.wk--film .wk-card__n { top: .6rem; left: .6rem; background: rgba(7,18,26,.8); color: var(--aqua); border: 1px solid rgba(111,180,212,.5); }
.wk--film .wk-card__cap { padding: 1.1rem .25rem 0; }
.wk--film .wk-card__t { color: #fff; }
.wk--film .wk-card__d { color: #c7dbe6; }
@media (max-width: 900px) {
  .wk--film .wk__grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(78%, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .wk--film .wk-card { scroll-snap-align: start; }
}

/* PFAS in [City] water — money-page panel */
.pfx {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 26px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-cool); box-shadow: 0 40px 80px -60px rgba(14,38,53,.7);
}
.pfx__side {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem); color: #fff; isolation: isolate;
  background:
    radial-gradient(circle at 85% 15%, rgba(111,180,212,.28), transparent 45%),
    linear-gradient(155deg, var(--brand-ink), #0f3b55);
}
.pfx__side::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.6px); background-size: 18px 18px;
}
.pfx__side .h2 { color: #fff; margin: 0; }
.pfx__icon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 18px; color: var(--brand-ink); background: var(--aqua); }
.pfx__chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem;
  border-radius: 999px; font-size: var(--t-sm); font-weight: 700; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
}
.pfx__chip--over { background: rgba(255,196,120,.14); border-color: rgba(255,196,120,.5); color: #ffe2bb; }
.pfx__chip--under { background: rgba(111,180,212,.16); border-color: var(--aqua-line); color: #d9eef7; }
.pfx__body { padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem); align-self: center; }
.pfx__body p { font-size: var(--t-body-lg); line-height: 1.7; color: var(--text-secondary); margin: 0 0 1rem; }
.pfx__actions { margin-top: 1.5rem; align-items: center; }
.pfx__link { font-weight: 600; color: var(--brand-primary); text-decoration: none; display: inline-flex; gap: .4rem; }
.pfx__link em { font-style: normal; transition: transform var(--fast); }
.pfx__link:hover em { transform: translateX(3px); }
@media (max-width: 900px) { .pfx { grid-template-columns: minmax(0, 1fr); } }
.wk--film .wk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .wk--film .wk__grid { grid-template-columns: none; grid-auto-columns: minmax(86%, 1fr); padding-inline: .5rem; } }

/* ---- Completed work, nine more city designs (2026-09-22) ---------------- */

/* tilt — Southlake: white prints, slightly turned, straighten on hover */
.wk--tilt .wk__grid { gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); padding-top: .75rem; }
.wk--tilt .wk-card { background: var(--surface); padding: .85rem .85rem 1.25rem; border-radius: 6px; box-shadow: 0 24px 44px -26px rgba(14,38,53,.55); transition: transform var(--slow), box-shadow var(--slow); }
.wk--tilt .wk-card:nth-child(1) { transform: rotate(-2deg); }
.wk--tilt .wk-card:nth-child(2) { transform: rotate(1.5deg) translateY(.75rem); }
.wk--tilt .wk-card:nth-child(3) { transform: rotate(-1deg); }
.wk--tilt .wk-card:hover { transform: none; box-shadow: 0 34px 60px -30px rgba(14,38,53,.6); }
.wk--tilt .wk-card__ph { aspect-ratio: 3 / 2; border-radius: 3px; }
.wk--tilt .wk-card__cap { padding: 1rem .25rem 0; }
.wk--tilt .wk-card__n { border-radius: 4px; background: var(--brand-ink); color: #fff; }
.wk--tilt .wk-card:hover .wk-card__ph img { transform: none; }

/* overlay — Melissa: caption set into a navy panel across the photo */
.wk--overlay .wk-card { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(14,38,53,.7); display: grid; }
.wk--overlay .wk-card > * { grid-area: 1 / 1; }
.wk--overlay .wk-card__ph { aspect-ratio: 1; }
.wk--overlay .wk-card__cap { align-self: end; position: relative; margin: .75rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: 16px;
  background: rgba(14,38,53,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wk--overlay .wk-card__t { color: #fff; }
.wk--overlay .wk-card__d { color: #d6e7f0; }
.wk--overlay .wk-card__n { background: var(--surface); color: var(--brand-ink); }

/* zigzag — Mansfield: alternating rows joined by a centre line */
.wk--zigzag .wk__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); max-width: 60rem; margin-inline: auto; position: relative; }
.wk--zigzag .wk__grid::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: 50%; border-left: 2px solid var(--aqua-line); }
.wk--zigzag .wk-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.wk--zigzag .wk-card:nth-child(even) .wk-card__ph { order: 2; }
.wk--zigzag .wk-card__ph { aspect-ratio: 3 / 2; border-radius: 20px; box-shadow: 0 26px 50px -36px rgba(14,38,53,.7); max-width: 27rem; justify-self: end; width: 100%; }
.wk--zigzag .wk-card:nth-child(even) .wk-card__ph { justify-self: start; }
.wk--zigzag .wk-card__cap { background: var(--surface); padding: 1.25rem 1.35rem; border-radius: 16px; border: 1px solid var(--border-cool); position: relative; }
.wk--zigzag .wk-card__n { background: var(--brand-primary); color: #fff; }
.wk--zigzag .wk__cta { justify-content: center; }

/* feature — Grapevine: one lead card, two compact cards stacked beside it */
.wk--feature .wk__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; }
.wk--feature .wk-card { background: var(--surface); border-radius: 22px; border: 1px solid var(--border-cool); overflow: hidden; box-shadow: 0 26px 50px -40px rgba(14,38,53,.6); }
.wk--feature .wk-card:nth-child(1) { grid-row: 1 / span 2; display: flex; flex-direction: column; }
.wk--feature .wk-card:nth-child(1) .wk-card__ph { aspect-ratio: 3 / 2; }
.wk--feature .wk-card:nth-child(1) .wk-card__cap { padding: 1.5rem 1.6rem 1.75rem; border-top: 4px solid var(--aqua); }
.wk--feature .wk-card:nth-child(n+2) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
.wk--feature .wk-card:nth-child(n+2) .wk-card__ph { min-height: 12rem; }
.wk--feature .wk-card:nth-child(n+2) .wk-card__ph img { position: absolute; inset: 0; }
.wk--feature .wk-card:nth-child(n+2) .wk-card__cap { padding: 1.25rem; align-self: center; }
.wk--feature .wk-card__n { background: var(--aqua); color: var(--brand-ink); }

/* capfirst — Anna: numbered caption on top, photo underneath, colour bar */
.wk--capfirst .wk-card { display: flex; flex-direction: column-reverse; background: var(--surface); border-radius: 20px; overflow: hidden; border-top: 6px solid var(--brand-primary); box-shadow: 0 26px 50px -40px rgba(14,38,53,.6); }
.wk--capfirst .wk-card:nth-child(2) { border-top-color: var(--aqua); }
.wk--capfirst .wk-card:nth-child(3) { border-top-color: var(--brand-ink); }
.wk--capfirst .wk-card__cap { padding: 1.35rem 1.35rem 1.1rem; min-height: 11rem; }
.wk--capfirst .wk-card__ph { aspect-ratio: 3 / 2; margin: 0 .85rem .85rem; border-radius: 14px; }
.wk--capfirst .wk-card__n { top: auto; bottom: .7rem; left: auto; right: .7rem; background: var(--surface); color: var(--brand-primary); }

/* glass — Grand Prairie: frosted cards on navy */
.wk--glass .wk__head .h2 { color: #fff; }
.wk--glass .wk__head .lede { color: var(--text-on-dark-2); }
.wk--glass .wk-card { padding: .8rem; border-radius: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: background var(--fast); }
.wk--glass .wk-card:hover { background: rgba(255,255,255,.11); }
.wk--glass .wk-card__ph { aspect-ratio: 3 / 2; border-radius: 16px; }
.wk--glass .wk-card__cap { padding: 1.1rem .5rem .6rem; }
.wk--glass .wk-card__t { color: #fff; }
.wk--glass .wk-card__d { color: #cfe2ec; }
.wk--glass .wk-card__n { background: rgba(14,38,53,.7); color: var(--aqua); border: 1px solid rgba(111,180,212,.5); }

/* stepped — Carrollton: cards step down along an aqua rise */
.wk--stepped .wk__grid { position: relative; align-items: start; }
.wk--stepped .wk__grid::before { content: ""; position: absolute; left: 8%; right: 8%; top: 1.5rem; height: 5.5rem;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--aqua-line) 50%, transparent calc(50% + 1px)); }
.wk--stepped .wk-card:nth-child(2) { margin-top: 2.75rem; }
.wk--stepped .wk-card:nth-child(3) { margin-top: 5.5rem; }
.wk--stepped .wk-card__ph { aspect-ratio: 3 / 2; border-radius: 18px 18px 18px 4px; box-shadow: 0 26px 50px -36px rgba(14,38,53,.7); }
.wk--stepped .wk-card__cap { padding: 1.15rem .25rem 0; border-left: 3px solid var(--aqua); padding-left: 1rem; margin-top: 1rem; }
.wk--stepped .wk-card__n { background: var(--brand-ink); color: #fff; }

/* offset — Coppell: photo sits on a shifted outline frame */
.wk--offset .wk__grid { gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.wk--offset .wk-card__ph { aspect-ratio: 3 / 2; border-radius: 16px; overflow: visible; margin: 0 .9rem .9rem 0; }
.wk--offset .wk-card__ph::before { content: ""; position: absolute; inset: .9rem -.9rem -.9rem .9rem; border: 2px solid var(--aqua); border-radius: 16px; z-index: -1; transition: inset var(--fast); }
.wk--offset .wk-card:hover .wk-card__ph::before { inset: .45rem -.45rem -.45rem .45rem; }
.wk--offset .wk-card { isolation: isolate; }
.wk--offset .wk-card__ph img { border-radius: 16px; }
.wk--offset .wk-card:hover .wk-card__ph img { transform: none; }
.wk--offset .wk-card__cap { padding: 1.5rem .25rem 0; }
.wk--offset .wk-card__n { top: auto; bottom: -1rem; left: 1rem; background: var(--surface); color: var(--brand-primary); border: 2px solid var(--aqua); box-shadow: none; }

/* quad — Allen: the heading is the first tile of a two by two grid */
.wk--quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.5vw, 1.75rem); }
.wk--quad .wk__grid { display: contents; }
.wk--quad .wk__head { grid-template-columns: minmax(0, 1fr); align-content: center; margin: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: 24px;
  background: radial-gradient(circle at 90% 10%, rgba(111,180,212,.3), transparent 50%), linear-gradient(155deg, var(--brand-ink), #0f3b55); }
.wk--quad .wk__head .eyebrow { color: var(--aqua); }
.wk--quad .wk__head .h2 { color: #fff; }
.wk--quad .wk__head .lede { color: var(--text-on-dark-2); margin-top: .9rem; }
.wk--quad .wk-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border-cool); border-radius: 24px; overflow: hidden; }
.wk--quad .wk-card__ph img { position: absolute; inset: 0; }
.wk--quad .wk-card__ph { min-height: 13rem; }
.wk--quad .wk-card__cap { padding: 1.35rem; align-self: center; }
.wk--quad .wk-card__n { background: var(--aqua); color: var(--brand-ink); }

@media (max-width: 1024px) {
  .wk--tilt .wk__grid, .wk--overlay .wk__grid, .wk--capfirst .wk__grid, .wk--glass .wk__grid, .wk--stepped .wk__grid, .wk--offset .wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk--stepped .wk-card:nth-child(n) { margin-top: 0; }
  .wk--stepped .wk__grid::before { display: none; }
  .wk--quad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wk--tilt .wk__grid, .wk--overlay .wk__grid, .wk--capfirst .wk__grid, .wk--glass .wk__grid, .wk--stepped .wk__grid, .wk--offset .wk__grid { grid-template-columns: minmax(0, 1fr); }
  .wk--tilt .wk-card:nth-child(n) { transform: none; }
  .wk--overlay .wk-card__ph { aspect-ratio: 4 / 4.2; }
  .wk--zigzag .wk__grid::before { display: none; }
  .wk--zigzag .wk-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .wk--zigzag .wk-card:nth-child(even) .wk-card__ph { order: 0; }
  .wk--zigzag .wk-card__ph { max-width: none; }
  .wk--feature .wk-card:nth-child(n+2), .wk--quad .wk-card { grid-template-columns: minmax(0, 1fr); }
  .wk--feature .wk-card:nth-child(n+2) .wk-card__ph, .wk--quad .wk-card__ph { min-height: 0; aspect-ratio: 3 / 2; }
  .wk--feature .wk-card:nth-child(n+2) .wk-card__ph img, .wk--quad .wk-card__ph img { position: static; }
}
@media (prefers-reduced-motion: reduce) { .wk--tilt .wk-card, .wk--offset .wk-card__ph::before { transition: none !important; } }

/* feature: keep the lead photo near its native width so it stays sharp */
.wk--feature .wk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wk--feature .wk-card:nth-child(1) .wk-card__ph { width: calc(100% - 1.8rem); max-width: 28rem; margin: .9rem auto 0; border-radius: 16px; }
.wk--feature .wk-card:nth-child(1) { background: linear-gradient(180deg, var(--surface-tint, #f3f8fb), var(--surface)); }
@media (max-width: 640px) {
  .wk--feature .wk__grid { grid-template-columns: minmax(0, 1fr); }
  .wk--feature .wk-card:nth-child(1) { grid-row: auto; }
}
@media (max-width: 1024px) {
  .wk--feature .wk-card:nth-child(n+2) { grid-template-columns: minmax(0, 1fr); }
  .wk--feature .wk-card:nth-child(n+2) .wk-card__ph { min-height: 0; aspect-ratio: 3 / 2; }
  .wk--feature .wk-card:nth-child(n+2) .wk-card__ph img { position: static; }
}

/* Footer: four content blocks, four columns (was five, leaving an empty
 * column on the right and the text sitting left). */
@media (min-width: 981px) {
  .ftr__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6) clamp(2rem, 1rem + 3vw, 4rem); }
  .ftr__top > :not(:first-child) { justify-self: center; }
  .ftr__top > :last-child { justify-self: end; }
  .ftr__disc { text-align: right; }
}


/* ---- Site-wide polish (2026-09-22): readability, alignment, touch targets.
 * Styling only; no copy changes. */
.feat { align-content: start; }
.band:not(.band--dark) .dcard__v { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); font-weight: 800; color: var(--brand-primary); letter-spacing: -.03em; line-height: 1.05; }
.band:not(.band--dark) .dcard__n { font-size: .9375rem; line-height: 1.6; }
.callout--figs { text-align: left; max-width: 52rem; padding: .6rem 0 .6rem 1.25rem; }
.crumbs a { display: inline-block; padding-block: .3rem; }
.ftr li a { display: inline-block; padding-block: .2rem; }
.consent input, .consent--compact input { width: 1.25rem; height: 1.25rem; }
.consent a, .consent--compact a, .form__note a { display: inline-block; padding-block: .2rem; }
@media (max-width: 767px) {
  .ftr li a { padding-block: .45rem; }
  .ftr li { margin: 0; }
  .crumbs a { padding-block: .5rem; }
  .hero__tag { letter-spacing: .1em; }
  .ftr__phone { display: inline-flex; padding-block: .5rem; }
}
.icard p { font-size: .9375rem; }
.wk-card__d { font-size: .9375rem; }

/* Inline delivery error under the quote form (2026-09-24). */
.form__err {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: 12px;
  font-size: var(--t-sm); line-height: 1.5; font-weight: 600;
  color: #7a2f2f; background: #fdeceb; border: 1px solid #f3c9c6;
}
.formcard--dark .form__err { color: #ffdfda; background: rgba(214,92,78,.18); border-color: rgba(255,160,146,.45); }

/* Footer email, beside the phone line (2026-09-24). */
.ftr__email {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: .6rem;
  color: var(--text-on-dark-2); text-decoration: none; font-size: var(--t-sm);
  word-break: break-word; padding-block: .3rem; transition: color var(--fast);
}
.ftr__email svg { flex: none; color: var(--aqua); }
.ftr__email:hover, .ftr__email:focus-visible { color: #fff; }
@media (max-width: 767px) { .ftr__email { padding-block: .5rem; } }

/* Homepage lifestyle tiles: caption on the image under a soft blue fade. */
.lstile { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; box-shadow: 0 26px 50px -38px rgba(14,38,53,.65); }
.lstile .frame { border: 0; border-radius: 0; }
.lstile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,45,68,.92) 0%, rgba(10,45,68,.68) 26%, rgba(10,45,68,.18) 55%, rgba(10,45,68,0) 78%);
}
.lstile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.15rem 1.15rem 1.2rem; color: #fff; font-weight: 700;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.3; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(6,26,38,.45);
}
@media (max-width: 600px) { .lstile__cap { padding: 1rem 1rem 1.05rem; } }

/* About page email badge and the quote page email line (2026-09-24). */
.abt-badge--mail { position: static; align-self: flex-start; margin-top: .25rem; background: var(--surface); color: var(--brand-ink); }
.abt-badge--mail .abt-badge__i { background: var(--aqua); color: var(--brand-ink); }
.convo__mail { font-size: var(--t-sm); color: var(--text-secondary); }
.convo__mail a { color: var(--brand-primary); }
@media (max-width: 900px) { .abt-badge--mail { word-break: break-word; } }

/* --------------------------------------------------------------------------
   Responsive hardening (2026-09-24)
   Shared rules, no per-page patches and no overflow-x:hidden. Fixes found by
   testing 320 to 1920 and at browser text-scaling up to 22px root.
   -------------------------------------------------------------------------- */

/* Header: the brand shrinks so the burger can never be pushed off screen.
   At large text sizes .brand{flex:none} was forcing a 18px overflow. */
.hdr__in { gap: clamp(.75rem, .4rem + 2vw, 2rem); min-width: 0; }
.brand { flex: 1 1 auto; min-width: 0; }
.brand__name { overflow-wrap: anywhere; }
.hdr__cta { min-width: 0; }

/* Breadcrumbs stay inside the viewport and wrap between items; a long current
   page label wraps inside itself rather than running past the edge. */
.crumbs .shell, .crumbs ol, .crumbs li { min-width: 0; }
.crumbs li { max-width: 100%; }
.crumbs [aria-current] { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* Long unbroken strings (emails, URLs, service names) never widen a box. */
.ftr__email, .abt-badge, a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }
.copy, .lede, .faq__a, .ccard__main p, .icard p, .wk-card__d { overflow-wrap: break-word; }

/* Media is always contained. */
img, svg, video, canvas { max-width: 100%; }

/* Grid and flex children may shrink below their content width. */
.grid > *, .cta__in > *, .ftr__top > *, .hdr__in > *, .abar > * { min-width: 0; }

/* Anchor targets clear the sticky header. */
:where([id]) { scroll-margin-top: 5.5rem; }

@media (max-width: 767px) {
  /* Room under the fixed action bar: its height plus the safe area, so it
     never covers cards, footer links, form buttons or messages. */
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .abar { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .abar .btn { min-height: 2.875rem; padding-inline: .5rem; }
  .abar .btn span, .abar .btn { overflow-wrap: anywhere; }
}

/* The action bar steps aside while the mobile menu is open. */
:root[data-drawer-open="true"] .abar { display: none; }

/* --------------------------------------------------------------------------
   Breadcrumb, phone hardening (2026-09-24, second pass)
   The separator now hugs the item before it, so a wrapped line can never
   begin with a stray "/". On small screens the trail collapses to
   "Home / current page", which removes the awkward wrap entirely. The full
   trail stays in the BreadcrumbList schema, so nothing is lost for search.
   -------------------------------------------------------------------------- */
.crumbs ol { row-gap: .25rem; align-items: baseline; }
.crumbs li + li::before { content: none; }
.crumbs li:not(:last-child)::after {
  content: "/"; margin-left: .4rem; color: var(--border-strong);
}
@media (max-width: 560px) {
  .crumbs li:not(:first-child):not(:last-child) { display: none; }
  .crumbs { padding-block: .75rem; }
  .crumbs [aria-current] { display: inline; }
}

/* --------------------------------------------------------------------------
   WGD-126 BLOCK A: homepage tile caption treatment.
   Caption moves off the bottom scrim onto a blue panel fading in from the
   left, text centred vertically.
   -------------------------------------------------------------------------- */
.lstile::after { background: none; }
.lstile__cap {
  left: 0; right: auto; top: 0; bottom: 0;
  width: 58%;
  display: flex; align-items: center; text-align: left;
  padding: 1.25rem .9rem 1.25rem 1.25rem;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(4, 26, 40, .45);
  background: linear-gradient(90deg, rgba(6,42,63,.86) 0%, rgba(6,42,63,.66) 55%, rgba(6,42,63,0) 100%);
}
@media (max-width: 760px) {
  .lstile__cap { width: 72%; font-size: .95rem; line-height: 1.35; padding: 1rem;
    background: linear-gradient(90deg, rgba(6,42,63,.90) 0%, rgba(6,42,63,.74) 62%, rgba(6,42,63,0) 100%); }
}

/* --------------------------------------------------------------------------
   WGD-126 BLOCK B: the tile clips.
   -------------------------------------------------------------------------- */
.lstile .frame { position: relative; }
.lstile__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.lstile__vid.on { opacity: 1; }
@media (max-width: 900px) { .lstile__vid { display: none; } }
@media (prefers-reduced-motion: reduce) { .lstile__vid { display: none; } }


/* ===== Jam WGD-122 re-apply. Server-side. Must be merged into build source: see WGD-129. ===== */
.hero__tag { text-wrap: balance; }

.band:not(.band--alt):not(.band--cool):not(.band--dark) + .band:not(.band--alt):not(.band--cool):not(.band--dark),
.band--alt + .band--alt,
.band--cool + .band--cool,
.band--dark + .band--dark { padding-top: 0; }

.feat {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: .85rem;
  row-gap: .3rem;
  align-items: center;
}
.feat > .feat__icon { grid-column: 1; grid-row: 1; }
.feat > h3 { grid-column: 2; grid-row: 1; margin: 0; }
.feat > p { grid-column: 2; grid-row: 2; }

.crumbs { background: transparent; border-bottom: 0; }

/* ===== Jam WGD-130. Hero tag bubble on phones. Server-side. Must be merged into build source: see WGD-129. ===== */
.hero__tag i { flex: 0 0 auto; }

@media (max-width: 767px) {
  .hero__tag { justify-content: center; text-align: center; padding-left: .85rem; }
  .hero__tag i { display: none; }
}