/* Oct 14 (pre-launch speed fix): fonts are served from this site (assets/fonts, latin + latin-ext from Google Fonts,
   SIL Open Font License) instead of fonts.googleapis.com, which blocked the first paint for ~0.75s on phones.
   Same families and weights as before. */
/* Archivo Black, latin-ext */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/archivo-black-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo Black, latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/archivo-black-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight, latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight, latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Libre Baskerville, latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Libre Baskerville, latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brilliant Cleaning & Restoration — main site.
   Oct 2 redesign: colors come from the Brilliant logo: deep navy (from the water blue; Lou didn't want
   purple as the main color), sky blue, flame orange, mold green. The heavy display face is kept for the hero tagline only; sections use Inter Tight in
   sentence case, open layouts instead of boxes, and alternate light and dark bands.
   Brilliant orange stays reserved for "call" actions. */

:root {
  --deep: #06182b;
  --forest: #0c2440;
  --forest-2: #143559;
  --forest-3: #1e4772;
  --cream: #f5f3ec;
  --paper: #f6f5f1;
  --mint: #5dc0f9; /* logo sky blue (was #9fd6f5) */
  --mint-2: #8fd3fb;
  --sage: #1a68a8;
  --orange: #f46a12;
  --orange-hover: #ff8031;
  --orange-ink: #1b0f06;
  --ink: #0f2236;
  --ink-2: #43566b;
  --ink-3: #58697d; /* was #66788c: 4.2:1 on cream, now 5.2:1 (WCAG AA) */
  --line: #e2e7ec;
  --line-dark: rgb(214 228 240 / 0.15);
  --water: #1565a8;
  --fire: #c2410c;
  --green: #2f7a3d;
  --purple: #2a0e7a;
  --display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sky: #2fa3e6;
  --sky-ink: #1a68a8;
  --indigo: #0c2440;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1280px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 76px;
  --fb-h: 40px;
  --radius: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--forest);
  color: var(--cream);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
summary {
  text-wrap: balance;
}
.lede,
p,
li {
  text-wrap: pretty;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}
h1,
h2,
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
h1 {
  font-size: clamp(46px, 7.4vw, 108px);
}
h2 {
  font-size: clamp(34px, 4.4vw, 62px);
}
h3,
h2.h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2vw, 28px);
}
em {
  font-style: normal;
  color: var(--mint);
}
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.eyebrow {
  font: 700 12px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.light .eyebrow,
.eyebrow.dark {
  color: var(--sage);
}
.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: #cdd9e6;
  max-width: 58ch;
}
.light .lede {
  color: var(--ink-2);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--forest);
  font-weight: 700;
}
.skip:focus {
  top: 12px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: 700 15px/1.15 var(--body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn-call {
  background: var(--orange);
  color: var(--orange-ink);
}
.btn-call:hover {
  background: var(--orange-hover);
}
.btn-call strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.01em;
}
.btn-light {
  background: var(--cream);
  color: var(--forest);
}
.btn-light:hover {
  background: var(--mint);
}
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgb(244 240 228 / 0.5);
}
.btn-ghost:hover {
  border-color: var(--cream);
  background: rgb(244 240 228 / 0.08);
}
.light .btn-ghost,
.btn-ghost.dark {
  color: var(--forest);
  border-color: var(--forest);
}
.light .btn-ghost:hover,
.btn-ghost.dark:hover {
  background: var(--forest);
  color: var(--cream);
}
.btn-big {
  min-height: 64px;
  padding: 0 30px;
  font-size: 17px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--orange);
}

/* ── Family bar + header ─────────────────────────────────────────────────── */
.family-bar {
  background: var(--deep);
  color: #cbd7e4;
  font: 700 12px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.family-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--fb-h);
}
.family-bar nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fb-label {
  margin-right: 8px;
  color: var(--mint);
}
.family-bar nav a {
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.family-bar nav a small {
  font-size: 10px;
  color: #8fa3b8;
  margin-left: 2px;
}
.family-bar nav a:hover {
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}
.family-bar nav a[aria-current="page"] {
  background: var(--mint);
  color: var(--deep);
}
.fb-trust {
  color: #aebfd0;
  text-align: right;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(12 36 64 / 0.97);
  border-bottom: 1px solid var(--line-dark);
}
@supports (backdrop-filter: blur(6px)) {
  .site-header {
    background: rgb(12 36 64 / 0.9);
    backdrop-filter: saturate(140%) blur(8px);
  }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
.brand img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}
.brand strong {
  display: block;
  font: 400 22px/1 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.brand small {
  display: block;
  margin-top: 4px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.main-nav a {
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #e3e9e1;
}
.main-nav a:hover {
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}
.header-call {
  min-height: 48px;
  padding: 0 18px;
}
.hc-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
}
.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cream);
  font: 700 14px var(--body);
  cursor: pointer;
}
.menu-btn svg {
  width: 20px;
  height: 20px;
}

/* ── Hero: one static photo (storm over the house), no scroll motion ───────── */
.hero {
  position: relative;
  background: var(--forest);
}
.hero-stage {
  position: relative;
  height: calc(100vh - var(--header-h) - var(--fb-h));
  height: calc(100svh - var(--header-h) - var(--fb-h));
  min-height: 560px;
  max-height: 980px;
  overflow: hidden;
  background: var(--deep);
}
.hero-center {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}
.hero-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The house sits right of centre in the hero photo; keep it in frame. */
  object-position: 80% 50%;
}
.shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(6 24 43 / 0.40) 0%, rgb(6 24 43 / 0.30) 45%, rgb(6 24 43 / 0.85) 100%);
}
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gutter) 90px;
  text-align: center;
}
.hero-copy .hero-title {
  margin: 18px 0 20px;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}
.hero-copy .hero-title em {
  color: var(--mint-2);
}
.hero-copy .lede {
  color: #eef3f8;
  max-width: 46ch;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.hero-trust {
  margin-top: 18px;
  font: 700 12px/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-2);
}
/* Wide screens: copy sits left over a left-to-right fade, so the photo stays bright on the right. */
@media (min-width: 861px) {
  .hero-center .shade {
    background: linear-gradient(90deg, rgb(6 24 43 / 0.78) 0%, rgb(6 24 43 / 0.5) 40%, rgb(6 24 43 / 0.08) 72%);
  }
  .hero-copy {
    align-items: flex-start;
    text-align: left;
    padding-left: max(var(--gutter), 6vw);
  }
  .hero-copy .lede {
    max-width: 42ch;
  }
  .hero-copy .hero-actions {
    justify-content: flex-start;
  }
}
.hero-bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 18px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgb(12 36 64 / 0.72);
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dfe7dc;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.section {
  padding-block: clamp(72px, 9vw, 128px);
}
.light {
  background: var(--cream);
  color: var(--ink);
}
.light em {
  color: var(--sage);
}
.paper {
  background: var(--paper);
  color: var(--ink);
}
.paper em {
  color: var(--sage);
}
.deep {
  background: var(--deep);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head h2 {
  margin-top: 0;
}
.section-head .lede {
  margin-top: 18px;
}
.stack-head {
  max-width: 900px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.stack-head h2 {
  margin-top: 14px;
}
.stack-head .lede {
  margin-top: 18px;
}

/* right-now emergency panel */
.right-now {
  background: var(--deep);
  border-top: 4px solid var(--orange);
}
.rn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
  gap: 40px;
  align-items: start;
}
.rn-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rn;
}
.rn-steps li {
  position: relative;
  padding: 20px 20px 20px 66px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.03);
}
.rn-steps li::before {
  counter-increment: rn;
  content: counter(rn);
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--deep);
  font: 400 17px/1 var(--display);
}
.rn-steps li:last-child::before {
  background: var(--orange);
}
.rn-steps strong {
  display: block;
  font: 400 20px/1.1 var(--display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.rn-steps p {
  margin-top: 6px;
  font-size: 15px;
  color: #c2d0de;
}
.call-card {
  padding: 28px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
}
.call-card .eyebrow {
  color: var(--sage);
}
.call-card .big-num {
  display: block;
  margin: 10px 0 6px;
  font: 400 clamp(34px, 3.4vw, 46px)/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--forest);
  text-decoration: none;
}
.call-card p {
  color: var(--ink-2);
  font-size: 15px;
}
.call-card .btn {
  width: 100%;
  margin-top: 18px;
}
.call-card .fine {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* services */
.svc-feature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  background: var(--c, var(--forest-2));
  color: var(--cream);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
}
.svc-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--deep);
}
.svc-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.svc-card:hover figure img {
  transform: scale(1.04);
}
.svc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 22px;
}
.svc-body .eyebrow {
  color: rgb(244 240 228 / 0.9);
}
.svc-body h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  text-transform: uppercase;
}
.svc-body p {
  color: rgb(244 240 228 / 0.86);
  font-size: 15.5px;
}
.svc-more {
  margin-top: auto;
  padding-top: 10px;
  font-weight: 700;
  font-size: 15px;
}
.svc-more::after {
  content: " →";
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
.svc-mini {
  color: var(--cream);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  background: var(--forest);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.svc-mini:hover {
  background: var(--forest-2);
}
.svc-mini img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}
.svc-mini h3 {
  font-size: 20px;
  text-transform: uppercase;
}
.svc-mini p {
  margin-top: 6px;
  font-size: 15px;
  color: #c2d0de;
}


/* real work */
.work-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 18px;
}
.work-grid figure {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--deep);
  min-height: 460px;
}
.work-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-grid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 20px 18px;
  background: linear-gradient(180deg, transparent, rgb(6 24 43 / 0.88));
}
.work-grid figcaption span {
  display: block;
  font: 700 11px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
}
.work-grid figcaption strong {
  display: block;
  margin-top: 4px;
  font: 400 22px/1.1 var(--display);
  text-transform: uppercase;
}

/* reviews */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.review .stars {
  color: var(--orange);
  font-size: 18px;
  letter-spacing: 3px;
}
.review blockquote {
  margin: 0;
  font: 400 clamp(19px, 1.6vw, 22px)/1.25 var(--display);
  letter-spacing: -0.01em;
}
.review figcaption {
  margin-top: auto;
  font: 700 13px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.source-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* band */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(90px, 12vw, 160px);
}
.band > img,
.band > picture > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(6 24 43 / 0.92), rgb(6 24 43 / 0.55));
}
.band h2 {
  max-width: 14ch;
  margin-top: 16px;
}
.band .hero-actions {
  justify-content: flex-start;
}

/* service area map */
.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.area-map {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--deep);
  box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.7);
}

.area-map .border {
  fill: none;
  stroke: rgb(244 240 228 / 0.38);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}

.area-map .state {
  font: 700 13px var(--mono);
  letter-spacing: 0.22em;
  fill: rgb(244 240 228 / 0.55);
  paint-order: stroke;
  stroke: rgb(6 24 43 / 0.6);
  stroke-width: 3px;
}

.area-map .state.reach {
  fill: rgb(244 240 228 / 0.9);
}

.area-map .city-halo {
  fill: rgb(6 24 43 / 0.55);
  stroke: rgb(244 240 228 / 0.55);
  stroke-width: 1;
}

.area-map .city-halo.home {
  stroke: var(--orange);
  stroke-width: 1.5;
}

.area-map .city-dot {
  fill: var(--cream);
}

.area-map .city-dot.home {
  fill: var(--orange);
}

.area-map .home-pulse {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .area-map .home-pulse {
    animation: home-pulse 2.6s ease-out infinite;
  }
}

@keyframes home-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

.area-map .city-label {
  font: 700 15px var(--body);
  fill: var(--cream);
  paint-order: stroke;
  stroke: rgb(6 24 43 / 0.85);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.area-map .city-label.home {
  font-size: 17px;
}

.area-map .map-frame {
  fill: none;
  stroke: rgb(244 240 228 / 0.16);
}

.area-map a:hover .city-label,
.area-map a:focus-visible .city-label {
  fill: var(--orange);
  text-decoration: underline;
}
.city-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.city-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.city-list a::after {
  content: "→";
  color: var(--mint);
}
.city-list a:hover {
  background: var(--forest-2);
  border-color: var(--mint);
}
.city-list small {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: #aebfd0;
}

/* faq */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: 48px;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font: 400 20px/1 var(--body);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq .answer {
  padding: 0 0 24px;
  color: var(--ink-2);
  max-width: 68ch;
}
.faq .answer p + p,
.faq .answer ul,
.faq .answer ol {
  margin-top: 10px;
}
.faq .answer ul,
.faq .answer ol {
  padding-left: 20px;
}

/* family (demos) */
.family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.fam-card {
  position: relative;
  display: grid;
  grid-template-rows: 240px auto;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: var(--forest-2);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.25s ease;
}
.fam-card:hover {
  border-color: var(--mint);
  transform: translateY(-3px);
}
.fam-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fam-card .demo-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #fff0cb;
  color: #233d31;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fam-body {
  padding: 24px;
}
.fam-body h3 {
  font-size: 30px;
  text-transform: uppercase;
}
.fam-body p {
  margin-top: 8px;
  color: #c2d0de;
}
.fam-body .svc-more {
  display: inline-block;
  margin-top: 14px;
}
.family-note {
  margin-top: 18px;
  font-size: 14px;
  color: #aebfd0;
}

/* contact block */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}
.contact h2 {
  margin-top: 14px;
}
.contact .big-num {
  display: block;
  margin: 18px 0 8px;
  font: 400 clamp(40px, 6vw, 84px)/0.95 var(--display);
  letter-spacing: -0.03em;
  color: var(--cream);
  text-decoration: none;
}
.contact .big-num:hover {
  color: var(--orange);
}
.have-ready {
  padding: 28px;
  border-radius: 10px;
  border: 1px solid var(--line-dark);
  background: rgb(255 255 255 / 0.03);
}
.have-ready h2,
.have-ready h3 {
  text-transform: uppercase;
}
.have-ready ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.have-ready li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: #cdd9e6;
}
.have-ready li::before {
  content: "✓";
  color: var(--mint);
  font-weight: 700;
}
.notice {
  margin-top: 18px;
  font-size: 14px;
  color: #aebfd0;
}

/* ── Subpages ────────────────────────────────────────────────────────────── */
.crumbs {
  padding-top: 26px;
  font: 700 12px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aebfd0;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: #6f897a;
}
.crumbs a {
  display: inline-block;
  padding-block: 4px;
  text-decoration: none;
}
.crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}
.page-hero {
  padding-block: 36px clamp(56px, 7vw, 96px);
}
.ph-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.page-hero h1 {
  font-size: clamp(42px, 5.6vw, 84px);
  margin-top: 16px;
}
.page-hero .lede {
  margin-top: 22px;
}
.page-hero .hero-actions {
  justify-content: flex-start;
}
.ph-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--deep);
}
.ph-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-media figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgb(6 24 43 / 0.78);
  font: 700 11px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ph-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font: 700 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-2);
}
.ph-trust li::before {
  content: "✓ ";
  color: var(--orange);
}
.includes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.inc {
  padding: 26px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}
.inc h3 {
  font-size: 21px;
  text-transform: uppercase;
}
.inc p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.inc .n {
  display: block;
  margin-bottom: 14px;
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--forest);
}
.firststeps {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 40px;
}
.firststeps .rn-steps {
  margin-top: 0;
}
.related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tie {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 40px;
  padding: 18px;
  border-radius: 10px;
  border: 1px dashed rgb(244 240 228 / 0.35);
  background: rgb(255 255 255 / 0.03);
}
.tie img {
  width: 220px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
}
.tie .demo-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fff0cb;
  color: #233d31;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tie h3 {
  margin-top: 8px;
  text-transform: uppercase;
}
.tie p {
  margin-top: 6px;
  font-size: 15px;
  color: #c2d0de;
}
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 12px;
  background: var(--orange);
  color: var(--orange-ink);
}
.cta-band h2 {
  font-size: clamp(32px, 4vw, 54px);
  max-width: 16ch;
}
.cta-band p {
  margin-top: 10px;
  max-width: 48ch;
}
.cta-band .btn {
  background: var(--deep);
  color: var(--cream);
}
.cta-band .btn:hover {
  background: var(--forest);
}
.prose {
  max-width: 72ch;
}
.prose p + p,
.prose h2 + p,
.prose ul {
  margin-top: 14px;
}
.prose h2 {
  margin-top: 40px;
  font-size: clamp(28px, 3vw, 40px);
}
.prose ul {
  padding-left: 20px;
}

/* ── Footer + mobile call bar ────────────────────────────────────────────── */
.site-footer {
  background: var(--deep);
  padding-top: clamp(56px, 7vw, 96px);
}
.foot-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.foot-cols h3 {
  margin-bottom: 14px;
  font: 700 12px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.foot-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 15px;
}
.foot-cols a {
  display: inline-block;
  padding-block: 3px;
  text-decoration: none;
  color: #dbe4ee;
}
.foot-cols a:hover {
  color: #fff;
  text-decoration: underline;
}
.foot-brand p {
  margin-top: 14px;
  color: #aebfd0;
  font-size: 15px;
}
.foot-brand .foot-phone {
  display: inline-block;
  margin-top: 16px;
  font: 400 30px/1 var(--display);
  color: var(--cream);
  text-decoration: none;
}
.foot-brand .foot-phone:hover {
  color: var(--orange);
}
.foot-word {
  margin-top: 56px;
  font: 400 clamp(64px, 15vw, 220px)/0.82 var(--display);
  letter-spacing: -0.06em;
  color: var(--forest-2);
  user-select: none;
}
.legal {
  padding: 18px 0 28px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
  color: #8fa3b8;
}
.legal a {
  color: #cbd7e4;
}
.call-bar {
  display: none;
}

/* ── Reveal motion (only when motion is allowed; content is visible without JS) ── */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .main-nav a {
    padding: 10px 8px;
    font-size: 14px;
  }
  .hc-num {
    display: none;
  }
}
@media (max-width: 1020px) {
  .svc-feature,
  .reviews,
  .related,
  .includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rn-grid,
  .area-grid,
  .faq-wrap,
  .contact,
  .ph-grid,
  .firststeps {
    grid-template-columns: minmax(0, 1fr);
  }
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .work-grid figure:first-child {
    grid-column: 1 / -1;
  }
  .foot-cols {
    grid-template-columns: 1fr 1fr;
  }
  .section-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .tie {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  .tie img {
    width: 160px;
    height: 120px;
  }
  .tie .btn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 860px) {
  :root {
    --header-h: 66px;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--forest);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 18px 30px rgb(0 0 0 / 0.3);
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 17px;
    border-bottom: 1px solid var(--line-dark);
  }
  .menu-btn {
    display: inline-flex;
  }
  .header-call {
    margin-left: auto;
  }
  .fb-trust {
    display: none;
  }
  .family-bar .wrap {
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .page-hero h1 {
    font-size: clamp(32px, 9.6vw, 42px);
  }
  body {
    font-size: 16px;
    padding-bottom: 76px;
  }
  .family-bar {
    font-size: 11px;
  }
  .fb-label {
    display: none;
  }
  .family-bar nav a {
    padding: 6px 7px;
  }
  .brand img {
    width: 42px;
    height: 42px;
  }
  .brand strong {
    font-size: 18px;
  }
  .brand small {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .site-header .wrap {
    gap: 10px;
  }
  .header-call {
    min-height: 44px;
    padding: 0 12px;
  }
  .hc-label {
    display: none;
  }
  .menu-btn {
    padding: 0 12px;
  }
  .hero-stage {
    min-height: 560px;
    height: calc(92svh - var(--header-h));
  }
  .hero-center img {
    object-position: 72% 50%;
  }
  .hero-copy {
    justify-content: flex-end;
    padding-bottom: 76px;
  }
  .hero-actions {
    width: 100%;
  }
  .hero-actions .btn {
    flex: 1 1 100%;
  }
  .hero-bottom {
    font-size: 10px;
    bottom: 14px;
  }

  .rn-steps,
  .svc-feature,
  .svc-grid,
  .reviews,
  .related,
  .includes,
  .family-grid,
  .city-list,
  .foot-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .work-grid figure {
    min-height: 340px;
  }
  .tie {
    grid-template-columns: minmax(0, 1fr);
  }
  .tie img {
    width: 100%;
    height: 160px;
  }
  .call-card,
  .have-ready {
    padding: 22px;
  }
  .fam-card {
    grid-template-rows: 180px auto;
  }
  .page-hero .hero-actions .btn {
    flex: 1 1 100%;
  }
  .call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: block;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: rgb(6 24 43 / 0.97);
    border-top: 1px solid var(--line-dark);
  }
  .call-bar .btn {
    width: 100%;
    min-height: 54px;
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  .family-bar,
  .site-header,
  .call-bar,
  .hero-bottom {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}


/* Hero: the main heading is the topic line (SEO); the big tagline keeps the H1 look. */
.hero-title {
  font-size: clamp(46px, 7.4vw, 108px);
}

/* Hero ticker (Oct 2): a slow right-to-left loop of towns, services and the 24/7 number. */
.hero-bottom.ticker {
  display: block;
  padding: 10px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
}
.ticker-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  white-space: nowrap;
}
.hero-bottom.ticker a {
  color: inherit;
  text-decoration: none;
}
.hero-bottom.ticker a:hover,
.hero-bottom.ticker a:focus-visible {
  color: var(--orange);
  text-decoration: underline;
}
.hero-bottom .tk-label {
  color: var(--mint);
}
.hero-bottom .tk-sep {
  color: var(--orange);
  font-size: 0.8em;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker-track {
    animation: hero-ticker 53s linear infinite; /* Oct 15: 48s→53s, so adding burst pipes keeps the same pace */
  }
  .hero-bottom.ticker:hover .ticker-track,
  .hero-bottom.ticker:focus-within .ticker-track {
    animation-play-state: paused;
  }
}
@keyframes hero-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    width: auto;
  }
  .hero-bottom.ticker {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 10px 14px;
  }
  .ticker-set[aria-hidden="true"] {
    display: none;
  }
  .ticker-set {
    flex: 1 1 auto;
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 4px;
  }
}

/* Phones: the fixed call bar covers the bottom of the hero, so the ticker sits just above it. */
@media (max-width: 640px) {
  .hero-bottom.ticker {
    bottom: 86px;
  }
  .hero-copy {
    padding-bottom: 136px;
  }
}

/* ══ Oct 2 redesign layer ═══════════════════════════════════════════════════
   Logo palette, sentence-case headings, open layouts, light/dark rhythm.
   Kept separate so the earlier look can be restored by deleting this block
   (plus the palette values in :root). */

/* Type */
h2,
h3,
h2.h3 {
  font-family: var(--head);
  font-weight: 700;
  text-transform: none;
}
h2 {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h2 em {
  font-style: normal;
  font-weight: 600;
}
h3,
h2.h3 {
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 12.5px/1.4 var(--body);
  letter-spacing: 0.14em;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
.btn {
  border-radius: 10px;
}
.btn-call strong {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.05em;
}

/* Header + family bar: the logo mark on a clean tile, wordmark in a serif like the logo's */
.family-bar {
  font: 600 11.5px/1.2 var(--body);
  letter-spacing: 0.1em;
}
.site-header {
  background: rgb(12 36 64 / 0.96);
  backdrop-filter: saturate(1.4) blur(10px);
}
.brand img {
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.6);
}
.brand strong {
  font: 700 23px/1 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
.brand small {
  margin-top: 6px;
  font: 600 10.5px/1 var(--body);
  letter-spacing: 0.2em;
}

/* Light sections */
#services,
#area,
#family,
.light,
.paper {
  color: var(--ink);
}
#services,
.paper,
#faq {
  background: #fff;
}
.light,
#area,
#family {
  background: var(--paper);
}
:is(#services, #area, #family, .light, .paper) .lede {
  color: var(--ink-2);
}
:is(#services, #area, #family, .light, .paper) .eyebrow {
  color: var(--sky-ink);
}
:is(#services, #area, #family, .light, .paper) h2 em {
  color: var(--sky-ink);
}

/* Happening right now: open numbered steps + a raised call card with the logo watermark */
.rn-steps {
  gap: 0 40px;
  margin-top: 36px;
}
.rn-steps li {
  padding: 22px 0 24px 58px;
  border: 0;
  border-top: 1px solid var(--line-dark);
  border-radius: 0;
  background: none;
}
.rn-steps li::before {
  left: 0;
  top: 22px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid rgb(159 214 245 / 0.55);
  color: var(--mint);
  font: 600 15px/1 var(--head);
}
.rn-steps li:last-child::before {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.rn-steps strong {
  font: 700 19px/1.25 var(--head);
  letter-spacing: -0.01em;
  text-transform: none;
}
.call-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: 18px;
  background: linear-gradient(155deg, #17406b 0%, #0c2440 62%);
  color: var(--cream);
  border: 1px solid rgb(159 214 245 / 0.18);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.75);
}
.call-card::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -44px;
  width: 210px;
  height: 210px;
  background: url("img/logo-mark-mono.png") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.call-card .eyebrow {
  color: var(--mint);
}
.call-card .big-num {
  color: #fff;
  font: 800 clamp(34px, 3.1vw, 44px)/1 var(--head);
  letter-spacing: -0.025em;
}
.call-card p {
  color: #cdd9e6;
}
.call-card .fine {
  color: #a3b5c7;
}

/* Services: white cards with the logo's service colors as accents */
.svc-feature {
  gap: 24px;
}
.svc-card {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(12 30 50 / 0.05);
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: var(--c);
}
.svc-card:hover {
  box-shadow: 0 30px 60px -30px rgb(12 30 50 / 0.35);
}
.svc-card figure {
  background: var(--paper);
}
.svc-body {
  padding: 24px 26px 26px;
}
.svc-body .eyebrow {
  color: var(--c);
}
.svc-body .eyebrow::before {
  background: var(--c);
}
.svc-body h3 {
  color: var(--ink);
  font-size: clamp(24px, 2.1vw, 30px);
  text-transform: none;
}
.svc-body p {
  color: var(--ink-2);
}
.svc-card .svc-more {
  color: var(--ink);
}
.svc-grid {
  gap: 0 36px;
  margin-top: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.svc-mini {
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 22px 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.svc-mini:hover {
  background: transparent;
}
.svc-mini:hover h3 {
  color: var(--sky-ink);
}
.svc-mini img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.svc-mini h3 {
  font-size: 18px;
  text-transform: none;
}
.svc-mini p {
  color: var(--ink-2);
  font-size: 14.5px;
}


/* Real work */
.work-grid figure {
  border-radius: 14px;
}
.work-grid figcaption span {
  font: 600 12px/1.4 var(--body);
  letter-spacing: 0.1em;
  color: var(--mint);
}
.work-grid figcaption strong {
  font: 700 21px/1.2 var(--head);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Reviews: pull quotes, not boxes */
.reviews {
  gap: 40px;
}
.review {
  gap: 18px;
  padding: 4px 0 4px 26px;
  border: 0;
  border-left: 2px solid var(--orange);
  border-radius: 0;
  background: transparent;
}
.review blockquote {
  font: 500 clamp(19px, 1.45vw, 21px)/1.5 var(--head);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.review figcaption {
  font: 600 14px/1.3 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

/* Service area (light, so the dark map card stands out) */
#area .city-list {
  gap: 0 28px;
}
#area .city-list a {
  min-height: 64px;
  padding: 0 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
}
#area .city-list a::after {
  color: var(--orange);
}
#area .city-list a:hover {
  background: transparent;
  color: var(--sky-ink);
}
#area .city-list small {
  color: var(--ink-3);
}

/* FAQ */
.faq summary {
  font: 600 18px/1.35 var(--head);
  letter-spacing: -0.01em;
}
.faq summary::after {
  border-color: var(--line);
  color: var(--sky-ink);
}

/* Brilliant family (light) */
#family .fam-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}
#family .fam-card:hover {
  border-color: var(--line);
  box-shadow: 0 30px 60px -30px rgb(12 30 50 / 0.35);
}
#family .fam-body h3 {
  color: var(--ink);
  font-size: 26px;
  text-transform: none;
}
#family .fam-body p,
#family .family-note {
  color: var(--ink-2);
}
#family .svc-more {
  color: var(--ink);
}

/* Final call: indigo glow + the logo mark as a watermark */
#call {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 520px at 88% 12%, #17406b 0%, transparent 62%), var(--forest);
}
#call::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -130px;
  width: 540px;
  height: 540px;
  background: url("img/logo-mark-mono.png") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
#call .wrap {
  position: relative;
  z-index: 1;
}
.contact .big-num {
  font: 800 clamp(40px, 5.6vw, 80px)/0.98 var(--head);
  letter-spacing: -0.035em;
}
.have-ready {
  padding: 6px 0 6px 28px;
  border: 0;
  border-left: 2px solid var(--orange);
  border-radius: 0;
  background: none;
}
.have-ready h2,
.have-ready h3 {
  text-transform: none;
}
.have-ready li::before {
  color: var(--orange);
}

/* Footer: the full logo instead of the giant wordmark */
.foot-logo {
  display: inline-block;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.7);
}
.foot-logo img {
  display: block;
  width: 168px;
  height: auto;
}
.foot-brand .foot-phone {
  margin-top: 22px;
  font: 800 28px/1 var(--head);
  letter-spacing: -0.02em;
}
.foot-cols h3 {
  font: 600 12px/1.4 var(--body);
  letter-spacing: 0.14em;
}
.legal {
  margin-top: 56px;
}

@media (max-width: 640px) {
  .call-card {
    padding: 24px;
  }
  #call::after {
    width: 320px;
    height: 320px;
    right: -80px;
    bottom: -80px;
  }
}

/* Redesign polish */
#services .svc-body .eyebrow {
  color: var(--c);
}
.hero-trust {
  font: 600 12px/1.5 var(--body);
  letter-spacing: 0.14em;
}
.hero-bottom {
  font: 600 11.5px/1.4 var(--body);
  letter-spacing: 0.12em;
}
.hc-num {
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Inner pages: open "what's included" list, quieter labels */
.includes {
  gap: 34px 36px;
}
.inc {
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.inc h3 {
  font-size: 20px;
  text-transform: none;
}
.inc .n {
  font: 600 13px/1 var(--head);
  letter-spacing: 0;
  color: var(--sky-ink);
}
.crumbs {
  font: 600 12px/1.5 var(--body);
  letter-spacing: 0.06em;
}
.crumbs li + li::before {
  color: #7f95ab;
}
.ph-trust {
  font: 600 12px/1.4 var(--body);
  letter-spacing: 0.1em;
}
.cta-band {
  border-radius: 18px;
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .hero-bottom.ticker {
    display: none;
  }
}
@media (max-width: 860px) {
  .hero-copy h1.eyebrow::before {
    display: none;
  }
}
/* Lou, Oct 2: "Come back" in the same orange as the call buttons */
.hero-copy .hero-title em {
  color: var(--orange);
}
/* Lou, Oct 2: bigger logo */
:root {
  --header-h: 96px;
}
.site-header .brand img {
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: 16px;
}
.site-header .brand {
  gap: 14px;
}
.site-header .brand strong {
  font-size: 30px;
}
.site-header .brand small {
  margin-top: 7px;
  font-size: 11.5px;
}
.foot-logo img {
  width: 220px;
}
@media (max-width: 860px) {
  :root {
    --header-h: 78px;
  }
  .site-header .brand img {
    width: 58px;
    height: 58px;
    padding: 5px;
    border-radius: 14px;
  }
  .site-header .brand strong {
    font-size: 25px;
  }
  .site-header .brand small {
    font-size: 10px;
  }
}
@media (max-width: 400px) {
  .site-header .brand small {
    letter-spacing: 0.12em;
  }
}
@media (max-width: 480px) {
  .site-header .wrap {
    gap: 8px;
  }
  .menu-btn .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .menu-btn {
    padding: 0 12px;
  }
  .site-header .brand {
    gap: 10px;
    min-width: 0;
  }
  .site-header .brand img {
    width: 54px;
    height: 54px;
  }
  .site-header .brand strong {
    font-size: 23px;
  }
  .site-header .brand small {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
}
@media (max-width: 370px) {
  .site-header .brand small {
    display: none;
  }
}
@media (max-width: 400px) {
  .family-bar {
    letter-spacing: 0.04em;
  }
  .family-bar nav a {
    padding: 6px 7px;
  }
  .family-bar .fb-label {
    display: none;
  }
}

/* Lou, Oct 2 (iPhone): phones get a hero that grows to fit its text (nothing clipped under
   Safari's toolbars) and keeps the house visible below the buttons. */
@media (max-width: 640px) {
  .hero-stage {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hero-copy {
    position: relative;
    inset: auto;
    justify-content: flex-start;
    padding: 22px var(--gutter) 0;
  }
  .hero-copy .hero-title {
    font-size: 9.1vw;
    margin: 10px 0 12px;
  }
  .hero-copy .lede {
    font-size: 16px;
  }
  .hero-copy .hero-actions {
    margin-top: 18px;
  }
  .hero-trust {
    margin-top: 12px;
  }
  .hero-copy .hero-actions .btn-ghost {
    display: none;
  }
  .hero-trust {
    letter-spacing: 0.08em;
  }
  .hero-center img {
    object-position: 92% 50%;
  }
  .hero-center .shade {
    background: linear-gradient(180deg, rgb(6 24 43 / 0.62) 0%, rgb(6 24 43 / 0.5) 38%, rgb(6 24 43 / 0.12) 64%, rgb(6 24 43 / 0.1) 80%, rgb(6 24 43 / 0.55) 100%);
  }
  /* the ticker flows right under the trust line, with the house below it (it used to sit at
     the hero's bottom edge, behind the fixed call bar) */
  .hero-bottom.ticker {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 18px var(--gutter) 58vw;
  }
}

/* Phone call bar: hidden while the hero call button is on screen (see site.js). */
.cb-ready .call-bar {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.cb-ready .call-bar.show {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}

/* ── Oct 2 audit fixes ───────────────────────────────────────────────── */
/* Long headings shrink to fit their column instead of breaking a word ("RESTORATIO / N").
   --fit is the longest word's width in em, written by build.py. Browsers without container units keep the clamp. */
.ph-grid > div:first-child {
  container-type: inline-size;
}
.page-hero h1 {
  font-size: min(clamp(42px, 5.6vw, 84px), calc(100cqi / var(--fit, 7)));
}
@media (max-width: 640px) {
  .page-hero h1 {
    font-size: min(clamp(32px, 9.6vw, 42px), calc(100cqi / var(--fit, 7)));
  }
}
/* Ticker links: 24px-tall tap targets (WCAG 2.2, 2.5.8) */
.hero-bottom.ticker a {
  padding-block: 4px;
}
/* Map photo as a lazy <img> under the SVG overlay */
.map-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--deep);
  box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.7);
}
.map-wrap .map-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.map-wrap .area-map {
  position: relative;
  display: block;
  background: transparent;
  box-shadow: none;
}
/* <picture> wrappers (WebP) lay out as if the <img> were the direct child */
picture {
  display: contents;
}
/* <source> has no box of its own; without this it becomes an empty grid cell inside grid cards */
picture > source {
  display: none;
}

/* ── How we work, re-cooked (Lou, Oct 2) ─────────────────────────────────
   One continuous dark "job strip": a drawn scene per step on a blueprint grid, a rail from the
   orange call to the final check, then insurance as a claim file and the standards with icons.
   Scenes animate only once the strip is on screen, and never under reduced motion. */
.how {
  --band: linear-gradient(rgb(159 214 245 / 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(159 214 245 / 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(130% 150% at 0% 0%, #1b4573 0%, #0c2440 42%, #06182b 100%);
  --band-shadow: 0 34px 70px -38px rgb(6 24 43 / 0.8), inset 0 0 0 1px rgb(159 214 245 / 0.09);
}
.job-strip {
  --scene-h: 272px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.job-strip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--scene-h);
  border-radius: 20px;
  background: var(--band);
  box-shadow: var(--band-shadow);
}
.job-strip::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: calc(var(--scene-h) - 42px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 12%, rgb(159 214 245 / 0.55) 30%, rgb(159 214 245 / 0.55) 100%);
}
.leg {
  min-width: 0;
}
.leg-scene {
  position: relative;
  z-index: 1;
  height: var(--scene-h);
  padding: 16px 16px 62px;
  transition: background-color 0.25s ease;
}
.leg + .leg .leg-scene {
  border-left: 1px solid rgb(159 214 245 / 0.1);
}
.leg:hover .leg-scene {
  background-color: rgb(159 214 245 / 0.04);
}
.leg-scene .scene {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.leg-dot {
  position: absolute;
  z-index: 2;
  left: 26px;
  bottom: 34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0c2440;
  border: 2px solid var(--mint);
}
.leg-call .leg-dot {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 5px rgb(244 106 18 / 0.22);
}
.leg-label {
  position: absolute;
  left: 26px;
  bottom: 12px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(245 243 236 / 0.62);
  white-space: nowrap;
}
.leg-label b {
  margin-right: 8px;
  color: var(--cream);
}
.leg-copy {
  padding: 28px 28px 0 4px;
}
.leg-copy h3 {
  font: 700 clamp(22px, 1.9vw, 26px) / 1.1 var(--head);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.leg-copy p {
  margin-top: 10px;
  max-width: 32ch;
  font-size: 15.5px;
  color: var(--ink-2);
}

/* scene artwork */
.scene .s-mono {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.16em;
  fill: rgb(245 243 236 / 0.8);
}
.scene .s-dim {
  fill: rgb(159 214 245 / 0.6);
}
.scene .s-tiny {
  font-size: 8px;
  fill: rgb(245 243 236 / 0.6);
}
.scene .s-num {
  font: 600 16px var(--body);
  letter-spacing: 0.02em;
  fill: var(--cream);
}
.s-rings circle {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}
.s-rings circle:nth-child(1) {
  transform: scale(1.4);
  opacity: 0.4;
}
.s-rings circle:nth-child(2) {
  transform: scale(1.85);
  opacity: 0.16;
}
.s-rings circle:nth-child(3) {
  opacity: 0;
}
.s-disc {
  fill: var(--orange);
}
.s-handset {
  transform-box: fill-box;
  transform-origin: center;
}
.s-handset path {
  fill: none;
  stroke: var(--orange-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-scan {
  transform: translateY(66px);
}
.s-bracket,
.s-cross,
.s-lead {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.s-lead {
  stroke-width: 1.2;
  stroke-opacity: 0.85;
}
.scene .s-tag {
  fill: #fff;
}
.s-housing {
  fill: #0c2440;
  stroke: rgb(159 214 245 / 0.4);
  stroke-width: 2;
}
.s-blades {
  fill: rgb(159 214 245 / 0.82);
  transform-box: fill-box;
  transform-origin: center;
}
.s-guard {
  fill: none;
  stroke: rgb(245 243 236 / 0.22);
  stroke-width: 1.2;
}
.s-hub {
  fill: var(--cream);
}
.s-air path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 26 16;
  opacity: 0.55;
}
.s-drops circle {
  fill: var(--mint);
  opacity: 0.55;
  transform-box: fill-box;
}
.s-floor {
  stroke: rgb(159 214 245 / 0.25);
  stroke-width: 1.5;
}
.s-sheet {
  fill: var(--cream);
}
.s-sheet2 {
  fill: rgb(159 214 245 / 0.28);
}
.s-clip {
  fill: var(--forest-3);
  stroke: var(--mint);
  stroke-width: 1.2;
}
.s-box {
  fill: #fff;
  stroke: #b9c6d3;
  stroke-width: 1.5;
}
.s-tick {
  fill: none;
  stroke: var(--sky-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 0;
}
.scene .s-row {
  font: 600 13px var(--body);
  fill: var(--ink);
}
.s-seal {
  transform-box: fill-box;
  transform-origin: center;
}
.s-seal circle {
  fill: var(--sky);
  stroke: #0c2440;
  stroke-width: 4;
}
.s-seal path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes ring-out {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(2.3); opacity: 0; }
}
@keyframes scan-sweep {
  from { transform: translateY(0); }
  to { transform: translateY(142px); }
}
@keyframes fan-spin {
  to { transform: rotate(360deg); }
}
@keyframes air-flow {
  to { stroke-dashoffset: -84; }
}
@keyframes drop-rise {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 0.8; }
  100% { transform: translateY(-48px); opacity: 0; }
}
@keyframes tick-draw {
  from { stroke-dashoffset: 22; }
  to { stroke-dashoffset: 0; }
}
@keyframes seal-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .job-strip.is-in .s-rings circle {
    animation: ring-out 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  }
  .job-strip.is-in .s-rings circle:nth-child(2) {
    animation-delay: 0.8s;
  }
  .job-strip.is-in .s-rings circle:nth-child(3) {
    animation-delay: 1.6s;
  }
  .job-strip.is-in .s-scan {
    animation: scan-sweep 3.4s ease-in-out infinite alternate;
  }
  .job-strip.is-in .s-blades {
    animation: fan-spin 1.1s linear infinite;
  }
  .job-strip.is-in .s-air path {
    animation: air-flow 1.4s linear infinite;
  }
  .job-strip.is-in .s-drops circle {
    animation: drop-rise 2.6s ease-out infinite;
  }
  .job-strip.is-in .s-drops circle:nth-child(2) {
    animation-delay: 0.9s;
  }
  .job-strip.is-in .s-drops circle:nth-child(3) {
    animation-delay: 1.7s;
  }
  .job-strip.is-in .s-tick {
    animation: tick-draw 0.45s ease-out 0.6s both;
  }
  .job-strip.is-in .s-tick:nth-of-type(2) {
    animation-delay: 1.2s;
  }
  .job-strip.is-in .s-tick:nth-of-type(3) {
    animation-delay: 1.8s;
  }
  .job-strip.is-in .s-seal {
    animation: seal-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 2.4s both;
  }
}

/* claim file + standards */
.how-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px clamp(36px, 6vw, 88px);
  align-items: start;
  margin-top: clamp(80px, 9vw, 120px);
}
.cf-wrap {
  position: relative;
}
.cf-wrap::before {
  content: "";
  position: absolute;
  inset: 14px -12px -12px 12px;
  border-radius: 16px;
  background: #dfe6ee;
  transform: rotate(1.4deg);
}
.claim-file {
  position: relative;
  padding: 38px clamp(24px, 3vw, 40px) 30px;
  border-radius: 0 16px 16px 16px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(15 34 54 / 0.04), 0 26px 56px -34px rgb(15 34 54 / 0.5);
}
.cf-tab {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 18px;
  border-radius: 12px 12px 0 0;
  background: #fff;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-ink);
}
.claim-file h3 {
  font: 700 clamp(24px, 2.3vw, 30px) / 1.1 var(--head);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.claim-file > p {
  margin-top: 12px;
  color: var(--ink-2);
}
.cf-items {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.cf-items li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.cf-items svg {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 10px;
  background: #eaf2f9;
  color: var(--sky-ink);
}
.cf-items .cf-ok {
  width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0;
  background: none;
  stroke-width: 2.4;
}
.cf-note {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
}
.cf-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.std-wrap .eyebrow {
  margin: 0;
}
.std-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.std-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink);
}
.std-list svg {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--mint);
}
.how-cta {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.how-cta a {
  font-weight: 700;
  color: var(--ink);
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.how-cta a:hover {
  color: var(--sky-ink);
}

@media (max-width: 1060px) {
  .job-strip {
    --scene-h: 250px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 22px;
  }
  .job-strip::before,
  .job-strip::after {
    display: none;
  }
  .leg-scene,
  .leg + .leg .leg-scene {
    border: 0;
    border-radius: 18px;
    background: var(--band);
    box-shadow: var(--band-shadow);
  }
  .leg:hover .leg-scene {
    background: var(--band);
  }
  .leg-scene::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 40px;
    height: 2px;
    border-radius: 2px;
    background: rgb(159 214 245 / 0.4);
  }
  .leg-call .leg-scene::after {
    background: linear-gradient(90deg, var(--orange), rgb(159 214 245 / 0.4) 60%);
  }
  .leg-copy {
    padding: 22px 6px 0;
  }
  .how-foot {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .job-strip {
    --scene-h: 236px;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .how-foot {
    margin-top: 72px;
  }
}
@media (max-width: 520px) {
  .std-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lou, Oct 2 (iPhone): on phones the home hero's big orange call button moves to the bottom of
   the screen, right above Safari's toolbar: the fixed call bar shows from the first frame, and the
   hero's own button is dropped so there are still only two call options (that bar + the header
   phone). The room it frees gives the text space to breathe; the hero fills the screen so the
   house sits between the text and the call button. Inner pages keep their own hero button and
   the bar still waits until it scrolls away. */
@media (max-width: 640px) {
  .hero .hero-actions {
    display: none;
  }
  .cb-ready:has(.hero) .call-bar {
    transform: none;
    visibility: visible;
    transition: none;
  }
  .hero-stage {
    min-height: calc(100svh - var(--fb-h) - var(--header-h));
  }
  .hero-copy {
    padding-top: clamp(28px, 6svh, 60px);
  }
  .hero-copy .hero-title {
    margin: 16px 0 18px;
  }
  .hero-trust {
    margin-top: 22px;
  }
  .hero-bottom.ticker {
    margin-top: 24px;
    margin-bottom: 52vw;
  }
}
.nowrap {
  white-space: nowrap;
}

/* Master image pass: fixed copy over decoded, crossfading image layers. */
.hero-center .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease-in-out;object-position:72% 50%;}
.hero-center .hero-slide.is-active{opacity:1;}
.image-pass-text-hero{grid-template-columns:1fr;max-width:1000px;}
.svc-mini:not(:has(img)){grid-template-columns:1fr;}
@media(max-width:860px){.hero-center .hero-slide{object-position:70% 50%;}}
@media(prefers-reduced-motion:reduce){.hero-center .hero-slide{transition:none;}.hero-center .hero-slide:not(:first-child){display:none;}.hero-center .hero-slide:first-child{opacity:1;}}

/* ── Oct 3: Justin & Denver feedback ─────────────────────────────────────
   Logo colors through the whole site (Justin: "integrate our colors"): the logo's purple, sky blue,
   green and orange as a brand stripe, gradient headline accents and a purple/blue glow on the dark
   bands. Navy stays the base, so purple accents rather than leads. */
:root {
  --logo-purple: #7616aa;
  --logo-blue: #3bafeb;
  --logo-green: #2e9e64;
  --logo-orange: #f46121;
  --brand-stripe: linear-gradient(90deg, var(--logo-purple) 0%, var(--logo-blue) 36%, var(--logo-green) 66%, var(--logo-orange) 100%);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--brand-stripe);
  pointer-events: none;
}
.site-footer,
.right-now {
  border-top: 4px solid transparent;
  border-image: var(--brand-stripe) 1;
}
h2 em {
  background-image: linear-gradient(90deg, #c9a6ff 0%, var(--mint) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:is(#services, #area, #family, .light, .paper) h2 em {
  background-image: linear-gradient(90deg, #6a1fb0 0%, #2a7fd4 70%);
  color: transparent;
}
@media (forced-colors: active) {
  h2 em,
  :is(#services, #area, #family, .light, .paper) h2 em {
    background: none;
    color: CanvasText;
  }
}
.right-now {
  background:
    radial-gradient(900px 480px at 100% 0%, rgb(118 22 170 / 0.32), transparent 62%),
    radial-gradient(760px 420px at 0% 100%, rgb(59 175 235 / 0.16), transparent 60%),
    var(--deep);
}
#work.deep {
  background:
    radial-gradient(900px 520px at 0% 0%, rgb(118 22 170 / 0.26), transparent 60%),
    radial-gradient(900px 520px at 100% 100%, rgb(59 175 235 / 0.14), transparent 60%),
    var(--deep);
}
#call {
  background:
    radial-gradient(1100px 520px at 88% 12%, rgb(118 22 170 / 0.38) 0%, transparent 62%),
    radial-gradient(900px 460px at 0% 100%, rgb(59 175 235 / 0.18), transparent 60%),
    var(--forest);
}
.how {
  --band: linear-gradient(rgb(93 192 249 / 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(93 192 249 / 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(70% 120% at 100% 0%, rgb(118 22 170 / 0.38), transparent 62%),
    radial-gradient(130% 150% at 0% 0%, #1b4573 0%, #0c2440 42%, #06182b 100%);
}

/* Right-now panel: no to-do steps any more (Denver), just "call first" + the call card */
.right-now {
  padding-block: clamp(56px, 6.5vw, 96px);
}
.right-now .rn-grid {
  align-items: center;
}
.rn-lede {
  margin-top: 18px;
  max-width: 34ch;
}

/* Service pages: "What's included" as names only (Denver: "the description isn't needed") */
.includes.inc-names {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inc-names .inc {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
}
.inc-names .inc h3 {
  margin: 0;
  font-size: 19px;
}
@media (max-width: 1020px) {
  .includes.inc-names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: long stacks become swipe rows (Denver: "a left to right page scroller").
   The next card peeks in from the right so it reads as swipeable. */
@media (max-width: 640px) {
  .includes.inc-names {
    grid-template-columns: minmax(0, 1fr);
  }
  .inc-names .inc {
    padding: 13px 0;
  }
  .swipe {
    display: flex !important;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar {
    display: none;
  }
  .swipe > * {
    flex: 0 0 82%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
  }
  .reveal-ready .swipe [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Cards whose photo the image pass reserves for another page (one photo per location):
   keep them whole instead of leaving an empty photo slot. */
.fam-card:not(:has(img)) {
  grid-template-rows: auto;
}
.fam-card:not(:has(img)) .demo-tag {
  position: static;
  justify-self: start;
  margin: 20px 0 0 22px;
}
.fam-card:not(:has(img))::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--brand-stripe);
}
.svc-mini:not(:has(img))::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background:
    url("img/logo-mark-mono.png") center / 62% no-repeat,
    linear-gradient(135deg, var(--logo-purple), var(--logo-blue));
}

/* Phones: the four standards sit in a compact 2 x 2 instead of a tall list */
@media (max-width: 640px) {
  .std-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
  }
  .std-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0;
    font-size: 14.5px;
  }
  .std-list svg {
    width: 38px;
    height: 38px;
    padding: 9px;
  }
  .swipe:focus-visible {
    outline: 2px solid var(--logo-blue);
    outline-offset: 2px;
  }
}

/* Hero credentials (Lou, Oct 4): license and IICRC on the first screen, as three badges */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero-badges li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 12px;
  background: rgb(6 24 43 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hb-ico {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-purple), var(--logo-blue));
  color: #fff;
}
.hero-badges span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.hero-badges b {
  font: 800 14px/1.15 var(--head);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.hero-badges small {
  font: 500 12px/1.25 var(--body);
  color: rgb(245 243 236 / 0.78);
}
@media (max-width: 640px) {
  .hero-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
  }
  .hero-badges li {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
  }
  .hero-badges span {
    align-items: center;
    text-align: center;
  }
  .hb-ico {
    width: 30px;
    height: 30px;
    padding: 6px;
  }
  .hero-badges b {
    font-size: 13px;
  }
  .hero-badges small {
    font-size: 11px;
  }
}
/* Phones: the hero makes room for the credential badges and keeps the house clear of the strip */
@media (max-width: 640px) {
  .hero-copy {
    padding-top: clamp(20px, 4svh, 44px);
  }
  .hero-copy .hero-title {
    margin: 12px 0 14px;
  }
  .hero-badges {
    margin-top: 16px;
  }
  .hero-bottom.ticker {
    margin-top: 16px;
    margin-bottom: 57vw;
  }
}
/* Short laptop screens (1366x768, 1280x720): the headline scales with the screen height so the
   credential badges never run into the strip at the bottom of the hero. */
@media (min-width: 641px) and (max-height: 900px) {
  .hero-copy {
    padding-top: 24px;
    padding-bottom: 84px;
  }
  .hero-copy .hero-title {
    font-size: min(clamp(46px, 7.4vw, 108px), 10.2vh);
    font-size: min(clamp(46px, 7.4vw, 108px), 10.2svh);
    margin: 12px 0 14px;
  }
  .hero-copy .hero-actions {
    margin-top: 20px;
  }
  .hero-badges {
    margin-top: 14px;
  }
  .hero-badges li {
    padding: 5px 12px 5px 5px;
  }
  .hb-ico {
    width: 30px;
    height: 30px;
    padding: 6px;
  }
}
/* Reduced motion: the strip stops scrolling and wraps to two lines, so short screens leave it more room */
@media (min-width: 641px) and (max-height: 900px) and (prefers-reduced-motion: reduce) {
  .hero-copy {
    padding-bottom: 104px;
  }
  .hero-copy .hero-title {
    font-size: min(clamp(46px, 7.4vw, 108px), 9vh);
    font-size: min(clamp(46px, 7.4vw, 108px), 9svh);
  }
}

/* Lou, Oct 4: five service columns. Desktop: the three emergency cards on top, then Specialty cleaning
   and Construction services as two wide cards (photo left, text right). Phones keep the swipe row. */
@media (min-width: 1021px) {
  .svc-feature.svc-five {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .svc-five > .svc-card {
    grid-column: span 2;
  }
  .svc-five > .svc-cat {
    grid-column: span 3;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  }
  .svc-five > .svc-cat figure {
    height: 100%;
    aspect-ratio: auto;
  }
  .svc-five > .svc-cat figure img {
    height: 100%;
    object-fit: cover;
  }
  .svc-five > .svc-cat .svc-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 641px) and (max-width: 1020px) {
  .svc-five > .svc-cat:last-child {
    grid-column: 1 / -1;
  }
}
/* Thumbnail-less service rows keep the two-column layout (the logo tile stands in for the photo) */
.svc-mini:not(:has(img)) {
  grid-template-columns: 52px minmax(0, 1fr);
}
/* Tablets: the full-width Construction card goes side by side instead of a tall 4:3 photo */
@media (min-width: 641px) and (max-width: 1020px) {
  .svc-five > .svc-cat:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .svc-five > .svc-cat:last-child figure {
    height: 100%;
    aspect-ratio: auto;
    min-height: 220px;
  }
  .svc-five > .svc-cat:last-child .svc-body {
    justify-content: center;
  }
}

/* Lou, Oct 4: insurance help as its own section. The photo gets a slanted edge on wide screens. */
.how-foot.std-only {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1021px) {
  .how-foot.std-only .std-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ins.light {
  background: #fff;
}
.ins-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ins-media {
  margin: 0;
  overflow: hidden;
  border-radius: 18px 0 0 18px;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  background: var(--paper);
}
.ins-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ins-copy .lede {
  margin-top: 16px;
  max-width: 44ch;
}
.ins-list {
  max-width: 520px;
}
.ins-copy .cf-note {
  max-width: 520px;
}
.ins-cta {
  margin-top: 22px;
  color: var(--ink-2);
}
.ins-cta a {
  font-weight: 700;
  color: var(--ink);
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .ins-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ins-media {
    border-radius: 16px;
    clip-path: none;
  }
  .ins-media img {
    aspect-ratio: 16 / 10;
  }
}

/* Lou, Oct 4: the three hero credential badges bigger, spread across the screen as equal columns */
.hero-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin-top: 28px;
}
.hero-badges li {
  gap: 16px;
  padding: 16px 22px 16px 16px;
  border-radius: 16px;
}
.hb-ico {
  width: 52px;
  height: 52px;
  padding: 12px;
}
.hero-badges b {
  font-size: 22px;
}
.hero-badges small {
  font-size: 15px;
}
@media (min-width: 641px) and (max-height: 900px) {
  .hero-badges {
    margin-top: 18px;
    gap: 14px;
  }
  .hero-badges li {
    padding: 11px 18px 11px 11px;
  }
  .hb-ico {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  .hero-badges b {
    font-size: 19px;
  }
  .hero-badges small {
    font-size: 14px;
  }
}
@media (max-width: 640px) {
  .hero-badges {
    gap: 8px;
    margin-top: 18px;
  }
  .hero-badges li {
    padding: 12px 6px;
    gap: 7px;
  }
  .hb-ico {
    width: 40px;
    height: 40px;
    padding: 9px;
  }
  .hero-badges b {
    font-size: 16px;
  }
  .hero-badges small {
    font-size: 12px;
  }
}
/* Very short screens (1280x720, 1024x768): a little less headline so the bigger badges still clear the strip */
@media (min-width: 641px) and (max-height: 780px) {
  .hero-copy .hero-title {
    font-size: min(clamp(46px, 7.4vw, 108px), 8.4vh);
    font-size: min(clamp(46px, 7.4vw, 108px), 8.4svh);
  }
  .hero-badges li {
    padding: 8px 16px 8px 8px;
  }
  .hb-ico {
    width: 40px;
    height: 40px;
    padding: 9px;
  }
}
@media (max-width: 640px) {
  .hero-bottom.ticker {
    margin-bottom: 61vw;
  }
}
/* Wide screens: the badge row spreads out but stops short of the house on the right of the photo */
@media (min-width: 861px) {
  .hero-badges {
    max-width: min(880px, 56vw);
  }
}
@media (min-width: 641px) and (max-width: 1100px) and (max-height: 780px) and (prefers-reduced-motion: reduce) {
  .hero-copy {
    padding-bottom: 118px;
  }
}

/* Lou, Oct 4: numbers band (like the competitor's), Brilliant's own figures */
.stats-band {
  background: var(--paper);
  padding-block: clamp(48px, 6vw, 80px);
}
.stats-card {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(12 30 50 / 0.05), 0 24px 60px -36px rgb(12 30 50 / 0.35);
  text-align: center;
}
.stats-title {
  font: 700 clamp(26px, 2.6vw, 36px) / 1.1 var(--head);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
.stats-lede {
  max-width: 62ch;
  margin: 12px auto 0;
  color: var(--ink-2);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.st-ico {
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  color: var(--logo-purple);
  stroke-width: 1.6;
}
.stats strong {
  font: 800 clamp(36px, 4vw, 52px) / 1 var(--head);
  letter-spacing: -0.03em;
  background-image: linear-gradient(90deg, #6a1fb0 0%, #2a7fd4 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats span {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.stats-note {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--ink-3);
}
@media (forced-colors: active) {
  .stats strong {
    background: none;
    color: CanvasText;
  }
}
@media (max-width: 760px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
  }
}

/* Full-color badge art (Oct 4): no tinted circle behind it any more */
.hero-badges .hb-ico {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35));
}
@media (min-width: 641px) and (max-height: 900px) {
  .hero-badges .hb-ico {
    width: 46px;
    height: 46px;
  }
}
@media (min-width: 641px) and (max-height: 780px) {
  .hero-badges .hb-ico {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 640px) {
  .hero-badges .hb-ico {
    width: 42px;
    height: 42px;
  }
}

/* Lou, Oct 4: the call card leads with an urgent quote instead of the big number (the button carries it) */
.cc-quote {
  position: relative;
  margin: 14px 0 22px;
  padding: 0 0 0 30px;
}
.cc-quote::before {
  content: "\201C";
  position: absolute;
  left: -4px;
  top: -14px;
  font: 800 64px/1 var(--head);
  background-image: linear-gradient(180deg, var(--orange), #ffb04a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.call-card .cc-quote p {
  margin: 0;
  font: 700 clamp(20px, 1.9vw, 25px) / 1.25 var(--head);
  letter-spacing: -0.015em;
  color: var(--cream);
}
.cc-quote footer {
  margin-top: 10px;
  font: 600 12px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.cc-quote footer::before {
  content: "\2014\00a0";
}
/* Lou, Oct 4: the logo watermark on the call card a bit more visible; quote mark gets its own space */
.call-card::after {
  right: -34px;
  top: -30px;
  width: 250px;
  height: 250px;
  opacity: 0.17;
}
.cc-quote {
  padding-left: 40px;
}
.cc-quote::before {
  left: 0;
}

/* Lou, Oct 4: "Rapid response — call now" under the quote, with a pulsing dot */
.cc-quote {
  margin-bottom: 12px;
}
.cc-urgent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px 40px;
  font: 700 13px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.cc-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgb(244 106 18 / 0.6);
}
@keyframes cc-pulse {
  0% { box-shadow: 0 0 0 0 rgb(244 106 18 / 0.6); }
  70% { box-shadow: 0 0 0 10px rgb(244 106 18 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(244 106 18 / 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cc-dot {
    animation: cc-pulse 1.8s ease-out infinite;
  }
}
.call-card .cc-urgent {
  color: var(--orange);
}
@media (max-width: 640px) {
  .call-card .cc-urgent {
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

/* Lou, Oct 4: all five service cards the same size: same width, same 4:3 photo, same height.
   Desktop: three across, the last two centered under them. Tablet: two across, the fifth centered. */
.svc-five > .svc-card,
.svc-five > .svc-cat {
  display: flex;
  flex-direction: column;
}
.svc-five > .svc-cat figure,
.svc-five > .svc-cat:last-child figure {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
}
.svc-five > .svc-cat figure img {
  height: 100%;
}
.svc-five > .svc-cat .svc-body,
.svc-five > .svc-cat:last-child .svc-body {
  justify-content: flex-start;
}
.svc-five .svc-body .svc-more {
  margin-top: auto;
}
@media (min-width: 1021px) {
  .svc-feature.svc-five {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
  .svc-five > .svc-card,
  .svc-five > .svc-cat {
    grid-column: span 2;
  }
  .svc-five > :nth-child(4) {
    grid-column: 2 / span 2;
  }
  .svc-five > :nth-child(5) {
    grid-column: 4 / span 2;
  }
}
@media (min-width: 641px) and (max-width: 1020px) {
  .svc-feature.svc-five {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
  .svc-five > .svc-card,
  .svc-five > .svc-cat,
  .svc-five > .svc-cat:last-child {
    grid-column: span 2;
  }
  .svc-five > :nth-child(5),
  .svc-five > .svc-cat:last-child {
    grid-column: 2 / span 2;
  }
}
.svc-five > .svc-cat:last-child {
  display: flex;
  flex-direction: column;
}

/* Lou, Oct 4: the five service cards smaller and all side by side.
   Wide screens: one row of five. Tablets: one row that scrolls sideways (like phones). */
@media (min-width: 1180px) {
  .svc-feature.svc-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
  }
  .svc-five > .svc-card,
  .svc-five > .svc-cat,
  .svc-five > :nth-child(4),
  .svc-five > :nth-child(5) {
    grid-column: auto;
  }
}
@media (min-width: 641px) and (max-width: 1179px) {
  .svc-feature.svc-five {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .svc-feature.svc-five::-webkit-scrollbar {
    display: none;
  }
  .svc-five > .svc-card,
  .svc-five > .svc-cat,
  .svc-five > .svc-cat:last-child {
    flex: 0 0 31%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .reveal-ready .svc-five [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* smaller card content */
.svc-five .svc-body {
  gap: 7px;
  padding: 16px 18px 18px;
}
.svc-five .svc-body .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
.svc-five .svc-body h3 {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.15;
}
.svc-five .svc-body p {
  font-size: 14px;
  line-height: 1.45;
}
.svc-five .svc-more {
  font-size: 13.5px;
  padding-top: 6px;
}

/* Lou, Oct 4: the five service cards in ONE row that scrolls left to right at every size,
   with arrow buttons on wider screens. The next card peeks in so the row reads as scrollable. */
@media (min-width: 641px) {
  .svc-feature.svc-five {
    display: flex;
    gap: 18px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .svc-feature.svc-five::-webkit-scrollbar {
    display: none;
  }
  .svc-five > .svc-card,
  .svc-five > .svc-cat,
  .svc-five > .svc-cat:last-child,
  .svc-five > :nth-child(4),
  .svc-five > :nth-child(5) {
    flex: 0 0 clamp(250px, 27vw, 330px);
    grid-column: auto;
    min-width: 0;
    scroll-snap-align: start;
  }
  .reveal-ready .svc-five [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-feature.svc-five {
    scroll-behavior: auto;
  }
}
.svc-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 14px;
}
.svc-nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.svc-nav button:hover:not(:disabled) {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.svc-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.svc-nav svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 640px) {
  .svc-nav {
    display: none;
  }
}
@media (min-width: 641px) {
  .svc-feature.svc-five {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }
}

/* Lou, Oct 4: demos hidden. The top bar keeps only the credentials line on wide screens and disappears on
   phones (it would be empty there), so the hero math drops its height too. */
.no-demos .family-bar .wrap {
  justify-content: flex-end;
}
@media (max-width: 860px) {
  body.no-demos {
    --fb-h: 0px;
  }
  .no-demos .family-bar {
    display: none;
  }
}

/* Lou, Oct 4: header tagline in the logo's service colors: Cleaning green (mold), Restoration red (fire) */
.brand .bt-clean {
  color: #3fbf7f;
}
.brand .bt-rest {
  color: #ff5a4e;
}
/* Lou, Oct 4: the "Brilliant" wordmark in the header in the brand orange */
.site-header .brand strong {
  color: var(--orange);
}

/* Lou, Oct 4: the service-card section on navy (home and city pages); the white cards sit on top */
#services,
#city-services {
  background:
    radial-gradient(900px 520px at 100% 0%, rgb(118 22 170 / 0.24), transparent 60%),
    radial-gradient(800px 460px at 0% 100%, rgb(59 175 235 / 0.14), transparent 60%),
    var(--forest);
  color: var(--cream);
}
#services .section-head h2,
#city-services .section-head h2 {
  color: var(--cream);
}
#services .section-head h2 em,
#city-services .section-head h2 em {
  background-image: linear-gradient(90deg, #c9a6ff 0%, var(--mint) 70%);
  color: transparent;
}
#services .section-head .lede,
#city-services .section-head .lede {
  color: #c9d6e3;
}
#services .section-head .eyebrow,
#city-services .section-head .eyebrow {
  color: var(--mint);
}
#services .svc-nav button,
#city-services .svc-nav button {
  border-color: rgb(255 255 255 / 0.25);
}
/* the list under the cards is gone, so the section ends closer to them */
#services,
#city-services {
  padding-bottom: clamp(48px, 5.5vw, 80px);
}

/* Lou, Oct 4: the phone number never splits across lines ("(417) 726-" / "9093") on any call button */
.btn-call strong {
  white-space: nowrap;
}
/* the call card under each service and city page: on phones the button gets the card's full width
   and the same 16px text as the sticky call bar, so "Call 24/7 · (417) 726-9093" stays on one line */
@media (max-width: 640px) {
  .cta-band {
    padding-inline: 22px;
  }
  .cta-band .btn {
    flex: 1 1 100%;
    padding-inline: 16px;
    font-size: 16px;
  }
}
/* very narrow phones (under 360px): the other big call buttons tighten up the same way */
@media (max-width: 359px) {
  .btn-call.btn-big {
    padding-inline: 16px;
    font-size: 16px;
  }
}

/* Lou, Oct 4: a much narrower edge fade on the scrolling service row (the full-gutter fade was dimming
   the last visible card), and no "… →" link line on its cards: the whole card is already the link. */
@media (min-width: 641px) {
  .svc-feature.svc-five {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
}
.svc-five .svc-more {
  display: none;
}

/* Lou, Oct 5: towns line above "Trusted by your neighbors…", in the darker sky blue so it reads on the white card */
.stats-card .stats-places {
  margin-bottom: 12px;
  color: var(--sky-ink);
}
/* centered, so it gets a matching dash on the right */
.stats-card .stats-places::after {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

/* Lou, Oct 5: "Life happens." and "Brilliant." in the same purple-to-blue gradient as "We handle the cleanup."
   ("Come back" stays orange). A text-shadow would paint over gradient text, so these two lines use a drop-shadow. */
.hero-copy .hero-title .ht-grad {
  display: inline-block;
  background-image: linear-gradient(90deg, #c9a6ff 0%, var(--mint) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 18px rgb(0 0 0 / 0.4));
}
@media (forced-colors: active) {
  .hero-copy .hero-title .ht-grad {
    background: none;
    color: CanvasText;
    filter: none;
  }
}

/* ── GREEN PREVIEW (Lou, Oct 5) ─────────────────────────────────────────────
   Not on the feedback-oct3 draft yet; published to the green-preview alias for review. Delete this block to undo.
   The logo's green finishes every headline gradient (purple → blue → green, the logo's order) and colors the
   section labels. Two greens, matched by lightness so they blend: --leaf beside the sky blue on dark backgrounds,
   --leaf-ink beside the blue ink on light ones. Service-card labels keep their per-service colors. */
:root {
  --leaf: #5fd39a;     /* OKLCH L .79, like the lavender and sky blue; 8.4:1 on navy */
  --leaf-ink: #1a7a4a; /* logo green, darkened to the blue labels' lightness; 5.3:1 on white, 4.9:1 on paper */
}
h2 em,
.hero-copy .hero-title .ht-grad,
#services .section-head h2 em,
#city-services .section-head h2 em {
  background-image: linear-gradient(90deg, #c9a6ff 0%, var(--mint) 50%, var(--leaf) 100%);
}
:is(#area, #family, .light, .paper) h2 em {
  background-image: linear-gradient(90deg, #6a1fb0 0%, #2a7fd4 50%, var(--leaf-ink) 100%);
}
.eyebrow:not(.svc-body *) {
  color: var(--leaf);
}
:is(#area, #family, .light, .paper) .eyebrow:not(.svc-body *),
.stats-card .stats-places {
  color: var(--leaf-ink);
}
#services .section-head .eyebrow,
#city-services .section-head .eyebrow {
  color: var(--leaf);
}
/* ── end GREEN PREVIEW ── */

/* Lou, Oct 5: all the service-area towns on one line (smaller print), and the headline in the same
   purple-to-blue gradient as the numbers under it. Phones can't fit the towns on one line, so they split
   cleanly: Missouri first, then Kansas / Oklahoma / Arkansas. */
.stats-card .stats-places {
  font-size: 11px;
  letter-spacing: 0.12em;
}
.stats-places .sp-br {
  display: none;
}
@media (max-width: 767px) {
  .stats-card .stats-places {
    font-size: 10.5px;
    line-height: 1.8;
  }
  .stats-card .stats-places::before,
  .stats-card .stats-places::after,
  .stats-places .sp-sep {
    display: none;
  }
  .stats-places .sp-br {
    display: inline;
  }
}
.stats-card .stats-title {
  width: fit-content;
  margin-inline: auto;
  background-image: linear-gradient(90deg, #6a1fb0 0%, #2a7fd4 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .stats-card .stats-title {
    background: none;
    color: CanvasText;
  }
}

/* ── Lou, Oct 8: Roofing and Construction joined the top menu (seven links). Every label stays on one line,
   spacing tightens on smaller laptops, and the Menu button takes over below 1280px instead of 860px. ── */
.main-nav a,
.header-call { white-space: nowrap; }
@media (max-width: 1560px) {
  .main-nav { gap: 2px; }
  .main-nav a { padding: 10px 9px; font-size: 14.5px; }
}
@media (max-width: 1400px) and (min-width: 1281px) {
  .header-call .hc-label { display: none; }
}
@media (max-width: 1280px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--forest);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 18px 30px rgb(0 0 0 / 0.3);
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 17px;
    border-bottom: 1px solid var(--line-dark);
  }
  .menu-btn { display: inline-flex; }
  .header-call { margin-left: auto; }
}

/* ── Lou, Oct 9: "starting at services highlight all of those in orange". Top menu links in the brand orange
   (5.1:1 on the navy header); hover brightens, and the current page gets an orange underline. ── */
.main-nav a { color: var(--orange); }
.main-nav a:hover { color: #ff9a52; background: rgb(244 106 18 / 0.1); }
.main-nav a[aria-current="page"] { color: #ff9a52; box-shadow: inset 0 -2px 0 var(--orange); }

/* ── Lou, Oct 9: "I need a financing option on the main Brilliant page too". A navy financing card right under
   the numbers band, matching the Roofing and Construction "Need financing?" cards. Colors are set here because the
   section sits on the light paper background but the card is dark. ── */
#financing.fin-section { padding-block: 0 clamp(40px, 6vw, 80px); background: var(--paper); scroll-margin-top: calc(var(--header-h) + 12px); }
.fin-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 22px;
  background:
    radial-gradient(700px 380px at 100% 0%, rgb(118 22 170 / 0.32), transparent 60%),
    radial-gradient(600px 360px at 0% 100%, rgb(59 175 235 / 0.18), transparent 60%),
    var(--forest);
  color: var(--cream);
  box-shadow: 0 30px 60px -34px rgb(6 24 43 / 0.55);
}
.fin-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-stripe); }
.fin-top { display: flex; align-items: center; gap: 14px; margin: 0; }
.fin-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2e9e64, #3bafeb);
  color: #fff;
}
.fin-icon svg { width: 26px; height: 26px; }
#financing .fin-card .eyebrow { color: var(--leaf, var(--mint)); }
#financing .fin-card h2 { margin: 16px 0 0; font-size: clamp(32px, 3.6vw, 50px); color: var(--cream); }
#financing .fin-card h2 em {
  background-image: linear-gradient(90deg, #c9a6ff 0%, var(--mint) 50%, var(--leaf, var(--mint)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#financing .fin-card .lede { margin-top: 16px; color: #c9d6e3; }
.fin-ticks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fin-ticks li { display: flex; align-items: flex-start; gap: 10px; color: #e6edf4; font-size: 16px; line-height: 1.4; }
.fin-ticks svg { flex: none; width: 20px; height: 20px; color: #3fbf7f; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fin-actions .btn { flex: 1 1 auto; }
.fin-actions .btn-call { flex-basis: 100%; }
.fin-fine { margin-top: 14px; color: #93a7bc; font-size: 13px; }
@media (max-width: 860px) {
  .fin-card { grid-template-columns: minmax(0, 1fr); }
  .fin-actions .btn { flex-basis: 100%; }
}
/* Oct 9, Lou: "Filing a claim?" now sits right under "Need financing?"; a little less air between them. */
#financing + #insurance { padding-top: clamp(48px, 6vw, 88px); }

/* ── Oct 14: local sections on town pages + footer address ───────────────── */
.local-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: start;
}
.local-single { max-width: 900px; }
.local-copy { margin-top: 22px; }
.local-copy h3 { margin-top: 26px; font-size: clamp(19px, 1.8vw, 23px); }
.local-copy h3:first-child { margin-top: 0; }
.local-copy h3 + p { margin-top: 8px; }
.local-side { display: grid; gap: 20px; }
.local-review {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 24px 26px;
}
.local-review blockquote, .local-review figcaption { color: var(--ink); }
.local-links {
  border: 1px solid rgba(244, 240, 228, 0.18);
  border-radius: 14px;
  padding: 22px 24px;
}
.local-links ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.local-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-addr { margin-top: 6px; }
@media (max-width: 860px) {
  .local-grid { grid-template-columns: 1fr; }
}

/* ── Oct 14: homepage-style hero on town and Springfield service pages ───── */
.hero-page .hero-stage {
  height: clamp(520px, 72svh, 780px);
  min-height: 0;
}
.hero-page .hero-copy {
  container-type: inline-size;
}
.hero-page .hero-copy > * {
  max-width: min(100%, 860px);
}
.hero-page .hero-title {
  font-size: min(clamp(40px, 5.6vw, 84px), calc(100cqi / var(--fit, 7)));
  line-height: 0.98;
}
.hero-page .hero-copy .eyebrow {
  color: var(--mint-2);
}
@media (min-width: 641px) and (max-width: 860px) {
  .hero-page .hero-stage {
    height: clamp(560px, 80svh, 760px);
  }
}
@media (max-width: 640px) {
  .hero-page .hero-stage {
    height: auto;
  }
  .hero-page .hero-title {
    font-size: min(9.4vw, calc(100cqi / var(--fit, 7)));
  }
  /* like the homepage: the photo shows below the buttons */
  .hero-page .hero-copy {
    padding-bottom: 56vw;
  }
}
/* Tablet widths center the copy over the whole photo, so busy location images get a stronger shade. */
@media (min-width: 641px) and (max-width: 860px) {
  .hero-page .hero-center .shade {
    background: linear-gradient(180deg, rgb(6 24 43 / 0.62) 0%, rgb(6 24 43 / 0.58) 55%, rgb(6 24 43 / 0.85) 100%);
  }
}
/* Oct 14 (Lou: "uneven"): the current-page crumb gets the same 4px padding as the linked crumbs, so all sit on one line. */
.crumbs li[aria-current="page"] {
  padding-block: 4px;
}

/* ── Oct 14 (Lou: "Can we make the logo like this"): header wordmark after Lou's reference image ──
   Cream "Brilliant" with an orange edge; a bolder, larger tagline in green / blue / orange. */
.site-header .brand strong {
  color: #f7f1e3;
  font-weight: 700;
  text-shadow: 1.5px 1.5px 0 #e8641c, 0 0 1px rgb(232 100 28 / 0.55);
}
.site-header .brand small {
  font: 800 13px/1 var(--head);
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.brand .bt-clean { color: #22c97f; }
.brand .bt-amp { color: #2fa9ee; }
.brand .bt-rest { color: #ff7b1c; }
@media (min-width: 861px) {
  .site-header .brand strong { font-size: 34px; }
}
@media (max-width: 860px) {
  .site-header .brand strong { font-size: 27px; }
  .site-header .brand small { font-size: 11px; margin-top: 6px; }
}
@media (max-width: 480px) {
  .site-header .brand strong { font-size: 24px; text-shadow: 1px 1px 0 #e8641c; }
  .site-header .brand small { font-size: 9.5px; letter-spacing: 0.03em; }
}

/* Oct 14 (Lou: "move the IICRC certified thing into the top right hand corner next to the call button so it scrolls
   with the page"): the badge lives in the sticky header, right of Call now, on every page. Same badge as the truck wrap. */
.header-badge {
  flex: none;
  width: 68px;
  height: 68px;
  margin-left: -6px;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.45));
}
@media (max-width: 860px) {
  .header-badge { width: 44px; height: 44px; margin-left: -2px; }
}
/* Oct 14: the header button no longer shows the number, so "Call now" shows at every width above phones. */
@media (min-width: 641px) {
  .header-call .hc-label { display: inline; }
}
/* Oct 15, Lou: "See what we handle" in the blue-to-purple of the Licensed shield badge (#3bafeb → #7616aa).
   Keeps .btn-ghost so the phone rule that hides it still applies. */
.btn-ghost.btn-violet {
  background: linear-gradient(120deg, #3bafeb -15%, #7616aa 75%);
  background-origin: border-box; /* else the gradient tiles under the 2px transparent border: blue sliver at the right edge */
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.btn-ghost.btn-violet:hover {
  background: linear-gradient(120deg, #4cbaf0 -15%, #8a24c2 75%);
  background-origin: border-box;
  border-color: transparent;
  color: #fff;
}
/* Oct 15, Lou: "two pages back to back are the same color... don't they switch?" With financing hidden, the numbers
   band and "Filing a claim?" were both light. The claim section is now a navy card on paper (the look the financing
   card had), so light and dark alternate again. build.py switches back to the light version when SHOW_FINANCING returns. */
.ins.ins-dark { background: var(--paper); padding-block: 0 clamp(56px, 7vw, 96px); }
.ins-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 22px;
  background:
    radial-gradient(700px 380px at 100% 0%, rgb(118 22 170 / 0.32), transparent 60%),
    radial-gradient(600px 360px at 0% 100%, rgb(59 175 235 / 0.18), transparent 60%),
    var(--forest);
  color: var(--cream);
  box-shadow: 0 30px 60px -34px rgb(6 24 43 / 0.55);
}
.ins-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-stripe); }
.ins-dark .ins-media { border-radius: 14px 0 0 14px; background: rgb(255 255 255 / 0.06); }
.ins-dark .cf-items { border-top-color: rgb(255 255 255 / 0.14); }
.ins-dark .cf-items li { color: #e6edf4; border-bottom-color: rgb(255 255 255 / 0.14); }
.ins-dark .cf-items svg { background: rgb(255 255 255 / 0.08); color: #7cc8f2; }
.ins-dark .cf-items .cf-ok { background: none; color: #3fbf7f; }
.ins-dark .cf-note { color: #93a7bc; }
.ins-dark .ins-cta { color: #c9d6e3; }
.ins-dark .ins-cta a { color: var(--cream); }
/* Oct 15, Lou: "two pages back to back are the same color". Customer reviews and the FAQ are both white; where they
   meet (town pages: reviews then FAQ; Springfield service pages: FAQ then reviews) the second one turns cream. */
[aria-labelledby="reviews-title"] + #faq,
#faq + [aria-labelledby="reviews-title"] { background: var(--paper); }
/* Oct 15 slop pass: at 861–1180px the badge row was only ~480–660px wide, so "Licensed" was cut to "License".
   A little more room and slightly smaller badges in that range only. */
@media (min-width: 861px) and (max-width: 1180px) {
  .hero-badges { max-width: min(880px, 62vw); }
  .hero-badges li { gap: 10px; padding: 10px 12px 10px 10px; }
  .hero-badges .hb-ico { width: 40px; height: 40px; }
  .hero-badges b { font-size: 16px; }
  .hero-badges small { font-size: 13px; }
}
/* ── Oct 15 slop pass (Lou: "check every page for slop... this looks uneven") ── */
/* Phone numbers never split across two lines */
a[href^="tel:"] { white-space: nowrap; }
/* Home call section: the town line sat right under "Day or night." */
#call h2 + .lede { margin-top: 16px; }
/* Contact: image_pass's text-hero rule made the top a centered 1000px column, 100px in from every other left edge,
   with the right half empty. Two columns again: call details left, "Have this ready" right. */
.ph-grid.image-pass-text-hero { max-width: none; }
@media (min-width: 861px) {
  .ph-grid.image-pass-text-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
/* Two hero badges (Construction, with financing hidden) share the row instead of leaving an empty third slot */
.hero-badges:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Wide screens: badge captions wrapped unevenly ("IICRC / Certified / technicians"). A bit more room, smaller caption. */
@media (min-width: 1181px) {
  .hero-badges { max-width: min(880px, 62vw); }
  .hero-badges small { font-size: 14px; }
}
/* Roofing: the headline and intro sat on bright trees and a lime shirt. A deeper shade behind the copy. */
@media (min-width: 861px) {
  .roof-hero .hero-center .shade, .box-hero .hero-center .shade { background: linear-gradient(90deg, rgb(6 24 43 / 0.9) 0%, rgb(6 24 43 / 0.74) 45%, rgb(6 24 43 / 0.2) 78%); }
}
@media (max-width: 860px) {
  .roof-hero .hero-center .shade, .box-hero .hero-center .shade { background: linear-gradient(180deg, rgb(6 24 43 / 0.8) 0%, rgb(6 24 43 / 0.74) 55%, rgb(6 24 43 / 0.45) 80%, rgb(6 24 43 / 0.65) 100%); }
}
/* Roofing and Construction eyebrows: on phones the place list breaks to a second line without a stray "·" */
.ey-br { display: none; }
@media (max-width: 640px) {
  .ey-sep { display: none; }
  .ey-br { display: inline; }
  /* "ROOFS DONE / RIGHT." left "RIGHT." alone on a line */
  .roof-hero .hero-copy .hero-title, .box-hero .hero-copy .hero-title { font-size: min(32px, 8.4vw); }
}
/* Service pages (Oct 15 slop pass) */
/* The orange call card sat flush against the white reviews section; its heading crowded the line under it. */
.cta-sec { padding-block: 0 clamp(72px, 9vw, 120px); }
:is(.light, .paper, #faq, [aria-labelledby="reviews-title"]) + .cta-sec { padding-top: clamp(56px, 7vw, 96px); }
.cta-band p { margin-top: 16px; }
/* Breadcrumbs: on phones a wrapped line started with a stray "/". The separator now trails the item before it. */
.crumbs li + li::before { content: none; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #6f897a; }
/* "What's included": 01 is narrower than 02–09, so its title sat a few pixels left of the rest */
.inc .n { font-variant-numeric: tabular-nums; }
/* Roofing box on the Storm page: solid edge (the dashed one read as a placeholder) and a normal-case heading */
.tie { border-style: solid; border-color: rgb(244 240 228 / 0.16); }
.tie h3 { text-transform: none; }
.tie img { object-position: 50% 20%; }
/* Insurance card: as much cream below it as above (the shadow was cut off by the FAQ on phones) */
.ins.ins-dark { padding-bottom: clamp(72px, 9vw, 128px); }
/* Town pages (Oct 15 slop pass) */
/* "Up close" is light on town pages (build.py), so its cards get a white face */
.light .local-review { background: #fff; box-shadow: 0 1px 2px rgb(6 24 43 / 0.05), 0 18px 40px -26px rgb(6 24 43 / 0.3); }
.light .local-links { border-color: var(--line); background: #fff; }
/* The short card on the right sat at the top with ~300px of empty space under it */
.local-grid { align-items: center; }
/* Webb City and Neosho (no side card) started 150px in from every other section's left edge */
.wrap.local-single { max-width: none; }
.local-single > * { max-width: 900px; }
/* Hero intro ran across the house in the photo; the small credentials line washed out over bright spots */
@media (min-width: 861px) { .hero-page .hero-copy > .lede { max-width: 44ch; } }
.hero-page .hero-trust { text-shadow: 0 1px 3px rgb(6 24 43 / 0.85), 0 0 12px rgb(6 24 43 / 0.6); }
/* Photo captions keep light text on their dark pill, even inside a light section (Construction's commercial section) */
.ph-media figcaption { color: #eef3f8; }
/* Oct 15, Lou: "make the 'book consultation' button the same purple ... a consistent purple button across all pages".
   Every secondary (ghost) button, the one beside an orange Call now, uses the Licensed-shield gradient on every page and
   background: heroes, payment cards, the commercial section and the Storm page's roofing box. Orange = call, purple = the
   other choice. Same look as .btn-violet; .btn-ghost keeps the phone rule that hides the hero one. */
.btn.btn-ghost,
.light .btn.btn-ghost,
.btn.btn-ghost.dark {
  background: linear-gradient(120deg, #3bafeb -15%, #7616aa 75%);
  background-origin: border-box;
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.btn.btn-ghost:hover,
.light .btn.btn-ghost:hover,
.btn.btn-ghost.dark:hover {
  background: linear-gradient(120deg, #4cbaf0 -15%, #8a24c2 75%);
  background-origin: border-box;
  border-color: transparent;
  color: #fff;
}
/* Oct 15, Lou: "make the whole roofing button highlighted to show what page they're on". The current page's menu item
   is a filled pill in the secondary-button purple, not just an underline. Services lights up on service pages,
   Service area on town pages, Roofing, Construction and Contact on their own pages. */
.main-nav a[aria-current="page"] {
  background: linear-gradient(120deg, #3bafeb -15%, #7616aa 75%);
  color: #fff;
  box-shadow: none;
  border-radius: 8px;
}
.main-nav a[aria-current="page"]:hover {
  background: linear-gradient(120deg, #4cbaf0 -15%, #8a24c2 75%);
  color: #fff;
}
/* Oct 15: an eighth menu item ("Containers & Dumpsters") made the header wider than the screen at 1281–1440px and
   around 1561px. The Menu button now takes over below 1481px (was 1281px), and the tighter link spacing runs up to
   1700px (was 1560px). Same dropdown styles as the max-width 1280px block above. */
@media (min-width: 1281px) and (max-width: 1480px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--forest);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 18px 30px rgb(0 0 0 / 0.3);
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 17px;
    border-bottom: 1px solid var(--line-dark);
  }
  .menu-btn { display: inline-flex; }
  .header-call { margin-left: auto; }
}
@media (min-width: 1561px) and (max-width: 1700px) {
  .main-nav { gap: 2px; }
  .main-nav a { padding: 10px 9px; font-size: 14.5px; }
}
/* Contact (Oct 15, Lou: "that whole page looks done poorly ... make WE ANSWER 24/7 into orange, and add a hero image").
   The top section sits on a photo under a navy fade (dark on the left where the copy is); "We answer 24/7." is orange. */
.contact-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 112px); }
/* picture is display:contents site-wide, so the photo itself is positioned */
.contact-hero .ch-bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 22%; }
.contact-hero .ch-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(6 24 43 / 0.94) 0%, rgb(6 24 43 / 0.8) 45%, rgb(6 24 43 / 0.36) 100%);
}
.contact-hero h1 em { color: var(--orange); white-space: nowrap; }
/* "WE ANSWER 24/7." is ~9.3em wide: size the headline to its column so "24/7." never drops to a line of its own */
.contact-hero h1 { font-size: min(clamp(42px, 5.6vw, 84px), calc(100cqi / 9.6)); }
@media (max-width: 640px) { .contact-hero h1 { font-size: min(clamp(32px, 9.6vw, 42px), calc(100cqi / 9.6)); } }
.contact-hero .have-ready {
  padding: 26px 28px;
  border-radius: 0 14px 14px 0;
  background: rgb(6 24 43 / 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 860px) {
  .contact-hero .ch-shade { background: linear-gradient(180deg, rgb(6 24 43 / 0.9) 0%, rgb(6 24 43 / 0.82) 100%); }
}