/* ════════════════════════════════════════════════════════════════════════
   SERVICE PAGES — Superior Mobile Auto Glass
   Loaded AFTER assets/css/homepage.css (via $EXTRA_CSS in head.php).

   Everything here is service-page-only layout. The theme itself — colours,
   type scale, buttons, .card / .panel / .blist / .creds / .steps / .faq /
   .hero-media, the corner-bracket language — stays in homepage.css and is
   reused as-is. No new visual language is introduced.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 01 · HERO ───────────────────────────────────────────────────────────
   Service hero = rail | copy | photograph. Copy is the document's H1 and its
   lead line only; the checklist and the CTA line belong to section 2, beside
   the form. On a phone .hero-side flips to order:-1 (homepage.css), so the
   photograph leads and the copy follows it. */
.svc-hero .hero-lead{padding-bottom:12px;align-self:center}
.svc-hero h1 .ln{overflow:visible}          /* no clipped descenders */
.svc-hero h1 .ln>span{transform:none;animation:fadeUp .9s var(--ease) .95s both}
.svc-hero .hero-p{max-width:60ch}
/* two columns of very different natural heights — centre the short one */
.svc-hero .hero-grid{align-items:center}

/* ── 02 · SECTION 2 — intro prose, checklist and CTA beside the form ──── */
.svc-intro .p{font-size:16.5px}
.svc-intro .creds--sec2{margin-top:34px}
.svc-intro .hero-acts{margin-top:30px}
.svc-intro .p a{color:var(--amber);border-bottom:1px solid rgba(240,165,30,.42);
  padding-bottom:1px;transition:color .25s var(--ease),border-color .25s var(--ease)}

/* ── 03 · H3 CARD GRIDS ──────────────────────────────────────────────────
   The document's H2 sections carry 3–4 H3 sub-blocks. They reuse the home
   page's .card (hairline rule + index mark + heading + prose); only the
   track count is new. The home page's diagonal stagger is deliberately NOT
   repeated here — four such grids down one page would read as noise. */
.sgrid{display:grid;gap:28px 30px;margin-top:46px}
.sgrid--2{grid-template-columns:repeat(2,1fr)}
.sgrid--3{grid-template-columns:repeat(3,1fr)}
.sgrid .card{margin-top:0}
.sgrid .card p{max-width:56ch}
@media(max-width:980px){.sgrid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.sgrid--2{grid-template-columns:1fr}}
@media(max-width:700px){.sgrid,.sgrid--3{grid-template-columns:1fr;gap:26px}}

/* ── 04 · SECTION TAIL PROSE ─────────────────────────────────────────────
   The closing paragraph(s) a section ends with, after its cards or bullet
   panel. Stacked, never columned, so the reading order cannot diverge from
   the document. */
.sec-tail{margin-top:34px}
.sec-tail .p{max-width:80ch}

/* ── 05 · PROSE-ONLY SECTION (heading in the narrow side column) ─────────
   Same construction as the home page's insurance band, so a heading with no
   sub-headings under it still sits inside the page's grid. */
.svc-prose .h2{font-size:clamp(26px,2.7vw,40px);margin-bottom:0}
.svc-prose .mani p{font-size:clamp(18px,1.85vw,25px);line-height:1.5}

/* ── 06 · NUMBERED PROCEDURE ─────────────────────────────────────────────
   The document numbers these H3s itself ("1. Confirm the Required
   Procedure"), so the chip repeats the document's own number — nothing is
   renumbered or invented. */
.svc-steps .step h3{font-size:19px}

/* ── 07 · CLOSING CTA BAND ───────────────────────────────────────────────
   The document's final H2 lives here and ONLY here. */
.svc-close{border-top:1px solid var(--line-soft)}
.svc-close .p{max-width:74ch}
.svc-close .p+.p{margin-top:15px}
.svc-close .hero-acts{margin-top:36px;animation:none;opacity:1}

/* ── 08 · FAQ ─────────────────────────────────────────────────────────── */
.svc-faq .faq{margin-top:44px}

/* ── 09 · BREADCRUMB ─────────────────────────────────────────────────────
   A hairline trail under the bar; mono label type, same as the folio. */
.crumb{padding:18px 0 0}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chalk-3);list-style:none}
.crumb li{display:flex;align-items:center;gap:10px}
.crumb li+li::before{content:"/";color:var(--line);font-size:11px}
.crumb a{transition:color .25s var(--ease)}
.crumb [aria-current]{color:var(--amber)}
@media(hover:hover){
  .crumb a:hover{color:var(--chalk)}
  .svc-intro .p a:hover{color:var(--amber-hi);border-color:var(--amber-hi)}
}

/* ── 10 · RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:1080px){
  .svc-hero .hero-grid{align-items:start}
  .svc-hero .hero-lead{padding-bottom:0;align-self:start}
}
@media(max-width:700px){
  .crumb ol{font-size:9px;letter-spacing:.16em}
  .svc-steps .step h3{font-size:18px}
  /* "Request an ADAS Calibration Quote" wraps to two lines inside a
     full-width button — centre the label so it does not sit left while the
     arrow hangs off the far edge. */
  .hero-acts .btn>span:first-child{text-align:center}
}

/* ── 11 · BRAND LINK IN THE HERO ─────────────────────────────────────────
   Some documents hyperlink "Superior Mobile Auto Glass" in the first
   paragraph, which sits in the hero rather than beside the form. Same
   treatment as the section-2 link so the two read identically. */
.svc-hero .hero-p a{color:var(--amber);border-bottom:1px solid rgba(240,165,30,.42);
  padding-bottom:1px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
@media(hover:hover){
  .svc-hero .hero-p a:hover{color:var(--amber-hi);border-color:var(--amber-hi)}
}