/* Generator Industries — shared stylesheet
   Plain CSS, no build step. Loaded by every page as /assets/css/site.css
   Edit here once; every page picks it up. */

:root {
  --red: #E1251B;
  --red-dark: #B81C14;
  --navy: #16233B;
  --navy-deep: #0C1728;
  --ink: #16233B;
  --ink-2: #3E4B63;
  --ink-3: #2C3A52;
  --muted: #8494AC;
  --muted-light: #C6D3E4;
  --footer-fg: #8FA3C0;
  --blue: #0F6FB8;
  --cyan: #29ABE2;
  --cyan-light: #7FD0F5;
  --cyan-pale: #9FDCF7;
  --gold: #F2C14E;
  --bg-soft: #F4F6F9;
  --bg-softer: #F8FAFC;
  --line: #E3E8EF;
  --line-soft: #EDF1F6;
  --warn-bg: #FDF3E3;
  --warn-line: #F0DCB4;
  --warn-fg: #6B4A05;
  --sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1200px;
  --gutter: 20px;
  --tap: 48px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* No body padding. Clearance for the fixed action bar lives INSIDE
     .site-footer-inner so the navy paints behind the bar — body padding would
     paint in body background and show a white band under the footer. */
  padding-bottom: 0;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--red); }

img { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- layout ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding-top: clamp(46px, 6vw, 78px); padding-bottom: clamp(46px, 6vw, 78px); }
.section-tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

.band-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-navy { background: var(--navy); color: #fff; }
.band-red { background: var(--red); color: #fff; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 56px); align-items: start; }
.split-center { align-items: center; }
.split-narrow { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(26px, 4vw, 52px); }

.stack { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow-blue { color: var(--blue); letter-spacing: .12em; }
.eyebrow-cyan { color: var(--cyan-light); }

.h-xl { font-size: clamp(32px, 5vw, 58px); font-weight: 800; }
.h-lg { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
.h-md { font-size: clamp(25px, 3.2vw, 34px); font-weight: 800; }
.h-sm { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; }
.h-xs { font-size: 20px; font-weight: 800; }

.lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.body { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.body-sm { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.body-xs { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.on-dark { color: var(--muted-light); }
.mono { font-family: var(--mono); }

.measure { max-width: 56ch; }
.measure-tight { max-width: 24ch; }
.measure-wide { max-width: 66ch; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 15px 22px;
  border-radius: 4px;
  border: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.btn-lg { font-size: 18px; padding: 17px 26px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-invert { background: #fff; color: var(--red-dark); font-weight: 800; }
.btn-invert:hover { background: #F4F6F9; color: var(--red-dark); }
.btn-ghost { border: 1.5px solid #C9D3E0; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.link-arrow { font-family: var(--display); font-weight: 700; font-size: 16px; }

/* ---------- chrome ---------- */

.topbar { background: var(--red); color: #fff; padding: 10px var(--gutter); }
.topbar-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center; text-align: center;
}
.topbar-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,0,0,.25); padding: 4px 8px; border-radius: 3px;
}
.topbar-msg { font-size: 15px; font-weight: 600; }
.topbar-tel { color: #fff; font-family: var(--display); font-weight: 800; font-size: 16px; border-bottom: 2px solid rgba(255,255,255,.6); }
.topbar-tel:hover { color: #fff; }

.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.site-header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between;
}
/* Two-tier header by design: logo + credential + call button on row one,
   nav on its own full-width row beneath. The three items never fit one 1200px
   row (144 + 649 + 448 + gaps = 1281px), so this is deliberate rather than
   left to wrap. Order puts the nav last in the flex flow. */
/* Absent on the six /lp/ ad landing pages by design — a paid destination gets one
   conversion path, not eight ways to leave. */
.site-nav { flex: 1 0 100%; order: 3; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.site-nav ul { justify-content: flex-start; }
.site-logo { height: 48px; width: auto; }
.header-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.header-cred { font-size: 14px; color: var(--ink-2); font-weight: 600; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.site-nav a { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }

.site-footer { background: var(--navy); color: var(--footer-fg); }
.site-footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 36px var(--gutter) 44px;
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; justify-content: space-between;
}

/* Legal row — Privacy and Terms on every page. A site collecting TCPA consent
   should carry its disclosures in the footer, not only next to the checkbox. */
.footer-legal {
  max-width: var(--wrap); margin: 0 auto;
  padding: 16px var(--gutter) 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  font-size: 13px;
}
.footer-legal a { color: var(--cyan-light); }
.footer-legal span { color: rgba(255,255,255,.55); margin-left: auto; }

/* Clearance for the fixed action bar, which only exists below 900px.
   It sits on .site-footer — the last element in the navy block — so the navy
   paints behind the bar. On the body it would paint in body background and
   show a white band under the footer. Do not split it across both. */
@media (max-width: 900px) {
  .site-footer { padding-bottom: 76px; }
  .footer-legal span { margin-left: 0; width: 100%; }
}
.site-footer a { color: var(--cyan-light); }
.site-footer-tel { color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; }
.footer-addr { font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 34ch; }
.footer-hours { font-size: 14px; line-height: 1.9; }

/* Sticky call/quote bar — MOBILE ONLY.
   On desktop it duplicated the hero buttons verbatim, ~80px below them: the
   first viewport showed "Call (281) 997-9110 / Get a free quote" and then the
   same pair again, pinned. Four renderings of the same number on one screen
   reads as nagging rather than availability, and the bar ate 70px of viewport
   on every page forever. On mobile it earns its place — the header CTA scrolls
   away there, so this is the only persistent way to call. */
.action-bar { display: none; }

@media (max-width: 900px) {
  .action-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: rgba(12,23,40,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.14);
    padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: center;
  }
}
.action-bar .btn { flex: 1 1 0; padding: 13px; }
.action-bar .btn-primary { max-width: 320px; }
.action-bar .btn-ghost-light { max-width: 240px; border-color: rgba(255,255,255,.4); }

/* ---------- hero ---------- */

.hero { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,23,40,.96) 0%, rgba(12,23,40,.86) 55%, rgba(12,23,40,.5) 100%);
}
.hero-inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(44px, 6vw, 80px) var(--gutter); }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(41,171,226,.14); border: 1px solid rgba(41,171,226,.4);
  border-radius: 100px; padding: 7px 14px;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.pill-label { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--cyan-pale); }

/* ---------- fact bar ---------- */

.factbar { background: var(--navy); color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
.factbar-grid {
  max-width: var(--wrap); margin: 0 auto; padding: 26px var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px;
}
.fact-n { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.6vw, 28px); color: var(--cyan); line-height: 1.1; }
.fact-label { font-size: 15px; line-height: 1.5; color: var(--muted-light); margin-top: 8px; }

/* ---------- cards ---------- */

/* Each card carries its own border, so an empty grid cell is invisible
   at any column count. Do not reintroduce the grey-parent divider trick. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card-grid-tight { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card-grid-wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 26px; display: flex; flex-direction: column; gap: 11px;
}
.card h3 { max-width: 22ch; }
.card-cta { margin-top: auto; padding-top: 12px; }

.list-rows { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.list-rows > * { background: #fff; padding: 20px 24px; }

.tile { border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; }
.tile-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 24px; }

.bullets { display: grid; gap: 9px; }
.bullet { display: flex; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.bullet::before { content: "·"; color: var(--blue); font-weight: 700; flex: 0 0 auto; }
.bullet-light { color: #E4EBF4; }
.bullet-light::before { color: var(--cyan-light); }

.notice { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: 20px 24px; }
.notice p { color: var(--warn-fg); font-size: 16px; line-height: 1.65; max-width: 70ch; }

/* ---------- review ---------- */

.stars { color: var(--gold); font-size: 15px; letter-spacing: .14em; }
.review-q { font-size: 17px; line-height: 1.65; color: #E4EBF4; margin-top: 14px; }
.review-by { font-family: var(--mono); font-size: 12px; color: var(--footer-fg); margin-top: 14px; }

/* ---------- article ---------- */

.article { max-width: 800px; margin: 0 auto; padding: clamp(36px, 5vw, 60px) var(--gutter) 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.article h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-top: 18px; }
.article h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; max-width: 34ch; }
.article h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; }
.article p { font-size: 17.5px; line-height: 1.68; color: var(--ink-3); }
.article-byline { font-size: 15px; color: #5A6B85; margin-top: 16px; }
.article-sections { display: grid; gap: 34px; margin-top: 38px; }
.article-cta { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 26px 28px; margin-top: 40px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; }
.step-n { font-family: var(--display); font-weight: 800; font-size: 26px; color: #C9D3E0; line-height: 1; }

/* ---------- forms ---------- */
/* Markup only. No action, no submit handler, no third-party service —
   submit logic is wired separately to the lead function. */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.label { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink); }
.label .req { color: var(--red); }
.input, .textarea, .select {
  width: 100%; min-height: var(--tap);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1px solid #C9D3E0; border-radius: 4px; padding: 12px 14px;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,111,184,.14);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red); }
.field-error { font-size: 14px; color: var(--red-dark); font-weight: 600; }
.field-error:empty { display: none; }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.checkline input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- utilities ---------- */

.center { text-align: center; }
.mt-sm { margin-top: 10px; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 26px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.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;
}

@media (max-width: 900px) {
  /* Duplicated verbatim in the footer — drop it before the call button shrinks. */
  .header-cred { display: none; }
}

@media (max-width: 640px) {
  .site-header-inner { gap: 10px; }
  .topbar-msg { font-size: 14px; }
  .site-nav ul { gap: 4px 16px; }
  .site-nav a { font-size: 14px; }
}

@media print {
  .action-bar, .topbar { display: none; }
}

/* ── Multi-step lead form ──────────────────────────────────────────────
   Progressive enhancement. Without JS every step is visible and the form
   submits as one long form — which is exactly what shipped before, so a
   JS failure degrades to the old behaviour rather than to nothing.
   site.js adds .stepped to the form, which is what switches the CSS on. */

/* display:block is load-bearing. A `.step` class already exists in this
   stylesheet for the numbered "Four steps" section — display:grid with
   grid-template-columns:auto 1fr. When these fieldsets were called .step
   they inherited it and every choice row collapsed to 183px inside a 498px
   form. Renamed to .fstep; this declaration is the second line of defence. */
.fstep { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
/* This pair MUST stay together. `[hidden]` hides an element through the UA
   stylesheet, and ANY author `display` rule beats it — so the line above,
   added to stop the fieldsets inheriting a grid, silently un-hid every step
   and rendered all three at once. An attribute selector (0,2,0) outranks the
   class (0,1,0), so this restores it without !important. If you ever change
   .fstep display, check this still wins. */
.fstep[hidden] { display: none; }
.fstep-legend {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25;
  color: var(--ink); padding: 0; margin: 0 0 4px;
}
.fstep-hint { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 16px; }

.form-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.form-stepper-track { display: flex; gap: 5px; flex: 1 1 auto; }
.form-stepper-seg {
  height: 4px; flex: 1 1 0; border-radius: 2px; background: var(--line);
  transition: background .18s ease;
}
.form-stepper-seg.is-done { background: var(--red); }
.form-stepper-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

/* Big tap-target choice rows — the reason a stepped form converts better on a
   phone than a stack of text inputs. */
.choice-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 14px 16px; cursor: pointer; background: #fff;
  min-height: var(--tap); transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: var(--muted); }
.choice input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); flex: 0 0 auto; }
.choice input:checked ~ .choice-body .choice-title { color: var(--red-dark); }
.choice:has(input:checked) { border-color: var(--red); background: #FFF6F5; }
.choice-body { display: grid; gap: 2px; }
.choice-title { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.choice-note { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.choice-urgent { border-color: #F0B6B1; background: #FFF6F5; }

.fstep-nav { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.fstep-nav .btn-back {
  background: none; border: 0; padding: 10px 4px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-2);
}
.fstep-nav .btn-back:hover { color: var(--ink); text-decoration: underline; }

.form-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.form-level-error {
  border: 1.5px solid var(--red); background: #FFF6F5; border-radius: 6px;
  padding: 12px 14px; font-size: 15px; color: var(--red-dark); font-weight: 600;
  margin-bottom: 14px;
}

/* ── Sizing calculator ─────────────────────────────────────────────── */
.calc { display: grid; gap: 18px; }
.calc-row { display: grid; gap: 8px; }
.calc-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-label { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.calc-value { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--red-dark); }
.calc input[type="range"] { width: 100%; accent-color: var(--red); height: 28px; }
.calc-out {
  border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; background: var(--bg-soft);
}
.calc-out-kw { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 38px); color: var(--ink); line-height: 1.1; }
.calc-out-note { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: 14px; color: var(--ink-2); background: #fff; min-height: 40px;
}
.calc-chip:has(input:checked) { border-color: var(--red); background: #FFF6F5; color: var(--red-dark); font-weight: 600; }
.calc-chip input { width: 16px; height: 16px; accent-color: var(--red); }

/* ── Price band table ──────────────────────────────────────────────── */
.band-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.band-table th, .band-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.band-table th { font-family: var(--display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.band-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.band-table tr.is-mode td { background: #FFF6F5; font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 2px; }
.faq details { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.faq details + details { margin-top: 10px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 18px;
  font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.35;
  color: var(--ink); display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 700; color: var(--red); flex: 0 0 auto; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq .faq-a { padding: 0 18px 18px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.faq .faq-a p + p { margin-top: 10px; }

/* ── Emergency band ────────────────────────────────────────────────── */
/* Solid red, not a tint. This band is the permanent emergency path Phase 0 asked
   for, and it has one job: someone whose power is out right now should find it
   without reading. A pale wash reads as a notice; red reads as "this is you". */
.band-urgent { background: var(--red); color: #fff; }
.urgent-inner {
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: center; justify-content: space-between;
}
.urgent-copy { flex: 1 1 460px; max-width: 68ch; }
.urgent-title { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.4vw, 24px); color: #fff; line-height: 1.25; }
/* Plain white, not a tint. #FFE2DF on this red measures 3.84:1, which fails AA
   for body text (4.5:1). White is 4.69:1 and passes. On an emergency band of all
   places, legibility beats a softer tone. */
.urgent-copy .body-sm { color: #fff; }
.band-urgent .row { flex: 0 0 auto; }

/* ── Offer callout (manufacturer promotions) ───────────────────────── */
.offer {
  border: 1.5px solid var(--gold); background: #FFFBF0; border-radius: 8px;
  padding: 18px 20px;
}
.offer-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A5A00; }
.offer-title { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.2vw, 22px); color: var(--ink); line-height: 1.25; margin-top: 6px; }
.offer-body { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
.offer-terms { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 10px; }

@media (max-width: 640px) {
  .fstep-nav { flex-direction: column-reverse; align-items: stretch; }
  .fstep-nav .btn { width: 100%; }
}

/* ── Hero with fast-start card ─────────────────────────────────────────────
   The design puts a short form in the hero itself: two questions, then the
   visitor lands in the full form with those answers already filled. That is the
   whole point — the commitment asked for above the fold is one tap and a ZIP,
   not eleven fields. */

.hero-split {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

.hero-note { font-size: 14px; line-height: 1.55; color: var(--muted-light); margin-top: 14px; max-width: 56ch; }

.hero-facts {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px; margin-top: clamp(24px, 3vw, 36px);
  max-width: 560px;
}
.hero-facts > div { padding: 16px 20px; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.hero-facts > div:nth-child(2n) { border-right: 0; }
.hero-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.hero-fact-n { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; color: #fff; }
.hero-fact-l { font-size: 13.5px; line-height: 1.4; color: var(--muted-light); margin-top: 3px; }

.faststart {
  background: #fff; border-radius: 10px; padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
  /* `.hero` sets color:#fff for the copy beside it, and that cascades straight
     into this white card — which rendered the heading white on white. Anything
     dropped onto a light surface inside a dark section has to reassert its own
     text colour rather than rely on the class it happens to use. */
  color: var(--ink);
}
.faststart-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--red); }
.faststart-q { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.faststart-row { display: flex; gap: 10px; align-items: stretch; }
.faststart-row .input { flex: 1 1 auto; min-width: 0; }
.faststart-row .btn { flex: 0 0 auto; }
@media (max-width: 460px) { .faststart-row { flex-direction: column; } .faststart-row .btn { width: 100%; } }

/* ── Job cards with imagery ────────────────────────────────────────────────
   The design leads each of the four service cards with a photograph and closes
   it with a spec line and a red arrow link. The photo is doing real work here:
   a plant manager and a homeowner should be able to tell which card is theirs
   before reading a word. */

.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.job {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff;
}
.job-media { display: block; width: 100%; height: 170px; object-fit: cover; }
.job-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.job-title { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--ink); }
.job-copy { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
.job-spec {
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--muted);
  margin-top: auto; padding-top: 14px;
}
.job-cta {
  display: inline-block; margin-top: 10px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--red); text-decoration: none;
}
.job-cta:hover { text-decoration: underline; }

/* ── Numbered promise list + call-instead box ──────────────────────────── */

.numlist { display: grid; gap: 16px; margin-top: 22px; }
.numitem { display: flex; gap: 14px; align-items: flex-start; }
.numitem-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 13px; line-height: 1;
}
.numitem-t { font-family: var(--display); font-weight: 700; font-size: 16.5px; color: var(--ink); line-height: 1.3; }
.numitem-b { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }

.callbox {
  display: flex; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px;
  background: #fff; margin-top: 26px;
}
.callbox img { flex: 0 0 auto; border-radius: 50%; }
.callbox p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* Outlined button for use ON the red emergency band, where .btn-ghost-light
   (white border on dark navy) has too little contrast and .btn-invert reads as
   a second primary. */
/* For use ON the solid red band. White fill would read as a second primary and
   compete with the phone number, which is the action we actually want. */
.btn-outline-red {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.9);
}
.btn-outline-red:hover { background: rgba(255,255,255,.14); border-color: #fff; }
/* The call button sits on red, so it cannot also be red. */
.band-urgent .btn-primary { background: #fff; color: var(--red-dark); border-color: #fff; }
.band-urgent .btn-primary:hover { background: #FFEFED; }

/* Service-area chips. Plain text in a wrap — deliberately NOT links, because a
   town name that goes nowhere is worse than one that just tells you you're
   covered, and the suburb pages that would justify links do not exist yet. */
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.area-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  font-size: 14.5px; color: var(--ink-2); background: #fff;
}