/* ============================================================
   Storm & Craft — Midwest Roofing & Renovation
   Homepage redesign. Storm graphite-blue + copper. 2026-08-08
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 700 900; font-stretch: 100% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-latin-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
/* Ampersand only: Archivo's & reads as a mirrored 3 (owner, 2026-09-17), so every display-font & comes from
   Public Sans via unicode-range. Listed first in --f-display; every other glyph falls through to Archivo. */
@font-face {
  font-family: 'Archivo Amp';
  src: url('../fonts/public-sans-latin-var.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+26;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martian-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* storm world */
  --night: #111111;
  --deep: #171717;
  --pane: #1E1E1E;
  --line: rgba(242, 242, 240, .2);
  --ctl-line: rgba(242, 242, 240, .45);   /* control boundaries: WCAG 1.4.11 needs 3:1 */
  --cloud: #F2F2F0;
  --haze: #A5A5A1;
  --storm: #2E2E2E;
  --sky: #8C8C88;
  /* after the storm */
  --day: #FBFBF8;
  --day-2: #ECECE8;
  --ink: #111111;
  --ink-2: #4C4C4C;
  --edge: #DEDDD7;
  /* the metal */
  --copper: #61F346;
  --copper-hot: #86F66F;
  /* On paper there is NO dark green (owner, 2026-09-12: the client wants the brand green and sharp details).
     Text on light surfaces is ink; the bright green is the mark: glyphs, dots, icons, bars, underlines, outlines. */
  /* type */
  --f-display: 'Archivo Amp', 'Archivo', 'Avenir Next', sans-serif;
  --f-body: 'Public Sans', 'Helvetica Neue', sans-serif;
  --f-mono: 'Martian Mono', 'SF Mono', monospace;
  /* type scale */
  --t-d1: clamp(40px, 5.6vw, 76px);   /* page-level H1 */
  --t-d2: clamp(32px, 4.4vw, 56px);   /* section H2 */
  --t-d3: clamp(26px, 3vw, 40px);     /* block H2 */
  --t-h3: 22px;
  --t-h4: 18px;
  --t-body: 1.0625rem;                /* 17px */
  --t-label: 12px;                    /* mono labels — hard floor */
  --t-num: clamp(38px, 4.9vw, 66px);  /* counters: one step below --t-d1 */
  /* motion */
  --ease: cubic-bezier(.215, .61, .355, 1);
  --t-1: .2s; --t-2: .3s; --t-3: .5s;
  /* layout */
  --container: 1240px;
  --pad: 28px;
  --head-h: 72px;
}
/* 320px phones: at 40px the longest page-H1 words ("waterproofing.", "insurance") run past the edge */
@media (max-width: 374px) { :root { --t-d1: 34px; } }

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-h) - 4px); scrollbar-gutter: stable; overflow-x: clip; }   /* same offset as scrollToEl() in main.js; sections carry NO scroll-margin, or the two add up */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cloud);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--copper); color: #0B1206; }

:focus-visible {
  outline: 2px solid var(--copper-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.mono {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  font-weight: 400;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  background: var(--copper); color: #0B1206;
  padding: 10px 16px; border-radius: 999px;
  font-weight: 600; font-size: 14px;
  transform: translateY(-64px); transition: transform .2s;
}
.skip-link:focus-visible { transform: none; }

/* Section rhythm */
.section-night { background: var(--night); color: var(--cloud); padding-block: clamp(76px, 9vw, 128px); }
.section-day { background: var(--day); color: var(--ink); padding-block: clamp(76px, 9vw, 128px); }
.section-day .sec-intro { color: var(--ink-2); }
.section-night .sec-intro { color: var(--haze); }

/* Section headers */
.sec-label {
  display: flex; align-items: center; gap: 10px;
  color: var(--copper);
  margin-bottom: 22px;
  text-transform: uppercase;
}
.section-day .sec-label { color: var(--ink); }
.label-roof {
  display: inline-block; width: 25px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='.5 .5 132.4 64.1'%3E%3Cpath d='M.5,51.5h6.01v-6.55c7.08-9.16,14.16-18.33,21.23-27.49,12.92,13.73,25.83,27.47,38.75,41.2v5.92h66.38v-8.41c-12.45-14.89-24.9-29.78-37.36-44.66h-6V.5h-19.04v11H25.54C17.19,22.5,8.85,33.51.5,44.51v6.99Z' fill='%2361F346'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.sec-h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-d2);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin-bottom: 20px;
}
.dot-copper { color: var(--copper); }
.sec-intro { max-width: 560px; font-size: var(--t-body); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .002em;
  transition: background-color var(--t-1), color var(--t-1), border-color var(--t-1), box-shadow var(--t-1);
  overflow: hidden;
}
[data-magnetic], [data-tilt] { will-change: transform; }
.btn-primary {
  background: var(--copper);
  color: #0B1206;
}
.btn-primary:hover { background: var(--copper-hot); }
.hero .btn-primary { box-shadow: 0 8px 28px rgba(97, 243, 70, .28); }
.hero .btn-primary:hover { box-shadow: 0 10px 34px rgba(134, 246, 111, .38); }
.btn-ghost {
  color: var(--cloud);
  box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, .32);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, .72); }
.section-day .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .3); }
.section-day .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .68); }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0); opacity: .6;
  pointer-events: none;
  animation: ripple .38s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Header ---------- */
.site-head {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  transition: background-color var(--t-2), box-shadow var(--t-2);
}
.site-head.is-scrolled {
  background: rgba(17, 17, 17, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.head-inner {
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--pad);
  height: var(--head-h);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--cloud); min-height: 44px; }
.brand-mark { width: 40px; height: 20px; color: var(--copper); flex: none; margin-top: 2px; }
.brand-word {
  font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.05;
  display: inline-block;
}
.brand-word em { font-style: normal; color: var(--copper); }
.brand-word small {
  display: block; font-family: var(--f-mono); font-size: 8.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--haze);
  margin-top: 3px;
}
.head-nav { display: flex; gap: 26px; margin-inline: auto; }
.head-nav a {
  font-size: 14px; font-weight: 500; color: var(--haze);
  transition: color .2s;
  padding-block: 6px;
}
.head-nav a:hover { color: var(--cloud); }
.head-cta { display: flex; align-items: center; gap: 18px; }
.head-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  color: var(--cloud); white-space: nowrap;
  transition: color .2s;
}
.head-phone svg { width: 15px; height: 15px; color: var(--copper); }
.head-phone:hover { color: var(--copper-hot); }

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-stage {
  position: relative;
  min-height: max(100svh, 620px);   /* 2026-09-17: was a fixed 100svh; on a 660px-tall iPhone viewport the bottom-aligned
                                       content overflowed upward and the weather chip sat under the header logo */
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero-photo-wrap, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo {
  object-fit: cover; object-position: 50% 38%;
  /* storm grade — JS drives it to clear; this is also the reduced-motion end state override below */
  filter: saturate(.5) brightness(.52) contrast(1.08) hue-rotate(-8deg);
  transform: scale(1.06);
}
/* Optional second photo, the calm "morning after" version of the same house: sits over the storm photo,
   opacity 0 → 1 as the visitor scrolls (main.js clearTl). Add it to index.html once the file exists:
   <img class="hero-photo-clear" src="img/hero-clear-1600.jpg" alt="" width="1600" height="900" loading="eager"> */
.hero-photo-clear { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: 0; transform: scale(1.06); pointer-events: none; }
/* Persistent legibility layer — stays when the storm clears (JS eases it to .72 at the end) */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .66) 36%, transparent 68%),
    linear-gradient(0deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, .5) 28%, transparent 54%);
}
.hero-storm {
  position: absolute; inset: 0;
  background:
    linear-gradient(178deg, rgba(8, 8, 8, .92) 0%, rgba(35, 35, 35, .55) 38%, rgba(17, 17, 17, .25) 62%, rgba(17, 17, 17, .82) 100%),
    radial-gradient(120% 70% at 70% 0%, rgba(60, 60, 60, .55), transparent 60%);
}
.hero-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(8, 8, 8, .5) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 3;
  width: 100%;
  padding-top: calc(var(--head-h) + 18px);
  padding-bottom: clamp(56px, 9vh, 120px);
}
.wx-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sky);
  background: rgba(17, 17, 17, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 20px;
  transition: color .4s, border-color .4s;
}
.wx-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sky);
  transition: background-color .4s;
}
.wx-chip.is-clear { color: var(--copper-hot); border-color: rgba(134, 246, 111, .4); }
.wx-chip.is-clear .wx-dot { background: var(--copper-hot); animation: none; }
@keyframes wx-blink { 50% { opacity: .25; } }

.hero-h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-d1);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin-bottom: 22px;
}
.h1-line { display: block; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.h1-line > span { display: inline-block; will-change: transform; }
.roofline {
  display: inline-block;
  width: clamp(56px, 6.4vw, 100px);
  height: auto;
  vertical-align: baseline;
  margin-inline: .08em;
  color: var(--copper);
  transform: translateY(.02em);
}

.hero-sub {
  max-width: 560px;
  color: #C8C8C4;
  font-size: clamp(16px, 1.4vw, 18px);
  margin-bottom: 28px;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
/* Proof row: the three things a homeowner checks before calling, kept above the fold */
.hero-proof { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  color: #C8C8C4; font-family: var(--f-body); font-size: 14px; letter-spacing: 0; line-height: 1.4; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof li + li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(200, 200, 196, .45); }
.hero-proof a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid transparent; transition: color var(--t-1), border-color var(--t-1); }
.hero-proof a:hover { color: var(--cloud); border-color: rgba(242, 242, 240, .4); }
.hero-proof strong { color: var(--cloud); font-weight: 600; }
.hero-stars { color: var(--copper); font-size: 13px; letter-spacing: 2px; line-height: 1; }
@media (max-width: 560px) { .hero-proof { gap: 6px 0; flex-direction: column; align-items: flex-start; } .hero-proof li + li::before { display: none; } }
.hero-ticks {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  color: var(--haze);
}
.hero-ticks li { display: flex; align-items: center; gap: 8px; }
.hero-ticks li::before {
  content: '';
  width: 15px; height: 7px; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='.5 .5 132.4 64.1'%3E%3Cpath d='M.5,51.5h6.01v-6.55c7.08-9.16,14.16-18.33,21.23-27.49,12.92,13.73,25.83,27.47,38.75,41.2v5.92h66.38v-8.41c-12.45-14.89-24.9-29.78-37.36-44.66h-6V.5h-19.04v11H25.54C17.19,22.5,8.85,33.51.5,44.51v6.99Z' fill='%2361F346'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}

/* ---------- Trust / counters ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 40px;
  padding-block: 14px 30px;
}
.stat-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-num);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.stat-plus { color: var(--copper); font-size: .55em; margin-left: 3px; font-weight: 700; }
.stat-cap { color: var(--ink-2); font-size: 15px; max-width: 24ch; margin-top: 8px; line-height: 1.45; }
.cred-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--edge); }
.cred { display: flex; align-items: center; gap: 14px; }
.cred-ico {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(134, 246, 111, .4);
  background: rgba(97, 243, 70, .1);
  color: var(--copper-hot);
}
.cred-ico svg { width: 22px; height: 22px; }
.cred strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; }
.cred .mono { display: block; margin-top: 4px; color: var(--haze); font-size: var(--t-label); letter-spacing: .06em; }
@media (max-width: 900px) { .cred-row { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; padding-top: 28px; } }
@media (max-width: 560px) { .cred-row { grid-template-columns: 1fr; } }

/* ---------- Services (shared list + link) ---------- */
.svc-list { display: grid; gap: 7px; margin-bottom: 20px; }
.svc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px; color: var(--cloud);
}
.svc-list li::before {
  content: '';
  position: absolute; left: 0; top: .5em;
  width: 15px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='.5 .5 132.4 64.1'%3E%3Cpath d='M.5,51.5h6.01v-6.55c7.08-9.16,14.16-18.33,21.23-27.49,12.92,13.73,25.83,27.47,38.75,41.2v5.92h66.38v-8.41c-12.45-14.89-24.9-29.78-37.36-44.66h-6V.5h-19.04v11H25.54C17.19,22.5,8.85,33.51.5,44.51v6.99Z' fill='%2361F346'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.svc-link {
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  color: var(--copper-hot);
  display: inline-flex; gap: 6px; align-items: center;
  padding: 10px 0; margin: -10px 0;
}
.svc-link span { transition: transform .25s; display: inline-block; }
.svc-link:hover span { transform: translateX(4px); }

/* ---------- Storm strip ---------- */
.storm {
  position: relative;
  padding-block: clamp(88px, 11vw, 150px);
  overflow: clip;
  color: var(--cloud);
}
.storm-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(17, 17, 17, .93), rgba(23, 23, 23, .72) 45%, rgba(17, 17, 17, .95)),
    url('../img/storm-sky.webp');
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
  scale: 1.12;
}
.storm-inner { position: relative; }
.storm-inner > :not(.storm-bg) { max-width: 780px; }
.sec-label-light { color: var(--copper-hot); }
.storm-h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-d2);
  line-height: 1;
  letter-spacing: -0.024em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.storm-copy { color: #D2D2CE; max-width: 56ch; font-size: var(--t-body); margin-bottom: 30px; }
.storm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.storm-tel { color: var(--haze); transition: color .2s; letter-spacing: .08em; padding: 14px 0; }
.storm-tel:hover { color: var(--copper-hot); }

/* ---------- Checker ---------- */
.checker-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.checker-fig {
  margin-top: 34px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
}
.checker-fig img { filter: saturate(.75) brightness(.9); }
.checker-fig figcaption {
  padding: 12px 16px;
  color: var(--haze);
  background: var(--deep);
  font-family: var(--f-body); font-size: 13px; letter-spacing: 0; line-height: 1.5;
}
.checker-card {
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  position: sticky;
  top: calc(var(--head-h) + 20px);
}
.chk-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.chk-progress-track {
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(242, 242, 240, .12);
  overflow: hidden;
}
.chk-progress-fill {
  height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--copper), var(--copper-hot));
  transform: scaleX(.25); transform-origin: left;
  transition: transform .45s var(--ease);
}
.chk-progress-house { width: 27px; height: 13px; color: var(--copper); flex: none; }
.chk-step { display: flex; justify-content: space-between; gap: 14px; color: var(--haze); margin-bottom: 20px; flex-wrap: wrap; }
.chk-step-title { color: var(--cloud); }

.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--f-body); font-size: 15px; font-weight: 500; letter-spacing: 0;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ctl-line);
  background: rgba(17, 17, 17, .5);
  color: var(--cloud);
  transition: border-color .2s, background-color .2s, color .2s, transform .2s;
}
.chip:hover { border-color: rgba(134, 246, 111, .55); transform: translateY(-1px); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--copper); border-color: var(--copper);
  color: #0B1206; font-weight: 600;
}
.section-day .chip {
  background: #fff; border-color: var(--edge); color: var(--ink);
}
.section-day .chip.is-on { background: var(--copper); border-color: var(--copper); color: #0B1206; }

.chk-q { animation: chk-in .32s cubic-bezier(.22, .61, .36, 1); }
@keyframes chk-in { from { opacity: 0; transform: translateY(10px); } }
.chk-verdict {
  border: 1px solid rgba(134, 246, 111, .35);
  border-left: 3px solid var(--copper);
  background: rgba(97, 243, 70, .08);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 22px;
  animation: chk-in .32s cubic-bezier(.22, .61, .36, 1);
}
.verdict-tag { color: var(--copper-hot); margin-bottom: 8px; }
.verdict-title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); margin-bottom: 6px; }
.verdict-copy { color: var(--haze); font-size: 15px; }

.chk-contact { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--cloud); }
.field input {
  font: inherit; color: var(--cloud);
  background: rgba(17, 17, 17, .55);
  border: 1px solid var(--ctl-line);
  border-radius: 10px;
  padding: 13px 15px;
  min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: rgba(165, 165, 161, .8); }
.field input:focus { outline: 2px solid var(--copper-hot); outline-offset: 2px; border-color: var(--copper); }
.field input[aria-invalid="true"] { border-color: #D96A4E; }
.field-err { color: #E89A85; font-size: 13px; min-height: 1em; }
.chk-note { color: var(--haze); font-size: 13px; line-height: 1.55; }

.chk-done { text-align: center; padding-block: 12px; display: grid; gap: 14px; justify-items: center; animation: chk-in .4s cubic-bezier(.22,.61,.36,1); }
.done-mark { width: 64px; height: 64px; color: var(--copper); }
.done-check { stroke-dasharray: 1; stroke-dashoffset: 0; }
.chk-done h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; }
.chk-done p { color: var(--haze); font-size: 15px; max-width: 38ch; }

.chk-nav { display: flex; justify-content: space-between; margin-top: 20px; }
.chk-back, .chk-restart {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em;
  color: var(--haze);
  padding: 12px 10px; min-height: 44px;
  transition: color .2s;
}
.chk-back:hover, .chk-restart:hover { color: var(--copper-hot); }

/* ---------- Before / After ---------- */
.work-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.pair-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 22px 16px; }
.pair-switch .chip { white-space: nowrap; }
.work-meta { color: var(--ink-2); letter-spacing: .1em; }
.sec-intro + .work-meta { margin-top: 14px; }
.ba-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  box-shadow: 0 40px 90px rgba(17, 17, 17, .28);
  touch-action: pan-y;
  --split: 50%;
  /* Dragging the handle must never select the photo: a selected <img> paints the copper ::selection tint over it */
  user-select: none; -webkit-user-select: none;
}
.ba-pane, .ba-pane img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-pane img { object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba-before-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.ba-divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--split);
  width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 18px rgba(0, 0, 0, .45);
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--copper);
  color: #0B1206;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  transition: background-color .2s, transform .2s;
}
.ba-handle svg { width: 22px; height: 22px; }
.ba-frame:hover .ba-handle { background: var(--copper-hot); }
.ba-frame.is-dragging .ba-handle { background: var(--copper-hot); transform: scale(1.06); }
.ba-tag {
  position: absolute; top: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .72);
  color: var(--cloud);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ba-tag-before { left: 18px; }
.ba-tag-after { right: 18px; }
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  pointer-events: none;   /* pointer capture on the frame does the sub-pixel work; the range stays for keyboard */
}
.ba-frame { cursor: ew-resize; }
.ba-range:focus-visible ~ .ba-divider .ba-handle,
.ba-frame.kb-focus .ba-handle {
  outline: 2px solid var(--copper-hot); outline-offset: 3px;
}

/* ---------- Craft ---------- */
.craft { position: relative; overflow: clip; }
.craft-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
.process { display: grid; gap: 12px; margin-top: 34px; color: var(--haze); font-family: var(--f-body); font-size: 15px; letter-spacing: 0; line-height: 1.5; text-transform: none; }
.process li { display: flex; gap: 14px; align-items: baseline; }
.process li span { color: var(--copper); font-family: var(--f-mono); font-size: var(--t-label); font-weight: 400; flex: none; }
.craft-media { position: relative; min-height: 520px; }
.craft-fig { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--deep); }
.craft-fig img { filter: saturate(.85) contrast(1.03); }
.craft-fig figcaption { padding: 12px 16px; color: var(--haze); font-family: var(--f-body); font-size: 13px; letter-spacing: 0; line-height: 1.5; }
.craft-fig-main { width: min(78%, 460px); margin-left: auto; }
.craft-fig-small {
  position: absolute; left: 0; bottom: 170px;
  width: min(46%, 264px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

/* ---------- Reviews ---------- */
.rev-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 40px; flex-wrap: wrap; }
.rev-top .sec-h2 { margin-bottom: 0; }
.rev-rating {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--edge); border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 16px 40px rgba(17, 17, 17, .08);
  transition: border-color .2s, box-shadow .2s;
}
.rev-rating:hover { border-color: rgba(97, 243, 70, .5); box-shadow: 0 20px 50px rgba(17, 17, 17, .12); }
.rev-rating-num { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-d3); letter-spacing: -.02em; line-height: 1; }
.rev-rating-body { display: grid; gap: 4px; }
.rev-stars { color: var(--copper); font-size: 15px; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.rev-rating-txt { font-size: 14px; color: var(--ink-2); }
.rev-rating-txt strong { color: var(--ink); font-weight: 600; }
.rev-rating svg { width: 14px; height: 14px; color: var(--ink); margin-left: 2px; transition: transform .25s; }
.rev-rating:hover svg { transform: translateX(4px); }
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}
.rev-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.rev-src { color: var(--ink-2); font-size: var(--t-label); letter-spacing: .1em; white-space: nowrap; }
.rev-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(17, 17, 17, .08);
  position: relative;
}
.rev-card p { flex: 1; color: var(--ink); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.rev-card footer { color: var(--ink-2); font-family: var(--f-body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.rev-card footer strong { color: var(--ink); font-weight: 600; }
.rev-more { margin-top: 40px; color: var(--ink-2); font-size: 15px; }
.rev-more a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rev-more a:hover { color: var(--copper); }

/* ---------- Area ---------- */
.area-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.area-search { margin-block: 30px 14px; max-width: 460px; }
.area-search label { display: block; color: var(--copper); margin-bottom: 10px; }
.area-search input {
  width: 100%;
  font: inherit; color: var(--cloud);
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.area-search input:focus { outline: 2px solid var(--copper-hot); outline-offset: 2px; border-color: var(--copper); }
/* Chrome / Safari draw the search "clear" × in the system blue. Ours: green disc, ink cross (icon-box rule),
   inside a 44px hit area; the negative margins keep the input's height and right padding as they were. */
.area-search input::-webkit-search-decoration { -webkit-appearance: none; }
.area-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; margin: -10px -12px -10px 6px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2361F346'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23111111' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.area-search input::-webkit-search-cancel-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2386F66F'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23111111' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.area-result { min-height: 26px; margin-top: 12px; font-size: 15px; color: var(--haze); }
.area-result strong { color: var(--copper-hot); font-weight: 600; }
.area-lists { display: grid; gap: 10px; max-width: 560px; }
.area-lists details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--deep);
  overflow: hidden;
}
.area-lists summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer;
  padding: 15px 18px;
  color: var(--cloud);
  list-style: none;
  transition: color .2s;
}
.area-lists summary:hover { color: var(--copper-hot); }
.area-lists summary::-webkit-details-marker { display: none; }
.area-lists summary em { font-style: normal; color: var(--copper); }
.area-lists details ul {
  padding: 2px 18px 16px;
  color: var(--haze);
  font-size: 14px; line-height: 1.6;
  columns: 2; column-gap: 24px;
}
.area-lists details li { break-inside: avoid; padding: 2px 0; }
@media (min-width: 900px) { .area-lists details ul { columns: 3; } }
.area-map svg { width: 100%; height: auto; max-height: 620px; display: block; margin-inline: auto; }
.map-land { fill: rgba(242, 242, 240, .035); }
.map-dot { fill: rgba(242, 242, 240, .16); }
.map-edge { fill: none; stroke: var(--line); }
.map-water { fill: rgba(60, 60, 60, .38); }
.map-wave { stroke: rgba(242, 242, 240, .09); stroke-width: 1; }
.map-water-label { fill: var(--sky); font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; }
.map-county {
  fill: var(--pane);
  stroke: rgba(242, 242, 240, .38);
  stroke-width: 1.2; stroke-linejoin: round;
  transition: fill .25s, stroke .25s;
  cursor: pointer;
}
.map-county:hover, .map-county.is-active {
  fill: rgba(97, 243, 70, .32);
  stroke: var(--copper-hot);
}
.map-labels text { fill: var(--cloud); font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .1em; pointer-events: none; }
.map-towns circle { fill: #B0B0AC; }
.map-towns text { fill: #B0B0AC; font-family: var(--f-body); font-size: 11px; pointer-events: none; }
.map-hq circle { fill: var(--copper); }
.map-hq-ring {
  fill: none !important;
  stroke: var(--copper);
  stroke-width: 1.4;
  opacity: .8;
  transform-origin: 320px 302px;
  animation: hq-ping 2.8s ease-out infinite;
}
@keyframes hq-ping { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.map-hq text { fill: var(--copper-hot); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; }
.area-map figcaption { margin-top: 16px; color: var(--haze); text-align: center; }

/* ---------- Final CTA ---------- */
.final {
  position: relative;
  background: linear-gradient(180deg, var(--day) 0%, var(--day) 88px, var(--night) 88px);
  color: var(--cloud);
  padding-top: 88px;
}
.final-roofline { position: absolute; top: 0; left: 0; right: 0; height: 90px; }
.final-roofline svg { width: 100%; height: 90px; display: block; }
.final-roofline path { fill: var(--night); }
.final-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
  padding-block: clamp(70px, 8vw, 120px);
}
.final-h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-d2);
  line-height: 1.02; letter-spacing: -0.026em;
  text-wrap: balance;
  margin-bottom: 34px;
}
.final-phone {
  display: inline-block;
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-d2);
  letter-spacing: -0.01em;
  color: var(--copper-hot);
  margin-bottom: 38px;
  transition: color .2s;
  font-variant-numeric: tabular-nums;
}
.final-phone:hover { color: var(--copper); }
/* Second number (773) 657-3036, 2026-09-24: smaller line right under the big one */
.phone-alt {
  display: table; margin: -24px 0 34px;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px);
  color: var(--cloud); font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 3px; text-underline-offset: 6px;
  transition: color .2s;
}
.phone-alt:hover { color: var(--copper-hot); }
.phone-alt { position: relative; }
.phone-alt::after { content: ""; position: absolute; inset: -6px 0; }   /* 44px tap height without moving the layout */
.page-hero-phone + .phone-alt { margin: 4px 0 14px; }
.page-hero--day .phone-alt, .page-hero--day .phone-alt:hover { color: var(--ink); }
.final-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.final-hours { color: var(--haze); font-family: var(--f-body); font-size: 14px; letter-spacing: 0; line-height: 1.7; }

/* ---------- Footer ---------- */
.site-foot { background: #0B0B0B; border-top: 1px solid var(--line); padding-block: 54px 90px; color: var(--haze); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 44px;
}
.foot-brand { display: flex; gap: 14px; align-items: flex-start; }
.foot-brand p { font-family: var(--f-display); font-weight: 700; color: var(--cloud); line-height: 1.3; }
.foot-brand span { font-family: var(--f-body); font-weight: 400; color: var(--haze); font-size: 13px; display: block; margin-top: 8px; max-width: 30ch; }
.foot-col { display: grid; gap: 2px; align-content: start; font-family: var(--f-body); font-size: 14px; letter-spacing: 0; line-height: 1.5; text-transform: none; }
.foot-head { color: var(--copper); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; margin-top: 10px; margin-bottom: 4px; }
.foot-col a { display: inline-block; padding: 12px 0; margin: -6px 0; transition: color .2s; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--cloud); }
.foot-legal { border-top: 1px solid var(--line); padding-top: 26px; color: var(--haze); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-bar {
  position: fixed; z-index: 220;
  left: 12px; right: 12px; bottom: 12px;
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(17, 17, 17, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transform: translateY(calc(100% + 24px));
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.mobile-bar.is-in { transform: none; }
.mb-call, .mb-estimate {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px;
  border-radius: 12px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
}
.mb-call { position: relative; background: var(--copper); color: #0B1206; }
.mb-call svg { width: 15px; height: 15px; }
.mb-pulse {
  position: absolute; inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(134, 246, 111, .55);
  animation: mb-pulse 3.4s ease-out 4;
  pointer-events: none;
}
@keyframes mb-pulse {
  0%, 62% { box-shadow: 0 0 0 0 rgba(134, 246, 111, .5); }
  82% { box-shadow: 0 0 0 12px rgba(134, 246, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(134, 246, 111, 0); }
}
.mb-estimate { color: var(--cloud); box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, .3); }

/* ---------- Reveal defaults (JS toggles) ---------- */
html.has-js [data-reveal] { opacity: 0; transform: translateY(24px); }
html.has-js.reduced-motion [data-reveal] { opacity: 1; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 1180px) {
  .head-nav { display: none; }
}
@media (max-width: 1080px) {
  .svc-grid { gap: 20px; }
}
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; }
  .checker-cols, .work-cols, .craft-cols, .area-cols { grid-template-columns: 1fr; }
  .area-cols { display: flex; flex-direction: column; }
  .area-map { order: -1; }
  .checker-card { position: static; }
  .checker-fig { display: none; }
  .rev-grid { grid-template-columns: 1fr; gap: 18px; }
  .craft-media { min-height: 0; margin-top: 10px; }
  .craft-fig-main { width: 100%; margin: 0; }
  .craft-fig-small { position: static; width: 72%; margin-top: 18px; margin-left: auto; }
  .area-map { max-width: 480px; }
  .mobile-bar { display: flex; }
  .site-foot { padding-bottom: 48px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .foot-brand { grid-column: 1 / -1; }
  .final-roofline svg { height: 56px; }
  .final-roofline { height: 56px; }
  .final { background: linear-gradient(180deg, var(--day) 0%, var(--day) 54px, var(--night) 54px); }
}
@media (max-width: 560px) {
  .head-cta { gap: 10px; }
  .head-cta .btn-sm { display: none; }
  .head-phone {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--copper); color: #0B1206; font-size: 0;
  }
  .head-phone svg { width: 20px; height: 20px; color: currentColor; }
  .hero-actions .btn { width: 100%; }
  .hero-content { padding-bottom: 40px; }
  .wx-chip { margin-bottom: 14px; }
  /* Footer on phones: two columns, so the six blocks do not stack into one 1,900px strip;
     brand and contact (the long e-mail) take the full width */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .foot-brand, .foot-col:has(a[href^="mailto:"]), .foot-col:last-child { grid-column: 1 / -1; }   /* credentials + elsewhere: the licence line must not wrap */
  .hero-ticks { gap: 8px 18px; }
  .storm-actions { align-items: flex-start; flex-direction: column; }
}

/* ============ Reduced motion ============ */
/* Class-driven mirror (set by JS for the ?static audit mode) */
html.reduced-motion .hero-photo { filter: saturate(1) brightness(1.08) contrast(1); transform: none; }
html.reduced-motion .hero-storm { opacity: 0; }
html.reduced-motion .hero-photo-clear { opacity: 1; transform: none; }
html.reduced-motion .mb-pulse,
html.reduced-motion .map-hq-ring, html.reduced-motion .hq-pin-ring,
html.reduced-motion .chat-typing i,
html.reduced-motion .wx-dot { animation: none !important; }
html.reduced-motion * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
html:not(.has-js) .mobile-bar { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-photo { filter: saturate(1) brightness(1.08) contrast(1); transform: none; }
  .hero-storm { opacity: 0; }
  .hero-photo-clear { opacity: 1; transform: none; }
  .mb-pulse, .map-hq-ring, .hq-pin-ring, .chat-typing i, .wx-dot { animation: none !important; }
}

/* ---- Company logo in the header (design picker build) ---- */
.brand--img{display:flex;align-items:center;gap:0}
.brand--img img{height:48px;width:auto;display:block}   /* 2026-09-24: inner pages up from 38/30/30 at the client's request */
@media(max-width:900px){.brand--img img{height:38px}}
@media(max-width:520px){.brand--img img{height:34px}}
/* Front page: larger logo (client request, 2026-09-12); header height unchanged */
.is-home .brand--img img{height:54px}
@media(max-width:900px){.is-home .brand--img img{height:42px}}
@media(max-width:520px){.is-home .brand--img img{height:36px}}

/* ============================================================
   Multi-page additions — 2026-08-22
   Page hero, mobile nav, detail layouts, portfolio, FAQ, steps.
   ============================================================ */

/* ---------- Header: active link + mobile menu ---------- */
.head-nav { gap: 22px; }
.head-nav a { position: relative; white-space: nowrap; }
.head-nav a[aria-current="page"] { color: var(--cloud); }
.head-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--copper);
}
.nav-toggle {
  display: none; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 17, .45);
  color: var(--cloud);
  transition: border-color .2s, background-color .2s;
}
.nav-toggle:hover { border-color: rgba(134, 246, 111, .55); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ico-x { display: none; }
html.nav-open .nav-toggle .ico-x { display: block; }
html.nav-open .nav-toggle .ico-bars { display: none; }
html.nav-open .site-head { background: rgba(17, 17, 17, .97); box-shadow: 0 1px 0 var(--line); }
html.nav-open { overflow: hidden; }
.nav-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  height: calc(100dvh - var(--head-h));
  z-index: 190;
  display: flex; flex-direction: column;
  padding: 18px var(--pad) 28px;
  background: rgba(17, 17, 17, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  overflow: auto;
  animation: nav-in .28s cubic-bezier(.22, .61, .36, 1);
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } }
.nav-item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 6vw, 34px); letter-spacing: -.02em; line-height: 1.1;
  color: var(--cloud);
  transition: color .2s, padding-left .2s;
}
.nav-item:hover { color: var(--copper-hot); }
.nav-item[aria-current="page"] { color: var(--copper-hot); }
.nav-item .mono { color: var(--haze); }
.nav-panel-cta { margin-top: auto; padding-top: 26px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.nav-panel-cta .btn { width: 100%; }
.nav-panel-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--cloud);
}
.nav-panel-phone svg { width: 16px; height: 16px; color: var(--copper); }
.nav-panel-cta .mono { color: var(--haze); }
@media (max-width: 1180px) { .nav-toggle { display: grid; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: clip;
  background: var(--night); color: var(--cloud);
  padding-top: calc(var(--head-h) + clamp(44px, 7vw, 96px));
  padding-bottom: clamp(52px, 7vw, 96px);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(60, 60, 60, .38), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(97, 243, 70, .10), transparent 60%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}
.page-hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.page-hero-inner.is-solo { grid-template-columns: minmax(0, 1fr); }
.page-hero-copy { max-width: 760px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; color: var(--haze); margin-bottom: 22px; letter-spacing: .12em; }
.crumbs a { display: inline-block; padding: 12px 4px; margin: -12px -4px; transition: color .2s; }
.crumbs a:hover { color: var(--cloud); }
.crumbs span:last-child { color: var(--copper); }
.page-h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-d1);
  line-height: 1.02; letter-spacing: -.026em;
  text-wrap: balance;
  margin-bottom: 20px;
}
.page-hero .sec-intro { color: #C8C8C4; max-width: 576px; font-size: var(--t-body); }
.page-hero .sec-intro a { color: var(--copper-hot); text-decoration: underline; text-underline-offset: 3px; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.page-hero .hero-ticks { margin-top: 26px; }
.page-hero-phone { display: block; margin: 26px 0 10px; }
.page-hero-hours { color: var(--haze); font-family: var(--f-body); font-size: 14px; letter-spacing: 0; line-height: 1.7; }
.page-hero-hours a { color: var(--cloud); }
.page-hero-hours a:hover { color: var(--copper-hot); }
.page-hero-fig {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: var(--deep);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.page-hero-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.82) contrast(1.04); }
.page-hero-fig figcaption { padding: 12px 16px; color: var(--haze); line-height: 1.55; font-size: 14px; }

/* Storm strip as a page hero */
.storm--hero { padding-top: calc(var(--head-h) + clamp(80px, 10vw, 140px)); }
.storm--hero .storm-h2 { font-size: var(--t-d1); }

/* ---------- Generic inner-page layouts ---------- */
.sec-more { margin-top: 30px; }
.section-day .svc-link { color: var(--ink); }
.section-day .svc-list li { color: var(--ink); }
.section-day .process { color: var(--ink-2); }
.svc-media { display: block; }
.svc-body h3 a { transition: color .2s; }
.svc-body h3 a:hover { color: var(--copper-hot); }

.detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.prose h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(23px, 2.5vw, 30px); letter-spacing: -.015em; line-height: 1.12;
  margin: 36px 0 12px;
}
.prose > h2:first-child, .prose > .sec-label + h2 { margin-top: 0; }
.prose .sec-h2 { margin-bottom: 22px; }
.prose p { color: var(--haze); font-size: var(--t-body); max-width: 552px; margin-bottom: 16px; text-wrap: pretty; }
.section-day .prose p { color: var(--ink-2); }
.prose .svc-list { margin: 8px 0 24px; }
.prose .svc-list li { font-size: 15px; }
.prose .process { margin-top: 28px; }
.prose .checker-fig { margin-top: 40px; }

.aside-card {
  position: sticky; top: calc(var(--head-h) + 20px);
  display: grid; gap: 14px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--pane); color: var(--cloud);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .35);
}
.aside-card .sec-label { margin-bottom: 4px; color: var(--copper); }
.aside-card h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -.018em; line-height: 1.08; text-wrap: balance; }
.aside-card > p { color: var(--haze); font-size: 15px; }
.aside-phone { font-family: var(--f-display); font-weight: 800; font-size: 26px; color: var(--copper-hot); transition: color .2s; font-variant-numeric: tabular-nums; }
.aside-phone:hover { color: var(--copper); }
.aside-phone--alt { font-size: 20px; font-weight: 700; color: var(--cloud); margin-top: -6px; }
.aside-card .mono:not(.sec-label) { color: var(--haze); font-family: var(--f-body); font-size: 13px; letter-spacing: 0; line-height: 1.6; text-transform: none; }

/* Spec cards */
.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin-top: 42px;
}
.spec {
  background: var(--deep); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px;
  transition: border-color .25s;
}
.spec:hover { border-color: rgba(134, 246, 111, .45); }
.section-day .spec { background: #fff; border-color: var(--edge); }
.spec > .mono { color: var(--copper); margin-bottom: 10px; }
.section-day .spec > .mono { color: var(--ink); }
.spec h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 8px; overflow-wrap: break-word; }
.spec h3 a:hover { color: var(--copper-hot); }
.spec > p:last-child { color: var(--haze); font-size: 14px; line-height: 1.55; }
.section-day .spec > p:last-child { color: var(--ink-2); }

/* Steps (first 48 hours) */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.step { background: #fff; border: 1px solid var(--edge); border-radius: 16px; padding: 28px 26px; }
.step .step-num, .step-num { font-family: var(--f-display); font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.03em; color: var(--ink); margin-bottom: 16px; }
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); letter-spacing: -.012em; line-height: 1.2; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

.checker-fig--page { display: block; }

/* ---------- Portfolio ---------- */
.pf-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
  margin-top: 34px;
}
.pf-item {
  position: relative; overflow: hidden;
  grid-column: span 2;
  border-radius: 16px; border: 1px solid var(--line); background: var(--deep);
  isolation: isolate;
}
.pf-item.is-wide { grid-column: span 4; }
.pf-item.is-tall { grid-row: span 2; }
.pf-item.is-big { grid-column: span 4; grid-row: span 2; }
.pf-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(1.04);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .4s;
}
.pf-item:hover img { transform: scale(1.05); filter: saturate(1.02) contrast(1.04); }
.pf-num {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(17, 17, 17, .72); color: var(--cloud);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pf-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: 4px;
  padding: 56px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 8, .9));
  color: var(--cloud);
  transform: translateY(6px); opacity: .94;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .45s;
}
.pf-item:hover .pf-cap { transform: none; opacity: 1; }
.pf-cap > .mono { color: var(--copper-hot); }
.pf-cap strong { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
.pf-cap .pf-where { color: var(--haze); }
.pf-item.is-out { display: none; }
.pf-empty { margin-top: 30px; color: var(--haze); font-size: 14px; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 14px; background: var(--deep); overflow: hidden; transition: border-color .25s; }
.faq-list details[open] { border-color: rgba(134, 246, 111, .4); }
.faq-list summary {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); letter-spacing: -.01em; line-height: 1.25;
  transition: color .2s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--copper-hot); }
.faq-list summary > .mono { color: var(--copper); flex: none; }
.faq-q { flex: 1; }
.faq-x { position: relative; width: 16px; height: 16px; flex: none; }
.faq-x::before, .faq-x::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--copper); border-radius: 2px; transition: transform .3s; }
.faq-x::before { width: 16px; height: 2px; }
.faq-x::after { width: 2px; height: 16px; }
details[open] .faq-x::after { transform: rotate(90deg); }
.faq-list details p { padding: 0 20px 20px 56px; color: var(--haze); font-size: var(--t-body); line-height: 1.6; max-width: 604px; }
.faq-list details p a { color: var(--copper-hot); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer: five columns ---------- */
.foot-grid { grid-template-columns: 1.3fr .8fr .9fr 1.15fr 1fr; gap: 32px 28px; }

/* ---------- Responsive (multi-page) ---------- */
@media (max-width: 1080px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-fig { max-width: 520px; }
  .detail-cols { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .pf-item { grid-column: span 1; }
  .pf-item.is-wide, .pf-item.is-big { grid-column: span 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps-grid { grid-template-columns: 1fr; }
  .page-hero-actions .btn, .storm--hero .storm-actions .btn { width: 100%; }   /* insurance hero matches the other heroes */
  .faq-list summary { font-size: 16.5px; padding: 16px; gap: 12px; }
  .faq-list details p { padding-left: 16px; }
  .pf-grid { gap: 12px; grid-auto-rows: 170px; }
}

/* ---------- Services: icon cards (home) ---------- */
.svc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.svc-head .sec-h2 { margin-bottom: 0; }
.svc-all {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  margin-bottom: 10px; padding: 10px 0 7px;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .14em;
  color: var(--copper-hot);
  border-bottom: 1px solid rgba(134, 246, 111, .45);
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.svc-all:hover { color: var(--cloud); border-color: var(--cloud); }
.svc-all svg { width: 14px; height: 14px; transition: transform .25s; }
.svc-all:hover svg { transform: translateX(4px); }
.ico-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.ico-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 36px 34px 32px;
  background: var(--deep);
  border: 1px solid var(--line); border-radius: 18px;
  color: var(--cloud);
  will-change: transform;
  transition: border-color .3s, box-shadow .3s;
  --glow-x: 50%; --glow-y: 50%; --glow-o: 0;
}
.ico-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--glow-x) var(--glow-y), rgba(134, 246, 111, .13), transparent 65%);
  opacity: var(--glow-o); transition: opacity .35s;
}
.ico-card:hover { border-color: rgba(134, 246, 111, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .38); }
.ico-box {
  width: 58px; height: 58px; margin-bottom: 8px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(134, 246, 111, .5);
  background: rgba(97, 243, 70, .08);
  color: var(--copper-hot);
  transition: background-color .3s, transform .3s;
}
.ico-card:hover .ico-box { background: rgba(97, 243, 70, .16); transform: translateY(-2px); }
.ico-box svg { width: 24px; height: 24px; }
.ico-card h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.014em; line-height: 1.15; text-wrap: balance; }
.ico-card p { flex: 1; color: var(--haze); font-size: 15px; line-height: 1.6; }
.ico-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--cloud); font-size: var(--t-label); letter-spacing: .1em; transition: color .2s; }
.ico-link svg { width: 14px; height: 14px; transition: transform .25s; }
.ico-card:hover .ico-link { color: var(--copper-hot); }
.ico-card:hover .ico-link svg { transform: translateX(4px); }
@media (max-width: 1080px) { .ico-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 760px) {
  .svc-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .svc-all { margin-bottom: 0; }
}
@media (max-width: 640px) { .ico-grid { grid-template-columns: 1fr; } .ico-card { padding: 28px 24px 26px; } }

/* ---------- Contact: message form ---------- */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.contact-card {
  background: var(--pane); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.contact-card .sec-label { margin-bottom: 14px; }
.contact-card .sec-label { color: var(--copper-hot); }
.contact-card .sec-h2, .section-day .contact-card .sec-h2 { font-size: var(--t-d3); margin-bottom: 26px; color: var(--cloud); }   /* night card inside a day section */
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field--full { grid-column: 1 / -1; }
.field label span { color: var(--haze); font-weight: 400; font-size: 12px; margin-left: 6px; }
.field select, .field textarea {
  font: inherit; color: var(--cloud);
  background: rgba(17, 17, 17, .55);
  border: 1px solid var(--ctl-line); border-radius: 10px;
  padding: 13px 15px; min-height: 48px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field select[data-chips] {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2361F346' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 14px;
}
.field select option { background: var(--pane); color: var(--cloud); }
.field textarea { resize: vertical; min-height: 132px; line-height: 1.5; }
.field textarea::placeholder { color: rgba(165, 165, 161, .8); }
.field select:focus, .field textarea:focus { outline: 2px solid var(--copper-hot); outline-offset: 2px; border-color: var(--copper); }
.cf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 24px; }
.cf-actions .chk-note { max-width: 40ch; }
.cf-fail { margin-top: 14px; color: #E89A85; }
.cf-fail a { color: var(--copper-hot); text-decoration: underline; text-underline-offset: 3px; }
.cf-done { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 16px 0 6px; animation: chk-in .4s cubic-bezier(.22, .61, .36, 1); }
.cf-done h3 { font-family: var(--f-display); font-weight: 800; font-size: 24px; }
.cf-done p { color: var(--haze); font-size: 15px; max-width: 40ch; }
.contact-side { display: grid; gap: 12px; }
.contact-side .spec h3 { font-size: var(--t-h4); }
.contact-side .spec > p:last-child a { color: var(--copper-hot); }
/* checker card keeps its dark styling when the section is on a day band */
.section-day .checker-card .chip { background: rgba(17, 17, 17, .5); border-color: var(--line); color: var(--cloud); }
.section-day .checker-card .chip:hover { border-color: rgba(134, 246, 111, .55); }
.section-day .checker-card .chip[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: #0B1206; }
.section-day .checker-card { color: var(--cloud); }
.section-day .checker-fig { background: var(--deep); }
@media (max-width: 900px) {
  .contact-cols { grid-template-columns: 1fr; }
  .contact-side { position: static; grid-template-columns: 1fr 1fr; }
}
/* Contact form as three screens on phones: pick the job, say where and what, leave a number.
   .cf-step is display:contents on wide screens so the grid still sees the fields directly. */
.cf-step { display: contents; }
@media (min-width: 641px) {   /* desktop order unchanged: name, phone, email, town, chips, message */
  .cf-step[data-step="3"] .field:nth-of-type(1) { order: 1; } .cf-step[data-step="3"] .field:nth-of-type(2) { order: 2; } .cf-step[data-step="3"] .field:nth-of-type(3) { order: 3; }
  .cf-step[data-step="2"] .field:nth-of-type(1) { order: 4; } .cf-step[data-step="1"] .field { order: 5; } .cf-step[data-step="2"] .field:nth-of-type(2) { order: 6; }
}
.cf-form.is-stepped .cf-step { display: none; }
.cf-form.is-stepped .cf-step.is-active { display: grid; gap: 16px; animation: chk-in .32s cubic-bezier(.22, .61, .36, 1); }
.cf-form.is-stepped .cf-steps-head { display: block; }
.cf-form.is-stepped .cf-opt { display: inline; }
.cf-form.is-stepped .cf-nav { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 6px; margin-top: 22px; }   /* Next full width, Back as a quiet line beneath it */
.cf-form.is-stepped .cf-nav .cf-back { align-self: center; }
.cf-form.is-stepped .cf-service-chips .chip { padding: 13px 18px; }
.cf-form.is-stepped .field textarea { min-height: 112px; }
.cf-form.is-stepped .cf-actions { margin-top: 18px; }
.cf-form.is-stepped .cf-actions .chk-note { max-width: none; }
.cf-recap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--haze); font-size: 14px; line-height: 1.4; }
.cf-recap b { color: var(--cloud); font-weight: 600; }
.cf-recap .cf-recap-edit { color: var(--copper-hot); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; padding: 4px 0; min-height: 0; }
.cf-form:not(.is-stepped) .cf-recap { display: none; }          /* the recap only makes sense across screens */
.cf-form.is-stepped .chk-step { flex-direction: column; gap: 6px; margin-bottom: 18px; }   /* number above, question below, every screen alike */
.cf-form.is-stepped .cf-step[data-step="1"] .field-label { display: none; }               /* the screen title already asks it */
@media (max-width: 640px) {
  .cf-grid { grid-template-columns: 1fr; }
  .contact-side { grid-template-columns: 1fr; }
  .cf-actions .btn { width: 100%; }
}

/* ---------- Services: zig-zag rows ---------- */
.zz .container { display: grid; gap: clamp(64px, 8vw, 120px); }
.zz-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
/* The copy always takes the 1.1fr track, so the measure stops changing on every row */
.zz-row:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.zz-row:nth-child(even) .zz-media { order: 2; }
.zz-media { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--deep); box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.zz-media a { display: block; }
.zz-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85) contrast(1.04); transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.zz-media:hover img { transform: scale(1.04); }
.zz-h2 { font-family: var(--f-display); font-weight: 800; font-size: var(--t-d3); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 16px; }
.zz-text { color: var(--haze); font-size: var(--t-body); max-width: 60ch; margin-bottom: 20px; text-wrap: pretty; }
.zz-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 22px; }
.zz-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--cloud); line-height: 1.4; }
.zz-checks svg { width: 15px; height: 15px; flex: none; color: var(--copper-hot); margin-top: 2px; }
.callout {
  border: 1px solid rgba(134, 246, 111, .35);
  background: rgba(97, 243, 70, .08); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 26px; max-width: 62ch;
}
.callout-q { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.callout-ico { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--copper); color: #0B1206; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 400; }
.callout-a { color: var(--haze); font-size: 14px; line-height: 1.55; }
.zz-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.steps-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.steps-grid--5 .step { padding: 24px 22px; }
.steps-grid--5 .step-num { font-size: 34px; }
@media (max-width: 1080px) { .steps-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .zz-row, .zz-row:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }   /* 2026-09-17: the :nth-child(even) two-column rule outranked the plain .zz-row reset, so gutters and chimney stayed side by side on phones */
  .zz-row:nth-child(even) .zz-media { order: 0; }
  .zz-media { max-width: 560px; }
}
@media (max-width: 640px) {
  .steps-grid--5 { grid-template-columns: 1fr 1fr; }
  .zz-checks { grid-template-columns: 1fr; }
  .zz-actions .btn { width: 100%; }
}
@media (max-width: 420px) { .steps-grid--5 { grid-template-columns: 1fr; } }

/* ---------- Portfolio: project sheet ---------- */
.pf-item { cursor: pointer; }
.pf-item:focus-visible { outline: 2px solid var(--copper-hot); outline-offset: 3px; }
.pf-hint { margin-top: 22px; color: var(--haze); text-align: center; font-size: 14px; }
.pf-sheet {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: transparent; color: var(--cloud);
  overflow: auto;
}
.pf-sheet::backdrop { background: rgba(8, 8, 8, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pf-sheet[open]::backdrop { opacity: 1; transition: opacity .26s cubic-bezier(.22, .61, .36, 1); }
@starting-style { .pf-sheet[open]::backdrop { opacity: 0; } }
.pf-sheet.is-closing::backdrop { opacity: 0; transition: opacity .22s ease; }
html.sheet-open { overflow: hidden; }
.pf-sheet-inner {
  width: min(1180px, calc(100vw - 32px));
  margin: 24px auto;
  background: var(--night);
  border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(18px, 3vw, 36px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.pf-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.pf-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  color: var(--copper-hot); transition: color .2s;
}
.pf-back:hover { color: var(--cloud); }
.pf-back svg { width: 16px; height: 16px; }
.pf-nav { display: flex; align-items: center; gap: 8px; }
.pf-counter { color: var(--haze); margin-right: 8px; }
.pf-prev, .pf-next {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--cloud);
  display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.pf-prev:hover, .pf-next:hover { border-color: var(--copper); color: var(--copper-hot); }
.pf-prev svg, .pf-next svg { width: 16px; height: 16px; }
.pf-sheet-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.pf-sheet-main { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--deep); }
.pf-sheet-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pf-sheet-main figcaption { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(17, 17, 17, .72); color: var(--cloud); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pf-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.pf-thumbs button { position: relative; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); opacity: .65; transition: opacity .2s, border-color .2s; }
.pf-thumbs button:hover, .pf-thumbs button.is-on { opacity: 1; border-color: var(--copper); }
.pf-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pf-thumbs .mono { position: absolute; bottom: 8px; left: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(17, 17, 17, .75); color: var(--cloud); }
.pf-sheet-side {
  background: var(--pane); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(20px, 2.6vw, 30px);
}
.pf-pill { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--copper); color: #0B1206; font-weight: 500; margin-bottom: 16px; }
.pf-sheet-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-d3); letter-spacing: -.018em; line-height: 1.1; margin-bottom: 10px; text-wrap: balance; }
.pf-sheet-desc { color: var(--haze); font-size: 15px; line-height: 1.6; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pf-meta { margin: 0 0 22px; }
.pf-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pf-meta dt { color: var(--haze); flex: none; }
.pf-meta dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 15px; text-align: right; line-height: 1.3; }
.pf-sheet-side .chk-note { margin-top: 14px; text-align: center; color: var(--haze); }
@media (max-width: 900px) {
  .pf-sheet-cols { grid-template-columns: minmax(0, 1fr); }   /* plain 1fr grows to the thumbs' min-content and pushed the sheet past the screen */
  .pf-sheet-inner { width: calc(100vw - 20px); margin: 10px auto; }
  .pf-back span { display: none; }
}

/* ---------- Chat widget ---------- */
.chat { position: fixed; right: 18px; bottom: 18px; z-index: 230; display: grid; justify-items: end; gap: 12px; }
.chat-fab {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--copper); color: #0B1206;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  box-shadow: 0 14px 40px rgba(97, 243, 70, .4);
  transition: background-color .22s, transform .22s, box-shadow .22s;
}
.chat-fab:hover { background: var(--copper-hot); transform: translateY(-1px); }
.chat-fab svg { width: 22px; height: 22px; }
.chat.is-open .chat-fab { display: none; }   /* the panel header carries the only close button */
.chat-panel {
  width: min(390px, calc(100vw - 24px));
  max-height: min(640px, calc(100dvh - 110px));
  display: flex; flex-direction: column;
  background: var(--night); color: var(--cloud);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); background: var(--deep); }
.chat-mark { width: 34px; height: 17px; color: var(--copper); flex: none; }
.chat-head > div { flex: 1; min-width: 0; }
.chat-title { font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1.1; }
.chat-sub { color: var(--haze); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .chat-sub-x { display: none; } }   /* the full line ended in "ANSWERS FA…" on phones */
.chat-close { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--haze); transition: color .2s, background-color .2s; }
.chat-close:hover { color: var(--cloud); background: rgba(242, 242, 240, .08); }
.chat-close svg { width: 18px; height: 18px; }
.chat-log { flex: 1 1 auto; min-height: 280px; max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px; display: grid; gap: 10px; align-content: start; }
.chat-msg { display: flex; }
.chat-msg--user { justify-content: flex-end; }
.chat-bubble {
  max-width: 86%; padding: 11px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.5;
  background: var(--pane); border: 1px solid var(--line);
  animation: chk-in .3s cubic-bezier(.22, .61, .36, 1);
}
.chat-msg--user .chat-bubble { background: var(--copper); border-color: var(--copper); color: #0B1206; border-bottom-right-radius: 6px; }
.chat-msg--bot .chat-bubble { border-bottom-left-radius: 6px; }
.chat-bubble a { color: var(--copper-hot); text-decoration: underline; text-underline-offset: 2px; }
.chat-bubble a[href^="tel:"] { white-space: nowrap; }   /* a phone number never breaks at its hyphen */
.chat-msg--user .chat-bubble a { color: #0B1206; }
.chat-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--haze); animation: chat-dot 1.1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.chat-chips .chip { font-size: 13px; padding: 8px 12px; min-height: 36px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); background: var(--deep); }
.chat-form textarea {
  flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.4;
  color: var(--cloud); background: rgba(17, 17, 17, .55);
  border: 1px solid var(--ctl-line); border-radius: 12px; padding: 10px 12px; max-height: 120px;
}
.chat-form textarea:focus { outline: 2px solid var(--copper-hot); outline-offset: 2px; border-color: var(--copper); }
.chat-form textarea::placeholder { color: var(--haze); }
.chat-send { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--copper); color: #0B1206; display: grid; place-items: center; transition: background-color .2s; }
.chat-send:hover { background: var(--copper-hot); }
.chat-send svg { width: 18px; height: 18px; }
.chat-foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px 12px; color: var(--haze); background: var(--deep); white-space: nowrap; }
.chat-foot a { color: var(--copper-hot); }
@media (max-width: 900px) {
  .chat { right: 12px; bottom: 96px; }           /* clears the sticky mobile bar (12 + 70 + gap) */
  .chat-fab { transition: background-color .22s, transform .22s, box-shadow .22s, opacity .25s; }
  body:not(:has(.site-head.is-scrolled)) .chat-fab { opacity: 0; pointer-events: none; }
  .chat-fab-label { display: none; }
  .chat-fab { width: 52px; padding: 0; justify-content: center; }
  .chat-panel { max-height: calc(100dvh - 170px); }
  .chat-log { min-height: 200px; }
}
html.nav-open .chat, html.sheet-open .chat { display: none; }
html.nav-open .mobile-bar { display: none; }   /* the open nav panel has its own phone link; the bar was covering it */

/* ---------- Portfolio: groups + step-by-step story ---------- */
.pf-open-title { margin-bottom: 12px; }
.pf-grid { margin-top: 34px; }
.pf-sheet-cap { margin-top: 10px; color: var(--haze); font-size: 14px; min-height: 1.4em; }
.pf-story { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.pf-story-h { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); letter-spacing: -.012em; margin-bottom: 16px; }
.pf-steps { display: grid; gap: 14px; }
.pf-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.pf-steps .pf-step-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(97, 243, 70, .12); border: 1px solid rgba(134, 246, 111, .4); color: var(--copper-hot); font-family: var(--f-mono); font-size: 12px; }
.pf-steps strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 16px; margin-bottom: 3px; }
.pf-steps p { color: var(--haze); font-size: 14px; line-height: 1.55; }


/* ============================================================
   Tone: day-first pages (every page except index + insurance-claims)
   ============================================================ */
body.tone-day { background: var(--day); color: var(--ink); }
.tone-day .site-head { color: var(--ink); }
.tone-day .head-nav a { color: var(--ink-2); }
.tone-day .head-nav a:hover, .tone-day .head-nav a[aria-current="page"] { color: var(--ink); }
.tone-day .head-phone { color: var(--ink); }
.tone-day .head-phone:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tone-day .brand--img img { content: url(../img/logo-mw-dark.svg); }
.tone-day .nav-toggle { color: var(--ink); border-color: var(--edge); background: rgba(255, 255, 255, .6); }
.tone-day .site-head.is-scrolled { background: rgba(251, 251, 248, .88); box-shadow: 0 1px 0 var(--edge); }
html.nav-open .tone-day .site-head { background: rgba(17, 17, 17, .97); color: var(--cloud); box-shadow: 0 1px 0 var(--line); }
html.nav-open .tone-day .brand--img img { content: url(../img/logo-mw-light.svg); }
html.nav-open .tone-day .head-phone { color: var(--cloud); }   /* 2026-09-28: no box behind the number, it read as a stray dark rectangle in the open menu */
html.nav-open .tone-day .nav-toggle { color: var(--cloud); border-color: var(--line); background: rgba(17, 17, 17, .45); }
@media (max-width: 560px) { .tone-day .head-phone, html.nav-open .tone-day .head-phone { background: var(--copper); color: #0B1206; } }

.page-hero--day { background: var(--day); color: var(--ink); }
.page-hero--day::before { background: radial-gradient(90% 70% at 90% 0%, rgba(97, 243, 70, .10), transparent 60%); }
.page-hero--day::after { background: var(--edge); }
.page-hero--day .sec-label { color: var(--ink); }
.page-hero--day .sec-intro { color: var(--ink-2); }
.page-hero--day .sec-intro a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.page-hero--day .crumbs { color: var(--ink-2); }
.page-hero--day .crumbs a:hover { color: var(--ink); }
.page-hero--day .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .3); }
.page-hero--day .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .68); }
.page-hero--day .page-hero-fig { border-color: var(--edge); background: #fff; box-shadow: 0 24px 60px rgba(17, 17, 17, .16); }
.page-hero--day .page-hero-fig figcaption { color: var(--ink-2); }
.page-hero--day .page-hero-hours { color: var(--ink-2); }
.page-hero--day .page-hero-hours a { color: var(--ink); }
.page-hero--day .hero-ticks { color: var(--ink-2); }
.page-hero--day .final-phone { color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 6px; text-underline-offset: 8px; }

/* Section follows a night block → the final CTA stays night (no day lip) */
.section-night + .final, .storm + .final { background: var(--night); padding-top: 0; }
.section-night + .final .final-roofline, .storm + .final .final-roofline { display: none; }

/* Components on a day band */
.section-day .ico-card { background: #fff; border-color: var(--edge); color: var(--ink); }
.section-day .ico-card::after { background: radial-gradient(380px circle at var(--glow-x) var(--glow-y), rgba(97, 243, 70, .10), transparent 65%); }
.section-day .ico-card:hover { border-color: rgba(97, 243, 70, .5); box-shadow: 0 24px 60px rgba(17, 17, 17, .12); }
.section-day .ico-card p { color: var(--ink-2); }
.section-day .ico-box { color: #0B1206; background: var(--copper); border-color: var(--copper); }
.section-day .ico-link { color: var(--ink); }
.section-day .ico-card:hover .ico-link { color: var(--ink); }
.section-day .svc-all { color: var(--ink); border-color: var(--copper); }
.section-day .svc-all:hover { color: var(--ink); border-color: var(--ink); }
.section-day .zz-text { color: var(--ink-2); }
.section-day .zz-checks li { color: var(--ink); }
.section-day .zz-checks svg { color: var(--copper); }
.section-day .zz-media { border-color: var(--edge); background: #fff; box-shadow: 0 24px 60px rgba(17, 17, 17, .16); }
.section-day .callout { background: #fff; border-color: var(--edge); }
.section-day .callout-a { color: var(--ink-2); }
.section-night .step { background: var(--deep); border-color: var(--line); }
.section-night .step h3 { color: var(--cloud); }
.section-night .step p { color: var(--haze); }
.section-night .step-num { color: var(--copper-hot); }
.section-day .faq-list details { background: #fff; border-color: var(--edge); }
.section-day .faq-list details[open] { border-color: rgba(97, 243, 70, .5); }
.section-day .faq-list summary { color: var(--ink); }
.section-day .faq-list summary:hover { color: var(--ink); }
.section-day .faq-list summary > .mono { color: var(--ink); }
.section-day .faq-list details p { color: var(--ink-2); }
.section-day .faq-list details p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.section-day .pf-item { border-color: var(--edge); background: #fff; }
.section-day .pf-hint, .section-day .pf-empty { color: var(--ink-2); }
.section-day .craft-fig { background: #fff; border-color: var(--edge); box-shadow: 0 24px 60px rgba(17, 17, 17, .14); }
.section-day .craft-fig figcaption { color: var(--ink-2); }
.section-day .craft-fig-small { box-shadow: 0 30px 70px rgba(17, 17, 17, .22); }
.section-day .prose h2 { color: var(--ink); }
.section-day .detail-cols .svc-list li { color: var(--ink); }
.section-day .rev-more a { color: var(--ink); }
.section-day .work-meta { color: var(--ink-2); }

/* The home services grid holds 5 cards: the first spans two columns */
.ico-grid--5 .ico-card:first-child { grid-column: span 2; }
.ico-grid--5 .ico-card:first-child p { max-width: 52ch; }
@media (max-width: 640px) { .ico-grid--5 .ico-card:first-child { grid-column: auto; } }

/* Focus on day surfaces needs the deep copper to reach 3:1 */
.section-day :focus-visible, .page-hero--day :focus-visible, .tone-day .site-head :focus-visible { outline-color: var(--ink); }

/* Services page: the storm row as a full-width band */
.zz-band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }

/* Counters on a night band (about page) */
.section-night .stat-num { color: var(--cloud); }
.section-night .stat-plus { color: var(--copper-hot); }
.section-night .stat-cap { color: var(--haze); }
.section-night .cred-row { border-color: var(--line); }
.section-night.trust + .final { background: var(--night); padding-top: 0; }
.section-night.trust + .final .final-roofline { display: none; }

/* ============================================================
   Round 2 (2026-08-22): portfolio groups, final CTA "what happens next",
   about hero figure, custom select
   ============================================================ */

/* ---------- Portfolio: group cards ---------- */
.pf-groups { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.pf-group {
  position: relative; grid-column: span 2;
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--edge); background: #fff; color: var(--ink);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.pf-group:nth-child(-n+2) { grid-column: span 3; }
.pf-group img { width: 100%; height: 200px; object-fit: cover; filter: saturate(.85) contrast(1.04); transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .4s; }
.pf-group:nth-child(-n+2) img { height: 250px; }
.pf-group:hover { border-color: rgba(97, 243, 70, .5); box-shadow: 0 24px 60px rgba(17, 17, 17, .14); transform: translateY(-2px); }
.pf-group:hover img { transform: scale(1.04); filter: saturate(1.02) contrast(1.04); }
.pf-group:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pf-group-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.pf-group-count { color: var(--ink); }
.pf-group-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h3); letter-spacing: -.016em; line-height: 1.1; }
.pf-group-intro { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.pf-group-open { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); transition: color .2s; }
.pf-group-open svg { width: 14px; height: 14px; transition: transform .25s; }
.pf-group:hover .pf-group-open { color: var(--ink); }
.pf-group:hover .pf-group-open svg { transform: translateX(4px); }
.pf-open-head { display: grid; gap: 12px; margin-bottom: 8px; }
.pf-back-all { display: inline-flex; align-items: center; gap: 8px; width: max-content; min-height: 44px; color: var(--ink-2); transition: color .2s; }
.pf-back-all svg { width: 14px; height: 14px; }
.pf-back-all:hover { color: var(--ink); }
.pf-more { display: block; margin: 24px auto 0; }
.pf-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--edge); }
.pf-switch > .mono { color: var(--ink-2); margin-right: 8px; }
.pf-switch .chip .mono { color: var(--ink); font-size: 11px; margin-left: 8px; }
.pf-switch .chip.is-on { display: none; }
@media (max-width: 900px) {
  .pf-group, .pf-group:nth-child(-n+2) { grid-column: span 3; }
  .pf-group img, .pf-group:nth-child(-n+2) img { height: 190px; }
}
@media (max-width: 560px) {
  .pf-groups { gap: 14px; }
  .pf-group, .pf-group:nth-child(-n+2) { grid-column: span 6; }
}

/* ---------- Final CTA: "what happens next" card ---------- */
.final-next {
  position: relative; overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 22px; border: 1px solid var(--line); background: var(--pane);
}
.final-next::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(97, 243, 70, .14), transparent 60%);
}
.final-next > * { position: relative; }
.final-next-label { color: var(--copper); margin-bottom: 20px; }
.final-steps { display: grid; gap: 18px; }
.final-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.final-steps li > .mono {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(97, 243, 70, .12); border: 1px solid rgba(134, 246, 111, .4); color: var(--copper-hot);
}
.final-steps strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin-bottom: 4px; }
.final-steps p { color: var(--haze); font-size: 15px; line-height: 1.55; }
.final-next-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--haze); font-size: 15px; line-height: 1.55; }
.final-next-foot strong { color: var(--cloud); font-weight: 600; }
@media (max-width: 900px) {
  .final-inner { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- About hero: photo + facts ---------- */
.about-fig { position: relative; }
.about-tag {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(17, 17, 17, .72); color: var(--cloud);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.about-fig figcaption { padding: 4px 18px 8px; }
.about-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--edge); font-size: 14px; line-height: 1.4; }
.about-facts li:first-child { border-top: 0; }
.about-facts strong { font-family: var(--f-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.about-facts span { color: var(--ink-2); text-align: right; }
@media (max-width: 480px) {
  .about-facts li { flex-direction: column; gap: 2px; }
  .about-facts span { text-align: left; }
}

/* ---------- Custom select ---------- */
.fsel { position: relative; }
.fsel-native { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fsel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 13px 15px;
  font: inherit; color: var(--cloud); text-align: left;
  background: rgba(17, 17, 17, .55);
  border: 1px solid var(--ctl-line); border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.fsel-btn.is-empty .fsel-val { color: rgba(165, 165, 161, .8); }
.fsel-btn svg { width: 14px; height: 14px; flex: none; color: var(--copper-hot); transition: transform .25s; }
.fsel-btn:hover { border-color: rgba(134, 246, 111, .55); }
.fsel-btn:focus-visible { outline: 2px solid var(--copper-hot); outline-offset: 2px; border-color: var(--copper); }
.fsel.is-open .fsel-btn { border-color: var(--copper); }
.fsel.is-open .fsel-btn svg { transform: rotate(180deg); }
.fsel-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--deep); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  outline: none;
}
.fsel.is-up .fsel-list { top: auto; bottom: calc(100% + 6px); }
.fsel-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 8px;
  color: var(--cloud); line-height: 1.3; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.fsel-list li::before {
  content: ''; width: 15px; height: 7px; flex: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='.5 .5 132.4 64.1'%3E%3Cpath d='M.5,51.5h6.01v-6.55c7.08-9.16,14.16-18.33,21.23-27.49,12.92,13.73,25.83,27.47,38.75,41.2v5.92h66.38v-8.41c-12.45-14.89-24.9-29.78-37.36-44.66h-6V.5h-19.04v11H25.54C17.19,22.5,8.85,33.51.5,44.51v6.99Z' fill='%2361F346'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: opacity .15s;
}
.fsel-list li.is-placeholder { color: var(--haze); }
.fsel-list li.is-active { background: rgba(97, 243, 70, .14); }
.fsel-list li[aria-selected="true"] { color: var(--copper-hot); }
.fsel-list li[aria-selected="true"]::before, .fsel-list li.is-active::before { opacity: 1; }

/* ---------- Type: Archivo's width axis. Hero statements, the final CTA and the big numbers run
   semi-expanded; section h2s and everything smaller stay normal width so multi-clause headings keep their line breaks ---------- */
.hero-h1, .page-h1, .storm-h2, .final-h2, .final-phone, .stat-num { font-stretch: 112%; }

/* ---------- Reviews: 3 columns down to 1080px, then 2, then the existing 1-column rule ---------- */
@media (min-width: 901px) and (max-width: 1080px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rev-rating { width: 100%; } .rev-rating > svg { margin-left: auto; } }   /* full-width card: the arrow goes to the edge, not mid-card */

/* ---------- 404 ---------- */
.nf-hero { min-height: calc(100vh - 0px); display: flex; align-items: center; }
.nf-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); width: 100%; }
.nf-links { margin-top: 34px; }
.nf-links > .mono { color: var(--haze); margin-bottom: 12px; }
.nf-fig { display: grid; justify-items: center; gap: 18px; }
.nf-code {
  position: relative; display: inline-flex; align-items: baseline;
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(120px, 16vw, 240px); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(242, 242, 240, .42);
  user-select: none;
}
.nf-zero { position: relative; display: inline-block; }
.nf-roof { position: absolute; left: 50%; top: -.22em; width: .92em; height: auto; translate: -50% 0; color: var(--copper); filter: drop-shadow(0 14px 30px rgba(97, 243, 70, .35)); }
.nf-cap { color: var(--haze); }
@media (max-width: 900px) {
  .nf-hero { min-height: 0; }
  .nf-fig { order: -1; }
  .nf-code { font-size: clamp(96px, 26vw, 160px); }
}

/* ============================================================
   Responsive audit fixes (2026-08-22)
   ============================================================ */
/* Sticky aside releases earlier so its CTA clears the chat FAB */
@media (min-width: 901px) {
  .detail-cols .aside-card { margin-bottom: 96px; }
}
/* Footer email must never break mid-address: let its column grow instead */
.foot-col a[href^="mailto:"] { overflow-wrap: normal; font-size: 14px; }
/* Header phone link needs a real tap target while the hamburger nav is active */
@media (min-width: 561px) and (max-width: 1180px) {
  .head-phone { padding-block: 10px; margin-block: -10px; }
}
/* Storm strip heading: balanced wrap on narrow screens */
.storm-h2 { text-wrap: balance; }
/* 5-card step grid: the last card takes the full row instead of sitting orphaned in a half-width cell */
@media (max-width: 640px) {
  .steps-grid--5 .step:last-child { grid-column: 1 / -1; }
}
/* Inline links inside FAQ answers get a taller touch area */
.faq-list details p a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* 404 hero collapses like every other page hero (the 2-col rule was out-specifying the generic 900px collapse) */
@media (max-width: 900px) {
  .nf-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* no orphan 4th card at tablet width */
  .page-hero-fig { margin-inline: auto; }                            /* centered media in the single column */
}
@media (max-width: 560px) {
  .spec-grid { grid-template-columns: 1fr; }
}

/* ---------- Audit wave 3 (index + contact/about/service-area reports) ---------- */
.ba-frame { margin-inline: auto; }                     /* centers the 512px-capped frame in its column at every width */
.sec-intro + .sec-intro { margin-top: 18px; }          /* two body paragraphs never run together */
.svc-all { min-height: 44px; }
.rev-more a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.spec h3 a { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* about hero: the three authored lines must survive; this hero alone runs a step smaller */
.page-hero-inner:has(.about-fig) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* photo column as wide as the copy */
.page-hero-inner:has(.about-fig) .page-h1 { font-size: clamp(32px, 4vw, 52px); font-stretch: 100%; }   /* "Same phone number." stays one line */
@media (max-width: 900px) { .page-hero-inner:has(.about-fig) { grid-template-columns: 1fr; } }
@media (max-width: 1180px) {
  .head-cta { margin-left: auto; }                     /* keeps the actions on the right once the nav hides */
}
@media (min-width: 561px) and (max-width: 900px) {
  .craft-fig-main { width: 68%; margin-left: 0; }      /* the full-width portrait made #craft ~2300px tall at 768 */
}
@media (max-width: 900px) {
  .fsel-list { max-height: min(320px, 38vh); }         /* keeps the option list clear of the sticky call bar */
  /* SVG text is sized in viewBox units: bump it where the map renders small */
  .map-labels text { font-size: 18px; }
  .map-towns text { font-size: 15px; }
  .map-hq text { font-size: 15px; }
  .map-water-label { font-size: 14px; }
}
@media (max-width: 560px) {
  .final-actions .btn { width: 100%; }
}

/* Contact hero: crew photo (portrait source, cropped) */

/* ============================================================
   Round 3 (2026-08-22, evening): screenshot review
   Stacked paddings, storm hero crop, about hero, 6-card grid,
   HQ street-map card on the contact + service-area heroes.
   ============================================================ */

/* Day→day stack on the home page (counters → services): two full paddings added up to ~260px of nothing */
.trust.section-day { padding-bottom: clamp(56px, 7vw, 96px); }
.trust.section-day + .services { padding-top: 0; }
.reels-sec.section-day + .section-day { padding-top: 0; }   /* two day paddings stacked left ~150px of blank paper under the video strip */

/* Night band straight into the final CTA: the band's bottom padding + the CTA's inner padding stacked the same way */
.section-night:has(+ .final) { padding-bottom: clamp(48px, 6vw, 80px); }
.section-night + .final .final-inner { position: relative; padding-top: clamp(48px, 6vw, 80px); }
.section-night + .final .final-inner::before {
  content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px;
  background: var(--line);
}

/* Six spec cards (about → credentials): three per row, not four plus two orphans */
@media (min-width: 901px) { .spec-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Storm hero: storm-sky.webp is a 1600×900 dusk storm frame (2026-09-13): sky on the left two thirds for the copy,
   the gable roofline on the right third */
.storm--hero { padding-bottom: clamp(80px, 10vw, 130px); }
.storm--hero .storm-bg {
  background-image:
    linear-gradient(100deg, rgba(17, 17, 17, .94) 0%, rgba(17, 17, 17, .8) 36%, rgba(17, 17, 17, .36) 68%, rgba(17, 17, 17, .18) 100%),
    linear-gradient(180deg, rgba(17, 17, 17, .62) 0%, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0) 70%, rgba(17, 17, 17, .92) 100%),
    url('../img/storm-sky.webp');
  background-position: right 42%;
}
@media (max-width: 900px) {
  .storm--hero .storm-bg {
    background-image:
      linear-gradient(180deg, rgba(17, 17, 17, .9) 0%, rgba(17, 17, 17, .55) 46%, rgba(17, 17, 17, .94) 100%),
      url('../img/storm-sky.webp');
    background-size: 100% 100%, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 72% 50%;
  }
}

/* ---------- HQ map card (contact + service-area heroes) ----------
   Stylised street grid around the shop, Chicago half-mile arterials, HQ pin.
   The whole card is a link out to Google Maps. */
.hq-fig {
  position: relative; display: block;
  color: var(--ink);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.hq-fig:hover { border-color: rgba(97, 243, 70, .5); box-shadow: 0 28px 70px rgba(17, 17, 17, .22); transform: translateY(-2px); }
.hq-map { display: block; position: relative; background: var(--deep); }
.hq-map svg { display: block; width: 100%; height: auto; }
.hq-grid { stroke: rgba(242, 242, 240, .07); stroke-width: .8; }
.hq-road { fill: none; stroke: rgba(242, 242, 240, .22); stroke-width: 2.6; stroke-linecap: round; transition: stroke .3s; }
.hq-road--main { stroke: rgba(242, 242, 240, .36); stroke-width: 4.2; }
.hq-fig:hover .hq-road { stroke: rgba(242, 242, 240, .34); }
.hq-fig:hover .hq-road--main { stroke: rgba(242, 242, 240, .52); }
.hq-block { fill: rgba(140, 140, 136, .14); stroke: rgba(242, 242, 240, .14); stroke-width: .8; }
.hq-road-label { fill: rgba(200, 200, 196, .9); font-family: var(--f-mono); font-size: 8.2px; letter-spacing: .14em; }
.hq-place { fill: var(--haze); font-family: var(--f-body); font-size: 8.8px; letter-spacing: .02em; }
.hq-hood { fill: rgba(165, 165, 161, .78); font-family: var(--f-display); font-weight: 700; font-size: 11.5px; letter-spacing: .22em; }
.hq-road-label, .hq-place, .hq-hood, .hq-pin-label { paint-order: stroke; stroke: var(--deep); stroke-width: 3px; stroke-linejoin: round; }
.hq-pin-dot { fill: var(--copper); stroke: var(--night); stroke-width: 2; transition: transform .25s; transform-box: fill-box; transform-origin: center; }
.hq-fig:hover .hq-pin-dot { transform: scale(1.18); }
.hq-pin-ring { fill: none; stroke: var(--copper); stroke-width: 1.4; opacity: .8; transform-box: fill-box; transform-origin: center; animation: hq-ping 2.8s ease-out infinite; }
.hq-pin-label { fill: var(--copper-hot); font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; }
.hq-compass, .hq-scale { fill: none; stroke: var(--haze); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.hq-compass-n, .hq-scale-label { fill: var(--haze); font-family: var(--f-mono); font-size: 8px; letter-spacing: .12em; }
.hq-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; }
.hq-cap-main { display: grid; gap: 3px; min-width: 0; }
.hq-cap-main strong { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.hq-cap-main span { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.hq-cap-cta { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ink); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hq-cap-cta svg { width: 14px; height: 14px; transition: transform .25s; }
.hq-fig:hover .hq-cap-cta svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .hq-road-label { font-size: 10px; }
  .hq-road-label--minor { display: none; }        /* every overprint <=900 involves these two */
  .hq-place { font-size: 10.5px; }
  .hq-hood { font-size: 14px; }
  .hq-pin-label { font-size: 11px; }
  .hq-compass-n, .hq-scale-label { font-size: 10px; }
}
@media (max-width: 560px) {
  .hq-cap { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* Headline beside the map card (contact, service-area): one step down so "One phone number." holds one line */
.page-hero-inner:has(.hq-fig) .page-h1 { font-size: clamp(34px, 4.6vw, 64px); }
@media (max-width: 560px) { .page-hero-inner:has(.hq-fig) .page-h1.page-h1--fit { font-stretch: 100%; } }   /* service-area: "One phone number." stays one line instead of leaving "number." alone (as about.html does) */
@media (max-width: 374px) { .page-hero-inner:has(.hq-fig) .page-h1.page-h1--fit { font-size: 30px; } }
/* Storm hero headline on phones: the no-break "Wind took shingles?" needs 426px at 40px; 375–430px viewports give 335–390 */
@media (max-width: 480px) { .storm-h2 { font-size: min(var(--t-d2), 8.2vw); } .storm--hero .storm-h2 { font-size: clamp(27px, 8.2vw, 40px); } }   /* the home / services storm strip has the same no-break line: 32px ran off a 320px screen and touched the edge at 360 */
@media (max-width: 374px) { .storm-h2, .storm--hero .storm-h2 { font-size: 25px; } }   /* "Wind took shingles?" is one unbreakable line: 27px ran 8px past a 320px screen */

/* ============================================================
   Round 3b (2026-08-22, late): owner's notes relayed from the green-copy chat
   (TODO-ROUND3.md): FAQ hero card, about craft rail + centred counters,
   quick-check CTA, footer with the logo, storm hero full height, 48h steps,
   claim blocks, even cards, to-top button, phone glyph, contrast.
   ============================================================ */

/* --- HQ map: parks + small labels --- */
.hq-park { fill: rgba(140, 140, 136, .09); stroke: rgba(242, 242, 240, .1); stroke-dasharray: 2 2; }
.hq-place--sm { font-size: 7.8px; }
@media (max-width: 900px) { .hq-place--sm { font-size: 9.4px; } }

/* --- FAQ hero: the three short answers --- */
.faq-card { display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 30px); color: var(--ink); }
.faq-card-label { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 0; text-transform: uppercase; }
.faq-card-list { display: grid; }
.faq-card-list li { border-top: 1px solid var(--edge); }
.faq-card-list li:first-child { border-top: 0; }
.faq-card-list a { display: grid; gap: 4px; padding: 14px 0; transition: color .2s; }
.faq-card-list li:first-child a { padding-top: 0; }
.faq-card-list strong { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.012em; line-height: 1.25; color: var(--ink); transition: color .2s; }
.faq-card-list a:hover strong { color: var(--ink); }
.faq-card-list span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.faq-card-foot { padding-top: 16px; border-top: 1px solid var(--edge); font-size: 14px; color: var(--ink-2); }
.faq-card-foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.faq-card-foot a:hover { color: var(--copper); }
.page-hero-inner:has(.faq-card) .page-h1 { font-size: clamp(34px, 4.6vw, 64px); }

/* --- Process as a rail: numbered squares on a thin vertical line (about craft, claims) --- */
.process--rail { gap: 0; margin-top: 30px; position: relative; }
.process--rail::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1px; background: var(--edge); }
.section-night .process--rail::before, .section-night .process--rail::before { background: var(--line); }
.process--rail li { position: relative; align-items: center; gap: 16px; padding: 7px 0; transition: color .2s; }
.process--rail li span {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--day); border: 1px solid var(--copper); color: var(--ink);
  transition: background-color .2s, border-color .2s, color .2s;
}
.section-night .process--rail li span { background: var(--night); border-color: rgba(134, 246, 111, .4); color: var(--copper-hot); }
.process--rail li:hover { color: var(--ink); }
.process--rail li:hover span { background: var(--copper); border-color: var(--copper); color: #0B1206; }
.section-night .process--rail li:hover { color: var(--cloud); }
.craft-fig-main { position: relative; }

/* --- About counters on the night band: centred, ruled, lit from above --- */
.trust.section-night { position: relative; overflow: clip; }
.trust.section-night::before {
  content: ''; position: absolute; left: 50%; top: -140px; width: 900px; height: 420px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(97, 243, 70, .16), transparent 70%);
}
.trust.section-night .container { position: relative; }
.trust.section-night .trust-grid { gap: 34px 0; }
.trust.section-night .stat { text-align: center; padding-inline: 20px; }
.trust.section-night .stat-num { justify-content: center; }
.trust.section-night .stat-cap { margin-inline: auto; }
.trust.section-night .cred-row { justify-items: center; }
@media (min-width: 901px) {
  .trust.section-night .stat + .stat { border-left: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .trust.section-night .trust-grid { gap: 30px 20px; }
  .trust.section-night .cred-row { justify-items: start; }
}

/* --- Final CTA: quick check --- */
.fq-q { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; margin: 0 0 10px; }
.fq-q + .chip-group { margin-bottom: 18px; }
.final-check .chip { font-size: 14px; padding: 10px 15px; min-height: 40px; }
.fq-urgent { margin: -6px 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(134, 246, 111, .4); background: rgba(97, 243, 70, .1); font-size: 14px; line-height: 1.5; color: var(--haze); animation: chk-in .32s cubic-bezier(.22, .61, .36, 1); }
.fq-urgent strong { color: var(--cloud); font-weight: 600; }
.fq-urgent a { color: var(--copper-hot); font-weight: 600; }
.fq-go { margin-top: 4px; }
.fq-steps { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; }
.fq-steps span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fq-steps em { font-style: normal; color: var(--copper); font-size: var(--t-label); }

/* --- Footer: logo, no top rule --- */
.site-foot { border-top: 0; padding-top: 72px; }
.foot-brand { display: grid; gap: 16px; align-content: start; align-items: start; }
.foot-brand a { display: block; width: max-content; }
.foot-brand img { height: 40px; width: auto; display: block; }
.foot-brand .foot-tagline { font-weight: 400;  font-family: var(--f-body); font-size: 14px; line-height: 1.55; color: var(--haze); max-width: 30ch; }
@media (max-width: 900px) { .foot-brand img { height: 32px; } .site-foot { padding-top: 56px; } }

/* --- Storm hero: the full first screen --- */
.storm--hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
.storm--hero .storm-inner { width: 100%; }

/* --- 48 hours: step cards react --- */
.step { transition: border-color .25s, box-shadow .25s; }
.step-num { position: relative; padding-bottom: 14px; }
.step-num::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--copper); transition: width .35s var(--ease); }
.step:hover { border-color: rgba(97, 243, 70, .55); box-shadow: 0 24px 60px rgba(17, 17, 17, .12); }
.section-night .step:hover { border-color: rgba(134, 246, 111, .5); box-shadow: 0 24px 60px rgba(0, 0, 0, .38); }
.step:hover .step-num::after { width: 64px; }

/* --- Claim blocks (insurance-claims, left column) --- */
.claim-blocks { display: grid; gap: 26px; margin-top: 34px; max-width: 65ch; }
.claim-blocks li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; }
.claim-n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(97, 243, 70, .12); border: 1px solid rgba(134, 246, 111, .4); color: var(--copper-hot); margin-top: 2px; }
.claim-blocks h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -.015em; line-height: 1.15; margin-bottom: 8px; }
.claim-blocks p { color: var(--haze); font-size: var(--t-body); margin-bottom: 10px; text-wrap: pretty; }
.claim-blocks p:last-child { margin-bottom: 0; }
.claim-blocks .svc-list { margin: 2px 0 12px; }
.claim-blocks .svc-list li { display: block; padding-left: 22px; font-size: 15px; }
.claim-run-label { margin-top: 40px; margin-bottom: 4px; }
.prose .process--rail { margin-top: 12px; }
@media (max-width: 560px) { .claim-blocks li { grid-template-columns: 30px 1fr; gap: 12px; } .claim-n { width: 30px; height: 30px; } }

/* --- Spec cards with one- and two-line titles: same rhythm --- */
.spec-grid--even .spec { display: flex; flex-direction: column; }
.spec-grid--even .spec h3 { min-height: 2.4em; }

/* --- Phone glyph centred (viewBox 2.26 .58 12 12), 14px everywhere --- */
.head-phone svg, .nav-panel-phone svg, .mb-call svg { width: 14px; height: 14px; flex: none; display: block; }
@media (max-width: 560px) {
  .head-phone, html.nav-open .tone-day .head-phone { display: none; }   /* one phone button per screen: the sticky bar's "Call now" is visible from load, the open nav has its own */
}

/* --- Contrast on paper --- */
.section-day .cred .mono { color: var(--ink-2); }                      /* licence / GAF / warranty sublines on paper were 2.5:1 */
.section-day .contact-side .spec > p:last-child a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }   /* "Check your town" link on the white contact card */

/* --- Back to top (injected by main.js) --- */
.to-top {
  position: fixed; left: 18px; bottom: 18px; z-index: 225;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px 0 16px; border-radius: 999px;
  background: rgba(17, 17, 17, .88); color: var(--cloud);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.22, .61, .36, 1), border-color .2s, background-color .2s;
}
.to-top.is-in { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 26px; height: 13px; flex: none; display: block; color: var(--copper); }
.to-top-label { color: var(--cloud); text-transform: uppercase; }
.to-top:hover { border-color: rgba(134, 246, 111, .55); background: rgba(17, 17, 17, .96); }
.to-top:focus-visible { outline-color: var(--copper-hot); }
@media (max-width: 900px) {
  .to-top { display: none; }   /* 2026-09-17: the sticky bar and the chat FAB already own the bottom edge; the circle sat over footer headings */
}
html.nav-open .to-top, html.sheet-open .to-top { display: none; }
html.reduced-motion .to-top { transition: none; }
.prose .claim-run-label { font-size: var(--t-label); color: var(--copper); max-width: none; margin-bottom: 4px; }   /* .prose p was upsizing the label */

/* ============================================================
   Round 3c (2026-08-23): owner's live review
   Craft photo collage, per-page reviews, FAQ anchor settle,
   chat chips up front, service chips in the contact form.
   ============================================================ */

/* --- Craft media: the absolute collage clipped against short copy columns; two offset columns instead --- */
@media (min-width: 901px) {
  .craft-media { display: block; min-height: 0; }
  .craft-fig-main { width: 100%; margin: 0; }
  .craft-fig-main img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
  .craft-fig-small { position: static; width: 54%; margin: 20px 0 0 auto; }
  .craft-fig-small img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
}

/* --- Contact form: service as one-tap chips (native select stays hidden for submission/prefill) --- */
.field-label { font-size: 14px; font-weight: 600; color: var(--cloud); margin-bottom: 2px; }
.field-label span { font-weight: 400; color: var(--haze); font-size: 12.5px; margin-left: 6px; }
.cf-service-chips { padding-top: 2px; }
.section-day .contact-card .chip { background: rgba(17, 17, 17, .5); border-color: var(--line); color: var(--cloud); font-size: 14px; padding: 10px 15px; min-height: 40px; }
.section-day .contact-card .chip:hover { border-color: rgba(134, 246, 111, .55); }
.section-day .contact-card .chip[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: #0B1206; font-weight: 600; }

/* --- Services hero: jump-list card on the right (the hero was is-solo, right half empty) --- */
.svc-index { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 28px); color: var(--ink); }
.svc-index-list { display: grid; }
.svc-index-list li { border-top: 1px solid var(--edge); }
.svc-index-list li:first-child { border-top: 0; }
.svc-index-list a { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.svc-index-ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--copper);
  background: rgba(97, 243, 70, .07);
  color: #0B1206; background: var(--copper);
  transition: background-color .2s, border-color .2s;
}
.svc-index-ico svg { width: 19px; height: 19px; }
.svc-index-txt { display: grid; gap: 1px; min-width: 0; }
.svc-index-txt strong { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); transition: color .2s; }
.svc-index-txt > span { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.svc-index-arr { width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--ink-2); transition: transform .25s, color .2s; }
.svc-index-list a:hover .svc-index-txt strong { color: var(--ink); }
.svc-index-list a:hover .svc-index-ico { background: var(--copper-hot); border-color: var(--copper-hot); }
.svc-index-list a:hover .svc-index-arr { transform: translateX(3px); color: var(--ink); }
.svc-index .faq-card-foot { margin-top: 2px; }
.page-hero-inner:has(.svc-index) .page-h1 { font-size: clamp(34px, 4.6vw, 64px); }
/* FAQ: the answer the hero card jumped to lights up, then lets go */
.faq-list details { transition: border-color .35s, box-shadow .35s; }
.section-day .faq-list details.is-hit { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(97, 243, 70, .16), 0 18px 44px rgba(17, 17, 17, .1); }

/* ================= Round 4 ================= */
/* Hero on phones: the desktop scrim is horizontal and runs out under full-width copy */
@media (max-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(100deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .74) 55%, rgba(8, 8, 8, .58) 100%),
      linear-gradient(0deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, .35) 30%, transparent 55%);
  }
}
/* Anchor landings take focus so the keyboard follows the eye; no ring for mouse users */
main[tabindex="-1"]:focus, details[tabindex="-1"]:focus { outline: none; }

/* Portfolio grid: is-wide/is-tall/is-big were authored for all ten tiles at once,
   but an open group is only ever 1 to 5 tiles, so each visible count gets a layout
   that tiles exactly instead of leaving holes. */
@media (min-width: 901px) {
  .pf-grid[data-count="1"] .pf-item { grid-column: span 6; grid-row: span 2; }
  .pf-grid[data-count="2"] .pf-item { grid-column: span 3; grid-row: span 2; }
  .pf-grid[data-count="3"] .pf-item { grid-column: span 2; grid-row: span 2; }
  .pf-grid[data-count="4"] .pf-item,
  .pf-grid[data-count="5"] .pf-item { grid-column: span 2; grid-row: span 1; }
  .pf-grid[data-count="4"] .pf-item[data-slot="1"], .pf-grid[data-count="4"] .pf-item[data-slot="2"],
  .pf-grid[data-count="5"] .pf-item[data-slot="1"], .pf-grid[data-count="5"] .pf-item[data-slot="2"] { grid-column: span 3; grid-row: span 2; }
}
@media (max-width: 900px) {
  .pf-grid[data-count] .pf-item { grid-column: span 1; grid-row: span 1; }
  .pf-grid[data-count="1"] .pf-item,
  .pf-grid[data-count="3"] .pf-item[data-slot="3"],
  .pf-grid[data-count="5"] .pf-item[data-slot="5"] { grid-column: span 2; }
}
/* Portfolio hero index: a contents list, so the count sits where the blurb does on services */
.pf-index-list a { justify-content: space-between; }
.pf-index-list .svc-index-txt { flex: 1; }
.pf-index-list .mono { font-size: var(--t-label); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ================= Round 4: grids that tile, baselines that agree ================= */
/* Four "short version" cards fitted three tracks between 901 and 1031, orphaning the fourth */
@media (min-width: 901px) and (max-width: 1089px) {
  .spec-grid:not(.spec-grid--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Three review cards were laid on a two-column grid, leaving a half-width hole under them */
@media (min-width: 901px) and (max-width: 1080px) {
  .rev-grid:has(> .rev-card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
/* Card 04 wraps to two lines while 01-03 fit one, so the row lost its shared baseline */
#first-48 .step { display: flex; flex-direction: column; }
#first-48 .step h3 { min-height: 2.4em; }
@media (max-width: 560px) {
  /* one column on phones: nothing to line up with, so the reserved second title line was just a gap */
  .spec-grid--even .spec h3, #first-48 .step h3 { min-height: 0; }
  /* the three steps wrapped 2+1 on phones; a short list reads as intended */
  .fq-steps { flex-direction: column; gap: 6px; }
}
/* The flagship service card reads as one of five on a phone, where it cannot span */
@media (max-width: 640px) {
  .section-day .ico-grid--5 .ico-card:first-child {
    border-color: rgba(97, 243, 70, .5);
    box-shadow: 0 20px 50px rgba(17, 17, 17, .10);
  }
}
/* The flagship card spans two columns; give the second one something to hold */
@media (min-width: 901px) {
  .ico-grid--5 .ico-card:first-child {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    column-gap: 40px; align-items: start;
  }
  .ico-grid--5 .ico-card:first-child > * { grid-column: 1; }
  .ico-grid--5 .ico-card:first-child .ico-spec { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}
.ico-spec { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ico-spec li {
  position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
}
.ico-spec li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1.5px; background: var(--copper);
}
@media (max-width: 900px) { .ico-spec { display: none; } }
/* Five process steps read as 3 + 2 centred instead of five 24-character slivers */
@media (min-width: 1081px) {
  .steps-grid--5 { grid-template-columns: repeat(6, 1fr); gap: 18px; }
  .steps-grid--5 .step { grid-column: span 2; padding: 26px 24px; }
  .steps-grid--5 .step:nth-child(4) { grid-column: 2 / 4; }
  .steps-grid--5 .step:nth-child(5) { grid-column: 4 / 6; }
}
/* The siding H1 orphaned a word mid-headline; greedy wrapping fills the measure */
.page-hero-inner:has(img[src*="svc-siding"]) .page-h1 { text-wrap: normal; }
/* The before/after frame was rendering its source 5% larger than it is */
.ba-frame { max-width: 486px; }
/* The gutters photo is a 600px source; do not ask it to fill 582 */
.page-hero-fig:has(img[src$="svc-gutters.webp"]) { max-width: 480px; justify-self: end; }
/* On a phone the four counters were 118px columns with captions ragging over five lines */
@media (max-width: 560px) {
  .trust.section-night .trust-grid { grid-template-columns: 1fr; gap: 28px; }
  .trust.section-night .stat { padding-inline: 0; }
  .trust.section-night .stat-cap { max-width: 30ch; }
}
/* The credentials heading ran as one 1089px banner, out-ranking the page title */
#credentials .sec-h2 { max-width: 700px; }
/* insurance-claims storm hero: shrink the dead band above the panorama on small phones */
@media (max-width: 560px) { .storm--hero { min-height: 84dvh; } }
/* A ladder of identical rows with no surface feedback; border and shadow only */
.section-day .faq-list details:hover { border-color: rgba(97, 243, 70, .5); box-shadow: 0 8px 22px rgba(17, 17, 17, .08); }
#questions .sec-h2 { margin-bottom: 34px; }
/* The row number floated between the two lines of a wrapped question */
@media (max-width: 560px) {
  .faq-list summary { align-items: flex-start; }
  .faq-list summary > .mono { padding-top: 3px; }
  .faq-list .faq-x { margin-top: 2px; }
}
/* "What's included" is a label for a list, not a fourth section heading */
.prose h2.prose-label { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.012em; margin-top: 44px; margin-bottom: 14px; }
/* The reviews heading needs a measure, or removing its hard break makes one long line */
.rev-top .sec-h2 { max-width: 22ch; }
/* Two thumbnails should not sit in a four-track row, and the pill must fit the thumb */
.pf-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; max-width: 460px; }
@media (max-width: 420px) { .pf-thumbs .mono { font-size: 10px; padding: 3px 6px; left: 6px; bottom: 6px; } }
/* The meta card and the CTA travel with the reader instead of leaving half a column empty */
@media (min-width: 901px) { .pf-sheet-side { position: sticky; top: 0; } }
/* On phones the argument badges were smaller than the step badges below them */
@media (max-width: 560px) {
  .prose .process--rail li { gap: 12px; }
  .prose .process--rail li span { width: 30px; height: 30px; }
  .prose .process--rail::before { left: 15px; }
}
/* Desktop keeps the exit link under the county list; mobile gets it after the map */
@media (min-width: 901px) {
  .area-cols { grid-template-areas: "copy map" "more map"; grid-template-rows: auto 1fr; align-items: start; }
  .area-copy { grid-area: copy; }
  .area-map { grid-area: map; }
  .area-cols .area-more { grid-area: more; margin-top: 0; }
}

/* ================= Round 4: contrast ================= */
/* Copper on paper is 3.36:1; the deep copper is 5.27:1 and is what day surfaces use */
.page-hero--day .crumbs span:last-child { color: var(--ink); }
body.tone-day .skip-link:focus-visible,
body.tone-day .to-top:focus-visible,
body.tone-day .chat-fab:focus-visible { outline-color: var(--ink); }
.section-day .cred-ico { color: #0B1206; border-color: var(--copper); background: var(--copper); }
.fq-steps em { color: var(--copper-hot); }
/* A question inside <summary> is a heading; keep it looking exactly as it did */
.faq-list summary h3 { font: inherit; margin: 0; }
/* People who ask their OS for more contrast get readable edges */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(242, 242, 240, .5);
    --ctl-line: rgba(242, 242, 240, .6);
    --edge: #8A8A84;
    --haze: #C6C6C2;
    --ink-2: #3A3A3A;
  }
  .btn-ghost { box-shadow: inset 0 0 0 2px var(--cloud); }
  .section-day .btn-ghost, .page-hero--day .btn-ghost { box-shadow: inset 0 0 0 2px var(--ink); }
}

/* ================= Round 4: motion ================= */
/* Hover motion belongs to a mouse; on a phone it leaves cards stuck mid-zoom */
@media not all and (hover: hover) and (pointer: fine) {
  .pf-item:hover img, .zz-media:hover img, .ico-card:hover .ico-box,
  .pf-group:hover, .chip:hover, .svc-link:hover span, .svc-all:hover svg,
  .ico-card:hover .ico-link svg, .pf-group:hover .pf-group-open svg,
  .rev-rating:hover svg, .hq-fig:hover .hq-cap-cta svg { transform: none !important; }
}
/* Every button now confirms the tap immediately. `scale` is a standalone property,
   so it never touches the `transform` GSAP owns on [data-reveal] elements. */
.btn, .chip, .mb-call, .mb-estimate, .chat-send, .to-top { transition: scale .12s cubic-bezier(.22, .61, .36, 1); }
.btn:active, .chip:active, .mb-call:active, .mb-estimate:active, .chat-send:active, .to-top:active { scale: .97; }
.section-day .btn-ghost .ripple, .page-hero--day .btn-ghost .ripple { background: rgba(17, 17, 17, .20); }
/* FAQ answers grow open and close along the same path (main.js keeps [open] until the close transition ends) */
.faq-list .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.22, .61, .36, 1); }
.faq-list details[open] .faq-a { grid-template-rows: 1fr; }
.faq-list details.is-closing .faq-a { grid-template-rows: 0fr; }
.faq-list details.is-closing { border-color: var(--line); }
.faq-list details.is-closing .faq-x::after { transform: none; }
.faq-list .faq-a > p { overflow: hidden; min-height: 0; }
/* The storm-to-clear payoff crossfades instead of snapping the label 19px */
.wx-text { display: inline-grid; }
.wx-text > i { grid-area: 1 / 1; font-style: normal; white-space: nowrap; transition: opacity .18s ease; }
.wx-text > [data-wx="clear"] { opacity: 0; }
.wx-chip.is-clear .wx-text > [data-wx="storm"] { opacity: 0; }
.wx-chip.is-clear .wx-text > [data-wx="clear"] { opacity: 1; }
/* Reduced motion asks for less movement, not for an interface that never answers */
html.reduced-motion .faq-list details, html.reduced-motion .head-nav a,
html.reduced-motion .foot-col a, html.reduced-motion .faq-list summary, html.reduced-motion .chip {
  transition-property: color, background-color, border-color, box-shadow !important;
  transition-duration: .16s !important;
}
@media (prefers-reduced-motion: reduce) {
  .faq-list details, .head-nav a, .foot-col a, .faq-list summary, .chip {
    transition-property: color, background-color, border-color, box-shadow !important;
    transition-duration: .16s !important;
  }
}
/* Night to day used to be a hard flash between pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================= Round 4: upgrades ================= */
/* One quote at real size, so the payoff of the whole scroll carries some weight */
@media (min-width: 1081px) {
  .rev-grid .rev-card:first-child { grid-column: span 2; grid-row: span 2; background: var(--night); border-color: transparent; }
  .rev-grid .rev-card:first-child p { font-family: var(--f-display); font-size: var(--t-d3); font-weight: 700; line-height: 1.2; color: var(--cloud); }
  .rev-grid .rev-card:first-child .rev-head strong,
  .rev-grid .rev-card:first-child footer strong { color: var(--cloud); }
  .rev-grid .rev-card:first-child footer, .rev-grid .rev-card:first-child .rev-src { color: var(--haze); }
  .rev-grid .rev-card:first-child .rev-stars { color: var(--copper-hot); }
}
/* The empty quarter of the county map read as an unfinished drawing */
.map-neighbour text { fill: rgba(165, 165, 161, .26); font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .16em; pointer-events: none; }
@media (max-width: 900px) { .map-neighbour text { font-size: 14px; } }
/* The project writing existed only inside data attributes, so nothing could read it */
.pf-desc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(242, 242, 240, .88); }
/* 2026-10-03: the caption always sits on the photo, so it keeps night colours on day pages.
   The day override painted the description #4C4C4C on the dark scrim and it vanished;
   the scrim was also too short for three lines of text over a bright roof. */
.pf-cap {
  padding: 90px 20px 18px;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, .6) 34%, rgba(8, 8, 8, .9) 68%, rgba(8, 8, 8, .95) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  opacity: 1;
}
.pf-cap .pf-where { color: #D2D2CE; }
@media (max-width: 900px) { .pf-desc { display: none; } }

/* ================= Legal pages ================= */
.legal { max-width: 680px; }
.legal h2 {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(21px, 2.2vw, 27px);
  letter-spacing: -.015em; line-height: 1.15; margin: 46px 0 14px; text-wrap: balance;
}
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-2); font-size: var(--t-body); line-height: 1.62; margin-bottom: 16px; text-wrap: pretty; }
.legal p strong { color: var(--ink); font-weight: 600; }
.legal a { overflow-wrap: anywhere; color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); }
.legal .svc-list { margin: 0 0 20px; }
.legal code { font-family: var(--f-mono); font-size: 12.5px; background: rgba(17, 17, 17, .06); padding: 2px 6px; border-radius: 3px; }
.legal-updated { color: var(--ink-2); margin-top: 22px; }
.legal-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 22px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--edge); vertical-align: top; }
.legal-table th {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); font-weight: 400;
}
.legal-table td { color: var(--ink-2); }
.legal-table td:first-child { white-space: nowrap; padding-right: 22px; }
@media (max-width: 560px) {
  .legal-table, .legal-table thead, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; }
  .legal-table thead { display: none; }
  .legal-table tr { border-bottom: 1px solid var(--edge); padding: 14px 0; }
  .legal-table td { border: 0; padding: 2px 0; }
  .legal-table td:first-child { white-space: normal; }
}
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.foot-legal-links a { color: inherit; opacity: .8; }
.foot-legal-links a:hover { opacity: 1; color: var(--copper-hot); }
@media (max-width: 560px) { .foot-legal-links { margin-left: 0; } }

/* ================= Green variant: where the accent may and may not go =================
   #61F346 measures 1.4:1 on paper. It is an accent for dark surfaces only.
   Everywhere it would carry meaning on a light surface, the dark green takes over
   (text on paper is ink; the bright green is used only as a mark). Nothing here touches the night surfaces, where the
   bright green is doing its job at 13:1. */
.legal .dot-copper { color: var(--copper); }
.section-day .rev-stars,
.page-hero--day .rev-stars,
.section-day .rev-rating .rev-stars { color: var(--copper); }
.section-day .svc-link,
.section-day .sec-more a,
.section-day .sec-label-light { color: var(--ink); }
.section-day .svc-link:hover, .section-day .sec-more a:hover { color: var(--ink); }


/* ============================================================
   Mobile audit 2026-09-28 (16 pages at 360 / 390 / 430 and a phone held sideways)
   ============================================================ */
/* Phone held sideways (≤500px tall): the header already carries the phone number and "Free inspection",
   and the sticky bar took 85px of a 390px screen, sitting on the hero headline. The 620px floor on the
   home hero left ~110px of empty photo above the chip at that height, so it follows the screen instead. */
@media (orientation: landscape) and (max-height: 500px) {
  .mobile-bar { display: none; }
  .hero-stage { min-height: 100svh; }
}
/* No single orphan word on the last line of a heading; body copy avoids one-word last lines */
main h2, main h3, .final-h2, .sec-label { text-wrap: balance; }
main p, main li { text-wrap: pretty; }
/* A phone number or an hours range never splits across two lines inside running text */
p a[href^="tel:"], li a[href^="tel:"], .nw { white-space: nowrap; }
/* Map labels: a halo in the county colour, so the county borders and the lake shore don't cut through them */
.map-hq text { paint-order: stroke; stroke: var(--pane); stroke-width: 5px; stroke-linejoin: round; }
.map-towns text { paint-order: stroke; stroke: var(--pane); stroke-width: 3px; stroke-linejoin: round; }

/* Footer: "Cookie settings" reopens the consent banner (js/analytics.js), developer credit on its own line */
.foot-cookie-btn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; opacity: .8; }
.foot-cookie-btn:hover { opacity: 1; color: var(--copper-hot); }
.foot-credit { flex-basis: 100%; opacity: .7; }
.foot-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 3px; }
.foot-credit a:hover { color: var(--copper-hot); }
@media (max-width: 560px) {
  .foot-legal-links a, .foot-cookie-btn, .foot-credit a { display: inline-block; padding-block: 12px; margin-block: -12px; }   /* 44px tap height */
}

/* ============================================================
   Cookie consent banner (injected by js/analytics.js, 2026-09-28)
   A night card on every page, day pages included. The bright green is the roof mark, the Accept fill
   (ink text) and the policy link's underline, never text. Accept and Decline are the same size.
   While it is open, html.consent-open takes the sticky bar, the chat and back-to-top off the bottom edge;
   they come back as soon as a choice is made.
   ============================================================ */
.consent {
  position: fixed; z-index: 235;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100dvh - var(--head-h) - 36px);   /* never reaches the header */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px 18px;
  background: var(--night); color: var(--cloud);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .25);
  font-family: var(--f-body);
  opacity: 0; transform: translateY(18px);
  transition: opacity .28s ease, transform .42s cubic-bezier(.22, .61, .36, 1);
}
.consent.is-in { opacity: 1; transform: none; }
.consent-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); line-height: 1.2; letter-spacing: -.005em;
  color: var(--cloud);
}
.consent-mark { width: 30px; height: 15px; flex: none; color: var(--copper); }
.consent-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--haze); text-wrap: pretty; }
.consent-text a {
  display: inline-block; padding-block: 12px; margin-block: -12px;   /* 44px tap height, line height untouched */
  color: var(--cloud); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.consent-text a:hover { color: var(--copper-hot); }
.consent-now { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--cloud); }
.consent-now::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--copper); vertical-align: 1px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.consent-actions .btn { width: 100%; min-height: 48px; padding-inline: 16px; }
.consent .btn-ghost { color: var(--cloud); box-shadow: inset 0 0 0 1.5px var(--ctl-line); }
.consent .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, .8); }
.consent :focus-visible { outline: 2px solid var(--copper-hot); outline-offset: 3px; }
@media (max-width: 640px) {
  .consent {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: calc(100dvh - var(--head-h) - 24px);
    padding: 14px 14px 14px 16px; border-radius: 18px;
  }
  .consent-text { margin-top: 6px; font-size: 14px; line-height: 1.5; }
  .consent-actions { margin-top: 12px; }
}
/* Phone held sideways: one row, copy left and the two buttons right, so the card stays short */
@media (orientation: landscape) and (max-height: 500px) {
  .consent {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto;
    max-height: calc(100dvh - var(--head-h) - 20px);
    display: grid; grid-template-columns: minmax(0, 1fr) 272px; align-items: center; column-gap: 24px;
    padding: 14px 16px 14px 18px;
  }
  .consent-text { margin-top: 4px; font-size: 14px; line-height: 1.5; }
  .consent-now { margin-top: 6px; }
  .consent-actions { margin-top: 0; }
}
html.consent-open .mobile-bar,
html.consent-open .chat,
html.consent-open .to-top { display: none; }
/* On small phones the header phone yields to the sticky bar's "Call now"; while the bar is away it comes back */
@media (max-width: 560px) {
  html.consent-open .head-phone { display: inline-grid; gap: 0; place-content: center; }   /* the hidden number is a second grid row: without these it pushed the glyph up */
}
html.nav-open .consent, html.sheet-open .consent { display: none; }
html.reduced-motion .consent { transition: none; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
@media (forced-colors: active) { .consent .btn { border: 1px solid ButtonText; } }   /* box-shadow outlines vanish in forced colours */
@media print { .consent { display: none !important; } }

/* ---------- 404 (2026-09-28) ----------
   Headline: the markup glues "This page", "blew off" and "the storm", so it can only break after page / off / in.
   Three lines (phones, and the two-column hero from 901px) read "This page / blew off in / the storm." with plain
   wrapping; balance picks "blew off" alone there, the short middle line. Two lines read
   "This page blew off / in the storm." only with balance. */
.nf-h1 { text-wrap: wrap; }
@media (min-width: 431px) and (max-width: 900px) { .nf-h1 { text-wrap: balance; } }
/* The caption under the outlined 404 is a sentence: body type, not mono */
.nf-cap { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; line-height: 1.5; }
/* Phone held sideways: copy left, a smaller 404 right, headline on two lines, all on the first screen */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1024px) {
  .nf-hero { min-height: 0; padding-top: calc(var(--head-h) + 24px); padding-bottom: 40px; }
  .nf-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: clamp(20px, 4vw, 40px); }
  .nf-h1 { font-size: clamp(32px, 5.6vw, 76px); text-wrap: balance; }
  .nf-fig { order: 0; gap: 10px; margin-top: 34px; }
  .nf-code { font-size: clamp(64px, 22vh, 112px); }
}

/* Legal pages (privacy, cookies, terms), 2026-09-28 rewrite.
   Lists there carry whole sentences now, so they read at near body size instead of the 14px card-list size. */
.legal .svc-list li { font-size: 16px; line-height: 1.55; }
/* Tables: the lifetime column stays on one line on wider screens ("Up to 90 days", "Until the tab closes") */
@media (min-width: 561px) {
  .legal-table th:last-child, .legal-table td:last-child { white-space: nowrap; padding-right: 0; }
}
/* Phones: the header row is hidden and each row becomes a card, so every cell shows its column name
   from data-label (cookies.html). The name / cookie cell keeps its label on the same line. */
@media (max-width: 560px) {
  .legal-table td[data-label]::before {
    content: attr(data-label); display: block; margin: 10px 0 2px;
    font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  }
  .legal-table td[data-label]:first-child::before { display: inline-block; margin: 0 10px 0 0; }
}
/* "Last updated ..." is a sentence, so body type (it was a 5-word mono line) */
.legal-updated { font-family: var(--f-body); font-size: 14px; letter-spacing: 0; line-height: 1.5; }

/* ---------- Review fixes, 2026-09-28 ----------
   Footer on phones: at max scroll the chat button sat on "Cookie settings" / "Terms", and the old
   padding + negative-margin tap boxes of stacked rows overlapped (a tap low on "Cookies" opened the credit link).
   Now every legal link is a real 44px row, and the row stays out of the chat button's column
   (52px button + 12px inset + 12px gap). */
@media (max-width: 560px) {
  .foot-legal { padding-right: 76px; text-wrap: balance; }   /* no lone "2004." on the copyright line */
  .foot-legal-links { row-gap: 0; }
  .foot-legal-links a, .foot-cookie-btn, .foot-credit a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
}
/* The credit is a 5-word sentence: body type, like every other sentence on the site */
.foot-credit { font-family: var(--f-body); font-size: 13px; letter-spacing: 0; }
/* Contact page: the privacy link next to both submit buttons (night cards) */
.note-link {
  display: inline-block; padding-block: 12px; margin-block: -12px;   /* 44px tap height, line height untouched */
  color: var(--cloud); text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.note-link:hover { color: var(--copper-hot); }
/* Consent banner, phone held sideways: no title row and tighter padding, so the card covers less of a 390px screen
   (the region keeps its "Cookie consent" label for screen readers) */
@media (orientation: landscape) and (max-height: 500px) {
  .consent { padding: 12px 14px 12px 16px; }   /* 12px: the policy link's 44px tap box must not make the card scroll */
  .consent-title { display: none; }
  .consent-text { margin-top: 0; }
}
/* The banner copy names every purpose Accept switches on, so it is longer: 14px on phones keeps the card low */
@media (max-width: 640px) { .consent-text { font-size: 14px; line-height: 1.5; } }

/* ================= Footer social links (2026-10-03) =================
   Round 44px icon buttons under the footer logo. An account without a URL yet stays
   <li hidden>; `node _dev/set-social.mjs <network> <url>` fills it in on every page. */
.foot-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; }
.foot-social li[hidden] { display: none; }
.foot-social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line); color: var(--cloud);
  transition: border-color .2s, color .2s, background-color .2s;
}
.foot-social a:hover { border-color: var(--copper); color: var(--copper-hot); background: rgba(97, 243, 70, .06); }
.foot-social a:focus-visible { outline: 2px solid var(--copper-hot); outline-offset: 3px; }
.foot-social svg { width: 20px; height: 20px; display: block; }

/* ================= Job videos (2026-10-05) =================
   The client's own reels: drone and crew footage from real jobs, plus short "ask the office" clips (vid/).
   A card is <a class="reel" href="vid/reel-x.mp4"> with a poster <img>: without JS the browser plays the file.
   main.js adds a muted 6 s loop to drone cards (data-loop), ONE card at a time, nothing fetched before the
   card is on screen, and opens the full clip with sound in .reel-sheet. Cards keep night colours on day pages
   (the caption sits on a dark scrim over the footage). The green is the play disc (ink glyph), never text. */
.reels-head .sec-intro { margin-top: 16px; }
.reels {
  --cols: 4;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 16px; list-style: none; margin: 40px 0 0; padding: 4px 0;   /* 4px: the focus ring is not cut by the phone scroller */
}
.reels--3 { --cols: 3; }
.reels > li[hidden] { display: none; }
.reels-switch { margin-top: 28px; }
.reels-switch + .reels { margin-top: 22px; }
html:not(.has-js) .reels-switch { display: none; }
.reels-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.reels-split .reels { margin-top: 0; }

.reel {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border-radius: 18px; background: var(--deep); color: var(--cloud);
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .55);
  -webkit-tap-highlight-color: transparent;
}
.reel > img, .reel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.reel > video { opacity: 0; transition: opacity .4s ease, transform .7s var(--ease); }
.reel.is-playing > video { opacity: 1; }
.reel::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .5) 24%, rgba(8, 8, 8, 0) 48%);
}
.reel-cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; }
.reel-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--copper); color: var(--ink);
  transition: background-color .2s, transform .3s var(--ease);
}
.reel-play svg { width: 16px; height: 16px; margin-left: 2px; display: block; }
.reel-txt { min-width: 0; display: grid; gap: 4px; }
.reel-txt strong { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.15; color: var(--cloud); text-wrap: balance; }
.reel-txt .mono { color: rgba(242, 242, 240, .78); letter-spacing: .08em; }
.reel:hover .reel-play { background: var(--copper-hot); transform: scale(1.07); }
.reel:hover > img, .reel:hover > video { transform: scale(1.03); }
.reel:focus-visible { outline: 2px solid var(--copper-hot); outline-offset: 3px; }
.section-day .reel:focus-visible { outline-color: var(--ink); }

/* One clip inside running copy (roofing, chimney, FAQ): a single white card, the whole card is the link.
   Thumbnail left with the play disc centred on it, title, one line and "Watch the clip" right. */
.reel-note {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center;
  max-width: 552px; margin: 30px 0 36px; padding: 12px 24px 12px 12px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 20px;
  box-shadow: 0 16px 36px -26px rgba(17, 17, 17, .4);
  transition: border-color .2s, box-shadow .3s;
}
.reel-note:hover { border-color: rgba(17, 17, 17, .26); box-shadow: 0 20px 44px -24px rgba(17, 17, 17, .45); }
.reel-note:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.reel--thumb { border-radius: 12px; box-shadow: none; }
.reel--thumb::before { background: rgba(8, 8, 8, .22); }
.reel--thumb .reel-cap { inset: 0; justify-content: center; }
.reel-note:hover .reel-play { background: var(--copper-hot); transform: scale(1.07); }
.reel-note:hover .reel--thumb > img { transform: scale(1.04); }
.reel-note-body { display: grid; gap: 6px; min-width: 0; }
.reel-note-title { font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.reel-note-text { color: var(--ink-2); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.reel-note-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.reel-note-watch {
  font-weight: 600; font-size: 15px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.reel-note-meta .mono { color: var(--ink-2); }
/* FAQ answers animate a single grid row, so a multi-part answer lives in one wrapper */
.faq-list .faq-a > .faq-a-body { overflow: hidden; min-height: 0; }
.faq-a-body > p { margin-bottom: 0; }
.faq-a-body .reel-note { margin: 0 20px 22px 56px; background: var(--day); box-shadow: none; }   /* level with the answer text (its 56px indent); paper card on the white answer */

@media (max-width: 900px) {
  .reels-split { grid-template-columns: minmax(0, 1fr); }
  .reels-split .reels { margin-top: 8px; }
  /* Phones and tablets: one swipeable row, the next card peeking in at the edge */
  .reels, .reels--3 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(42vw, 300px);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .reels::-webkit-scrollbar { display: none; }
  .reels > li { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .reels, .reels--3 { grid-auto-columns: 64vw; gap: 12px; }
  .reel-note { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 10px 16px 10px 10px; border-radius: 18px; }
  .reel-note-title { font-size: 17px; }
  .reel-note-text { font-size: 14px; }
  .faq-a-body .reel-note { margin: 0 16px 18px; }   /* the answer text indents 16px here */
}

/* The player: full clip with sound. Desktop: the clip, and beside it a column that starts level with its top
   (label, title, one line, the CTA); the close button sits in the screen corner. Phones: the clip, the close
   button on its corner, title and CTA under it. The video never takes a focus ring (its own controls do). */
.reel-sheet {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: transparent; color: var(--cloud); overflow: hidden;
}
.reel-sheet::backdrop { background: rgba(8, 8, 8, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.reel-sheet[open]::backdrop { opacity: 1; transition: opacity .26s cubic-bezier(.22, .61, .36, 1); }
@starting-style { .reel-sheet[open]::backdrop { opacity: 0; } }
.reel-sheet.is-closing::backdrop { opacity: 0; transition: opacity .22s ease; }
.reel-sheet-inner {
  position: relative; height: 100%; display: grid; place-items: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.reel-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reel-stage { position: relative; }
.reel-full {
  display: block; aspect-ratio: 9 / 16; background: #0B0B0B; border-radius: 16px; outline: none;
  height: min(calc(100dvh - 170px), calc((100vw - 32px) * 16 / 9)); width: auto; max-width: calc(100vw - 32px);
}
.reel-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8, 8, 8, .66); color: var(--cloud); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.reel-close:hover { border-color: var(--copper); color: var(--copper-hot); }
.reel-close:focus-visible { outline: 2px solid var(--copper-hot); outline-offset: 3px; }
.reel-close svg { width: 18px; height: 18px; display: block; }
.reel-side { width: 100%; display: grid; gap: 10px; }
.reel-sheet-meta, .reel-sheet-sub { display: none; }
.reel-sheet-title { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--cloud); text-wrap: balance; }
.reel-side .btn { width: 100%; }
@media (min-width: 900px) and (min-height: 560px) {
  .reel-sheet-inner { padding: 28px; }
  .reel-box { flex-direction: row; align-items: flex-start; gap: 40px; }
  .reel-full { height: min(calc(100dvh - 56px), 920px); max-width: none; }
  .reel-side { width: 300px; gap: 0; padding-top: 4px; }
  .reel-sheet-meta { display: block; color: var(--haze); margin-bottom: 14px; }
  .reel-sheet-title { font-size: var(--t-d3); line-height: 1.08; letter-spacing: -.01em; }
  .reel-sheet-sub { display: block; margin: 14px 0 28px; color: var(--haze); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
  .reel-side .btn { width: auto; justify-self: start; }
  .reel-close { position: fixed; top: 24px; right: 24px; background: rgba(242, 242, 240, .06); }
}

/* Portfolio: the client's own job photos (2026-10-05). Big tiles first in their groups (no badge: the owner
   did not want one), and the sheet tells "how this job went" instead of "how this kind of job goes". */
.pf-item.is-real img { filter: none; }   /* real photos as shot, not the illustrations' grade */


/* Night cards inside day sections keep the night text rules (2026-10-06: after a sent message the form's
   "Thank you" heading and its call button inherited the day ink and vanished on the dark card). */
.section-day .contact-card { color: var(--cloud); }
.section-day .contact-card .btn-ghost, .section-day .checker-card .btn-ghost { color: var(--cloud); box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, .32); }
.section-day .contact-card .btn-ghost:hover, .section-day .checker-card .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(242, 242, 240, .72); }
.section-day .contact-card .btn-ghost .ripple, .section-day .checker-card .btn-ghost .ripple { background: rgba(255, 255, 255, .45); }
.section-day .contact-card :focus-visible, .section-day .checker-card :focus-visible { outline-color: var(--copper-hot); }
@media (prefers-contrast: more) {
  .section-day .contact-card .btn-ghost, .section-day .checker-card .btn-ghost { box-shadow: inset 0 0 0 2px var(--cloud); }
}

/* Public adjuster on the team (2026-10-06): the license card on insurance-claims (#public-adjuster, a night
   .aside-card in a day section) and the full-width credential card that closes about's spec grid. */
.pa-lic { display: grid; gap: 10px; margin: 4px 0 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.pa-lic div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.pa-lic dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--haze); flex: none; }
.pa-lic dd { margin: 0; color: var(--cloud); font-weight: 600; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
#public-adjuster .prose strong { color: var(--ink); }
.spec--wide { grid-column: 1 / -1; }
.spec--wide > p:last-child { max-width: 72ch; }
.spec--wide a { color: var(--cloud); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }
.spec--wide a:hover { color: var(--copper-hot); }

/* Service area split, five counties (Will added 2026-10-06): five across on desktop; in two columns Cook,
   the biggest, takes a full row so Lake/DuPage and Will/Kane pair up; one column on phones. */
@media (min-width: 561px) and (max-width: 1089px) {
  .spec-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-grid--5 > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1090px) { .spec-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }