/* Signal design system, picked by the client 2026-10-21: loud, like the logo.
   Neutral black, grey and white since 2026-10-22, matching the client's brand colors (red, light
   grey, black and white); the first version's warm browns read as brown next to the red.
   Archivo throughout, with condensed Black headlines in uppercase. Squared 6px buttons and
   fields, as in the R2·3c hero; 8px corners on cards. Matches the end-state design.
   --red is the logo's red darkened to pass contrast: white on it is 5.8:1. It's for fills and
   accents only; red text on --ground fails AA. The logo keeps its own #FC0204 (--logo-red), used
   only on the logo and the handset mark.
   The cord: a phone cord runs down a rail on the left of every section, coiling where each one
   starts. It drops from a red dot under the hero and ends at the logo's phone beside the number. */
:root {
  --ground: #121212;
  --surface: #1C1C1C;
  --text: #F5F5F5;
  --grey: #ABABAB;
  --text-2: #E2E2E2; /* body copy on dark */
  --paper: #F2F2F2; /* the light section */
  --ink-2: #585858; /* secondary text on paper */
  --red: #CC0F0F;
  --logo-red: #FC0204;

  --line: color-mix(in srgb, var(--text) 12%, transparent);

  --font: "Archivo", system-ui, sans-serif;
  --gutter: 16px;
  --max: 1296px;
  --pad: 72px; /* section padding; the cord spans it */
  --rail: 24px;
  --rail-gap: 14px;
  --radius: 8px;
  --radius-control: 6px; /* buttons and form fields */
  --call-bar: 64px;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--call-bar) + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  font-stretch: 75%;
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.25rem); }
h2 { font-size: clamp(2.5rem, 5vw, 3.75rem); }
h3 { font-size: 1.6rem; line-height: 1; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { max-width: 680px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.4em;
  border-radius: var(--radius-control);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--red) 88%, #000); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--grey); }
/* On the light section */
.section-light .btn-dark { background: var(--ground); color: var(--text); }
.btn-dark:hover { background: #2A2A2A; }
.btn-outline { border-color: color-mix(in srgb, var(--ground) 35%, transparent); color: var(--ground); }
.btn-outline:hover { border-color: var(--ground); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 16px 28px; min-height: 64px; }
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-stretch: 75%;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
}
.wordmark span { color: var(--grey); font-weight: 500; }
.handset { width: 36px; height: 15px; fill: var(--logo-red); flex: none; }
.site-nav { display: none; margin-left: auto; gap: 4px 28px; font-weight: 600; }
.site-nav a, .menu nav a { text-decoration: none; }
.site-nav a { padding-block: 6px; }
.site-nav a:hover, .site-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--red); }
.header-call { display: none; min-height: 44px; padding-block: 0.4em; }

/* Phone menu: a disclosure, so it works without scripts */
.menu { margin-left: auto; }
.menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--text) 35%, transparent);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu nav {
  position: absolute;
  inset: 100% 0 auto;
  display: grid;
  padding: 8px var(--gutter) 16px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.15rem;
}
.menu nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu nav a:last-child { border-bottom: 0; }

/* Hero: their drone footage behind the page, full color inside Ohio and muted around it.
   Layers, back to front: the video, a shade under the copy, then the mark's mute and window
   layers (z-index -1, so they stay under the copy), then the copy and the phone. Nothing
   between .hero and those layers may form a stacking context, or they'd cover the copy. */
.hero { position: relative; isolation: isolate; overflow: clip; padding-block: 24px 64px; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.05);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ground) 55%, transparent), color-mix(in srgb, var(--ground) 25%, transparent) 45%, transparent 70%);
}
.hero-inner { display: grid; gap: 32px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-copy > * { margin: 0; }
.hero h1 { font-size: clamp(2.75rem, 5.2vw, 4.75rem); }
.hero .lede { color: var(--text-2); }
.hero-mark { position: relative; width: 100%; max-width: 880px; aspect-ratio: 1263 / 941; justify-self: center; }
.hero-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mark-mute { z-index: -1; mix-blend-mode: saturation; opacity: 0.85; }
.mark-window { z-index: -1; }
.mark-fade { display: none; }
.eyebrow {
  color: var(--grey);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lede { color: var(--grey); font-size: 1.15rem; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.actions .btn { flex: 1 1 220px; }

/* Proof band: the cord starts here */
.proof-band { border-block: 1px solid var(--line); padding-block: 22px; }
.proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 40px;
  color: var(--text-2);
  font-weight: 600;
}

/* The cord */
.cord {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--rail-gap);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.rail { position: relative; }
.rail::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) / 2 - 1px);
  width: 2px;
  top: calc(-1 * var(--pad));
  bottom: calc(-1 * var(--pad));
  background: var(--cord, color-mix(in srgb, var(--text) 32%, transparent));
}
.coil { position: absolute; left: 0; top: 0; width: var(--rail); height: calc(var(--rail) * 30 / 7); }
.coil rect { fill: var(--bg); }
.coil path { fill: none; stroke: var(--coil, color-mix(in srgb, var(--text) 70%, transparent)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proof-band .rail::before { top: -23px; bottom: -23px; }
.rail-start::before { top: 50%; bottom: -23px; }
.rail-start::after {
  content: "";
  position: absolute;
  left: calc(var(--rail) / 2 - 6px);
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
}
.rail-end::before { bottom: auto; height: calc(var(--pad) + 116px); }
.cord-phone { position: absolute; left: calc(var(--rail) / 2 - 14px); top: 96px; width: 28px; height: 56px; }

/* Sections */
.section { --bg: var(--ground); position: relative; padding-block: var(--pad); background: var(--bg); }
.section-alt { --bg: var(--surface); border-top: 1px solid var(--line); }
/* The one light break per page: the cord turns dark */
.section-light {
  --bg: var(--paper);
  --cord: color-mix(in srgb, var(--ground) 30%, transparent);
  --coil: color-mix(in srgb, var(--ground) 75%, transparent);
  color: var(--ground);
}
.section-light .kicker { color: var(--ink-2); }
.section-light a { color: var(--ground); }
.kicker {
  margin: 0 0 20px;
  color: var(--grey);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kicker > span:first-child { color: var(--red); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head > p:last-child { margin: 0; color: var(--text-2); font-size: 1.1rem; }

/* Homepage: services as rows, linked once the page exists */
.service-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.service-list li { border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.service-list li, .service-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 24px;
  align-items: center;
  padding: 26px 0;
  color: var(--grey);
}
.service-list a { padding: 0; text-decoration: none; }
.service-name {
  color: var(--text);
  font-stretch: 75%;
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
}
.service-list > li > span, .service-list a > span:last-child { grid-column: 1; }
.arrow { grid-row: span 2; color: var(--red); font-size: 1.75rem; transition: transform 0.2s; }
.service-list a:hover .arrow { transform: translateX(4px); }
/* A linked service's whole row is the link. On hover or keyboard focus a red-tinted bar
   slides in from the left, the text eases right to sit inside it, and the arrow nudges on.
   Touch screens skip the hover (it would stick after a tap); reduced motion gets it without the slide. */
.service-list li:has(> a) { padding: 0; }
.service-list a { position: relative; isolation: isolate; padding: 26px 16px 26px 0; }
.service-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 24%, transparent), color-mix(in srgb, var(--red) 4%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-list a > span:not(.arrow) { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) {
  .service-list a:hover::before { transform: scaleX(1); }
  .service-list a:hover > span:not(.arrow) { transform: translateX(20px); }
}
.service-list a:focus-visible::before { transform: scaleX(1); }
.service-list a:focus-visible > span:not(.arrow) { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) {
  .service-list a::before, .service-list a > span, .arrow { transition: none; }
}

/* How it works: four steps, each with a customer's words */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 48px 28px; }
.steps li { display: flex; flex-direction: column; gap: 16px; }
.steps h3 { margin: 0; font-size: 1.75rem; }
.steps p { margin: 0; color: var(--text-2); }
.step-mark { display: flex; align-items: center; gap: 12px; height: 64px; }
.step-mark > span { font-stretch: 75%; font-weight: 900; font-size: 3.5rem; line-height: 0.9; color: var(--red); }
.step-phone { width: 32px; height: 64px; transform: rotate(-10deg); }
.step-ring { width: 22px; height: 32px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.step-cord { flex: 1 1 auto; min-width: 0; height: 28px; fill: none; stroke: color-mix(in srgb, var(--text) 50%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-mark .handset { width: 44px; height: 18px; fill: var(--red); }
.steps figure { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.steps blockquote { margin: 0; color: var(--text); font-weight: 600; }
.steps figcaption { color: var(--grey); font-size: 0.875rem; font-weight: 600; }

/* Reviews (WEB-101): the homepage's light section */
.reviews-head { align-items: end; margin-bottom: 48px; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; color: var(--ink-2); font: 600 1.1rem/1.4 var(--font); text-transform: none; }
.rating strong { color: var(--ground); font-size: 1.4rem; }
.rating .stars { font-size: 1.6rem; }
.stars { margin: 0; color: var(--red); letter-spacing: 0.12em; font-size: 1.05rem; line-height: 1; }
.reviews .pull blockquote { margin-bottom: 16px; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.94; }
.review-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 16px; align-items: start; }
.review-card {
  background: #FAFAFA;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ground) 10%, transparent);
  border-radius: var(--radius);
  padding: 24px;
}
.review-card blockquote { margin: 12px 0; }
.review-card blockquote p { margin: 0 0 0.75em; }
.review-card blockquote p:last-child { margin-bottom: 0; }
.review-by { margin: 0; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.reviews .actions { margin-top: 0; }

/* About */
.about > p { color: var(--text-2); font-size: 1.1rem; }
.about .signed { color: var(--text); font-size: 1rem; font-weight: 700; }
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats > div { background: var(--ground); padding: 18px; }
.stats > div:last-child:nth-child(odd) { grid-column: span 2; }
.about .sources { margin: 16px 0 0; color: var(--grey); font-size: 0.8rem; line-height: 1.5; }
.sources a { color: inherit; }
.stats dt { font-stretch: 75%; font-weight: 900; font-size: 2.5rem; line-height: 1; }
.stats dd { margin: 6px 0 0; color: var(--grey); font-size: 0.95rem; }

/* Our work: drone photos of finished jobs, the newest one full width */
.work { display: grid; gap: 32px 24px; }
.work figure { margin: 0; }
.work img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.work figcaption { margin-top: 12px; color: var(--grey); font-size: 0.95rem; }
.town-job { margin-top: 32px; }

/* Where we work (areas.json) */
.areas { align-items: center; }
.areas > div > p { color: var(--text-2); font-size: 1.1rem; }
.area-map { width: 100%; max-width: 460px; height: auto; justify-self: center; overflow: visible; }
.ohio { fill: none; stroke: color-mix(in srgb, var(--text) 50%, transparent); stroke-width: 3; stroke-linejoin: round; }
.town { fill: color-mix(in srgb, var(--text) 55%, transparent); }
.town-busy { fill: var(--text); }
.home-halo { fill: color-mix(in srgb, var(--red) 30%, transparent); }
.home-dot { fill: var(--red); }
.map-label { fill: var(--text); font: 700 26px var(--font); paint-order: stroke; stroke: var(--ground); stroke-width: 6px; }
.towns-title, .town-groups h3 {
  margin: 28px 0 12px;
  color: var(--grey);
  font: 700 0.875rem/1.4 var(--font);
  letter-spacing: 0.12em;
}
.town-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.town-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  border-radius: var(--radius-control);
  font-weight: 600;
}
/* A town with a live page: the whole chip is the link */
.town-chips li:has(> a) { padding: 0; border-color: var(--red); }
.town-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-control); text-decoration: none; }
.town-chips a:hover { background: color-mix(in srgb, var(--red) 18%, transparent); }
.all-towns { margin-top: 24px; border-block: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.all-towns summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 14px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.all-towns summary::-webkit-details-marker { display: none; }
.all-towns summary::after { content: "+"; color: var(--red); font-size: 1.6rem; line-height: 1; transition: transform 0.2s; }
.all-towns[open] summary::after { transform: rotate(45deg); }
.town-groups { display: grid; gap: 0 32px; padding-bottom: 20px; }
.town-groups h3 { margin: 16px 0 6px; }
.town-groups p { margin: 0; color: var(--text-2); font-size: 0.95rem; }
.area-note { margin: 20px 0 0; color: var(--grey); }

.inspection { display: grid; gap: 32px; align-items: start; }
.inspection p { color: var(--grey); }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.optional { color: var(--grey); font-weight: 400; }
.form input, .form textarea {
  font: inherit;
  font-size: 16px; /* avoids iOS zoom on focus */
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 12px;
}
.hp { position: absolute; left: -9999px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 64px 40px; color: var(--grey); font-size: 0.95rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-cols { display: grid; gap: 40px; }
.footer-brand p { margin: 0 0 14px; line-height: 1.6; }
.footer-brand .handset { width: 40px; height: 16px; }
.footer-phone { color: var(--text); font-weight: 700; }
.footer-group { display: flex; flex-direction: column; align-items: start; gap: 10px; }
.footer-group h2 {
  margin: 0 0 4px;
  color: var(--text);
  font: 700 0.8rem/1.4 var(--font);
  letter-spacing: 0.12em;
}
.footer-fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.footer-fine p { margin: 0; }
.fine { font-size: 0.85rem; }

/* Inner pages: page top, two-column sections, service grid, pull quote, FAQ */
.page-top { padding-block: 40px var(--pad); }
.page-top .rail::before { top: 10px; bottom: calc(-1 * var(--pad)); }
.page-top .rail::after {
  content: "";
  position: absolute;
  left: calc(var(--rail) / 2 - 6px);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
}
.page-top h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); line-height: 0.92; max-width: 14em; }
.crumbs { margin: 0 0 22px; color: var(--grey); font-size: 0.875rem; font-weight: 600; }
.crumbs a { color: var(--grey); }
.crumbs [aria-current] { color: var(--text); }
.service-links { margin: 0; color: var(--grey); font-weight: 600; }
.service-links > span:first-child { color: var(--text-2); }
.service-links .svc { white-space: nowrap; }
.service-links a { color: var(--text); text-underline-offset: 0.2em; }
.page-top .lede { color: var(--text-2); }

/* Service-page photo hero: still page-top copy, photo behind a dark wash. */
.page-top-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 48px var(--pad);
  color: #f4f4f4;
}
.page-top-hero .page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-top-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 12, 12, 0.88) 0%, rgba(12, 12, 12, 0.62) 55%, rgba(12, 12, 12, 0.4) 100%),
    linear-gradient(180deg, rgba(12, 12, 12, 0.35), rgba(12, 12, 12, 0.55));
}
.page-top-hero .crumbs,
.page-top-hero .crumbs a { color: color-mix(in srgb, #f4f4f4 70%, transparent); }
.page-top-hero .crumbs [aria-current] { color: #f4f4f4; }
.page-top-hero .lede { color: color-mix(in srgb, #f4f4f4 82%, transparent); }
.page-top-hero .rail::after { background: var(--red); }
.page-top-hero .btn-ghost {
  color: #f4f4f4;
  border-color: color-mix(in srgb, #f4f4f4 45%, transparent);
}
.page-top-hero .btn-ghost:hover { background: color-mix(in srgb, #f4f4f4 12%, transparent); }

/* A section that follows one on the same ground, without the gap */
.section.flush { padding-top: 0; }
.flush .rail::before { top: 0; }

.two-col { display: grid; gap: 40px 72px; align-items: start; }
.two-col > div > p { color: var(--text-2); font-size: 1.1rem; }
.grid-4 {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.grid-4 > div { background: var(--ground); padding: 32px; }
.grid-4 h3 { font-size: 1.85rem; margin-bottom: 14px; }
.grid-4 p { margin: 0; color: var(--text-2); }
.panels { display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: var(--radius); padding: 28px; }
.panel h3 { font-size: 1.6rem; margin-bottom: 14px; }
.panel ul { margin: 0; padding-left: 20px; color: var(--text-2); line-height: 1.7; }
.terms { margin: 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.terms > div { display: grid; gap: 8px 32px; padding: 26px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.terms dt { font-stretch: 75%; font-weight: 900; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.terms dd { margin: 0; color: var(--text-2); }

.pull { margin: 0; max-width: 1000px; }
.pull .stars { font-size: 1.6rem; margin-bottom: 24px; }
.pull blockquote {
  margin: 0 0 24px;
  font-stretch: 75%;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}
.pull figcaption { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--ink-2); font-weight: 600; }
.pull figcaption a { font-weight: 700; }

.faq { border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding: 20px 0;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.6rem; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--text-2); max-width: 36em; }

/* Closing call section: the cord ends at the phone */
.cta h2 { font-size: clamp(2.75rem, 7vw, 4.75rem); line-height: 0.92; }
.big-phone {
  display: inline-block;
  margin-bottom: 20px;
  font-stretch: 75%;
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--red);
  text-decoration: none;
}
.cta .hours { color: var(--text-2); }

/* Privacy page */
.legal { max-width: 68ch; }
.legal h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 0.25em; }
.legal h2 { font-size: 1.35rem; margin-top: 2em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.75em; }
.legal a { text-underline-offset: 0.15em; }

/* Mobile call bar */
.call-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(var(--call-bar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}
.call-bar svg { width: 1.2em; height: 1.2em; fill: currentColor; }

/* Hero on phones: Ohio fills the top of the screen and the copy rises over its lower half */
@media (max-width: 719.98px) {
  .hero { padding-block: 0 36px; }
  /* The footage covers only the Ohio area, not the whole tall hero, so the frame's middle
     (the roofs) lands inside Ohio instead of its top (the sky). It fades out under the copy. */
  .hero-media {
    inset: 0 0 auto;
    height: 80vw;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
    mask-image: linear-gradient(180deg, #000 82%, transparent);
  }
  .hero-inner { gap: 0; }
  .hero-mark {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
    width: 98vw;
    max-width: none;
    margin-left: calc(1vw - var(--gutter));
  }
  .hero-copy {
    grid-area: 1 / 1;
    align-self: start;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 16px;
    margin: calc(72vw - 100px) calc(-1 * var(--gutter)) 0;
    padding: 128px var(--gutter) 0;
    text-align: center;
    background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--ground) 70%, transparent) 112px, color-mix(in srgb, var(--ground) 86%, transparent) 100%);
  }
  .hero .eyebrow { display: none; }
  .hero .lede { font-size: 1.0625rem; }
  .hero .actions { flex-direction: column; align-self: stretch; margin-top: 8px; }
  .hero .actions .btn { flex: none; }
  .mark-fade { display: inline; }
}

@media (min-width: 720px) {
  .work { grid-template-columns: 1fr 1fr; }
  .work figure:first-child { grid-column: 1 / -1; }
  :root { --gutter: 32px; --pad: 120px; --rail: 28px; --rail-gap: 68px; }
  .review-list { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .town-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-3 > div:last-child:nth-child(odd) { grid-column: auto; }
  .actions .btn { max-width: 340px; }
  .inspection { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .call-bar { display: none; }
  .site-nav { display: flex; }
  .header-call { display: inline-flex; }
  .menu { display: none; }
  .hero { padding-block: 32px 72px; }
  .hero-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; }
}

@media (min-width: 960px) {
  .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-map { order: -1; }
}

@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}

/* Scroll effects, only where the browser supports scroll-driven animations and the visitor
   hasn't asked for less motion. Everywhere else the cord and hero are static, as before. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The cord unspools as you read. Each section's stretch is drawn down to a point 60% of
       the way down the screen, coils as it passes them, and rings the phone at the end. */
    .proof-band, .section, .page-top { view-timeline: --section block; }
    .rail::before {
      transform-origin: top;
      animation: cord-draw linear both;
      animation-timeline: --section;
      animation-range: cover 40vh cover calc(100% - 60vh);
    }
    .rail-start::before { animation-range: cover calc(40vh - 24px) cover calc(100% - 60vh + 24px); }
    .rail-end::before { animation-range: cover 40vh cover calc(40vh + var(--pad) + 116px); }
    .coil path {
      stroke-dasharray: 1;
      animation: coil-draw linear both;
      animation-timeline: --section;
      animation-range: cover calc(40vh + var(--pad)) cover calc(40vh + var(--pad) + 104px);
    }
    .flush .coil path { animation-range: cover 40vh cover calc(40vh + 104px); }
    .cord-phone {
      transform-origin: 50% 20%;
      animation: phone-ring linear both;
      animation-timeline: --section;
      animation-range: cover calc(40vh + var(--pad) + 80px) cover calc(40vh + var(--pad) + 240px);
    }

    /* The hero settles behind the page as it scrolls away: the footage dims and Ohio eases
       back. The mark's layers move one by one; moving their wrapper would form a stacking
       context and lift the mute layer over the copy. */
    .hero { view-timeline: --hero block; }
    .hero-media, .hero-mark svg, .hero-copy {
      animation: linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 90%;
    }
    .hero-media { animation-name: hero-dim; }
    .hero-mark svg { animation-name: hero-ohio; }
    .hero-copy { animation-name: hero-copy; }
  }
}
@keyframes cord-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes coil-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes phone-ring {
  0% { transform: rotate(0); opacity: 0.35; }
  15% { opacity: 1; }
  25% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  55% { transform: rotate(-9deg); }
  70% { transform: rotate(6deg); }
  85% { transform: rotate(-3deg); }
  100% { transform: rotate(0); opacity: 1; }
}
@keyframes hero-dim {
  from { filter: saturate(1.15) contrast(1.05) brightness(1); }
  to { filter: saturate(0.85) contrast(1.05) brightness(0.4); }
}
@keyframes hero-ohio { to { transform: translateY(8%) scale(0.88); } }
@keyframes hero-copy { to { transform: translateY(12%); opacity: 0.6; } }