/* ===================================================================
   Guide family — "job-site field guide" design system (2026-10-11).
   Loaded AFTER each guide's inline <style>; classes prefixed g- plus
   restyles of the shared guide classes inside .g-read.
   =================================================================== */
:root { --ink: var(--navy); --tar: #1b1d22; --granule: #8c8378; --osb: #f6ecdc; --osb-ink: #6b4f1d; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --display: 'Montserrat', sans-serif; }
.g-mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.g-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* hero */
.g-hero { position: relative; min-height: min(74vh, 700px); display: flex; align-items: flex-end; background: var(--tar); color: #fff; overflow: hidden; isolation: isolate; text-align: left; }
.g-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.g-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,31,60,.42) 0%, rgba(13,31,60,.62) 40%, rgba(13,31,60,.95) 100%); }
.g-hero .g-wrap { width: 100%; padding-top: 140px; padding-bottom: 44px; text-align: left; }
.g-hero .crumb { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; margin: 0 0 26px; color: rgba(255,255,255,.78); }
.g-hero .crumb a { color: var(--gold); text-decoration: none; }
.g-eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: block; }
.g-hero h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 900; letter-spacing: -.025em; line-height: .98; max-width: 15ch; margin: 0 0 20px; text-align: left; }
.g-hero .lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: rgba(255,255,255,.9); max-width: 60ch; margin: 0 0 26px; text-align: left; }
.g-hero .lede strong { color: #fff; }
.g-hero .crumb, .g-hero .g-eyebrow, .g-hero h1, .g-hero .lede { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.g-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.g-actions .btn { min-height: 52px; display: inline-flex; align-items: center; padding: 14px 24px; font-size: 1rem; }
.g-ticket { position: absolute; right: 20px; top: 108px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25); padding: 8px 12px; border-radius: 4px; backdrop-filter: blur(4px); }
@media (max-width: 700px) { .g-ticket { display: none; } .g-hero .g-wrap { padding-top: 110px; } }
/* outline: chips on phones, sticky rail on desktop */
.g-toc { background: #fff; border-bottom: 1px solid var(--gray-200); }
.g-toc > summary { list-style: none; cursor: pointer; text-align: center; padding: 16px 20px; color: var(--granule); }
.g-toc > summary::-webkit-details-marker { display: none; }
.g-toc > summary::after { content: "\25BE"; display: inline-block; margin-left: 8px; transition: transform .2s; }
.g-toc[open] > summary::after { transform: rotate(180deg); }
.g-toc > summary:hover, .g-toc > summary:focus-visible { color: var(--ink); }
.g-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 2px 20px 22px; background: #fff; }
.g-chips a { font-size: .85rem; line-height: 1.3; color: var(--gray-600); text-decoration: none; border: 1px solid var(--gray-200); border-radius: 999px; padding: 9px 15px; background: #fff; max-width: 100%; transition: color .15s, border-color .15s, background .15s; }
.g-chips a:hover, .g-chips a:focus-visible { color: var(--ink); border-color: var(--gold); background: var(--sand, #fdfaf4); }
.g-chips a[aria-current="true"] { color: var(--ink); font-weight: 600; border-color: var(--gold); background: var(--sand, #fdfaf4); }
/* jump targets must clear the sticky header */
h2[id], h3[id] { scroll-margin-top: 82px; }
.g-layout { display: grid; grid-template-columns: 1fr; gap: 0 56px; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.g-rail { display: none; }
@media (min-width: 960px) { .g-toc { display: none; } .g-layout { grid-template-columns: 210px minmax(0, 1fr); } .g-rail { display: block; position: sticky; top: 92px; align-self: start; padding: 28px 0 0; } }
.g-rail .g-mono { color: var(--granule); margin-bottom: 12px; display: block; }
.g-rail ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--gray-200); }
.g-rail li a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--gray-600); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.g-rail li a:hover, .g-rail li a[aria-current="true"] { color: var(--ink); border-left-color: var(--gold); font-weight: 600; }
.g-read { max-width: 72ch; min-width: 0; }
/* restyle the shared guide section classes inside the reading column */
.g-read .section, .g-read section { padding: 46px 0 10px; scroll-margin-top: 110px; }
.g-read .container { max-width: none; padding: 0; margin: 0; }
.g-read .section h2, .g-read section h2 { text-align: left; font-size: clamp(1.5rem, 3.1vw, 2.1rem); font-weight: 800; letter-spacing: -.015em; margin: 0 0 18px; }
.g-read .section h2::before, .g-read section h2::before { content: ""; display: block; width: 44px; height: 4px; background: var(--gold); margin-bottom: 16px; }
.g-read .lead { text-align: left; margin: 0 0 20px; max-width: none; color: var(--gray-700); }
.g-read .prose, .g-read .check-list, .g-read .flag-list, .g-read .range-card, .g-read .callout, .g-read .faq-item, .g-read .est-card { max-width: none; margin-left: 0; margin-right: 0; }
.g-read .section-alt { background: transparent; }
.g-read .factors-band, .g-read .navy-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: var(--radius-lg); padding: 30px 26px 26px; margin: 26px 0 10px; color: rgba(255,255,255,.88); }
.g-read .factors-band h2, .g-read .navy-band h2, .g-read .navy-band h3 { color: #fff; }
.g-read .factors-band .lead, .g-read .navy-band .lead, .g-read .navy-band p { color: rgba(255,255,255,.82); }
.g-read .navy-band a, .g-read .factors-band a { color: var(--gold); }
.g-read .sign-grid { justify-content: center; }
.g-read .sign-card { flex: 1 1 240px; max-width: 420px; }
.g-read .callout { background: var(--osb); border-left: 4px solid var(--gold-dark); border-radius: 0 var(--radius) var(--radius) 0; color: #4a3a1a; }
.g-read .callout strong { color: var(--osb-ink); }
.g-read .range-card { border-left: 4px solid var(--gold); }
.g-read table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 10px 0 18px; }
.g-read table th { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granule); text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--gray-200); }
.g-read table td { padding: 10px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.g-read a.btn { text-decoration: none; }
.g-read a.btn-red { color: #fff; } .g-read a.btn-gold { color: var(--navy); }
/* FAQ as disclosure (both markups) */
.g-read details.faq-item, .g-read .g-faq { background: transparent; border: 0; border-bottom: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 4px 0; margin: 0; }
.g-read details.faq-item summary, .g-read .g-faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.02rem; padding: 14px 28px 14px 0; position: relative; list-style: none; }
.g-read details summary::-webkit-details-marker { display: none; }
.g-read details.faq-item summary::after, .g-read .g-faq summary::after { content: "+"; position: absolute; right: 2px; top: 10px; font-family: var(--mono); font-size: 1.3rem; color: var(--gold-dark); }
.g-read details[open].faq-item summary::after, .g-read .g-faq[open] summary::after { content: "\2013"; }
.g-read details.faq-item .faq-a, .g-read .g-faq p { padding: 0 0 14px; margin: 0; }
/* evidence bands */
.g-band { margin: 44px 0 6px; grid-column: 1 / -1; }
.g-band figure { margin: 0; background: var(--tar); border-radius: var(--radius-lg); overflow: hidden; }
.g-band img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
@media (max-width: 700px) { .g-band img { aspect-ratio: 4 / 3; } }
.g-band figcaption { display: flex; gap: 14px; align-items: baseline; padding: 12px 18px; color: rgba(255,255,255,.85); font-size: .92rem; }
.g-band figcaption .g-mono { color: var(--gold); flex: 0 0 auto; }
/* closing band */
.g-close { position: relative; margin-top: 56px; color: #fff; background: var(--tar); overflow: hidden; isolation: isolate; text-align: left; }
.g-close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: -2; }
.g-close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,31,60,.95) 0%, rgba(13,31,60,.82) 55%, rgba(13,31,60,.5) 100%); }
.g-close .g-wrap { padding: 72px 20px; max-width: 1120px; }
.g-close h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; max-width: 20ch; margin: 0 0 14px; text-align: left; }
.g-close p { color: rgba(255,255,255,.88); max-width: 56ch; margin: 0 0 24px; }
.g-close .btn { min-height: 54px; display: inline-flex; align-items: center; padding: 15px 28px; font-size: 1.05rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media print { .g-rail, .g-toc, .g-chips, .g-band, .g-close, .g-hero > img, .g-hero::after, .g-ticket { display: none !important; } .g-hero { min-height: auto; color: #000; background: #fff; } .g-hero h1, .g-hero .lede, .g-hero .crumb { color: #000; text-shadow: none; } }
/* ---- hero variants so the family does not read as one template ---- */
/* B: split — navy text panel left, photo right */
.g-hero--split { display: grid; grid-template-columns: 1fr; min-height: 0; align-items: stretch; background: var(--navy); }
.g-hero--split > img { position: relative; inset: auto; z-index: 0; height: 240px; order: -1; object-position: center 45%; }
.g-hero--split::after { display: none; }
.g-hero--split .g-wrap { padding: 36px 20px 40px; max-width: none; }
.g-hero--split .crumb, .g-hero--split .g-eyebrow, .g-hero--split h1, .g-hero--split .lede { text-shadow: none; }
.g-hero--split h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 16ch; }
@media (min-width: 900px) { .g-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .g-hero--split > img { order: 1; height: 100%; min-height: 560px; } .g-hero--split .g-wrap { padding: 120px 48px 56px max(20px, calc((100vw - 1120px) / 2 + 20px)); margin: 0; max-width: none; justify-self: stretch; width: 100%; } }
.g-hero--split .g-ticket { display: none; }
/* C: cover — photo with title only; lede + actions in a deck card that overlaps the photo */
.g-hero--cover { min-height: min(60vh, 560px); }
.g-hero--cover .lede, .g-hero--cover .g-actions { display: none; }
.g-hero--cover .g-wrap { padding-bottom: 96px; }
.g-deck { position: relative; z-index: 2; max-width: 1120px; margin: -64px auto 0; padding: 0 20px; }
.g-deck > div { background: #fff; border: 1px solid var(--gray-200); border-left: 6px solid var(--gold); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 26px 28px; display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .g-deck > div { grid-template-columns: minmax(0, 1fr) auto; } }
.g-deck p { margin: 0; font-size: 1.05rem; color: var(--gray-700); max-width: 62ch; }
/* D: stack — full-width photo, then a navy panel that rises into it and aligns with the content grid */
.g-hero--stack { display: block; min-height: 0; background: var(--navy); }
.g-hero--stack > img { position: relative; inset: auto; display: block; width: 100%; height: clamp(260px, 46vw, 540px); object-fit: cover; object-position: center 45%; z-index: 0; }
.g-hero--stack::after { display: none; }
.g-hero--stack .g-wrap { position: relative; z-index: 1; margin: -110px auto 0; background: var(--navy); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 34px 40px 44px; box-shadow: 0 -10px 40px rgba(0,0,0,.28); }
.g-hero--stack .crumb, .g-hero--stack .g-eyebrow, .g-hero--stack h1, .g-hero--stack .lede { text-shadow: none; }
.g-hero--stack h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 18ch; }
.g-hero--stack .g-ticket { top: 20px; }
@media (max-width: 700px) { .g-hero--stack .g-wrap { margin-top: -56px; padding: 24px 20px 32px; border-radius: var(--radius) var(--radius) 0 0; } }
/* inset photo treatment (alternative to the full band): floats right inside the column */
.g-inset { margin: 10px 0 18px; }
.g-inset figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--tar); }
.g-inset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g-inset figcaption { padding: 10px 14px; color: rgba(255,255,255,.85); font-size: .86rem; line-height: 1.5; }
.g-inset figcaption .g-mono { color: var(--gold); display: block; margin-bottom: 4px; font-size: .68rem; }
@media (min-width: 760px) { .g-inset { float: right; width: 46%; margin: 6px 0 14px 26px; } .g-read .section::after, .g-read section::after { content: ""; display: table; clear: both; } }
/* signature figure block */
.g-sig { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 14px 10px; margin: 18px 0 22px; }
.g-sig svg { width: 100%; height: auto; display: block; }
.g-sig .g-cap { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granule); padding: 8px 4px 2px; }
.g-sig .g-lbl { font-family: var(--mono); font-size: 12px; fill: var(--granule); letter-spacing: .06em; text-transform: uppercase; }
.g-sig .g-lbl.ink { fill: var(--ink); font-weight: 600; }
/* long titles */
.g-hero h1.g-long { font-size: clamp(1.8rem, 4.4vw, 3.3rem); max-width: 20ch; letter-spacing: -.02em; }
/* print buttons inside the closing band */
.g-close .g-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.g-close button, .g-close .btn-print { min-height: 54px; display: inline-flex; align-items: center; padding: 15px 24px; font-family: var(--display); font-weight: 700; font-size: 1rem; color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.6); border-radius: var(--radius); cursor: pointer; }
.g-close button:hover, .g-close .btn-print:hover { border-color: var(--gold); color: var(--gold); }
/* ===================================================================
   Section separation (owner request 2026-10-11): page ground + panels
   =================================================================== */
body { background: var(--gray-50); }
.g-chips { background: #fff; }
.g-layout { padding-top: 28px; padding-bottom: 36px; }
/* the outline rail as a boxed card */
.g-rail { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 18px 16px 12px; box-shadow: var(--shadow-sm); }
.g-rail ol { border-left: 2px solid var(--gray-200); }
/* every section in the reading column becomes a panel */
.g-read .section, .g-read section, .g-read .g-sec { background: #fff; border: 1px solid var(--gray-200); border-top: 4px solid var(--gold); border-radius: var(--radius-lg); padding: 28px 28px 22px; margin: 22px 0; box-shadow: var(--shadow-sm); }
@media (max-width: 700px) { .g-read .section, .g-read section, .g-read .g-sec { padding: 22px 18px 16px; } }
.g-read .section h2::before, .g-read section h2::before, .g-read .g-sec h2::before { display: none; }
.g-read .section h2, .g-read section h2, .g-read .g-sec h2 { padding-bottom: 12px; border-bottom: 1px solid var(--gray-200); margin-bottom: 18px; }
/* alternate sections: tinted panel with a navy rule */
.g-read .section-alt { background: #eef3fa; border-top-color: var(--navy-light); }
/* dark bands stay dark, with their own edge */
.g-read .factors-band, .g-read .navy-band { border: 1px solid var(--navy-light); border-top: 4px solid var(--gold); padding: 28px 26px 24px; }
.g-read .factors-band h2, .g-read .navy-band h2 { border-bottom-color: rgba(255,255,255,.18); }
/* elements inside panels get their own edges */
.g-read .callout, .g-note { border: 1px solid #ead9b8; }
.g-read .range-card, .g-read .sign-card, .g-read .est-card, .g-tool, .g-factor { border: 1px solid var(--gray-200); }
.g-read .check-list li, .g-read .flag-list li, .g-rules li { border-bottom: 1px solid var(--gray-200); }
.g-read .check-list, .g-read .flag-list, .g-rules { border-top: 1px solid var(--gray-200); }
.g-read table { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.g-read table th { background: var(--gray-50); }
/* FAQ rows as separate cards */
.g-read details.faq-item, .g-read .g-faq, .g-faq { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 0 18px; margin: 10px 0; }
.g-read details[open].faq-item, .g-read .g-faq[open], .g-faq[open] { border-color: var(--gold); }
/* bands and inset figures */
.g-band figure, .g-inset figure { border: 1px solid var(--navy-mid); }
.g-sig { box-shadow: var(--shadow-sm); }
/* hub: banded groups */
.hub-group:nth-of-type(even) { background: #eef3fa; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.hub-group:nth-of-type(odd) { background: #fff; border-top: 1px solid var(--gray-200); }
.hub-group { padding-bottom: 56px; }
.hub-faq { background: #fff; border-top: 1px solid var(--gray-200); }
.hub-card { border: 1px solid var(--gray-200); border-top: 4px solid var(--navy); }
.hub-path { border: 2px solid rgba(255,255,255,.35); }
/* production pass: tables scroll on narrow screens; no text under 12px */
.g-read table { display: block; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
.g-read table tbody, .g-read table thead { display: table; width: 100%; min-width: 520px; }
.g-mono, .g-inset figcaption .g-mono, .hub-card-body .g-mono, .g-fine, .g-tool .g-fine, .g-dia-cap, .g-sig .g-cap, .g-ticket, .g-rail .g-mono { font-size: .75rem; }
.g-toc > summary { font-size: .75rem; }
.g-band figcaption .g-mono, .g-inset figcaption .g-mono { font-size: .72rem; }
/* dark bands must win over the white panel rule (declared later on purpose) */
.g-read .factors-band, .g-read .navy-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: rgba(255,255,255,.88); }
.g-read .factors-band .sign-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-top: 3px solid var(--gold); }
.g-read .factors-band .sign-card h3, .g-read .navy-band h3 { color: #fff; }
.g-read .factors-band .sign-card p { color: rgba(255,255,255,.78); }
/* prose two-column blocks stack inside the 72ch reading column */
.g-read .two-col { grid-template-columns: 1fr; gap: 18px; }
.g-read table, .g-read table[class] { min-width: 0; max-width: 100%; }
.g-read .section, .g-read section, .g-read .g-sec { min-width: 0; overflow: hidden; }
/* grids, tables and cards start below any floated inset figure */
.g-read .two-col, .g-read .sign-grid, .g-read .verdict-grid, .g-read .ws-cols, .g-read table, .g-read .range-card, .g-read .callout, .g-read .est-card, .g-read .g-sig { clear: both; }
/* ---- breadcrumb as a centered brand lockup (owner: no arrows; brand centered, page beneath) ---- */
.g-hero .g-crumb, .g-crumb { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 0 auto 22px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.g-crumb .g-crumb-brand a { color: var(--gold); text-decoration: none; font-size: .9rem; font-weight: 600; letter-spacing: .14em; }
.g-crumb .g-crumb-trail { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .76rem; color: rgba(255,255,255,.8); }
.g-crumb .g-crumb-item a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.g-crumb .g-crumb-item a:hover { color: var(--gold); border-color: var(--gold); }
.g-crumb .g-crumb-item + .g-crumb-item::before { content: "\00B7"; color: var(--gold); margin-right: 14px; }
/* stacked hero reads as a centered title card */
.g-hero--stack .g-wrap { text-align: center; }
.g-hero--stack h1, .g-hero--stack .lede { margin-left: auto; margin-right: auto; text-align: center; }
.g-hero--stack .g-actions { justify-content: center; }
.g-hero--stack .g-eyebrow { text-align: center; }
/* split + cover + full-bleed: brand lockup centered above a left-set headline */
.g-hero--split .g-crumb { align-items: center; }
@media (max-width: 700px) { .g-crumb .g-crumb-brand a { font-size: .84rem; } .g-crumb .g-crumb-trail { font-size: .75rem; } }
/* every guide hero reads as one centered block: brand, page, eyebrow, headline, lede, actions */
.g-hero .g-wrap, .g-hero--split .g-wrap, .g-hero--cover .g-wrap { text-align: center; }
.g-hero h1, .g-hero .lede, .g-hero--split h1, .g-hero--split .lede, .g-hero--cover h1 { text-align: center; margin-left: auto; margin-right: auto; }
.g-hero .g-actions { justify-content: center; }
.g-hero .g-eyebrow { text-align: center; }
.g-hero h1 { max-width: 18ch; }
.g-hero--split .g-wrap { padding-right: 48px; }
@media (min-width: 900px) { .g-hero--split .g-wrap { padding-left: max(48px, calc((100vw - 1120px) / 2 + 20px)); } }
.g-deck > div { text-align: left; }
/* ===================================================================
   Site-wide format (2026-10-11): the guide system applied to every page
   =================================================================== */
.g-read.g-wide { max-width: 1120px; }
.g-layout.g-nocol { grid-template-columns: 1fr; }
/* breadcrumb lockup works on light pages too */
.g-crumb .g-crumb-trail { color: inherit; opacity: .85; }
.g-crumb .g-crumb-item a { color: inherit; border-bottom-color: currentColor; }
.g-hero .g-crumb, .hero .g-crumb { color: #fff; }
main > .g-crumb, .page-head .g-crumb, .legal .g-crumb { color: var(--gray-600); margin-top: 26px; }
/* more dark bands keep their colours above the white panel rule */
.g-read .section-navy, .g-read .process-band, .g-read .promise-band, .g-read .midcta, .g-read .areas-dark { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: rgba(255,255,255,.88); border: 1px solid var(--navy-light); border-top: 4px solid var(--gold); }
.g-read .section-navy h2, .g-read .process-band h2, .g-read .promise-band h2, .g-read .midcta h2, .g-read .areas-dark h2, .g-read .section-navy h3, .g-read .process-band h3, .g-read .promise-band h3, .g-read .areas-dark h3 { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
.g-read .section-navy p, .g-read .process-band p, .g-read .promise-band p, .g-read .midcta p, .g-read .areas-dark p, .g-read .areas-dark .lead { color: rgba(255,255,255,.82); }
.g-read .areas-dark a.county-header, .g-read .section-navy a, .g-read .process-band a, .g-read .promise-band a { color: var(--gold); }
/* hero extras carried from service / hub pages */
.g-hero .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: 24px auto 0; }
.g-hero .hero-stats > div, .g-hero .hero-stat { text-align: center; }
.g-hero .hero-stat-num, .g-hero .hero-stat strong { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 900; color: #fff; line-height: 1; }
.g-hero .hero-stat-label, .g-hero .hero-stat span { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.g-hero .g-hero-note { font-size: .92rem; color: rgba(255,255,255,.75); max-width: 60ch; margin: 14px auto 0; text-align: center; }
.g-hero .zip-card { margin: 22px auto 0; max-width: 560px; text-align: left; }
.g-hero .svc-strip { justify-content: center; margin: 18px auto 0; max-width: 900px; }
.g-hero .svc-strip a { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.g-hero .svc-strip a:hover { border-color: var(--gold); color: var(--gold); }
.g-hero p.lede a { color: var(--gold); }
/* city pages: the local copy that moved out of the hero leads the first panel */
.g-read .g-localintro p:first-child { font-size: 1.05rem; }
.svc-tag, .ba-badge { font-size: .75rem !important; }
.dropzone-input { max-width: 100%; }
/* ---- no-orphan grids: column counts chosen so every row fills (owner rule) ---- */
.hub-grid .hub-card { flex: 1 1 300px; max-width: none; }
.hub-grid[data-count="3"] .hub-card { flex-basis: calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); }
.hub-grid[data-count="4"] .hub-card { flex-basis: calc((100% - 54px) / 4); max-width: calc((100% - 54px) / 4); }
.hub-grid[data-count="6"] .hub-card { flex-basis: calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); }
@media (max-width: 1000px) { .hub-grid[data-count="4"] .hub-card { flex-basis: calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2); } }
@media (max-width: 760px) { .hub-grid[data-count="3"] .hub-card, .hub-grid[data-count="6"] .hub-card { flex-basis: 100%; max-width: 100%; } }
@media (max-width: 560px) { .hub-grid[data-count="4"] .hub-card { flex-basis: 100%; max-width: 100%; } }
.hub-grid[data-count="4"] .hub-card-title { font-size: 1rem; }
/* ===================================================================
   MOBILE (≤760px): centered, edge-to-edge, with rhythm (owner directive)
   =================================================================== */
@media (max-width: 760px) {
  main { text-align: center; }
  .g-layout { padding: 0 0 24px; gap: 0; }
  .g-read, .g-read.g-wide { max-width: none; width: 100%; }
  /* panels: alternate inset cards and full-bleed bands = movement */
  .g-read .section, .g-read section, .g-read .g-sec { margin: 18px 14px; padding: 26px 18px 20px; border-radius: var(--radius-lg); }
  .g-read > section:nth-of-type(even), .g-read > .section:nth-of-type(even), .g-read > .g-sec:nth-of-type(even) { margin-left: 0; margin-right: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 32px 20px 26px; }
  .g-read > :first-child { margin-top: -22px; position: relative; z-index: 2; box-shadow: var(--shadow); }
  .g-read .section h2, .g-read section h2, .g-read .g-sec h2 { text-align: center; font-size: clamp(1.45rem, 6.4vw, 1.9rem); padding-bottom: 12px; }
  .g-read .section h2::after, .g-read section h2::after, .g-read .g-sec h2::after { content: ""; display: block; width: 44px; height: 4px; background: var(--gold); margin: 12px auto 0; border-radius: 2px; }
  .g-read .section h2, .g-read section h2, .g-read .g-sec h2 { border-bottom: 0; }
  .g-read h3, .g-read p, .g-read .lead, .g-read li, .g-read figcaption, .g-read summary, .g-read label, .g-read .g-localintro p { text-align: center; }
  .g-read ul, .g-read ol { padding-left: 0; }
  .g-read ul li, .g-read ol li { list-style-position: inside; }
  /* checklist / flag markers become centered badges */
  .g-read .check-list li, .g-read .flag-list li, .g-rules li { padding: 14px 0 14px; }
  .g-read .check-list li::before, .g-read .flag-list li::before, .g-rules li::before { position: static; display: block; margin: 0 auto 8px; transform: none; }
  .g-rules li::before { width: 10px; height: 10px; }
  .g-flags li::before { transform: rotate(45deg); }
  /* cards and bands go edge to edge, centered */
  .g-read .sign-grid, .g-factors, .g-read .two-col, .g-read .verdict-grid, .g-read .ws-cols { gap: 12px; }
  .g-read .sign-card, .g-factor, .g-read .range-card, .g-read .callout, .g-note, .g-read .est-card, .g-tool, .g-sig { max-width: none; text-align: center; }
  .g-read .range-card { border-left: 0; border-top: 4px solid var(--gold); }
  .g-read .callout, .g-note { border-left: 0; border-top: 4px solid var(--gold-dark); border-radius: var(--radius); }
  .g-band { margin: 26px 0 4px; }
  .g-band figure { border-radius: 0; border-left: 0; border-right: 0; }
  .g-band figcaption { flex-direction: column; gap: 4px; text-align: center; padding: 14px 18px 16px; }
  .g-inset { float: none; width: auto; margin: 10px 0 16px; }
  .g-inset figcaption { text-align: center; }
  /* ladder (repair guide) */
  .g-ladder li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .g-ladder .g-rung i { margin: 0 auto 10px; }
  /* FAQ */
  .g-read details.faq-item summary, .g-read .g-faq summary, .g-faq summary { text-align: center; padding: 14px 28px; }
  /* buttons: stacked, full width, centered */
  .g-actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .g-actions .btn, .g-close .btn, .g-deck .btn { width: 100%; justify-content: center; }
  .g-deck { margin-top: -48px; padding: 0 14px; }
  .g-deck > div { text-align: center; border-left: 0; border-top: 6px solid var(--gold); }
  /* hero notes, strips */
  .g-hero .g-hero-note { text-align: center; }
  .g-hero .svc-strip, .g-read .svc-strip { justify-content: center; }
  .g-read .svc-strip a { font-size: .88rem; }
  /* closing band */
  .g-close { margin-top: 32px; }
  .g-close .g-wrap { padding: 56px 20px; text-align: center; }
  .g-close h2, .g-close p { margin-left: auto; margin-right: auto; text-align: center; }
  /* hub */
  .hub-paths { padding: 0 14px; gap: 12px; }
  .hub-path { min-height: 240px; text-align: center; align-items: center; }
  .hub-path h2 { text-align: center; }
  .hub-path ul { width: 100%; }
  .hub-path li a, .hub-path li span { justify-content: center; text-align: center; }
  .hub-group { padding: 44px 0 10px; }
  .hub-group-head { text-align: center; margin: 0 auto 20px; }
  .hub-grid { padding: 0 14px; gap: 14px; }
  .hub-card { text-align: center; }
  .hub-card-body { align-items: center; }
  .hub-convert .g-wrap { text-align: center; }
  .hub-convert h2, .hub-convert p { margin-left: auto; margin-right: auto; }
  .hub-proof { border-left: 0; border-top: 2px solid var(--gold); padding: 16px 0 0; text-align: center; }
  .hub-faq .g-wrap { padding: 0 14px; }
  .hub-faq h2 { text-align: center; }
  .hub-faq h2::before { margin-left: auto; margin-right: auto; }
  /* tables stay scrollable, centered within the panel */
  .g-read table { margin-left: auto; margin-right: auto; }
  .g-read table th, .g-read table td { text-align: center; }
  /* jump nav: centered, wrapping, nothing clipped */
  .g-chips { padding: 2px 14px 20px; }
}
/* ===================================================================
   No-orphan grids: column counts by item count (data-n set by tools/grid-annotate.py)
   Each child = calc(100%/cols - gap); rows always fill; the row is centered.
   =================================================================== */
[data-n] { display: flex !important; flex-wrap: wrap; justify-content: center; }
[data-n] > * { box-sizing: border-box; flex-grow: 0 !important; flex-shrink: 0 !important; }
[data-n="2"] > * { flex-basis: calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; }
[data-n="3"] > * { flex-basis: calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; }
[data-n="4"] > * { flex-basis: calc(25% - 16px) !important; max-width: calc(25% - 16px) !important; }
[data-n="5"] > * { flex-basis: calc(20% - 16px) !important; max-width: calc(20% - 16px) !important; }
[data-n="6"] > * { flex-basis: calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; }
[data-n="8"] > * { flex-basis: calc(25% - 16px) !important; max-width: calc(25% - 16px) !important; }
[data-n="9"] > * { flex-basis: calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; }
[data-n="10"] > * { flex-basis: calc(20% - 16px) !important; max-width: calc(20% - 16px) !important; }
[data-n="12"] > * { flex-basis: calc(25% - 16px) !important; max-width: calc(25% - 16px) !important; }
@media (max-width: 1000px) {
  [data-n="4"] > *, [data-n="8"] > *, [data-n="12"] > * { flex-basis: calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; }
  [data-n="10"] > * { flex-basis: calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; }
}
@media (max-width: 760px) {
  [data-n="3"] > *, [data-n="6"] > *, [data-n="9"] > * { flex-basis: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; }
  [data-n="3"] > * { flex-basis: 100% !important; max-width: 100% !important; }
  [data-n="9"] > * { flex-basis: calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
  [data-n="5"] > * { flex-basis: 100% !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
  [data-n] > * { flex-basis: 100% !important; max-width: 100% !important; }
  [data-n="8"] > *, [data-n="10"] > *, [data-n="12"] > *, [data-n="6"] > *, [data-n="4"] > *, [data-n="2"] > * { flex-basis: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; }
  .area-tiles[data-n] > * { flex-basis: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  .area-tiles[data-n="9"] > *, .area-tiles[data-n="3"] > * { flex-basis: calc(33.333% - 8px) !important; max-width: calc(33.333% - 8px) !important; font-size: .82rem; }
  .hub-paths[data-n] > *, .sign-grid[data-n] > *, .g-factors[data-n] > *, .why-grid[data-n] > *, .services-grid[data-n] > *, .hub-grid[data-n] > * { flex-basis: 100% !important; max-width: 100% !important; }
}
.area-tile--cta { background: var(--gold) !important; color: var(--navy) !important; font-weight: 700; }
.hero-stats[data-n] { gap: 12px 24px; }
[data-n] > * { min-width: 0 !important; width: auto !important; }
[data-n] { gap: 16px !important; }
@media (max-width: 760px) { [data-n] { gap: 12px !important; } }
/* gallery on phones: an odd count ends with one full-width tile, never a lone half */
@media (max-width: 640px) { .gal-grid .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } .gal-grid .tile:last-child:nth-child(odd) img { aspect-ratio: 16 / 9; } }
/* footer credentials: outbound profile links highlighted; two columns on phones; brand block centered */
.footer-badges-row[data-n] { display: flex !important; flex-wrap: wrap; gap: 10px !important; justify-content: flex-start; }
.footer-badges-row[data-n] > * { flex: 0 0 auto !important; max-width: none !important; width: auto !important; }
.f-badge--link { color: var(--gold) !important; border-color: var(--gold) !important; background: rgba(245,158,11,.12) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.f-badge--link:hover { background: var(--gold) !important; color: var(--navy) !important; }
@media (max-width: 760px) {
  .footer-brand { text-align: center; }
  .footer-brand .logo { align-items: center; }
  .footer-badges-row[data-n] { justify-content: center; gap: 10px !important; max-width: 360px; margin: 0 auto; }
  .footer-badges-row[data-n] > * { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; text-align: center; justify-content: center; padding: 10px 8px !important; font-size: .8rem !important; }
  .footer-col h4 { text-align: center; }
  .footer-col ul { align-items: center; text-align: center; }
}
.footer-badges-row[data-n] { max-width: 360px; }
.footer-badges-row[data-n] > * { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; justify-content: center; text-align: center; }
/* footer credentials block: two columns on phones (brand left, credentials right); outbound links solid gold */
.f-badge--link { background: var(--gold) !important; color: var(--navy) !important; border-color: var(--gold) !important; font-weight: 800; }
.f-badge--link:hover { background: #fff !important; border-color: #fff !important; }
@media (max-width: 760px) {
  .footer-brand { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-items: center; text-align: left; padding: 0 0 8px; }
  .footer-brand .logo { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .footer-brand .logo-name { font-size: 1.15rem; }
  .footer-brand > p { grid-column: 1; grid-row: 2; margin: 0 !important; font-size: .8rem; line-height: 1.5; }
  .footer-badges-row[data-n] { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; gap: 8px !important; justify-content: flex-end; align-content: center; }
  .footer-badges-row[data-n] > * { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; padding: 9px 4px !important; font-size: .72rem !important; }
  .footer-grid { row-gap: 22px; }
}
.f-badge--link { white-space: nowrap; }
.f-badge--link span { font-size: .9em; }
@media (max-width: 760px) { .footer-badges-row[data-n] > * { font-size: .7rem !important; letter-spacing: .02em; padding: 10px 2px !important; } }
@media (max-width: 760px) { .footer-brand { grid-template-columns: 42% 58%; gap: 6px 10px; } .footer-badges-row[data-n] > * { font-size: .72rem !important; padding: 10px 4px !important; } }
@media (max-width: 760px) { .footer-brand { grid-template-columns: 38% 62%; } .footer-badges-row[data-n] > * { font-size: .66rem !important; letter-spacing: 0 !important; padding: 11px 2px !important; white-space: nowrap; } }
/* homepage trust bar: 3 across, 2 across on phones; outbound profile items highlighted */
.trust-bar-inner[data-n] > * { flex-basis: calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; }
a.trust-bar-item { border: 1.5px solid var(--gold) !important; background: rgba(245,158,11,.12) !important; border-radius: var(--radius); }
a.trust-bar-item .tbi-text strong { color: var(--gold-dark); }
a.trust-bar-item .tbi-text strong::after { content: " \2197"; font-size: .85em; }
a.trust-bar-item:hover { background: var(--gold) !important; }
a.trust-bar-item:hover .tbi-text strong, a.trust-bar-item:hover .tbi-text span { color: var(--navy); text-decoration: none; }
@media (max-width: 760px) {
  .trust-bar-inner[data-n] > * { flex-basis: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; flex-direction: column; text-align: center; align-items: center; padding: 12px 8px !important; }
  .trust-bar-item .tbi-text { text-align: center; }
  .trust-bar-item .tbi-text strong { font-size: .88rem; }
  .trust-bar-item .tbi-text span { font-size: .74rem; white-space: normal; }
}
.trust-bar-inner[data-n] { flex-direction: row !important; align-items: stretch !important; }
.trust-bar-inner[data-n] > * { border: 1.5px solid transparent; border-radius: var(--radius); padding: 10px 12px; width: auto !important; }
@media (max-width: 760px) { .trust-bar-inner[data-n] > * { white-space: normal; } }
/* trust bar: every item the same compact card; the two outbound profiles lead */
.trust-bar-inner[data-n] > * { border: 1px solid var(--gray-200); background: #fff; }
a.trust-bar-item { border-color: var(--gold) !important; }
@media (max-width: 760px) {
  .trust-bar { padding: 16px 0 !important; }
  .trust-bar-inner[data-n] { gap: 10px !important; }
  .trust-bar-inner[data-n] > * { flex-basis: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; padding: 12px 6px 10px !important; gap: 6px !important; }
  .trust-bar-item .tbi-icon { width: 32px !important; height: 32px !important; }
  .trust-bar-item .tbi-icon svg { width: 16px; height: 16px; }
  .trust-bar-item .tbi-text strong { font-size: .8rem; line-height: 1.2; display: block; }
  .trust-bar-item .tbi-text span { font-size: .68rem; line-height: 1.3; display: block; margin-top: 2px; }
  a.trust-bar-item .tbi-text strong::after { font-size: .8em; }
}
@media (max-width: 760px) { .trust-bar-item .tbi-text strong { font-size: .74rem; letter-spacing: -.01em; } .trust-bar-inner[data-n] > * { padding: 12px 4px 10px !important; } }
.g-rules li, .g-read .check-list li, .g-read .flag-list li { list-style: none !important; }

/* ===================================================================
   Services + About rebuild (2026-10-11 night): grouped tap-list of
   services, the claim path, proof strip, promises, about story steps.
   =================================================================== */
.svc-group { margin: 22px 0 6px; }
.svc-group + .svc-group { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--gray-200); }
.svc-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.svc-group-head h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 0; }
.svc-group-head p { margin: 0; font-size: .92rem; color: var(--gray-600); }
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.svc-list li { list-style: none; flex: 1 1 calc(33.333% - 10px); max-width: calc(33.333% - 10px); display: flex; padding: 0; }
.svc-row { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 18px 44px 18px 18px; background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--gold); border-radius: var(--radius); text-decoration: none !important; color: var(--gray-700); position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.svc-row:hover, .svc-row:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.svc-row strong { font-family: var(--display); font-size: 1.02rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.svc-row span { font-size: .9rem; line-height: 1.5; color: var(--gray-600); }
.svc-row::after { content: "\2192"; position: absolute; right: 16px; top: 16px; font-family: var(--display); font-weight: 900; color: var(--gold-dark); font-size: 1.15rem; transition: transform .15s ease; }
.svc-row:hover::after { transform: translateX(4px); }
.svc-row em { font-style: normal; display: inline-block; align-self: flex-start; background: var(--gold); color: var(--navy); font-family: var(--display); font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 2px; }
/* claim path + covered list (dark band) */
.g-read .ins-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: rgba(255,255,255,.88); border: 1px solid var(--navy-light); border-top: 4px solid var(--gold); }
.g-read .ins-band h2 { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
.g-read .ins-band h2 em { font-style: normal; color: var(--gold); }
.g-read .ins-band p, .g-read .ins-band .lead { color: rgba(255,255,255,.82); }
.g-read .ins-band a { color: var(--gold); }
.g-read .ins-band a.btn-gold { color: var(--navy); } .g-read .ins-band a.btn-red { color: #fff; }
.g-path { list-style: none; margin: 22px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; counter-reset: step; }
.g-path li { list-style: none; flex: 1 1 calc(25% - 11px); max-width: calc(25% - 11px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 18px 16px 16px; }
.g-path li::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--display); font-weight: 900; font-size: .95rem; margin-bottom: 12px; }
.g-path h3 { color: #fff; font-size: .98rem; margin: 0 0 6px; line-height: 1.3; }
.g-path p { margin: 0 !important; font-size: .86rem; line-height: 1.55; color: rgba(255,255,255,.72) !important; }
.g-path--light li { background: var(--gray-50); border-color: var(--gray-200); border-top: 3px solid var(--gold); }
.g-path--light h3 { color: var(--ink); }
.g-path--light p { color: var(--gray-600) !important; }
.g-path--light a { color: var(--navy-light); }
.ins-box { margin-top: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(245,158,11,.4); border-radius: var(--radius-lg); padding: 22px 22px 18px; }
.ins-box h3 { color: var(--gold); font-size: 1.05rem; margin: 0 0 6px; }
.g-cover { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.g-cover li { list-style: none; flex: 1 1 calc(50% - 7px); max-width: calc(50% - 7px); display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; padding: 10px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); color: rgba(255,255,255,.88); text-align: left; }
.g-cover li::before { content: "\2713"; color: var(--gold); font-weight: 900; flex-shrink: 0; }
.ins-alert { margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: .86rem; color: rgba(255,255,255,.7) !important; }
.ins-alert strong { color: #fff; }
.ins-band .g-actions { margin-top: 22px; }
/* proof strip + promises */
.g-stats { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.g-stats li { list-style: none; flex: 1 1 calc(25% - 11px); max-width: calc(25% - 11px); background: #fff; border: 1px solid var(--gray-200); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 20px 12px 16px; text-align: center; }
.g-stats strong { display: block; font-family: var(--display); font-weight: 900; font-size: 2rem; color: var(--gold-dark); line-height: 1; margin-bottom: 6px; }
.g-stats span { font-size: .84rem; color: var(--gray-600); }
.g-promise { list-style: none; margin: 22px 0 4px; padding: 26px 22px 22px; display: flex; flex-wrap: wrap; gap: 18px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); border-radius: var(--radius-lg); border-top: 4px solid var(--gold); }
.g-promise li { list-style: none; flex: 1 1 calc(25% - 14px); max-width: calc(25% - 14px); text-align: center; color: rgba(255,255,255,.78); font-size: .86rem; line-height: 1.5; }
.g-promise li::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 900; margin-bottom: 10px; }
.g-promise strong { display: block; font-family: var(--display); font-size: .94rem; color: #fff; margin-bottom: 6px; }
.g-promise--flat { background: transparent; border-top: 0; padding: 0; margin: 10px 0 0; }
.g-read .promise-band .lead { text-align: center; max-width: 64ch; margin-left: auto; margin-right: auto; }
.g-read .promise-band h2 { text-align: center; }
@media (max-width: 760px) {
  .svc-list { gap: 10px; }
  .svc-list li { flex-basis: 100%; max-width: 100%; }
  .svc-row { padding: 16px 16px 14px; align-items: center; text-align: center; }
  .svc-row::after { display: none; }
  .svc-row strong::after { content: " \2192"; color: var(--gold-dark); }
  .svc-row em { align-self: center; }
  .svc-group-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .g-path li { flex-basis: 100%; max-width: 100%; text-align: center; }
  .g-path li::before { margin-left: auto; margin-right: auto; }
  .g-cover li { flex-basis: 100%; max-width: 100%; justify-content: center; text-align: center; }
  .g-stats li { flex-basis: calc(50% - 7px); max-width: calc(50% - 7px); }
  .g-promise { padding: 22px 14px 18px; gap: 14px; }
  .g-promise li { flex-basis: calc(50% - 7px); max-width: calc(50% - 7px); }
  .g-promise--flat { padding: 0; }
}
/* about: the proof photo is a portrait shot; the band crops it to a wide frame */
.g-band--wide img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 55%; max-height: 520px; }
@media (max-width: 760px) { .g-band--wide img { aspect-ratio: 4 / 3; } }

/* ============================================================
   Footer brand on phones (2026-10-12): the lockup sub-line
   ("Roofing Specialists • Est. 1985") is one nowrap line ~213px
   wide and was overrunning the 38% brand column, disappearing
   behind the credential badges. The brand lockup gets the full
   width on its own row; blurb and credentials share the row
   beneath, so the two-column compactness is kept.
   ============================================================ */
@media (max-width: 760px) {
  .footer-brand .logo { grid-column: 1 / -1 !important; grid-row: 1 !important; align-items: center !important; text-align: center; }
  .footer-brand .logo-name { font-size: 1.22rem; }
  .footer-brand .logo-sub { font-size: .66rem; letter-spacing: .12em; }
  .footer-brand > p { grid-column: 1 !important; grid-row: 2 !important; }
  .footer-badges-row[data-n] { grid-column: 2 !important; grid-row: 2 !important; }
}

/* ============================================================
   Very narrow phones (<=360px), 2026-10-12. At 320px three
   things measured wider than the column they sit in and pushed
   the page 5px past the viewport: the no-wrap credential badges
   ("Fully Insured" needs 90px in a 70px half-column), the hero
   stat figures and their uppercase labels, and the header
   lockup beside the hamburger. Each is sized or stacked to fit.
   ============================================================ */
@media (max-width: 360px) {
  .footer-badges-row[data-n] > * { flex-basis: 100% !important; max-width: 100% !important; }
  .hero-stat-num, .g-hero .hero-stat-num, .hero-stats .hero-stat-num { font-size: 1.15rem; }
  .hero-stat-label, .g-hero .hero-stat-label, .hero-stats .hero-stat-label { font-size: .56rem; letter-spacing: .02em; }
  .logo-name { font-size: 1.05rem; }
  .logo-sub { font-size: .55rem; letter-spacing: .08em; }
  .footer-brand .logo-name { font-size: 1.1rem; }
}
/* the stat figures must fit their tile on narrow phones, and the long
   promise labels break rather than run past the card edge */
@media (max-width: 420px) {
  .g-stats strong { font-size: 1.7rem; }
  .g-promise strong, .g-stats span, .g-promise li { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .g-stats strong { font-size: 1.2rem; }
  .g-stats li { padding: 16px 8px 13px; }
  .g-promise strong { font-size: .86rem; }
}
/* The brand's two tracks were percentages, so tracks plus the column gap came
   to more than 100% and the block ran past its container. On pages whose footer
   container has no side padding that reached the viewport edge. fr tracks share
   the space after the gap is taken out, and the footer container always keeps
   its gutter. */
.footer .container { padding-left: 20px; padding-right: 20px; }
@media (max-width: 760px) { .footer-brand { grid-template-columns: 38fr 62fr; } }
/* The local promise line came out of the dark hero when the city pages moved to
   the site format, but kept its inline white colour and so read as a blank gap
   on the white panel. It is now a warm callout that belongs on light ground. */
.g-localintro .hero-promise {
  color: #4a3a1a; background: var(--osb); border: 1px solid #ead9b8;
  border-left: 4px solid var(--gold-dark); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px; margin: 18px 0 4px; max-width: none;
  font-size: 1.02rem; font-weight: 600; line-height: 1.6; text-align: left;
}
.g-localintro .hero-promise strong { color: var(--osb-ink); }
@media (max-width: 760px) {
  .g-localintro .hero-promise { border-left: 1px solid #ead9b8; border-top: 4px solid var(--gold-dark); border-radius: var(--radius); text-align: center; }
}