/* IL Plumbing Dispatch, design system
   Reuses the established brand theme: signal-orange accent on charcoal,
   pill controls, off-white banding, Plus Jakarta Sans + JetBrains Mono. */

:root{
 /* #FF4A17 measures 3.36:1 on white AND on black. It is a FILL ONLY colour:
     backgrounds, rules, edge bars, dots, icon plates. It must never carry text.
     Text-bearing roles use --orange-text (5.13:1 on white, 4.71:1 on cream).
     Text sitting ON an orange fill uses --on-orange (5.48:1). */
  --orange:#FF4A17;
  --orange-text:#CC360C;
  --orange-text-dark:#A62B08;
  --on-orange:#1A1A1A;
  --orange-dark:#D93B0E;
  --orange-soft:#FFF1EC;
  --ink:#141414;
  --charcoal:#171717;
  --charcoal-2:#242424;
  --cream:#F7F5F2;
  --cream-2:#EFEBE5;
  --line:#E4E0DA;
  --line-dark:rgba(255,255,255,.12);
  --muted:#6B6B6B;
  --muted-dark:rgba(255,255,255,.72);
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
  /* Plus Jakarta Sans has an unusually wide zero, so 68ch measured ~870px -
     far past a comfortable line. Set in px against the real text size. */
  --measure:650px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,20,20,.04),0 8px 24px rgba(20,20,20,.06);
  --shadow-lift:0 2px 4px rgba(20,20,20,.05),0 18px 40px rgba(20,20,20,.10);
  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
/* No overflow-x:hidden here. It was masking one element, .foot-mark, and
   masking it globally also kills position:sticky in every descendant. The
   wordmark is clipped by .site-footer's own overflow:hidden instead.
   overflow-wrap is the guard for a long unbroken string in a narrow column. */
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:var(--orange-text);text-decoration:none}
a:hover{color:var(--orange-text-dark)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange-text);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:pretty;margin:0}
h1{font-size:clamp(38px,5.2vw,62px)}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1}
h3{font-size:clamp(20px,1.7vw,25px);line-height:1.25;letter-spacing:-.02em}
h4{font-size:19px;letter-spacing:-.015em}
p{margin:0 0 1.25em}
ul,ol{margin:0 0 1.35em;padding-left:1.25em}
li{margin:0 0 .55em}
strong{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--measure)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Clipped rather than parked at left:-9999px: an off-canvas element is real
   layout the browser still has to reason about. */
.skip{position:absolute;left:0;top:0;z-index:200;background:var(--orange);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none;color:#fff}

/* ── Eyebrow / section rhythm ───────────────────────── */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin:0 0 16px}
.band--dark .eyebrow,.hero .eyebrow,.eyebrow.on-dark{color:var(--orange)}
.band{padding:clamp(64px,7vw,104px) 0}
.band--cream{background:var(--cream)}
.band--dark{background:var(--charcoal);color:#fff}
.band--dark h2,.band--dark h3{color:#fff}
.band--dark p{color:var(--muted-dark)}
.lede{font-size:clamp(18px,1.5vw,20.5px);line-height:1.65;color:var(--muted)}
.band--dark .lede{color:var(--muted-dark)}
.sec-head{max-width:760px;margin-bottom:clamp(36px,4vw,56px)}

/* ── Buttons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 30px;border-radius:var(--r-pill);font-size:16px;font-weight:600;font-family:var(--sans);border:1px solid transparent;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease;text-align:center;white-space:nowrap}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.99)}
.btn--primary{background:var(--orange-text);color:#fff}
.btn--primary:hover{background:var(--orange-text-dark);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--onDark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ── Inline CTA blocks inside long copy ─────────────── */
.cta-inline{margin:44px 0;padding:28px 30px;background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r-md);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cta-inline p{margin:0;max-width:46ch;color:var(--muted);font-size:16px;line-height:1.6}
.cta-inline .btn{flex:none}

/* ── Header ─────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:var(--charcoal);transition:padding .22s ease,box-shadow .22s ease}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;transition:padding .22s ease}
.site-header.is-stuck .bar{padding:12px 24px}
.site-header.is-stuck{box-shadow:0 6px 26px rgba(0,0,0,.28)}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand:hover{color:#fff}
.brand svg{flex:none}
.nav{display:flex;align-items:center;gap:32px}
.nav a{position:relative;color:rgba(255,255,255,.86);font-size:15.5px;font-weight:500;padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-phone{color:#fff;font-family:var(--mono);font-size:14px;letter-spacing:.02em;white-space:nowrap}
/* The number moves into the open nav panel below 980px (see the breakpoint):
   on mobile a visible number converts better than a button.
   Selector is `.nav a.nav-phone` throughout: it sits inside .nav, so it has
   to outrank `.nav a`, which sets colour, size, padding and a divider. */
.nav a.nav-phone{display:none}
.header-phone:hover{color:var(--orange)}
.navtoggle{display:none;background:none;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);width:46px;height:46px;cursor:pointer;color:#fff;align-items:center;justify-content:center}
.navtoggle span{display:block;width:20px;height:2px;background:#fff;position:relative}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}

/* ── Hero ───────────────────────────────────────────── */
.hero{position:relative;background:var(--charcoal);color:#fff;overflow:hidden}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;filter:grayscale(.15) contrast(1.04)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;opacity:.55;will-change:transform}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--charcoal) 0%,rgba(23,23,23,.94) 46%,rgba(23,23,23,.55) 100%)}
/* With a photograph behind it the 90deg scrim alone leaves the lede sitting on
   open sky at the right-hand end, so a second vertical wash lifts the whole
   frame. Both layers sit under .hero__inner (z-index 2). */
/* The floors matter more than the peaks. .lede is max-width:60ch, which reaches
 ~86% of hero width, so it sits in the WEAKEST band of both gradients, and a
   bright photo there (snow, overcast sky, aerial pavement) left the 18px
   rgba(255,255,255,.72) lede at 3.2:1 on palatine. One scrim serves ~60 photo
   heroes and all 205 city pages still to come via the openings fallback, so the
   fix belongs here rather than per page: hold a real floor across the right and
   the mid-height so brightness of the photograph cannot decide legibility. */
.hero:has(.hero__photo) .hero__scrim{background:linear-gradient(90deg,var(--charcoal) 0%,rgba(23,23,23,.9) 30%,rgba(23,23,23,.58) 78%,rgba(23,23,23,.48) 100%),linear-gradient(180deg,rgba(23,23,23,.34) 0%,rgba(23,23,23,.22) 42%,rgba(23,23,23,.46) 100%)}
/* Full-opacity lede over a photograph: .72 white is a luxury of a solid
   background. Costs nothing on the dark heroes and buys ~1.4:1 on the bright. */
.hero:has(.hero__photo) .lede{color:#fff}
.hero:has(.hero__photo) .hero__grid{opacity:.2}
.hero__inner{position:relative;z-index:2;padding:clamp(44px,5vw,64px) 24px clamp(64px,7vw,96px)}
.hero--split .hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{color:#fff}
.hero p{color:var(--muted-dark)}
.hero__rule{width:64px;height:4px;background:var(--orange);border-radius:2px;margin:0 0 24px}
.pill-tag{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:13.5px;font-weight:500;padding:8px 17px;border-radius:var(--r-pill);margin-bottom:24px}
.pill-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.55);margin-bottom:20px}
.crumbs a{color:rgba(255,255,255,.72)}
.crumbs a:hover{color:#fff}
.crumbs span{padding:0 6px}

/* ── Media frames (photograph wrappers; striped fill is the no-photo state) ── */
.ph{position:relative;border-radius:var(--r-lg);overflow:hidden;background:repeating-linear-gradient(135deg,var(--cream) 0 10px,var(--cream-2) 10px 20px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:220px}
.ph--dark{background:repeating-linear-gradient(135deg,#2a2a2a 0 10px,#242424 10px 20px);border-color:rgba(255,255,255,.09)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── Trust strip ────────────────────────────────────── */
.trust{background:var(--cream);border-bottom:1px solid var(--line)}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0}
.trust li{display:flex;align-items:center;gap:12px;padding:22px 26px;font-size:15px;font-weight:600;line-height:1.4;border-right:1px solid var(--line);margin:0}
.trust li:last-child{border-right:0}
.trust .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--orange);display:grid;place-items:center}
.trust .tick svg{width:12px;height:12px}

/* ── Stats band ─────────────────────────────────────── */
.stats{background:var(--orange);border-radius:var(--r-lg);padding:clamp(38px,4vw,54px) 24px;display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{text-align:center;padding:8px 16px;border-right:1px solid rgba(0,0,0,.16)}
.stats div:last-child{border-right:0}
.stats .num{color:var(--on-orange);font-size:clamp(36px,4vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1}
.stats .lab{color:var(--on-orange);font-size:14px;font-weight:600;margin-top:10px;line-height:1.4}

/* ── Cards ──────────────────────────────────────────── */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px 26px;transition:transform .22s ease,box-shadow .22s ease;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .26s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card:hover::before,.card:focus-within::before{transform:scaleY(1)}
.card h3{margin-bottom:10px;font-size:20px}
.card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--muted)}
.card .stretched::after{content:"";position:absolute;inset:0;z-index:1}
.card a.stretched{color:var(--ink)}
.card a.stretched:hover{color:var(--ink)}
.card--cream{background:var(--cream)}
.card__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:14px}

/* ── Region selector ────────────────────────────────── */
.region-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.region-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--orange)}
.region-card h3{font-size:19px}
.region-card a{color:var(--ink)}
.region-card a::after{content:"";position:absolute;inset:0}
.region-card .count{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--orange-text);text-transform:uppercase}
.region-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ── Seasonal band ──────────────────────────────────── */
.season{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.season article{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-md);padding:26px 24px}
.season h3{font-size:19px;margin-bottom:6px}
.season .when{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.season p{font-size:15px;line-height:1.62;margin:0}

/* ── Long-form content ──────────────────────────────────────────────
   These pages carry 2,000-3,500 words each and that is the point: the
   depth is the product. What had to change is that the depth READ as an
   article. Three things did it, and each has an answer here.

   1. The contents box sat on top of the text like a blog jump-list.
      It is now a sticky rail beside the text: a reference layout.
   2. Every h2 had the same weight, so the page was one undifferentiated
      column. They are now numbered chapters, and the numerals match the
      rail, so "05" in the margin and "05" in the rail are the same place.
   3. The dominant pattern in this copy is "<strong>Label.</strong> then
      the explanation" - in lists and in paragraph runs. Set as running
      prose it is an article; set as a two-column row it is a spec table.
      That is the single biggest change, and it is what the :has() rules
      below detect. No markup was rewritten to get it.

   Measure is held on the text elements rather than the container, so the
   spec rows, key points and pull quotes break out wider. That alternation
   is what gives a long column rhythm. ────────────────────────────────── */

.prose{max-width:none}
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > h4,
.prose > .toc-note{max-width:var(--measure)}
.prose h2{margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:38px 0 12px}
.prose p,.prose li{font-size:17.5px;line-height:1.78;color:#2E2E2E}
.prose > ul{padding-left:22px}
.prose ul li::marker{color:var(--orange)}
.prose > ul > li{margin:0 0 10px}

/* Chapters. Numbered on pages that have a contents rail, so the numeral is
   a real cross-reference rather than decoration. */
.wrap:has(> .toc) .prose{counter-reset:chap}
/* Full column width, not the text measure: the chapter rule should span the
   same width as the spec rows beneath it or the break reads as a stray line.
   Headings here are short enough that the wider measure costs nothing. */
.wrap:has(> .toc) .prose > h2{
  counter-increment:chap;border-top:1.5px solid var(--ink);max-width:none;
  padding-top:24px;margin:76px 0 20px;scroll-margin-top:110px}
.wrap:has(> .toc) .prose > h2::before{
  content:counter(chap,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--orange-text);margin-bottom:13px}
.wrap:has(> .toc) .prose > h2:first-child{margin-top:0}
.wrap:has(> .toc) .prose > h3{
  padding-left:18px;border-left:2px solid var(--orange);margin:44px 0 14px}

/* Home page and the two hubs have long prose with no contents rail. Their
   sub-sections carry the numbering instead, for the same reason. */
.wrap:not(:has(> .toc)) .prose{counter-reset:sub}
.wrap:not(:has(> .toc)) .prose > h3{
  counter-increment:sub;border-top:1px solid var(--line);
  padding-top:22px;margin:58px 0 14px}
.wrap:not(:has(> .toc)) .prose > h3::before{
  content:counter(sub,decimal-leading-zero);display:block;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--orange-text);margin-bottom:11px}

/* Spec rows. A list whose items open with a bold label is not a bulleted
   list - it is a two-column table of terms. Grid wraps the text after the
   <strong> in an anonymous item, which is what makes this work with no
   markup change. */
.prose > ul:has(> li > strong:first-child){
  list-style:none;padding:0;margin:30px 0 40px;max-width:none;
  border-top:1px solid var(--line)}
.prose > ul:has(> li > strong:first-child) > li{
  display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);
  gap:6px 36px;margin:0;padding:17px 0;border-bottom:1px solid var(--line);
  font-size:16.8px;line-height:1.7}
.prose > ul:has(> li > strong:first-child) > li > strong:first-child{
  font-size:14.6px;font-weight:700;line-height:1.55;color:var(--ink);
  letter-spacing:-.005em}

/* The same pattern written as consecutive paragraphs. Border-bottom on each,
   border-top only on the one that opens a run. */
.prose > p:has(> strong:first-child){
  display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);
  gap:6px 36px;margin:0;padding:17px 0;max-width:none;
  border-bottom:1px solid var(--line);font-size:16.8px;line-height:1.7}
.prose > p:has(> strong:first-child) > strong:first-child{
  font-size:14.6px;font-weight:700;line-height:1.55;color:var(--ink);
  letter-spacing:-.005em}
.prose > :not(p:has(> strong:first-child)) + p:has(> strong:first-child){
  border-top:1px solid var(--line);margin-top:30px}
.prose > p:has(> strong:first-child):last-child{margin-bottom:40px}

.keypoint{background:var(--orange-soft);border:1px solid #F3C3B2;border-radius:var(--r-md);padding:26px 28px;margin:40px 0;max-width:none}
.keypoint .eyebrow{margin-bottom:10px}
.keypoint p:last-child{margin-bottom:0}
.keypoint p{font-size:16.5px;color:#3A2A24}
.pullquote{margin:48px 0;padding:6px 0 6px 28px;border-left:4px solid var(--orange);font-size:clamp(21px,2.1vw,26px);line-height:1.4;font-weight:600;letter-spacing:-.02em;color:var(--ink);max-width:none}
.pullquote p{margin:0;font-size:inherit;line-height:inherit;color:inherit}

/* ── Field guide ────────────────────────────────────────────────────
   For long explanatory copy on pages with no contents rail (home, hubs).
   Same vocabulary as the spec rows above - numbered, ruled, heading in a
   left column - so a reader moving between home and a service page is
   reading one system rather than two. The copy is unchanged; only its
   arrangement is. ───────────────────────────────────────────────────── */
.guide{counter-reset:guide;border-top:1.5px solid var(--ink);margin-top:clamp(34px,4vw,50px)}
.guide__item{counter-increment:guide;display:grid;
  grid-template-columns:minmax(0,17em) minmax(0,650px);gap:10px 64px;
  padding:34px 0;border-bottom:1px solid var(--line)}
.guide__item h3{margin:0;font-size:20.5px;line-height:1.3;letter-spacing:-.02em}
.guide__item h3::before{content:counter(guide,decimal-leading-zero);display:block;
  font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;
  color:var(--orange-text);margin-bottom:11px}
.guide__body p{margin:0 0 14px;font-size:17px;line-height:1.75;color:#2E2E2E}
.guide__body p:last-child{margin-bottom:0}
.guide > .keypoint,.guide > .pullquote,.guide > .cta-inline{margin:32px 0 36px}

/* ── Contents rail ──────────────────────────────────────────────────
   Sticky beside the text, not stacked above it. The band's .wrap becomes
   the two-column grid; :has() means no page markup had to change. */
.wrap:has(> .toc){
  display:grid;grid-template-columns:225px minmax(0,1fr);
  gap:clamp(36px,4.5vw,80px);align-items:start}
.toc{position:sticky;top:104px;background:none;border:0;border-top:1.5px solid var(--ink);
  border-radius:0;padding:18px 0 0;margin:0}
.toc h2{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:700;font-family:var(--mono)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;columns:1}
.toc li{counter-increment:toc;margin:0 0 13px;break-inside:avoid;font-size:14.6px;line-height:1.45;display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:baseline}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--orange-text);margin-right:0}
.toc a{color:var(--muted);border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--orange-text);color:var(--ink)}
.toc a.is-active{color:var(--orange-text);font-weight:600}

/* ── FAQ accordion ──────────────────────────────────── */
.faq{border-top:1px solid var(--line);max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq h3{font-size:19px;font-weight:600;letter-spacing:-.015em;display:inline}
.faq summary::after{content:"";position:absolute;right:8px;top:31px;width:12px;height:12px;border-right:2px solid var(--orange-text);border-bottom:2px solid var(--orange-text);transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq .answer{overflow:hidden}
.faq .answer p{padding:0 44px 24px 0;margin:0 0 12px;color:#3A3A3A;font-size:16.5px;line-height:1.72}
.faq .answer p:last-child{margin-bottom:0}

/* ── Service-area / zip line ────────────────────────── */
.service-area{font-family:var(--mono);font-size:13.5px;line-height:1.85;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 26px;margin:0 0 40px;word-break:break-word}
.service-area strong{color:var(--ink);font-family:var(--sans);display:block;margin-bottom:8px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}

/* ── Link chips (neighbours / services) ─────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chips li{margin:0}
.chips a{display:inline-block;padding:10px 18px;min-height:44px;line-height:24px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);font-size:15px;font-weight:500;background:#fff;transition:border-color .18s ease,transform .18s ease}
.chips a:hover{border-color:var(--orange-text);color:var(--orange-text);transform:translateY(-2px)}
.band--dark .chips a{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:#fff}
.band--dark .chips a:hover{border-color:var(--orange);color:var(--orange)}

/* ── How it works ───────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.steps article{counter-increment:step}
.steps article::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--orange-text);display:block;margin-bottom:14px;letter-spacing:.08em}
.steps h3{font-size:21px;margin-bottom:10px}
.steps p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0}

/* ── Final CTA band ─────────────────────────────────── */
.cta-band{background:var(--charcoal);color:#fff;text-align:center;padding:clamp(64px,7vw,96px) 0}
.cta-band h2{color:#fff;max-width:18ch;margin:0 auto 18px}
.cta-band p{color:var(--muted-dark);max-width:56ch;margin:0 auto 30px}
.cta-band .btn-row{justify-content:center}
.cta-band .tel{display:block;margin-top:22px;font-family:var(--mono);font-size:15px;color:rgba(255,255,255,.6)}

/* ── Footer ─────────────────────────────────────────── */
/* Orange is the fill; every glyph on it is charcoal (5.48:1). */
.site-footer{background:var(--orange);color:var(--on-orange);padding:clamp(56px,6vw,80px) 0 0;position:relative;overflow:hidden}
.site-footer a{color:var(--on-orange)}
.site-footer a:hover{color:#000;text-decoration:underline}
.site-footer .brand{color:var(--on-orange)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;position:relative;z-index:2}
.foot-grid h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-orange);margin-bottom:18px;font-weight:800}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 11px;font-size:15px;line-height:1.5}
.foot-brand p{color:var(--on-orange);font-size:15.5px;line-height:1.65;max-width:34ch}
.foot-nap{font-style:normal;color:var(--on-orange);font-size:15px;line-height:1.7;margin-top:18px}
.foot-nap a{font-family:var(--mono);font-size:15px}
.foot-bottom{position:relative;z-index:2;margin-top:56px;border-top:1px solid rgba(0,0,0,.28);padding:26px 0 34px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:baseline}
.foot-bottom p{margin:0;font-size:13.5px;line-height:1.65;color:var(--on-orange);max-width:78ch}
.foot-mark{position:absolute;left:0;right:0;bottom:-4%;font-size:clamp(90px,18vw,240px);font-weight:800;letter-spacing:-.05em;line-height:.8;color:rgba(0,0,0,.07);white-space:nowrap;text-align:center;pointer-events:none;user-select:none;z-index:1}

/* ── Floating call button ───────────────────────────── */
.fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:150;width:62px;height:62px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(255,74,23,.42);opacity:0;transform:translateY(24px) scale(.85);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.fab.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.fab:hover{background:var(--orange-dark);color:#fff}
.fab svg{width:26px;height:26px}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--orange);animation:fabpulse 2.4s ease-out infinite}
@keyframes fabpulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}

/* ── Scroll reveal ──────────────────────────────────────
   FAIL-OPEN BY DESIGN. .reveal does nothing on its own; the hidden state is
   applied only under .js-reveal, which an inline <head> script sets before
   first paint. No JS, blocked JS, or a broken observer therefore means the
 copy simply paints, never a blank page below the fold. */
.js-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .season{grid-template-columns:repeat(2,1fr)}
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(2){border-right:0}
  .trust li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .site-header .bar{gap:16px}
  .nav{gap:24px}
}
@media (max-width:980px){
  .hero--split .hero__inner{grid-template-columns:1fr;gap:34px}
  .g3,.steps{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .stats div:nth-child(2){border-right:0}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--charcoal);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;border-top:1px solid var(--line-dark);display:none;z-index:5}
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-dark);font-size:17px}
  .nav a.nav-phone{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    min-height:56px;padding:18px 0 0;border-bottom:0;color:var(--orange);
    font-family:var(--mono);font-size:21px;letter-spacing:.01em}
  .nav a.nav-phone span{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,255,255,.62)}
  .nav a.nav-phone:hover{color:#fff}
  .navtoggle{display:flex}
  .header-phone{display:none}
  /* The rail stacks above the text again below the desktop breakpoint, where
     there is no second column to sit in. */
  .wrap:has(> .toc){display:block}
  .toc{position:static;margin:0 0 44px;border-top-width:1.5px}
  .toc ol{columns:2;column-gap:32px}
  .toc li{display:list-item}
  .toc li::before{margin-right:9px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .g2,.g3,.g4,.steps,.season,.foot-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;row-gap:26px}
  .stats div{border-right:0}
  .trust ul{grid-template-columns:1fr}
  .trust li{border-right:0;border-bottom:1px solid var(--line)}
  .cta-inline{flex-direction:column;align-items:flex-start}
  .cta-inline .btn{width:100%;white-space:normal}
  .btn{padding:15px 22px}
  .hero .btn-row .btn{width:100%;white-space:normal}
  .prose p,.prose li{font-size:17px}
  .toc ol{columns:1}
  .guide__item{grid-template-columns:minmax(0,1fr);gap:14px;padding:28px 0}
  /* Label over description: 15em of label plus a description is not a
     column arrangement a phone can hold. */
  .prose > ul:has(> li > strong:first-child) > li,
  .prose > p:has(> strong:first-child){grid-template-columns:minmax(0,1fr);gap:3px}
  .prose > ul:has(> li > strong:first-child) > li > strong:first-child,
  .prose > p:has(> strong:first-child) > strong:first-child{
    font-size:12.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js-reveal .reveal{opacity:1;transform:none}
  .fab::after{display:none}
  .btn:hover,.card:hover,.region-card:hover,.chips a:hover{transform:none}
}

@media print{
  .site-header,.fab,.toc,.cta-band,.cta-inline{display:none}
  .wrap:has(> .toc){display:block}
  body{font-size:11pt}
}