/* Electrician Fast, shared site styles.
   ==========================================================================
   Tokens below are the Service Direct B2C Design System v1.2.1, flattened.
   Canonical source: design-system/b2c-sites/tokens/*.css — NOT the _ds copy
   inside the redesign export, which is stale (no field tokens, and it still
   carries the retired 3px button shadow).

   Flattened rather than @imported because public/ is deployed by an lftp
   mirror and has to be self-contained.

   HOW TO REBRAND THIS FOR ANOTHER PROPERTY: edit the BRAND LAYER below and
   nothing else. Twelve hexes plus four logo SVGs. Everything after it derives.
   ========================================================================== */

/* ---------- BRAND LAYER — the only part a new property overrides ---------- */
:root{
  /* Action accent — the single CTA color. One per property, never two. */
  --brand-accent:#F6891E;
  --brand-accent-dark:#D9740E;

  /* Link / informational accent. Must read as a link on the light tint and
     on all four dark fields. */
  --brand-link:#0094D9;
  --brand-link-dark:#006EA1;
  --brand-link-tint:#E3F3FB;

  /* Dark field ramp, lightest to darkest. */
  --brand-field-mid:#2F5478;
  --brand-field-deep:#26415F;
  --brand-field-chrome:#1E3450;
  --brand-field-abyss:#16293E;

  /* Light tint for the alternating light bands */
  --brand-tint:#F2F8FC;

  /* Halo behind the logo mark on dark chrome */
  --brand-mark-halo:#3D628B;

  /* Hazard. Shared family-wide — do not re-tint per property. */
  --brand-danger:#D6483D;
}

/* ---------- Colour, derived. Do not put hexes here except neutrals ------- */
:root{
  /* Ink — primary text on light surfaces */
  --ink:var(--brand-field-deep);
  --ink-soft:#4A6483;
  --wire:#7387A1;

  /* Light surfaces */
  --paper:#FFFFFF;
  --panel:#FFFFFF;
  --panel-alt:var(--brand-tint);
  --line:#DDE6ED;
  --grid-line:rgba(115,135,161,0.16);

  /* The four navy fields, in the order a page uses them. No two adjacent
     bands may share one. */
  --field-chrome:var(--brand-field-chrome);   /* sticky header, and only that */
  --field-deep:var(--brand-field-deep);       /* hero scrim, closing CTA */
  --field-mid:var(--brand-field-mid);         /* content bands */
  --field-abyss:var(--brand-field-abyss);     /* trust strip, breadcrumb bar */

  /* Anything sitting ON a field is alpha white, so one set covers all four.
     Never hand-mix a navy for a card on a navy band. */
  --on-field-line:rgba(255,255,255,0.12);
  --on-field-line-strong:rgba(255,255,255,0.18);
  --on-field-card:rgba(255,255,255,0.06);
  --on-field-card-line:rgba(255,255,255,0.16);
  --on-field-input:rgba(255,255,255,0.08);
  --on-field-input-line:rgba(255,255,255,0.28);
  --on-field-hover:rgba(255,255,255,0.10);

  /* Spark — only on things you press, step numbers, hero badge glyphs, the
     logo. Never a decorative fill. */
  --spark:var(--brand-accent);
  --spark-dark:var(--brand-accent-dark);
  --spark-tint:rgba(246,137,30,0.14);

  /* Live — links, eyebrows, the status dot, service-card line glyphs */
  --live:var(--brand-link);
  --live-dark:var(--brand-link-dark);
  --live-soft:var(--brand-link-tint);

  --danger:var(--brand-danger);

  /* Text on dark fields */
  --on-dark:#FFFFFF;
  --on-dark-soft:#B9C4D1;
  --on-dark-muted:#9FB0C4;
  --on-dark-eyebrow:#A8BDD4;
  /* Breadcrumb separators. Off-token: the designs use this and the design
     system has no equivalent yet — candidate to push upstream. */
  --on-dark-faint:#7C93AE;

  /* Coverage map overlay */
  --map-coverage-fill:var(--spark-tint);
  --map-coverage-stroke:rgba(246,137,30,0.85);
  --map-plate:#EAF1F7;

  /* Semantic aliases — prefer these in component rules */
  --text-body:var(--ink);
  --text-muted:var(--ink-soft);
  --text-faint:var(--wire);
  --surface-page:var(--paper);
  --surface-card:var(--panel);
  --surface-sunken:var(--panel-alt);
  --surface-inverse:var(--field-deep);
  --surface-chrome:var(--field-chrome);
  --border-hairline:var(--line);
  --action-primary:var(--spark);
  --action-primary-hover:var(--spark-dark);
  --action-link:var(--live);
  --callout-fill:var(--live-soft);
  --callout-stroke:#BFE3D2;
}

/* ---------- Type. Three families, one job each -------------------------- */
:root{
  --font-display:'Bitter',serif;        /* headings, card titles, phone number */
  --font-body:'Open Sans',sans-serif;   /* body copy and UI labels */
  --font-mono:'IBM Plex Mono',monospace;/* eyebrows, ZIPs, step numbers. Never sentences. */

  --text-h1:48px;
  --text-h1-mobile:34px;
  --text-h1-service:40px;
  --text-h1-service:40px;
  --text-h2:34px;
  --text-h2-band:32px;
  --text-h2-sub:26px;
  --text-h3:19px;
  --text-faq-summary:17px;
  --text-card-title:16.5px;
  --text-phone-block:24px;
  --text-phone-hero:30px;
  --text-phone-cta:26px;
  --text-stat:26px;

  --text-lead:18px;
  --text-body-lg:16px;
  --text-body:15px;
  --text-body-sm:14.5px;
  --text-caption:13px;
  --text-legal:12px;
  --text-fine:11.5px;

  --text-eyebrow:12.5px;
  --text-mono-sm:12px;
  --text-mono-xs:11px;
  --text-mono-hero:13px;
  --text-phone:16px;

  --tracking-eyebrow:0.09em;
  --tracking-label:0.06em;
  --tracking-tight:-0.01em;

  --leading-display:1.08;
  --leading-body:1.5;
  --leading-legal:1.6;
  --leading-prose:1.7;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
}

/* ---------- Spacing and layout ------------------------------------------ */
:root{
  --space-1:4px;   --space-2:8px;   --space-3:10px;  --space-4:12px;
  --space-5:14px;  --space-6:16px;  --space-7:18px;  --space-8:20px;
  --space-9:24px;  --space-10:28px; --space-11:32px; --space-12:40px;
  --space-13:44px; --space-14:56px; --space-15:72px; --space-16:88px;

  --wrap-max:1180px;
  --wrap-narrow:680px;
  --wrap-hero:840px;
  --wrap-gutter:24px;
  --band-gutter:30px;
  --section-y:88px;
  --section-y-tight:56px;
  --band-y:72px;

  --pad-card:24px;
  --pad-card-sm:20px;
  --pad-callout:24px 26px;
  --pad-phone-block:18px 20px;

  --bp-stack:880px;   /* the only breakpoint */
  --tap-min:44px;     /* emergency traffic is one-handed */
}

/* ---------- Effects. Controls are FLAT --------------------------------- */
:root{
  --radius-button:100px;   /* pills */
  --radius-card:14px;
  --radius-card-sm:12px;
  --radius-inset:10px;
  --radius-input:8px;
  --radius-chip:8px;
  --radius-zip:6px;
  --radius-circle:50%;
  --border-width:1px;

  /* The 3px offset key was retired at design system v1.2.0. The tokens stay
     so existing references resolve — do not give them a value again. */
  --shadow-button:none;
  --shadow-button-hover:none;
  --shadow-button-active:none;
  --shadow-card:0 1px 0 var(--line);
  --shadow-card-onfield:none;   /* a shadow on navy reads as dirt */
  --shadow-float:0 4px 24px rgba(38,65,95,0.10);

  /* Hero photo is texture under a flat scrim. All contrast is the scrim's
     job — raising the opacity or dropping the grayscale breaks the headline. */
  --hero-image-filter:grayscale(0.38);
  --hero-image-opacity:0.61;
  --hero-scrim:rgba(30,52,80,0.8);

  --map-grayscale:grayscale(0.15);
  --map-grid-size:40px;

  --ease:ease;
  --dur-fast:0.15s;
  --dur-pulse:2s;
  --lift-hover:translateY(-1px);
  --lift-card:translateY(-2px);
  --press-button:translateY(1px);
}
*{box-sizing:border-box;}
/* Every <ul> in this stylesheet is a flex or grid layout, never a bulleted list.
   A bare <ul> carries list-style plus a 40px padding-inline-start, and that
   indent has now shipped twice — once on the home page's question list, once in
   the hub panel's "before you hire" list. Reset here rather than per component,
   so the next list cannot reintroduce it by omission. Components set their own
   margins below; this only has to win against the UA sheet. */
ul{list-style:none;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-0.01em;}
h2{font-size:34px;}
p{margin:0;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--live);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow.muted{color:var(--wire);}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(33,150,107,0.5);animation:pulse 2s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(33,150,107,0.45);}
  70%{box-shadow:0 0 0 7px rgba(33,150,107,0);}
  100%{box-shadow:0 0 0 0 rgba(33,150,107,0);}
}

/* ---------- BAND — the structural primitive -----------------------------
   Every full-bleed section is a band. A page moves between fields and never
   repeats one on adjacent bands. This replaced per-section inline styles in the
   templates, which is why the field system used to be invisible in the code. */
.band{padding:var(--band-y) var(--band-gutter);}
.band > .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0;}
.band--paper{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);}
.band--tint{background:var(--panel-alt);color:var(--ink);border-top:1px solid var(--line);}
.band--chrome{background:var(--field-chrome);color:var(--on-dark);}
.band--deep{background:var(--field-deep);color:var(--on-dark);}
.band--mid{background:var(--field-mid);color:var(--on-dark);border-top:1px solid var(--on-field-line);}
.band--abyss{background:var(--field-abyss);color:var(--on-dark);}
.band--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight);}
/* Headings and copy on a dark field */
.band--chrome h2,.band--deep h2,.band--mid h2,.band--abyss h2,
.band--chrome h3,.band--deep h3,.band--mid h3,.band--abyss h3{color:var(--on-dark);}
.band--deep p,.band--mid p,.band--abyss p{color:var(--on-dark-soft);}

/* ---------- HEADER — flat chrome, sticky, no scroll reaction ------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  padding:14px var(--band-gutter);
  border-bottom:1px solid var(--on-field-hover);
}
.header-row{
  display:flex;align-items:center;gap:20px;
  max-width:var(--wrap-max);margin:0 auto;
}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
/* The lockup is text-based SVG using Bitter. It is inlined, never an <img>:
   in an <img> the SVG is an isolated document and the webfont would not apply,
   so "electricianFast" would silently render in Georgia. */
.logo-lockup{display:block;height:30px;width:auto;}
.powered-tag{
  font-family:var(--font-mono);font-size:var(--text-mono-xs);
  color:var(--on-dark-muted);
  border-left:1px solid var(--on-field-line-strong);
  padding-left:10px;white-space:nowrap;
}
.header-nav{display:flex;align-items:center;gap:24px;margin-left:auto;}
.nav-link{
  font-size:var(--text-body-sm);color:var(--on-dark-soft);
  font-weight:var(--weight-medium);text-decoration:none;
}
.nav-link:hover{color:var(--on-dark);}
.phone-link{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-weight:var(--weight-semibold);
  font-size:var(--text-phone);color:var(--on-dark);text-decoration:none;
  min-height:var(--tap-min);
}
.phone-link .icon-phone{width:17px;height:17px;flex-shrink:0;}
.nav-toggle{display:none;}

/* ---------- PHONE PILL — the most important control on any page ---------
   Orange pill, Bitter, with the Service Direct phone mark. Flat: no offset key,
   no blur, no rim. The designs carried a 1px --spark-dark border on all three
   pills; that was file drift copied across, confirmed and stripped upstream —
   control rims were retired at design system v1.2.0. */
.phone-pill{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--spark);border:0;color:#FFFFFF;
  border-radius:var(--radius-button);padding:16px 30px;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-phone-cta);letter-spacing:var(--tracking-tight);
  line-height:1;text-decoration:none;
  min-height:var(--tap-min);
  transition:transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.phone-pill:hover{background:var(--spark-dark);transform:var(--lift-hover);}
.phone-pill:active{transform:var(--press-button);}
.phone-pill .icon-phone{width:26px;height:26px;flex-shrink:0;}
.phone-pill--hero{gap:14px;padding:18px 36px;font-size:var(--text-phone-hero);}

/* The mandatory reassurance line under every phone CTA. The <br> inside it is
   mobile-only — on one line the string breaks awkwardly, leaving "No" stranded
   above "obligation." The space before the <br> is what keeps desktop reading
   "hours. Free" once the break is hidden. */
.mc-br{display:none;}
.call-microcopy{
  font-family:var(--font-mono);font-size:var(--text-mono-hero);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-muted);
}

/* ---------- EYEBROW ------------------------------------------------------ */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-eyebrow);
  letter-spacing:0.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  color:var(--live);margin:0 0 12px;
}
.eyebrow--on-field{color:var(--on-dark-eyebrow);}
.eyebrow--muted{color:var(--wire);}
.eyebrow--center{justify-content:center;text-align:center;}
.eyebrow .dot{
  width:7px;height:7px;border-radius:var(--radius-circle);background:var(--live);
  animation:ef-pulse var(--dur-pulse) infinite;flex-shrink:0;
}
@keyframes ef-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,148,217,0.45);}
  70%{box-shadow:0 0 0 7px rgba(0,148,217,0);}
  100%{box-shadow:0 0 0 0 rgba(0,148,217,0);}
}

/* ---------- AVAILABILITY PILL — the city hero's eyebrow -----------------
   Not the plain eyebrow the home hero uses. A live-blue outlined pill carrying
   the pulsing dot and the city's electrician count. The count comes from the
   same source as the stat strip under the map — one data source, never two
   hand-typed numbers — and falls back to "line is open now" where a city has no
   usable count. */
.availability-pill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(0,148,217,0.55);
  background:rgba(0,148,217,0.16);
  border-radius:var(--radius-button);
  padding:7px 16px 7px 13px;
  margin-bottom:22px;
}
.availability-pill .dot{
  width:8px;height:8px;border-radius:var(--radius-circle);
  background:var(--live);flex-shrink:0;
  animation:ef-pulse var(--dur-pulse) infinite;
}
.availability-pill span:last-child{
  font-family:var(--font-mono);font-size:var(--text-eyebrow);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark);
}

/* ---------- CITY COVERAGE — map beside a compact service grid ----------- */
.city-coverage{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-top:36px;}
.city-coverage .map-plate{height:284px;}
.city-coverage .map-caption{
  padding:14px 20px;font-size:var(--text-caption);
  color:var(--ink-soft);line-height:1.55;border-top:1px solid var(--line);
}
.map-caption a{color:var(--live);font-weight:var(--weight-bold);text-decoration:none;}
.map-caption a:hover{color:var(--spark-dark);}

/* ---------- HERO — photo under a flat scrim, centred 840px column -------
   All contrast comes from the scrim. Raising the photo opacity or dropping the
   grayscale breaks the headline. Never put a light card on the hero. */
.hero{position:relative;overflow:hidden;padding:0;}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--hero-image-filter);opacity:var(--hero-image-opacity);
}
.hero-scrim{position:absolute;inset:0;background:var(--hero-scrim);}
.hero-inner{
  position:relative;padding:78px var(--band-gutter) 84px;
}
.hero-col{
  max-width:var(--wrap-hero);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
}
.hero h1{
  font-family:var(--font-display);font-size:var(--text-h1);
  font-weight:var(--weight-bold);line-height:1.06;
  letter-spacing:var(--tracking-tight);color:var(--on-dark);margin:0;
  text-wrap:balance;
}
/* The h1 device: greyed words struck through with a 2px danger rule at -2deg */
.strike{position:relative;color:var(--on-dark-soft);white-space:nowrap;}
.strike::after{
  content:"";position:absolute;left:-2%;right:-2%;top:52%;height:2px;
  background:var(--danger);transform:rotate(-2deg);
}
.hero-lead{
  font-size:var(--text-lead);line-height:var(--leading-body);
  color:var(--on-dark-soft);margin:16px 0 0;max-width:600px;
}
.hero .phone-pill{margin-top:26px;}
.hero .call-microcopy{margin-top:14px;}

/* The ZIP row — always secondary to the phone number */
.zip-divider{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:520px;margin:26px 0 18px;
  font-family:var(--font-mono);font-size:var(--text-fine);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-muted);
}
.zip-divider::before,.zip-divider::after{
  content:"";flex:1;height:1px;background:var(--on-field-line-strong);
}
/* Input and button are both fully-rounded pills in the designs, not the 8px
   --radius-input. Nothing in this system is square. */
.zip-form{display:flex;gap:10px;width:100%;max-width:460px;}
.zip-form input{
  flex:1;min-width:0;padding:13px 16px;
  border-radius:var(--radius-button);
  border:1px solid var(--on-field-input-line);
  background:var(--on-field-input);color:var(--on-dark);
  font-family:var(--font-mono);font-size:var(--text-body);
  min-height:var(--tap-min);
}
.zip-form input::placeholder{color:var(--on-dark-muted);}
.zip-form input:focus{outline:2px solid var(--spark);outline-offset:1px;}
.zip-form .btn-zip{
  padding:13px 22px;border-radius:var(--radius-button);
  border:1px solid rgba(255,255,255,0.35);background:transparent;
  color:var(--on-dark);font-family:var(--font-body);
  font-weight:var(--weight-semibold);font-size:var(--text-body-sm);
  cursor:pointer;white-space:nowrap;min-height:var(--tap-min);
  transition:background-color var(--dur-fast) var(--ease);
}
.zip-form .btn-zip:hover{background:var(--on-field-hover);}
.lead-result{
  margin-top:14px;font-size:var(--text-body-sm);color:var(--on-dark-soft);
  font-family:var(--font-mono);display:none;
}
/* The script set an "error" class that nothing styled, so a rejected ZIP looked
   exactly like a successful one. */
.lead-result--error{color:var(--danger);}

/* ---------- BAND HEADINGS ------------------------------------------------ */
.band-h2{
  font-family:var(--font-display);font-size:var(--text-h2);
  font-weight:var(--weight-bold);line-height:var(--leading-display);
  letter-spacing:var(--tracking-tight);margin:10px 0 0;
}
.band-h2--center{text-align:center;margin-left:auto;margin-right:auto;max-width:820px;}
.band-lead{
  font-size:var(--text-body-lg);color:var(--ink-soft);
  line-height:1.55;max-width:560px;margin:12px 0 0;
}
.band--mid .band-lead,.band--deep .band-lead,.band--abyss .band-lead{color:var(--on-dark-soft);}

/* The anchor must land on the band, not the top of the page. Header height. */
#how-it-works{scroll-margin-top:80px;}
@media (max-width:880px){ #how-it-works{scroll-margin-top:76px;} }

/* ---------- STEP CARDS — "how it works", on a mid band ------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.step-card{
  background:var(--on-field-card);
  border:1px solid var(--on-field-card-line);
  border-radius:var(--radius-card);padding:var(--pad-card);
  box-shadow:var(--shadow-card-onfield);
}
.step-num{
  font-family:var(--font-mono);font-size:14px;
  font-weight:var(--weight-semibold);color:var(--spark);
}
.step-card h3{
  font-family:var(--font-display);font-size:var(--text-h3);
  font-weight:var(--weight-bold);color:var(--on-dark);margin:14px 0 0;
}
.step-card p{
  font-size:var(--text-body);line-height:1.55;color:var(--on-dark-soft);margin:10px 0 0;
}

/* ---------- BADGE ROW — four-up, 60px glyphs inheriting --spark ---------- */
.badge-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;
}
.badge-cell{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;color:var(--spark);
}
.badge-cell svg{width:60px;height:60px;display:block;}
/* The location pin is drawn as a solid shape with a punched hole. The hole
   takes the field it sits on, never white — the design uses #2F5478, which is
   --field-mid, the band the badge row lives on. */
.pin-hole{fill:var(--field-mid);}
.badge-cell span{
  font-size:var(--text-body);font-weight:var(--weight-bold);
  color:var(--on-dark);line-height:1.35;
}

/* ---------- TRUST STRIP — the darkest band, one statement + a pill ------ */
.trust-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:28px;
}
.trust-statement{
  display:flex;align-items:flex-start;gap:14px;max-width:560px;
  color:var(--spark);
}
.trust-statement svg{width:24px;height:24px;flex-shrink:0;margin-top:4px;}
.trust-statement span{
  font-family:var(--font-display);font-size:var(--text-phone-block);
  font-weight:var(--weight-bold);color:var(--on-dark);line-height:1.25;
}
.trust-phone{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.trust-phone .call-microcopy{font-size:var(--text-mono-sm);color:var(--on-dark-eyebrow);}

/* CHIP (reusable tag style) */
.chip{
  border:1px solid var(--line);background:var(--panel);border-radius:100px;
  padding:10px 18px;font-size:14px;color:var(--ink-soft);
}

/* ---------- QUESTIONS BAND — list left, accordion right ----------------- */
.questions-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}

/* The compliance-safe "questions worth asking" list. The ? in a filled --live
   circle is the system motif for hiring guidance; these are questions the reader
   asks the electrician, never claims the site makes. */
/* padding:0 matters — a <ul> carries a 40px padding-inline-start by default,
   which pushed the whole list in past the heading it sits under. */
.question-list{display:flex;flex-direction:column;gap:18px;margin:24px 0 0;padding:0;}
.question-list li{
  position:relative;padding-left:34px;list-style:none;
  font-size:17px;color:var(--ink);line-height:1.45;text-wrap:pretty;
}
.question-list li::before{
  content:"?";position:absolute;left:0;top:2px;
  width:23px;height:23px;border-radius:var(--radius-circle);
  background:var(--live);color:#fff;
  font-family:var(--font-mono);font-size:13px;font-weight:var(--weight-bold);
  display:flex;align-items:center;justify-content:center;
}

.faq-accordion{margin-top:22px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:var(--text-faq-summary);
  font-weight:var(--weight-bold);color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:22px;color:var(--wire);line-height:1;flex-shrink:0;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{
  font-size:var(--text-body);color:var(--ink-soft);
  line-height:1.6;margin:12px 0 18px;padding-right:38px;
}
.faq-item a{color:var(--live);font-weight:var(--weight-semibold);text-decoration:none;}
.faq-item a:hover{color:var(--spark-dark);}

/* ---------- CLOSING CTA — deep band, nothing competes with the call ----- */
.cta-band{text-align:center;}
.cta-band h2{
  font-family:var(--font-display);font-size:32px;font-weight:var(--weight-bold);
  color:var(--on-dark);line-height:1.1;margin:0;
}
.cta-band p{
  color:var(--on-dark-soft);font-size:var(--text-body-lg);margin:14px 0 0;
}
.cta-band .phone-pill{margin-top:24px;}
.cta-band .call-microcopy{margin-top:12px;font-size:var(--text-mono-sm);color:var(--on-dark-eyebrow);}

/* ---------- BREADCRUMB — its own abyss band under the header ------------ */
.breadcrumb{
  padding:11px var(--band-gutter);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.breadcrumb > .wrap{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  color:var(--on-dark-faint);
}
.breadcrumb a{color:var(--on-dark-eyebrow);text-decoration:none;}
.breadcrumb a:hover{color:var(--on-dark);}
.breadcrumb .current{color:var(--on-dark);}

/* ZIP PILLS (city page, nearby zips) */
.zip-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.zip-pill{
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);
  border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:5px 10px;
}

/* LOCATION PILL (header) */
.location-pill{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  color:var(--ink);background:var(--live-soft);border:1px solid var(--live);border-radius:100px;
  padding:5px 12px;white-space:nowrap;
}
.location-pill svg{color:var(--live);flex-shrink:0;}

/* BADGE STRIP (quick trust badges under hero CTA) */
.badge-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.badge-pill{
  display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);
  background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:8px 14px;
}
.badge-pill svg{color:var(--live);flex-shrink:0;}

/* FEATURE BADGES (hero, icon + caption grid) */
.feature-badges{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;}
.feature-badge{display:flex;flex-direction:column;align-items:flex-start;width:118px;}
.feature-badge svg{width:34px;height:34px;margin-bottom:8px;}
.feature-badge span{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.32;font-family:var(--font-body);}

/* TRUST LINE (hero, social proof statement) */
.trust-line{
  display:flex;align-items:flex-start;gap:10px;margin-top:20px;
  font-size:15px;color:var(--ink);font-weight:600;line-height:1.45;max-width:520px;
}
.trust-line svg{color:var(--spark);flex-shrink:0;margin-top:2px;}

/* ---------- COVERAGE — map card + stat strip, city chips ---------------- */
.coverage-grid{
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:36px;align-items:start;
}
.map-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;
}
/* The grid plate stands in where no live map is embedded. The real Maps iframe
   replaces it on city pages; the key is referrer-locked, so it renders on the
   live domain only and a blank map in local preview is expected. */
.map-plate{
  position:relative;height:340px;background:var(--map-plate);
  background-image:
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    linear-gradient(var(--grid-line) 1px,transparent 1px);
  background-size:var(--map-grid-size) var(--map-grid-size);
}
/* pointer-events:none, and the reason is the page's job rather than the circle's.
   The map is here to localise — to show a visitor we mean their area — not to be
   explored. Every control inside the embed leads away from the call: "Open in
   Maps" opens google.com, and panning invites browsing instead of dialling. A
   picture localises just as well and keeps the reader on the page.

   It also stops the embed trapping page scroll on touch, which is worth having
   on its own.

   Known trade, flagged in GUARDRAILS.md: this leaves Google's own controls
   visible but inert, including the Terms link. Nothing is hidden or altered
   visually, and the attribution stays fully legible, but whether a dead Terms
   link satisfies the Maps branding requirements is a question for whoever owns
   vendor terms, not one to settle in a stylesheet. The middle path, if it ever
   matters, is the common click-to-activate pattern: inert until the visitor
   deliberately clicks, live thereafter. */
.map-plate iframe{
  width:100%;height:100%;border:0;display:block;
  filter:var(--map-grayscale);pointer-events:none;
}
/* Size comes from the template, per city: it is a true ROUTING_RADIUS_MILES
   circle at that city's map zoom, so it cannot be set here. */
.map-circle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:var(--radius-circle);
  border:2px solid var(--map-coverage-stroke);background:var(--map-coverage-fill);
  pointer-events:none;
}
.map-note{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--text-mono-sm);color:var(--ink-soft);
  pointer-events:none;
}
.map-note span{background:rgba(255,255,255,0.9);padding:3px 8px;border-radius:4px;}

/* Renamed from .map-coverage-stats — it is not map-specific (DH-49) */
.stat-strip{
  display:flex;align-items:stretch;padding:18px 20px;
  border-top:1px solid var(--line);
}
.stat{display:flex;flex-direction:column;gap:4px;}
.stat-num{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-stat);color:var(--ink);line-height:1;
}
.stat-label{
  font-size:12.5px;font-weight:var(--weight-bold);
  color:var(--ink);line-height:1.32;
}
.stat-divider{width:1px;background:var(--line);margin:2px 22px;}
/* The design rewords the stat labels at 390px rather than only shrinking them,
   so both wordings ship and the breakpoint picks one. Same pattern as .mc-br. */
.lbl-short{display:none;}
.map-foot{
  padding:12px 20px;font-size:var(--text-caption);color:var(--wire);
  border-top:1px solid var(--line);
}
.map-foot a{color:var(--live);font-weight:var(--weight-bold);text-decoration:none;}
.map-foot a:hover{color:var(--spark-dark);}

/* City chips on a dark field */
.city-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.city-chip{
  border:1px solid var(--on-field-input-line);background:var(--on-field-input);
  border-radius:var(--radius-chip);padding:10px 16px;
  font-size:var(--text-body-sm);color:var(--on-dark);text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.city-chip:hover{background:var(--on-field-hover);border-color:var(--spark-dark);}
.city-chip--all{
  border-color:var(--spark);background:var(--spark-tint);
  font-weight:var(--weight-bold);white-space:nowrap;
}

/* MINI FAQ (plain text, not accordion) */
.mini-faq{display:flex;flex-direction:column;gap:18px;}
.mini-faq .q{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:4px;}
.mini-faq .a{font-size:14.5px;color:var(--ink-soft);}

/* FOOTER LEGAL */
.footer-legal{font-size:12px;color:var(--wire);line-height:1.6;max-width:920px;margin-top:18px;}

/* ---------- SERVICE CARDS — tint band, white cards, svc line glyphs ------ */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.service-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:22px 24px;
  box-shadow:var(--shadow-card);text-decoration:none;
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.service-card:hover{transform:var(--lift-card);border-color:var(--spark-dark);}
.service-card .svc-icon{width:40px;height:40px;color:var(--live);flex-shrink:0;}
.service-card .name{
  font-family:var(--font-display);font-size:var(--text-h3);
  font-weight:var(--weight-bold);color:var(--ink);line-height:1.2;
}
.service-card .desc{
  font-size:var(--text-body);color:var(--ink-soft);line-height:var(--leading-body);
}
.service-card .go{
  font-family:var(--font-mono);font-size:13.5px;color:var(--spark-dark);
  margin-top:auto;
}

/* Compact service cards — the city page fits nine beside the map, so they drop
   the description the home grid carries but keep the glyph, laid out as a row
   rather than a stack. The tenth cell is the see-all chip, which is why the grid
   has to tolerate a cell with no icon.

   This block MUST stay after the .service-grid / .service-card base above. Every
   rule here is a single-class override of a single-class base rule, so the two
   tie on specificity and the winner is whichever comes last. When this block sat
   earlier in the file the base quietly won all of it: the grid rendered three
   columns instead of two, kept a 36px top margin that broke alignment with the
   map, and drew 40px icons under 19px labels — which is what forced every label
   to wrap. The card selectors below are also scoped through .service-card so
   they outrank the base on specificity too, belt and braces. */
.service-grid--compact{grid-template-columns:1fr 1fr;gap:12px;margin-top:0;}
.service-grid--compact .service-card{
  flex-direction:row;align-items:center;gap:13px;
  padding:16px;border-radius:var(--radius-card-sm);
}
.service-grid--compact .service-card .svc-icon{width:30px;height:30px;}
.service-grid--compact .service-card .name{font-size:var(--text-body-lg);}

/* See-all chip as the grid's tenth cell. On a mid field band it inverts the
   light-band treatment from CR-2: spark tint behind a spark border, white
   label — the field is dark enough to carry it. */
.see-all-cell{
  display:flex;align-items:center;gap:13px;
  background:var(--spark-tint);border:1px solid var(--spark);
  border-radius:var(--radius-card-sm);padding:16px;text-decoration:none;
  font-family:var(--font-display);font-size:var(--text-body-lg);
  font-weight:var(--weight-bold);color:var(--on-dark);line-height:1.25;
  transition:background var(--dur-fast) var(--ease);
}
.see-all-cell:hover{background:var(--spark);}
/* CHANGE REQUEST vs the design, agreed with the property owner: the design has
   this as a plain orange text link. It is a secondary outline button instead, so
   it reads as an action and matches the "See all 566 cities" chip on the coverage
   band. Light-band variant of that chip: --spark border and --spark-tint fill,
   with --spark-dark text since white would not hold on tint. */
.see-all{
  display:inline-block;margin-top:28px;
  border:1px solid var(--spark);background:var(--spark-tint);
  border-radius:var(--radius-chip);padding:10px 16px;
  font-size:var(--text-body-sm);font-weight:var(--weight-bold);
  color:var(--spark-dark);text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease);
}
.see-all:hover{background:var(--spark);color:#FFFFFF;}

/* The pre-redesign TipBox lived here: a --live-soft fill with a #BFE3D2 border
   left over from an older palette, and a .tip-list li::before that drew its own
   "?" circle behind a 26px indent. The redesigned TipBox further down uses a real
   .q-dot span instead, so the two together were painting two question marks per
   row and indenting every one of them. Removed rather than overridden. */
/* .tip-box-compact removed — last pre-redesign leftover, used by no template. */

/* NEARBY CITIES */
.nearby-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.nearby-chip{
  border:1px solid var(--line);background:var(--panel);border-radius:8px;
  padding:9px 16px;font-size:14px;text-decoration:none;color:var(--ink-soft);
}
.nearby-chip:hover{border-color:var(--spark-dark);color:var(--ink);}

/* LOCATIONS DIRECTORY */
/* ---------- LOCATIONS — jump nav, then a state per rule ------------------
   Replaces the pre-redesign .state-group / .city-link-grid / .state-nav set,
   which were light-band components: panel fills, ink text, a boxed nav card.
   All three bands here sit on a field. */
.jump-nav{border-top:1px solid var(--on-field-hover);padding:26px var(--band-gutter);}
.jump-nav > .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.jump-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--on-dark-faint);margin-right:8px;
}
.jump-nav a{
  font-family:var(--font-mono);font-size:13px;color:var(--on-dark-eyebrow);
  border:1px solid var(--on-field-card-line);border-radius:8px;padding:7px 11px;
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.jump-nav a:hover{border-color:var(--spark);color:var(--on-dark);}
/* scroll-margin so a jumped-to state lands below the sticky header, not under it */
.state-group{padding:26px 0;border-top:1px solid var(--on-field-card-line);scroll-margin-top:96px;}
.state-head{display:flex;align-items:baseline;gap:12px;}
.state-head h3{
  font-family:var(--font-display);font-size:22px;
  font-weight:var(--weight-bold);color:var(--on-dark);margin:0;
}
.state-meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
  color:var(--on-dark-eyebrow);
}
.city-link-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 24px;margin-top:16px;}
.city-link-grid a{font-size:14.5px;color:var(--on-dark-soft);text-decoration:none;}
.city-link-grid a:hover{color:var(--on-dark);}

/* ---------- FOOTER — paper, four columns -------------------------------- */
.site-footer{padding:44px var(--band-gutter) 28px;}
.footer-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.footer-brand{max-width:340px;}
.footer-brand .logo-lockup{height:30px;width:auto;}
.footer-blurb{
  font-size:var(--text-caption);color:var(--wire);
  line-height:1.55;margin-top:14px;
}
/* The design specifies a 48px gap here, but brand (340) + gap (32) + the four
   columns at 48px needs 1178px and the 1180px wrap gives 1165 — so it wrapped on
   every desktop, not just narrow ones. Tightened to 36px and the Services
   sub-columns to 32px, which lands at ~1134 and holds one row with real slack.
   flex-wrap stays so it degrades to stacked rather than overflowing. */
.footer-links{display:flex;gap:36px;flex-wrap:wrap;flex:1 1 auto;justify-content:space-between;}
.footer-col-head{
  font-family:var(--font-mono);font-size:var(--text-mono-sm);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--wire);margin-bottom:12px;
}
.footer-link-grid{display:grid;gap:8px 40px;}
/* Column-major fill: the ten Services items become two columns of five in
   alphabetical order, which is what the flat markup order gives with 5 rows. */
.footer-link-grid--two{grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:8px 32px;}
.footer-link-grid a{
  display:block;font-size:14px;color:var(--ink-soft);text-decoration:none;
}
.footer-link-grid a:hover{color:var(--spark-dark);}

/* The footer degrades in two steps before the 880px breakpoint, because the
   Services column is the widest thing in it — two sub-columns at ~295px.

   Four columns beside the brand needs a ~1190px viewport as designed. Rather than
   stack that early, the first step drops Services to a single sub-column, which
   takes it to ~145px and holds all four columns beside the brand down to ~1040px.
   Only then does the brand get its own row.

   These blocks MUST stay after the .footer-link-grid rules above. They sat ~390
   lines earlier for three weeks, which made .footer-link-grid--two a
   single-class rule losing a specificity tie to a single-class rule further down
   the file — so the first step never once applied at any width. */
@media (max-width:1200px){
  .footer-link-grid--two{grid-template-rows:none;grid-auto-flow:row;}
}
@media (max-width:1040px){
  .footer-top{flex-direction:column;}
  .footer-brand{max-width:none;}
  .footer-links{justify-content:flex-start;gap:40px;}
}
.footer-legal{
  font-size:var(--text-legal);color:var(--wire);line-height:var(--leading-legal);
  max-width:920px;margin:32px 0 0;padding-top:20px;
  border-top:1px solid var(--line);
}
.footer-bottom{
  font-size:var(--text-legal);color:var(--wire);margin-top:14px;
}


/* ---------- SERVICES HUB ------------------------------------------------
   The hub's own vocabulary: a hero with a call card beside it, nine <details>
   panels on a mid field, and a full-width helper card closing the grid.

   The six values below are alphas and tints the reference uses that the design
   system has no token for. They are collected here rather than inlined across a
   dozen rules so the upstream ask is one list, not a scavenger hunt. Values are
   the reference's exactly — the fidelity rule says follow the files. */
:root{
  --hub-toggle-line:rgba(255,255,255,0.24);
  --hub-panel-rule:rgba(255,255,255,0.14);
  --hub-live-tint:rgba(0,148,217,0.12);
  --hub-live-line:rgba(0,148,217,0.40);
  --hub-on-dark-body:#D6DEE8;
  --hub-on-dark-quiet:#C7D2DE;
  --hub-on-dark-tip:#E4EBF2;
}

/* Hero: copy on the left, call card on the right, both sitting on the baseline
   so the card's bottom edge lines up with the lead's last line. */
.hub-hero-grid{
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:end;
}
.hub-hero h1{
  font-family:var(--font-display);font-size:var(--text-h1);
  font-weight:var(--weight-bold);line-height:1.06;
  letter-spacing:var(--tracking-tight);color:var(--on-dark);
  margin:22px 0 0;text-wrap:balance;
}
.hub-hero .band-lead{max-width:620px;margin-top:16px;}

.call-card{
  background:var(--field-chrome);border:1px solid var(--on-field-card-line);
  border-radius:var(--radius-card);padding:24px;
}
.call-card-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--on-dark-muted);text-align:center;
}
.call-card .phone-pill{
  margin-top:14px;width:100%;justify-content:center;gap:12px;
  padding:16px 28px;font-size:26px;
}
.call-card-note{
  font-size:13px;color:var(--on-dark-muted);line-height:1.55;
  margin-top:12px;text-align:center;
}

/* Band head: eyebrow and h2 on the left, the tap hint pushed to the right and
   sitting on the same baseline. */
.hub-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.hub-hint{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--on-dark-eyebrow);
}

.svc-panels{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  align-items:start;margin-top:30px;
}
.svc-panel{
  background:var(--field-deep);border:1px solid var(--on-field-card-line);
  border-radius:var(--radius-card);padding:22px 24px;
}
.svc-panel summary{
  display:flex;align-items:flex-start;gap:16px;
  cursor:pointer;list-style:none;
}
.svc-panel summary::-webkit-details-marker{display:none;}
.svc-panel-text{flex:1;}
.svc-panel-name{
  font-family:var(--font-display);font-size:21px;
  font-weight:var(--weight-bold);color:var(--on-dark);line-height:1.15;
}
.svc-panel-desc{
  font-size:15px;color:var(--on-dark-soft);margin-top:7px;line-height:1.5;
}
/* The affordance is a bordered circle, not the FAQ's bare glyph — so it reads
   as a control on a card that is itself a big click target. */
.svc-toggle{
  flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-circle);
  border:1px solid var(--hub-toggle-line);
  display:flex;align-items:center;justify-content:center;
  color:var(--spark);font-family:var(--font-mono);font-size:19px;line-height:1;
}
.svc-toggle::after{content:"+";}
.svc-panel[open] .svc-toggle::after{content:"\2212";}

.svc-body{
  margin-top:20px;padding-top:20px;
  border-top:1px solid var(--hub-panel-rule);
}
.svc-body > p{
  font-size:16px;line-height:1.6;color:var(--hub-on-dark-body);
  margin:0;text-wrap:pretty;
}
.svc-involves{
  background:var(--on-field-card);border-radius:10px;padding:18px;margin-top:18px;
}
.svc-involves .label{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--on-dark-muted);
}
.svc-involves p{
  font-size:15px;line-height:1.6;color:var(--hub-on-dark-quiet);
  margin:9px 0 0;text-wrap:pretty;
}
.svc-ask{
  border:1px solid var(--hub-live-line);background:var(--hub-live-tint);
  border-radius:10px;padding:18px;margin-top:14px;
}
.svc-ask-head{display:flex;align-items:center;gap:9px;}
.q-dot{
  width:20px;height:20px;border-radius:var(--radius-circle);
  background:var(--live);color:#FFFFFF;font-size:12px;
  font-weight:var(--weight-bold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.svc-ask-head span:last-child{
  font-family:var(--font-display);font-size:16px;
  font-weight:var(--weight-bold);color:var(--on-dark);
}
.svc-ask-sub{font-size:14px;color:var(--on-dark-soft);margin-top:8px;line-height:1.5;}
.svc-ask-list{display:flex;flex-direction:column;gap:9px;margin-top:12px;}
.svc-ask-list li{
  display:flex;gap:10px;font-size:15px;
  color:var(--hub-on-dark-tip);line-height:1.5;
}
.svc-ask-list .q-dot{width:18px;height:18px;font-size:11px;margin-top:3px;}
.svc-disclaimer{
  font-size:13px;color:var(--on-dark-muted);line-height:1.55;
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--on-field-hover);text-wrap:pretty;
}

/* Closes the grid across both columns. */
.hub-helper{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  background:var(--on-field-card);border:1px solid var(--on-field-line-strong);
  border-radius:var(--radius-card);padding:22px 24px;
}
.hub-helper-text{max-width:640px;}
.hub-helper-text .t{
  font-family:var(--font-display);font-size:19px;
  font-weight:var(--weight-bold);color:var(--on-dark);
}
.hub-helper-text .s{
  font-size:15px;color:var(--on-dark-soft);line-height:1.5;
  margin-top:6px;text-wrap:pretty;
}
.hub-helper .phone-pill{
  padding:11px 22px;font-size:14.5px;gap:8px;white-space:nowrap;
}
/* CHANGE REQUEST vs the reference, agreed with the property owner: the helper
   pill was text only. It carries the phone glyph now so it reads as a call
   rather than a link. Scaled down from the pill's default 26px, which is sized
   against a 26px number, not 14.5px of label. */
.hub-helper .phone-pill .icon-phone{width:18px;height:18px;}


/* ---------- SERVICE DETAIL ----------------------------------------------
   Not designed — composed from bands the system already prescribes (DH-37 to
   DH-43). Only three things here are new; everything else on the page reuses
   the hero, band, compact-card and pill components already built. */
.hero--service h1{font-size:var(--text-h1-service);}

/* The check-pill strip under the hero CTA. .badge-pill already exists but is a
   light-band component — panel fill, ink text — and this sits on a deep field,
   so it is alpha white like everything else that does. */
.check-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center;}
.check-pill{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--on-dark-soft);
  background:var(--on-field-card);border:1px solid var(--on-field-card-line);
  border-radius:var(--radius-button);padding:8px 14px;
}
.check-pill svg{color:var(--spark);flex-shrink:0;}

/* TipBox — the contained callout DH-40 asks for, rather than the open
   QuestionList the home page uses. The containment does compliance work: a
   bordered box marks these as questions to ask, not claims the site makes. */
.tip-box{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:24px 26px;
  box-shadow:var(--shadow-card);max-width:760px;margin-top:24px;
}
.tip-box .tip-head{display:flex;align-items:center;gap:9px;}
.tip-box .tip-head h3{
  font-family:var(--font-display);font-size:17px;
  font-weight:var(--weight-bold);color:var(--ink);margin:0;
}
.tip-note{font-size:14px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}
/* list-style and padding reset because a bare <ul> carries a 40px
   padding-inline-start that reads as a stray indent. */
.tip-list{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;}
.tip-list li{
  display:flex;gap:10px;font-size:15.5px;color:var(--ink);line-height:1.5;
}
.tip-list .q-dot{width:18px;height:18px;font-size:11px;margin-top:3px;}

/* Related services: six compact cards three-up, with the see-all chip on its own
   centred row beneath rather than as a grid cell — as a cell it stretched to a
   full track and read as a seventh service.

   .service-grid--compact zeroes margin-top because the city page needs the grid
   flush with the top of the map beside it. Here the grid follows a heading and
   needs the space back. */
.service-grid--3up{grid-template-columns:repeat(3,1fr);margin-top:28px;}
.see-all-row{display:flex;justify-content:center;margin-top:20px;}
.see-all-cell--auto{display:inline-flex;justify-content:center;}

/* The disclaimer and TipBox now share a tint band with the involves copy, so the
   field-colored variants have to step down to light-band ink. */
.band--tint .svc-disclaimer{color:var(--wire);border-top-color:var(--line);}
.tip-box .tip-note:first-child{margin-top:0;}

@media (max-width:880px){
  /* One breakpoint. Every grid goes single-column, the header sheds its nav and
     attribution, and the phone block stacks with a full-width pill. */
  .band{padding:44px 20px;}
  .band--tight{padding:44px 20px 46px;}
  /* The hero carries its own padding on .hero-inner; without this it picks up the
     band's too and the pill stops being full width. */
  .hero{padding:0;}
  .band-h2{font-size:27px;}

  /* Header: logo mark, hamburger, phone number — nothing else. */
  .powered-tag{display:none;}
  .site-header{padding:12px 16px;}
  .header-row{gap:12px;}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:var(--tap-min);height:var(--tap-min);padding:0 10px;
    background:transparent;border:0;cursor:pointer;order:1;flex-shrink:0;
  }
  .nav-toggle span{display:block;height:2px;background:var(--on-dark);border-radius:2px;}
  .header-row{flex-wrap:wrap;}
  .header-nav{display:contents;}
  .logo{order:2;margin:0 auto;}
  .logo-lockup{height:23px;}
  /* On mobile the header phone becomes an orange pill with the icon only — with
     an 18px glyph and 14px of padding it reads as a circular button. Two
     consequences worth knowing: the GTM Click Phone Link trigger still fires,
     because it reads the href rather than the text; but there is no visible
     number here for the Google Ads swap to rewrite, so the header stops being one
     of its targets on mobile. The hero and trust pills still carry the number as
     text, so the swap still has somewhere to work. The aria-label says "Call now"
     rather than the number, so a screen reader is not handed a number the swap may
     have changed elsewhere on the page. */
  .header-nav{order:0;}
  .site-header .phone-link{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-width:var(--tap-min);height:var(--tap-min);padding:0 14px;
    border-radius:var(--radius-button);
    background:var(--spark);color:#FFFFFF;
    flex-shrink:0;order:3;
  }
  .site-header .phone-link:hover{background:var(--spark-dark);}
  .site-header .phone-link-num{display:none;}
  .site-header .phone-link .icon-phone{width:18px;height:18px;}
  /* The nav links drop onto a second row when the hamburger opens them. */
  .nav-link{
    order:4;flex-basis:100%;display:none;
    padding:12px 0;border-top:1px solid var(--on-field-line);
  }
  .site-header[data-nav="open"] .nav-link{display:block;}

  /* Hero */
  .hero-inner{padding:64px 22px 68px;}
  .hero h1{font-size:var(--text-h1-mobile);}
  .hero-lead{font-size:var(--text-body-lg);margin-top:14px;}
  .phone-pill,.phone-pill--hero{
    width:100%;justify-content:center;gap:10px;
    padding:16px 20px;font-size:24px;
  }
  /* The ZIP row stays side by side on mobile — the design keeps it one row at
     390px, tightening the gap and shortening the button label rather than
     stacking. */
  .zip-divider,.zip-form{max-width:none;}
  .zip-form{gap:8px;margin-top:16px;}
  .zip-form .btn-zip{padding:13px 16px;}
  .btn-zip-long{display:none;}

  /* Bands */
  .steps{grid-template-columns:1fr;}
  .badge-row{grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:32px;}
  .badge-cell{gap:12px;}
  .badge-cell svg{width:52px;height:52px;}
  .badge-cell span{font-size:14.5px;}
  .trust-strip{flex-direction:column;align-items:stretch;}
  .trust-statement span{font-size:20px;}
  .trust-phone{align-items:stretch;}
  .call-microcopy{font-size:var(--text-mono-xs);margin-top:12px;}
  .mc-br{display:inline;}
  .trust-phone .call-microcopy{font-size:var(--text-mono-xs);text-align:center;}
  .service-grid{grid-template-columns:1fr;}
  .coverage-grid{grid-template-columns:1fr;gap:28px;}
  .questions-grid{grid-template-columns:1fr;gap:36px;}
  .question-list{gap:16px;margin-top:20px;}
  .question-list li{font-size:15.5px;padding-left:30px;}
  .question-list li::before{width:21px;height:21px;top:1px;font-size:12px;}
  .stat-strip{flex-wrap:wrap;gap:16px 0;}
  .stat-divider{margin:2px 16px;}
  .city-link-grid{grid-template-columns:repeat(2,1fr);}

  /* Mobile scale, from an element-level diff against Home Mobile View. Each of
     these is a value the design changes at 390px and the desktop rules do not. */
  .step-card h3{margin-top:10px;}
  .step-card p{margin-top:8px;}
  .band-lead{margin-top:10px;}
  .service-card{border-radius:var(--radius-card-sm);padding:18px;align-items:flex-start;}
  .service-card .desc{margin-top:5px;}
  .see-all{margin-top:22px;}
  .city-chip{padding:9px 14px;}
  .stat-num{font-size:21px;}
  .map-foot{padding:12px 18px;}
  .cta-band h2{font-size:26px;line-height:1.15;}
  .band-h2{margin-top:8px;}
  .faq-item p{margin-top:10px;}
  /* The reference lays the mobile footer as a two-column grid with Services
     spanning both, rather than letting four flex columns wrap on content width.
     Wrapping is why "For Electricians" was landing beside Locations at a left
     edge that matched no other column: flex wrap packs by measured width, so the
     alignment changed with the link text, and city pages differed from the hub
     because their Locations column holds different city names.

     Services keeps its two sub-columns here, undoing the 1200px step above —
     that step is for holding four columns beside the brand, which no longer
     applies once the grid takes over. */
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .footer-col--wide{grid-column:1 / -1;}
  /* 18px column gap from the reference, but its row gap of 0 does not transfer:
     the reference gives every footer link its own margin-bottom:8px, and ours
     take row spacing from the grid instead. Copying gap:0 18px wholesale removed
     the spacing between links in the Services column and nowhere else. */
  .footer-link-grid--two{grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:8px 18px;}

  /* ---- Locations ---------------------------------------------------------
     .jump-nav and .state-group carry their own padding, and .band's mobile rule
     is a single class like theirs — so these have to sit here, after it, or the
     band padding wins and the jump strip doubles in height. */
  .jump-nav{padding:20px 20px 22px;}
  .jump-label{font-size:11px;flex-basis:100%;margin:0 0 4px;}
  /* 44x44 minimum: 51 chips at desktop size would be a row of small targets. */
  .jump-nav a{
    font-size:12px;padding:0 10px;min-width:var(--tap-min);min-height:var(--tap-min);
    display:flex;align-items:center;justify-content:center;
  }
  .state-group{padding:20px 0;scroll-margin-top:84px;}
  .state-head{gap:10px;}
  .state-head h3{font-size:19px;}
  .state-meta{font-size:11px;}
  /* The reference drops the word at 390 — "AL · 5", not "AL · 5 cities". */
  .meta-word{display:none;}
  .city-link-grid{grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:12px;}
  .city-link-grid a{font-size:13.5px;}
  .footer-bottom{margin-top:12px;}
  /* The design puts 38px between the stacked question columns; the grid gap plus
     the heading's own 10px margin adds up to that. */
  .questions-grid{gap:28px;}

  /* ---- City page ----------------------------------------------------------
     The coverage band is the only two-column layout that had no mobile rule, so
     at 375px the map card and the service grid were each squeezed into 151px and
     the 210px coverage circle hung off both edges of its plate. */
  .breadcrumb{padding:10px 16px;}
  .breadcrumb > .wrap{gap:8px;}
  /* The design tightens the whole pill at 390px, not just the label: 6/14/11
     padding against 7/16/13, an 8px gap and a 7px dot. Worth having even though
     it does not stop the label wrapping — at 11px the full string needs 356px in
     a 346px hero, so it wraps here exactly as it does in the reference. */
  .availability-pill span:last-child{font-size:11px;}
  .availability-pill{padding:6px 14px 6px 11px;gap:8px;margin-bottom:18px;}
  .availability-pill .dot{width:7px;height:7px;}
  /* The "Austin, TX ·" half goes at 390px so the label holds one line. Every
     city fits without it; almost none fit with it. */
  .avail-where{display:none;}

  /* ---- Services hub -------------------------------------------------------
     There is no Services Mobile View in the bundle — Home, Cities and City each
     have one and the hub does not — so this follows the system's established
     mobile behavior rather than a reference: every grid to one column, band
     padding 44/20, pills full width.

     Both pill rules below are needed even though .phone-pill already has a
     mobile rule: .call-card .phone-pill and .hub-helper .phone-pill are
     two-class selectors, so they outrank the one-class mobile rule no matter
     where it sits, and would otherwise keep their desktop sizes at 390px. */
  .hub-hero-grid{grid-template-columns:1fr;gap:28px;align-items:stretch;}
  .hub-hero h1{font-size:var(--text-h1-mobile);margin-top:18px;}
  .hub-hero .band-lead{max-width:none;}
  .call-card{padding:20px;}
  .call-card .phone-pill{font-size:22px;padding:16px 20px;}
  .hub-head{gap:14px;}
  .hub-hint{display:none;}
  .svc-panels{grid-template-columns:1fr;gap:14px;margin-top:24px;}
  .svc-panel{padding:18px;}
  .svc-panel-name{font-size:19px;}
  .svc-toggle{width:30px;height:30px;font-size:17px;}
  .svc-involves,.svc-ask{padding:15px;}
  .hub-helper{flex-direction:column;align-items:stretch;gap:16px;padding:20px;}
  .hero--service h1{font-size:var(--text-h1-mobile);}
  .tip-box{padding:20px;}
  .hub-helper .phone-pill{
    width:100%;justify-content:center;font-size:16px;padding:14px 20px;
  }

  .city-coverage{grid-template-columns:1fr;gap:24px;}
  /* 260 rather than 200: the coverage circle is 169-236px on all but five
     cities, and the map is the localising element on the page. */
  .city-coverage .map-plate{height:260px;}
  .city-coverage   .map-caption{padding:13px 18px;font-size:13.5px;}
  .stat{flex:1;}
  .stat-divider{margin:2px 14px;}
  .stat-label{font-size:11.5px;}
  .lbl-long{display:none;}
  .lbl-short{display:inline;}
  /* These four must stay after the .service-grid and .service-card mobile rules
     above, which take the grid to one column and give the card 18px padding with
     flex-start alignment — all three wrong for the compact card. The design keeps
     the city grid two-up at 390px. */
  .service-grid--compact{grid-template-columns:1fr 1fr;gap:10px;}
  .service-grid--compact .service-card{
    padding:14px 16px;min-height:56px;align-items:center;
  }
  .service-grid--compact .service-card .svc-icon{width:28px;height:28px;}
  .see-all-cell{padding:14px 16px;min-height:56px;}
}
@media (prefers-reduced-motion:reduce){
  .eyebrow .dot, .status.ready .dot{animation:none;}
}