/* Self-hosted fonts, latin subset, byte-identical to what Google was serving.
   Going via fonts.googleapis.com cost a blocking round trip for the CSS plus a
   second one to fonts.gstatic.com for the files, and text could not paint until
   both landed. Regenerate with the localizer, not by hand. */
/* Fraunces carries an optical-size (opsz) axis as well as weight. No opsz is
   declared here on purpose: font-optical-sizing defaults to auto, so the browser
   picks the optical size from the rendered font-size, which is what Google's own
   CSS relied on too. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-var-latin.woff2') format('woff2');
}

/* =========================================================
   IRONOAK ROOFING — shared stylesheet
   Mobile-first. Everything outside the media query is the phone view.
   Palette, type and the square-cornered geometry are carried over unchanged
   from the approved single-page build so the multi-page version cannot drift
   off-brand. Fraunces for headings, Archivo for everything else.
   ========================================================= */

:root{
  --cream:#F5F1EA; --ink:#262B33; --ink-dark:#1A1E24; --ink-soft:#313842;
  --rust:#974F2E; --rust-hover:#824124; --rust-deep:#75391F; --rust-on-dark:#CC7D59;
  --tan:#C8987B; --sand:#E8E1D5;
  --muted:#6A6358; --muted2:#57503F; --faint:#746D62; --line:#D8D0C2;
  --white:#FFFFFF; --off:#FFF8F2;
  --green:#3E7A55; --green-bg:#E3EFE7;
  --danger:#A3341F; --danger-bg:#F8E9E5;
  --sans:'Archivo',sans-serif; --disp:'Fraunces',serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);padding-bottom:84px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--rust);text-decoration:none}
a:hover{color:var(--rust-deep)}
img{display:block;max-width:100%}
button{font-family:var(--sans)}
h1,h2{font-family:var(--disp);font-weight:600;text-wrap:pretty}
.wrap{max-width:560px;margin:0 auto;padding-left:20px;padding-right:20px}
.stars{color:var(--rust)}
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:0;padding:12px 18px;background:var(--rust);color:var(--off);font-weight:700}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}

/* Full-bleed banded sections each reserve their own top margin, which is the
   cream gutter between them and whatever plain section came before. When two
   bands sit next to each other that gutter reads as a mistake — a dark band, a
   cream stripe, then another dark band. Collapsing it here rather than patching
   named pairs means the rule survives someone reordering the sections. */
.band + .band{margin-top:0}
/* Two dark bands flush against each other need a hairline so they do not read
   as one enormous block. */
.trust + .certs{border-top:1px solid rgba(245,241,234,0.12)}

/* Kickers — the small uppercase eyebrow above most section headings. */
.kicker{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--rust);margin-bottom:12px}
.kicker--dark{color:var(--tan)}
.kicker--hero{color:var(--tan)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(38,43,51,0.97);backdrop-filter:blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:30px;height:30px;background:var(--rust);display:flex;align-items:center;justify-content:center;flex:none}
.brand-mark .peak{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid var(--cream);margin-top:-3px}
/* nowrap: at 375px the phone block and hamburger squeeze this enough to break
   "Ironoak Roofing" across two lines and double the header height. */
.brand-name{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--cream);letter-spacing:0.2px;white-space:nowrap}
.header-right{display:flex;align-items:center;gap:10px}
.header-call{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;text-decoration:none}
.hc-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--tan)}
.hc-num{font-weight:700;font-size:15px;color:var(--cream);white-space:nowrap}
.header-call:hover .hc-num{color:var(--tan)}

/* The hamburger owns mobile, the link row owns desktop; each is hidden at the
   other's breakpoint rather than the two sharing an element. */
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:0 7px;background:none;border:0;cursor:pointer;flex:none}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--cream);transition:transform .18s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-links{display:none}
.nav-panel{display:none;background:var(--ink-dark);padding-bottom:12px}
.nav-panel.open{display:block}
.nav-list{list-style:none;margin:0;padding:0}
.nav-panel a{display:block;padding:13px 20px;border-bottom:1px solid rgba(245,241,234,0.1);font-size:15px;font-weight:600;color:var(--cream);text-decoration:none}
.nav-panel a:hover,.nav-panel a[aria-current="page"]{color:var(--tan)}
.nav-panel .sub a{padding-left:38px;font-size:14px;font-weight:400;color:rgba(245,241,234,0.72)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(31,36,43,0.55) 0%,rgba(31,36,43,0.78) 45%,rgba(31,36,43,0.94) 100%)}
.hero .wrap{position:relative;padding-top:44px;padding-bottom:40px}
.hero-copy{margin-bottom:26px}
.hero h1{font-size:38px;line-height:1.08;margin:0 0 16px;color:var(--cream)}
.hero h1 span{color:var(--tan)}
.hero-sub{margin:0 0 20px;font-size:16px;color:rgba(245,241,234,0.85);max-width:44ch;text-wrap:pretty}
.hero-anchors{display:flex;flex-wrap:wrap;gap:8px}
.hero-anchors span{border:1px solid rgba(245,241,234,0.28);color:var(--cream);font-size:11.5px;font-weight:600;letter-spacing:0.4px;padding:6px 11px}

/* ---------- Interior page hero ---------- */
.page-hero{background:var(--ink)}
.page-hero .wrap{padding-top:26px;padding-bottom:34px}
.page-hero h1{font-size:31px;line-height:1.14;margin:0 0 12px;color:var(--cream);text-wrap:pretty}
.page-hero p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(245,241,234,0.8);max-width:62ch;text-wrap:pretty}
.page-hero .kicker{color:var(--tan)}
.crumbs{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:rgba(245,241,234,0.6)}
.crumbs a{color:var(--tan);text-decoration:none}
.crumbs .sep{color:rgba(245,241,234,0.35)}

/* ---------- Inspection wizard ---------- */
.quote-card{background:var(--cream);box-shadow:0 24px 48px rgba(20,24,30,0.35)}
.quote-card--compact{box-shadow:0 10px 30px rgba(38,43,51,0.14);border:1px solid var(--line)}
.quote-head{padding:24px 22px 0}
.quote-title{font-family:var(--disp);font-size:22px;font-weight:600;line-height:1.2}
.quote-sub{margin-top:6px;font-size:13px;color:var(--muted)}
.progress{display:flex;gap:6px;padding:18px 22px 0}
.progress i{flex:1;height:4px;background:var(--sand)}
.progress i.on{background:var(--rust)}
.step-body{padding:18px 22px 20px}
.step-title{font-family:var(--disp);font-weight:600;font-size:18px;margin-bottom:12px}
.step-hint{font-size:13px;color:var(--muted);margin:-8px 0 14px;line-height:1.5}
.reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.age-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{text-align:left;cursor:pointer;padding:14px;background:var(--white);border:1px solid var(--line);transition:border-color .12s,background .12s}
.tile:hover{border-color:var(--tan)}
.tile.on{background:var(--sand);border:2px solid var(--rust);padding:13px}
.tile-label{font-weight:600;font-size:14.5px;line-height:1.25}
.tile-desc{font-size:12.5px;color:var(--muted);margin-top:3px}
.tile-flag{font-size:10.5px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--rust);margin-top:8px}
.quote-foot{background:var(--sand);padding:16px 22px 18px;border-top:1px solid var(--line)}
.quote-foot.is-done .summary-row,.quote-foot.is-done .quote-btns{display:none}
.summary-row{margin-bottom:14px}
.summary-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.summary-line{font-family:var(--disp);font-size:17px;font-weight:600;margin-top:3px;line-height:1.3;text-wrap:pretty}
.quote-btns{display:flex;gap:10px}
.btn-back{border:1px solid var(--line);background:var(--white);color:var(--ink);padding:15px 20px;font-size:14.5px;font-weight:700;cursor:pointer}
.btn-back:hover{border-color:var(--tan)}
.btn-next{flex:1;border:none;background:var(--rust);color:var(--off);padding:15px 20px;font-size:15.5px;font-weight:700;letter-spacing:0.3px;cursor:pointer;transition:background .15s}
.btn-next:hover{background:var(--rust-hover)}
.btn-next:disabled{opacity:.6;cursor:default}
.quote-callout{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted2);line-height:1.5}
.quote-callout a{font-weight:700;white-space:nowrap}

/* ---------- Capture step ---------- */
.capture-form{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cfield{width:100%;border:1px solid var(--line);padding:14px 16px;font-size:16px;font-family:var(--sans);color:var(--ink);background:var(--white)}
.cfield::placeholder{color:#9A9184}
.cfield:focus{outline:none;border-color:var(--rust)}
.cfield[aria-invalid="true"]{border-color:var(--danger)}
/* Error text carries a glyph so it never depends on colour alone. */
.field-error{font-size:12px;line-height:1.4;color:var(--danger);margin-top:-4px}
.field-error::before{content:"\25B2  "}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:var(--faint);cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--rust);flex-shrink:0}
/* Outline, not border — a border shifts layout when it appears. */
.consent input[aria-invalid="true"]{outline:2px solid var(--danger);outline-offset:2px}
.consent-tag{display:inline-block;margin-right:6px;padding:1px 7px;background:var(--sand);color:var(--rust);font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;vertical-align:1px}
/* Honeypot: display:none so password managers will not autofill it. An
   off-screen but visible box gets filled by 1Password and silently killed
   every real submission. Some bots skip hidden fields, which is why a filled
   box now only flags the lead instead of dropping it. */
.hp{display:none}
.lead-state{text-align:center;padding:14px 4px}
.lead-badge{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin:0 auto 12px}
.lead-state.ok .lead-badge{background:var(--green-bg);color:var(--green)}
.lead-state.bad .lead-badge{background:var(--danger-bg);color:var(--danger)}
.lead-title{font-family:var(--disp);font-weight:600;font-size:20px;margin-bottom:8px}
.lead-body{font-size:13.5px;color:var(--muted);line-height:1.65}
.lead-detail{font-size:11px;color:var(--faint);margin-top:10px;font-family:monospace}

/* ---------- Trust bar ---------- */
.trust{background:var(--ink);border-top:1px solid rgba(245,241,234,0.12)}
.trust .wrap{padding-top:22px;padding-bottom:22px}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.trust-item{display:flex;align-items:flex-start;gap:10px}
.trust-dot{width:8px;height:8px;background:var(--rust);transform:rotate(45deg);flex-shrink:0;margin-top:5px}
.trust-label{font-size:12.5px;font-weight:600;color:var(--sand);letter-spacing:0.2px;line-height:1.35}

/* ---------- Sections ---------- */
.section .wrap{padding-top:44px;padding-bottom:10px}
.section h2{font-size:27px;line-height:1.16;margin:0 0 10px}
.section-sub{margin:0 0 20px;font-size:14.5px;color:var(--muted2);line-height:1.6;text-wrap:pretty}
.section.alt{background:var(--sand);margin-top:44px}
.section.alt .wrap{padding-bottom:44px}
.section-more{margin-top:20px;font-size:14.5px;font-weight:700}
.section-more--dark a{color:var(--tan)}
.section-more--dark a:hover{color:var(--cream)}
.split{display:flex;flex-direction:column;gap:30px}

/* ---------- Certifications ---------- */
.certs{background:var(--ink);margin-top:44px;color:var(--cream)}
.certs .wrap{padding-top:44px;padding-bottom:44px}
.certs h2{font-size:27px;line-height:1.16;margin:0 0 12px;color:var(--cream)}
.certs-lede{margin:0 0 26px;font-size:14.5px;color:rgba(245,241,234,0.75);max-width:58ch;line-height:1.6;text-wrap:pretty}
.cert-grid{display:grid;grid-template-columns:1fr;gap:14px}
.cert{border:1px solid rgba(245,241,234,0.18);padding:20px;border-left:3px solid var(--rust)}
.cert-name{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--cream);line-height:1.25}
.cert-scarcity{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tan);margin-top:6px}
.cert p{margin:10px 0 0;font-size:13.5px;color:rgba(245,241,234,0.75);line-height:1.6}
.cert-more{margin-top:22px;font-size:14.5px;font-weight:700}
.cert-more a{color:var(--tan)}
.cert-more a:hover{color:var(--cream)}
.certs--compact .certs-lede{display:none}

/* ---------- Service cards ---------- */
.svc-cards{display:grid;grid-template-columns:1fr;gap:14px}
.svc-card{background:var(--white);border:1px solid #E4DDD0;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.svc-card:hover{box-shadow:0 14px 30px rgba(38,43,51,0.13);transform:translateY(-2px);color:inherit}
.svc-card img{width:100%;height:170px;object-fit:cover;flex:none}
.svc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.svc-card b{font-family:var(--disp);font-weight:600;font-size:19px;display:block;line-height:1.2}
.svc-card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}
.svc-meta{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--rust)}
.svc-hero-img{margin-top:26px}
.svc-hero-img img{width:100%;height:230px;object-fit:cover}

/* Tick / cross lists */
.ticks,.crosses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li,.crosses li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.crosses li{color:var(--muted2)}
.crosses li::before{content:"\00D7";position:absolute;left:2px;top:-2px;color:var(--tan);font-weight:700;font-size:18px}

/* Note cards (town, warranty, about) */
.note-cards{display:grid;grid-template-columns:1fr;gap:12px}
.note-card{background:var(--white);border:1px solid #E4DDD0;padding:20px}
.section.alt .note-card{background:var(--cream)}
.note-card b{font-family:var(--disp);font-weight:600;font-size:16.5px;display:block;margin-bottom:7px;line-height:1.25}
.note-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.65}

/* Town cards */
.town-cards{display:grid;grid-template-columns:1fr;gap:14px}
.town-card{background:var(--white);border:1px solid #E4DDD0;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.town-card:hover{box-shadow:0 14px 30px rgba(38,43,51,0.13);transform:translateY(-2px);color:inherit}
.town-card img{width:100%;height:170px;object-fit:cover;flex:none}
.town-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:5px;flex:1}
.town-card b{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.2}
.town-county{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.town-card p{margin:4px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---------- Storm damage band ---------- */
.how{background:var(--ink);margin-top:44px;color:var(--cream)}
.how .wrap{padding-top:44px;padding-bottom:44px}
.how h2{font-size:27px;line-height:1.16;margin:0 0 12px;color:var(--cream)}
.how-lede{margin:0 0 26px;font-size:14.5px;color:rgba(245,241,234,0.75);max-width:58ch;line-height:1.65;text-wrap:pretty}
.steps{display:flex;flex-direction:column}
.step-card{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-top:1px solid rgba(245,241,234,0.15)}
.step-num{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--rust-on-dark);line-height:1;min-width:34px}
.step-card b{font-weight:700;font-size:15.5px;display:block;color:var(--cream)}
.step-card p{font-size:13.5px;color:rgba(245,241,234,0.72);margin:5px 0 0;line-height:1.6}

/* Financing page reuses .steps on a light background */
.section .steps .step-card{border-top-color:var(--line)}
.section .step-card b{color:var(--ink)}
.section .step-card p{color:var(--muted)}

/* ---------- Insurance claims ---------- */
.claims{background:var(--sand);margin-top:44px}
.claims .wrap{padding-top:44px;padding-bottom:44px}
.claims .kicker{color:var(--rust)}
.claims h2{font-size:27px;line-height:1.16;margin:0 0 12px}
.claims-lede{margin:0 0 26px;font-size:14.5px;color:var(--muted2);max-width:56ch;line-height:1.65;text-wrap:pretty}
.claims .steps{display:flex;flex-direction:column}
.claims .step{display:flex;gap:18px;padding:20px 0;border-top:1px solid #D3C9B6}
.claims .n{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--rust);line-height:1;min-width:38px}
.claims .st-title{font-weight:700;font-size:16px;margin-bottom:5px}
.claims .step p{margin:0;font-size:13.5px;color:var(--muted2);line-height:1.65;text-wrap:pretty}
.claims-more{margin:22px 0 20px;font-size:14.5px;font-weight:700}
.btn-dark{display:block;width:100%;text-align:center;padding:16px;background:var(--ink);color:var(--cream);font-size:15px;font-weight:700;letter-spacing:0.3px;border:none;cursor:pointer;transition:background .15s}
.btn-dark:hover{background:var(--ink-soft);color:var(--cream)}

/* ---------- Financing ---------- */
.finance-grid{display:flex;flex-direction:column;gap:26px}
.finance-points{display:flex;flex-direction:column;gap:10px;font-size:14px;margin-bottom:4px}
.finance-points div{display:flex;gap:10px;align-items:baseline}
.finance-points span{color:var(--green);font-weight:700}
.price-card{background:var(--ink);color:var(--cream);padding:28px 24px}
.price-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--tan)}
.price-figure{font-family:var(--disp);font-size:36px;font-weight:600;margin:8px 0 12px;line-height:1.05}
.price-card p{margin:0 0 20px;font-size:13.5px;color:rgba(245,241,234,0.75);line-height:1.6}
.price-cta{width:100%;border:none;background:var(--rust);color:var(--off);padding:15px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.price-cta:hover{background:var(--rust-hover)}

/* ---------- Before / after ---------- */
.ba-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.ba-card{flex-shrink:0;width:290px;scroll-snap-align:start}
.ba-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.ba-shot{position:relative;height:150px}
.ba-shot img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 9px;pointer-events:none}
.ba-tag.before{background:var(--ink);color:var(--sand)}
.ba-tag.after{background:var(--rust);color:var(--off)}
.ba-cap{font-size:13px;font-weight:600;margin-top:10px;line-height:1.4}
.ba-list{display:flex;flex-direction:column;gap:34px}
.ba-item .ba-shot{height:170px}
.ba-meta{margin-top:14px}
.ba-meta b{font-family:var(--disp);font-weight:600;font-size:18px;display:block;margin-bottom:7px;line-height:1.25}
.ba-meta p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---------- Reviews ---------- */
.reviews{background:var(--ink);margin-top:44px;color:var(--cream)}
.reviews .wrap{padding-top:40px;padding-bottom:44px}
.reviews-stars{color:var(--rust);font-size:18px;letter-spacing:3px;margin-bottom:10px}
.reviews h2{font-size:27px;line-height:1.16;margin:0 0 22px;color:var(--cream)}
.review-list{display:flex;flex-direction:column;gap:14px}
.review{background:var(--cream);padding:22px;display:flex;flex-direction:column}
.review .stars{font-size:14px;letter-spacing:3px;margin-bottom:10px}
.review-quote{font-size:14.5px;line-height:1.65;color:#3C4149;text-wrap:pretty}
.review-who{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:auto;padding-top:14px}
.review-who span{font-weight:400;color:var(--faint)}
.review-list--all{gap:14px}
.review-ask{border:1px dashed var(--line);padding:22px;margin-top:16px;text-align:center;background:var(--white)}
.review-ask b{font-family:var(--disp);font-weight:600;font-size:17px}
.review-ask p{font-size:13.5px;color:var(--muted);margin:6px 0 0;line-height:1.6}
.review-ask-btn{display:flex;justify-content:center;margin-top:16px}
.review-ask-btn a{text-decoration:none;border:2px solid var(--ink);color:var(--ink);padding:14px 30px;font-size:14.5px;font-weight:700;letter-spacing:0.3px}
.review-ask-btn a:hover{background:var(--ink);color:var(--cream)}

/* ---------- Booking band (interior pages) ---------- */
.quote-band{background:var(--sand);margin-top:44px}
.quote-band .wrap{padding-bottom:44px}
.qb-grid{display:flex;flex-direction:column;gap:24px}
.qb-points{display:flex;flex-direction:column;gap:10px;font-size:14px}
.qb-points div{display:flex;gap:10px;align-items:baseline}
.qb-points span{color:var(--green);font-weight:700}

/* ---------- Areas / chips ---------- */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas a,.areas span{background:var(--white);border:1px solid var(--line);color:var(--ink);padding:9px 14px;font-size:13px;font-weight:600;text-decoration:none}
.areas a:hover{background:var(--rust);border-color:var(--rust);color:var(--off)}
.section.alt .areas a,.section.alt .areas span{background:var(--cream)}

/* ---------- NAP ---------- */
.nap{background:var(--white);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:18px}
.nap-row{font-size:14.5px;line-height:1.65;color:var(--ink)}
.nap-label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--rust);margin-bottom:5px}
.nap-phone{font-family:var(--disp);font-weight:600;font-size:26px;text-decoration:none}

/* ---------- FAQ ---------- */
.faq-wrap.alt{background:var(--sand);margin-top:44px}
.faq-wrap.alt .wrap{padding-bottom:44px}
.faq-list{display:flex;flex-direction:column}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-weight:600;font-size:15px;list-style:none;padding:18px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-mark{font-family:var(--disp);font-size:22px;color:var(--rust);line-height:1;flex-shrink:0}
.faq-list details[open] .faq-mark{transform:rotate(45deg)}
.faq-list p{margin:0;padding:0 24px 20px 0;font-size:14px;color:var(--muted2);line-height:1.7}

/* ---------- Prose ---------- */
.prose{max-width:68ch}
.prose h2{font-size:21px;margin:30px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:14.5px;line-height:1.75;color:var(--muted2)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:8px}

/* ---------- Final CTA ---------- */
.final{margin-top:44px}
.final .wrap{padding-top:0;padding-bottom:0}
.final .wrap{background:var(--rust);padding:44px 28px;text-align:center;max-width:560px}
.final h2{font-size:27px;line-height:1.16;margin:0 0 12px;color:var(--off)}
.final p{margin:0 0 24px;font-size:14.5px;color:rgba(255,248,242,0.88);line-height:1.6;text-wrap:pretty}
.final-btn{border:none;background:var(--ink);color:var(--cream);padding:16px 32px;font-size:15px;font-weight:700;letter-spacing:0.3px;cursor:pointer;transition:background .15s}
.final-btn:hover{background:var(--ink-dark)}
.final-alt{margin-top:16px;font-size:13.5px;color:rgba(255,248,242,0.85)}
.final-alt a{color:var(--off);font-weight:700;text-decoration:underline}

/* ---------- Footer ---------- */
/* The footer, not the body, reserves room for the fixed action bar, so the
   space behind it is always footer-coloured. */
.site-footer{background:var(--ink);color:var(--cream);margin-top:44px}
.site-footer .wrap{padding-top:40px;padding-bottom:36px;display:flex;flex-direction:column;gap:26px}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-name{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--cream)}
.foot-blurb{font-size:13px;color:rgba(245,241,234,0.62);line-height:1.7;margin:12px 0 14px;max-width:46ch}
.foot-label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tan);margin-bottom:8px}
.foot-text{font-size:13.5px;line-height:1.75;color:rgba(245,241,234,0.8)}
.foot-links{display:flex;flex-direction:column;gap:6px}
.foot-links a{font-size:13.5px;color:rgba(245,241,234,0.8);text-decoration:none}
.foot-links a:hover{color:var(--tan)}
.foot-phone{display:inline-block;margin-top:14px;font-size:17px;font-weight:700;color:var(--tan);text-decoration:none}
.foot-social{display:flex;gap:18px;font-size:13px;font-weight:600}
.foot-social a{color:rgba(245,241,234,0.8);text-decoration:none}
.foot-social a:hover{color:var(--tan)}
.foot-copy{display:flex;flex-direction:column;gap:8px;font-size:12px;color:rgba(245,241,234,0.62);border-top:1px solid rgba(245,241,234,0.12);padding-top:20px}
.foot-copy a{color:rgba(245,241,234,0.62);text-decoration:underline}
.foot-lic{font-size:11.5px}

/* ---------- Sticky bottom bar (mobile) ---------- */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--ink-dark);box-shadow:0 -8px 24px rgba(20,24,30,0.25)}
.sticky-bar .wrap{display:flex;gap:1px;padding:0}
.sticky-bar a,.sticky-bar button{flex:1;text-align:center;text-decoration:none;padding:17px 0;font-size:14.5px;font-weight:700;letter-spacing:0.4px;border:none;cursor:pointer}
.sticky-bar a{background:var(--ink);color:var(--cream)}
.sticky-bar a:hover{background:var(--ink-soft);color:var(--cream)}
.sticky-bar button{flex:1.4;background:var(--rust);color:var(--off);font-family:var(--sans)}
.sticky-bar button:hover{background:var(--rust-hover)}
.sticky-bar .wrap{padding-bottom:env(safe-area-inset-bottom)}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:700px){
  .wrap{max-width:720px}
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .svc-cards{grid-template-columns:1fr 1fr}
  .town-cards{grid-template-columns:1fr 1fr}
  .note-cards{grid-template-columns:1fr 1fr}
  .cert-grid{grid-template-columns:1fr 1fr}
  .review-list{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .reason-grid{grid-template-columns:repeat(3,1fr)}
  .age-grid{grid-template-columns:repeat(3,1fr)}
  .final .wrap{max-width:720px}
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width:960px){
  body{padding-bottom:0}
  .sticky-bar{display:none}
  .wrap{max-width:1140px;padding-left:32px;padding-right:32px}

  .site-header .wrap{padding-top:16px;padding-bottom:16px}
  .brand-name{font-size:21px}
  .nav-toggle{display:none}
  .nav-panel{display:none !important}
  .nav-links{display:flex;align-items:center;gap:20px}
  .nav-links a{font-size:14px;font-weight:600;color:var(--cream);text-decoration:none;white-space:nowrap}
  .nav-links a:hover{color:var(--tan)}
  .nav-links a[aria-current="page"]{color:var(--tan)}
  .hc-num{font-size:17px}

  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:center;padding-top:84px;padding-bottom:88px}
  .hero-copy{margin-bottom:0}
  .hero h1{font-size:52px}
  .hero-sub{font-size:17.5px;max-width:46ch}

  .page-hero .wrap{padding-top:48px;padding-bottom:56px}
  .page-hero h1{font-size:44px}
  .page-hero p{font-size:17px}

  .trust .wrap{padding-top:28px;padding-bottom:28px}
  .trust-label{font-size:13.5px}

  .section .wrap{padding-top:72px}
  .section h2{font-size:34px}
  .section-sub{font-size:16px;max-width:62ch}
  .section.alt{margin-top:72px}
  .section.alt .wrap{padding-bottom:72px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .split--center{align-items:center}

  .certs{margin-top:72px}
  .certs .wrap{padding-top:72px;padding-bottom:72px}
  .certs h2{font-size:34px}
  .cert-grid{grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
  .certs--compact .cert-grid{gap:16px}

  .svc-cards{grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
  .svc-cards--all{grid-template-columns:repeat(3,1fr)}
  .svc-card img{height:180px}
  .svc-hero-img img{height:400px}
  .note-cards{grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
  .town-cards{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
  .town-card img{height:190px}

  .how{margin-top:72px}
  .how .wrap{padding-top:72px;padding-bottom:72px}
  .how h2{font-size:34px}
  .how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
  .how .step-card{flex-direction:column;gap:12px}

  .claims{margin-top:72px}
  .claims .wrap{padding-top:72px;padding-bottom:72px}
  .claims h2{font-size:34px}
  .claims .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
  .claims .steps:has(.step:nth-child(4)){grid-template-columns:repeat(5,1fr);gap:0 24px}
  .claims .step{flex-direction:column;gap:10px}
  .btn-dark{display:inline-block;width:auto;padding-left:44px;padding-right:44px}

  .finance-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;align-items:center}
  .price-card{padding:36px 32px}
  .price-figure{font-size:44px}

  .ba-scroll{overflow-x:visible;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .ba-card{width:auto}
  .ba-shot{height:190px}
  .ba-list{gap:56px}
  .ba-item{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center}
  .ba-item .ba-shot{height:230px}
  .ba-meta{margin-top:0}

  .reviews{margin-top:72px}
  .reviews .wrap{padding-top:64px;padding-bottom:64px}
  .reviews h2{font-size:34px}
  .review-list{grid-template-columns:repeat(4,1fr)}
  .review-list--all{grid-template-columns:repeat(4,1fr)}

  .quote-band{margin-top:72px}
  .qb-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:52px;align-items:center}
  .areas-wrap .wrap{max-width:900px}
  .faq-wrap .wrap{max-width:820px}
  .faq-wrap.alt{margin-top:72px}
  .faq-list summary{font-size:16px}

  .final{margin-top:72px}
  .final .wrap{max-width:1140px;padding:72px 48px}
  .final h2{font-size:36px}
  .final p{font-size:16px}

  .site-footer{margin-top:72px}
  .site-footer .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:36px;padding-top:60px;padding-bottom:32px}
  .foot-copy{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;gap:20px}
}

/* Narrow phones: the header runs out of room before anything else does. */
@media (max-width:400px){
  .brand-mark{width:26px;height:26px}
  .brand-mark .peak{border-left-width:8px;border-right-width:8px;border-bottom-width:8px}
  .brand-name{font-size:16px}
  .hc-num{font-size:13.5px}
  .hc-label{font-size:9px}
  .site-header .wrap{padding-left:14px;padding-right:14px}
  .hero h1{font-size:33px}
  .reason-grid{grid-template-columns:1fr}
}