/* ==========================================================================
   Landmark Flooring — pages.css
   Shared components for the multi-page SEO build (material, service, city,
   segment, conversion and guide pages). Loaded AFTER styles.css, so it reuses
   the same tokens (--blue, --accent-*, --cream, --ink, --radius, shadows, etc.).
   Home (index.html) does not need this file.
   ========================================================================== */

/* ---------- Anchors clear the sticky header ---------- */
:where(h2,h3)[id]{scroll-margin-top:96px}

/* ---------- Mobile nav toggle (sub-pages have real nav links, not anchors) ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  cursor:pointer; flex:none;
}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .x{display:none}
.site-header.menu-open .nav-toggle .x{display:block}
.site-header.menu-open .nav-toggle .bars{display:none}
/* must match the 1023px nav breakpoint in styles.css */
@media (max-width:1023px){
  .nav-toggle{display:inline-flex}
  /* turn the primary nav into a dropdown panel */
  .site-header .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.98); backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-1); padding:8px 0;
  }
  .site-header.menu-open .nav-links{display:flex}
  .site-header .nav-links a{padding:13px 20px; font-size:1rem}
  .site-header .nav-links a::after{display:none}
  .site-header .nav-links a:hover{background:rgba(0,116,212,.06)}
  .nav{position:relative}
  /* keep the call button visible on mobile sub-page headers */
  .nav-cta .phone{display:none}
}
/* dropdown caret on items that expand a silo (visual only) */
.nav-links .has-children > a::before{content:""}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{background:var(--cream); border-bottom:1px solid var(--line)}
.breadcrumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  list-style:none; margin:0; padding:12px 0; font-size:.84rem; color:var(--ink-mute);
}
.breadcrumbs li{display:inline-flex; align-items:center; gap:6px}
.breadcrumbs li+li::before{content:"/"; color:var(--line); margin-right:2px}
.breadcrumbs a{color:var(--ink-soft); font-weight:600}
.breadcrumbs a:hover{color:var(--blue-ink)}
.breadcrumbs [aria-current="page"]{color:var(--ink-mute); font-weight:500}

/* ---------- Sub-page hero (compact; cream or photo variant) ---------- */
.subhero{position:relative; padding:clamp(54px,6vw,92px) 0 clamp(46px,5vw,72px); overflow:hidden}
.subhero .container{max-width:var(--container)}
.subhero-inner{max-width:760px}
.subhero .eyebrow{margin-bottom:14px}
.subhero h1{font-size:clamp(1.95rem,1.5rem + 1.6vw,3rem); font-weight:800; letter-spacing:-.025em; line-height:1.05; color:var(--ink); text-wrap:balance}
.subhero p.lead{margin-top:20px; color:var(--ink-soft); font-size:var(--f-lead); line-height:1.55; max-width:60ch}
.subhero .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.subhero .meta-row{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; font-size:.9rem; color:var(--ink-mute)}
.subhero .meta-row span{display:inline-flex; align-items:center; gap:7px}
.subhero .meta-row svg{width:17px;height:17px;color:var(--accent-text);flex:none}
/* photo variant: image bg + scrim, white text */
.subhero--photo{min-height:clamp(360px,46vh,520px); display:flex; align-items:center; isolation:isolate}
.subhero--photo .subhero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.subhero--photo::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,16,28,.62),rgba(8,12,22,.72)),radial-gradient(70% 80% at 35% 40%,rgba(10,16,28,.28),rgba(10,16,28,.6))}
.subhero--photo h1{color:#fff; text-shadow:0 2px 26px rgba(8,18,36,.65)}
.subhero--photo p.lead{color:#EEF3F9; text-shadow:0 1px 14px rgba(8,18,36,.6)}
.subhero--photo .eyebrow{color:var(--accent-on-dark)} .subhero--photo .eyebrow::before{background:var(--accent-on-dark)}
.subhero--photo .meta-row{color:#D8DEE8} .subhero--photo .meta-row svg{color:var(--accent-on-dark)}

/* trust badges row (licensed / guarantee / free estimate / financing) */
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:30px;
  background:#fff; border:1px solid var(--line); font-size:.82rem; font-weight:600; color:var(--ink-soft); box-shadow:var(--shadow-1)}
.badge svg{width:16px;height:16px;color:var(--blue)}
.subhero--photo .badge{background:rgba(20,26,38,.4); border-color:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(8px)}
.subhero--photo .badge svg{color:var(--accent-on-dark)}

/* ---------- Long-form article / prose (material, service, city, guide bodies) ---------- */
.prose{max-width:70ch; color:var(--ink-soft); font-size:var(--f-body); line-height:1.78}
.prose.wide{max-width:none}
.prose > * + *{margin-top:22px}
.prose h2{font-size:clamp(1.4rem,1.15rem + .85vw,1.8rem); color:var(--ink); margin-top:2.5em; line-height:1.2; letter-spacing:-.01em}
.prose > h2:first-child{margin-top:0}
.prose h3{font-size:var(--f-h3); color:var(--ink); margin-top:1.7em}
.prose h4{font-size:1.08rem; color:var(--ink); margin-top:1.4em}
.prose p{color:var(--ink-soft)}
.prose strong{color:var(--ink); font-weight:700}
.prose a{color:var(--blue-ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(0,116,212,.32); text-underline-offset:2px}
.prose a:hover{text-decoration-color:var(--blue)}
.prose ul,.prose ol{margin-left:0; padding-left:22px; color:var(--ink-soft); display:grid; gap:9px}
.prose ul{list-style:none; padding-left:0}
.prose ul > li{position:relative; padding-left:30px}
.prose ul > li::before{content:""; position:absolute; left:4px; top:.55em; width:9px; height:9px; border-radius:2px;
  background:linear-gradient(135deg,var(--accent-fill),#94A3B8)}
.prose ol{list-style:decimal; padding-left:24px}
.prose ol li::marker{color:var(--accent-text); font-weight:700}
.prose blockquote{margin:0; padding:16px 22px; border-left:4px solid var(--accent-fill);
  background:linear-gradient(170deg,#fff,#F8FAFC); border-radius:0 var(--radius-s) var(--radius-s) 0; color:var(--ink-soft)}
.prose figure{margin:0}
.prose figure img{width:100%; height:auto;   /* lesson: height:auto on responsive imgs */
  border-radius:var(--radius); box-shadow:var(--shadow-card)}
.prose figcaption{margin-top:8px; font-size:.84rem; color:var(--ink-mute); text-align:center}

/* two-column content layout: article + sticky aside (TOC / CTA) */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(40px,5vw,76px); align-items:start}
/* Grid items default to min-width:auto, so a wide child (table.cmp has min-width:560px)
   stretches the track past the viewport instead of scrolling inside .cmp-wrap.
   min-width:0 lets the column shrink and hands the overflow back to the scroller. */
.layout > *{min-width:0}
.layout .aside{position:sticky; top:90px; display:grid; gap:18px}
@media (max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}.layout .aside{position:static; order:2}}

/* table of contents */
.toc{background:linear-gradient(170deg,#fff,#F8FAFC); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-1)}
.toc h2,.toc p.toc-h{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); margin:0 0 12px; font-weight:700}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:9px; counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:flex; gap:9px; color:var(--ink-soft); font-size:.92rem; font-weight:500; line-height:1.35}
.toc a::before{content:counter(toc,decimal-leading-zero); color:var(--accent-text); font-weight:700; font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--blue-ink)}

/* aside CTA card */
.aside-cta{background:radial-gradient(120% 160% at 100% 0%,#0A78D6,#0068BE 55%,#005CA8); color:#fff;
  border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow-2); position:relative; overflow:hidden}
.aside-cta::before{content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.05) 26px 27px)}
.aside-cta h3{color:#fff; font-size:1.18rem; position:relative}
.aside-cta p{color:#EAF2FB; font-size:.92rem; margin-top:8px; line-height:1.5; position:relative}
.aside-cta .btn{margin-top:16px; width:100%; position:relative}
.aside-cta .acall{display:block; margin-top:12px; text-align:center; color:#fff; font-weight:700; position:relative}

/* ---------- Material / service "key facts" panel ---------- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:0; padding:0}
.facts .fact{background:linear-gradient(160deg,#fff,#F8FAFC); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:18px 20px; box-shadow:var(--shadow-1); transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.facts .fact:hover{border-color:var(--line-blue); box-shadow:var(--shadow-card)}
.facts dt,.facts .k{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); font-weight:700; margin:0}
.facts dd,.facts .v{margin:6px 0 0; color:var(--ink); font-weight:600; font-size:.98rem; line-height:1.4}

/* ---------- Comparison table ---------- */
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); background:#fff}
table.cmp{width:100%; border-collapse:collapse; min-width:560px; font-size:.94rem}
table.cmp caption{caption-side:bottom; padding:12px 14px; font-size:.82rem; color:var(--ink-mute); text-align:left}
table.cmp th,table.cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); color:var(--ink-soft)}
table.cmp thead th{background:linear-gradient(180deg,#fff,#F1F5F9); color:var(--ink); font-weight:700; position:sticky; top:0}
table.cmp tbody th{color:var(--ink); font-weight:700; background:#F8FAFC}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:0}
table.cmp .yes{color:#1f7a3d; font-weight:700}
table.cmp .no{color:#C0392B; font-weight:700}

/* ---------- Pros / cons ---------- */
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.proscons .pc{border-radius:var(--radius); padding:22px 24px; border:1px solid var(--line); box-shadow:var(--shadow-card); min-width:0}
.proscons .pros{background:linear-gradient(160deg,#F4FBF6,#fff); border-color:#CDEAD7}
.proscons .cons{background:linear-gradient(160deg,#FBF3F2,#fff); border-color:#EAD4D0}
/* min-width:0 + wrap: the flex heading's min-content width otherwise pushes .pc
   past its grid track on narrow phones (the card has 48px of horizontal padding). */
.proscons h3{font-size:1.1rem; color:var(--ink); margin-bottom:12px; display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; min-width:0}
.proscons ul{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.proscons li{display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:var(--ink-soft); line-height:1.45; min-width:0}
.proscons li > *{min-width:0}
.proscons svg{width:19px;height:19px;flex:none;margin-top:1px}
.proscons .pros svg{color:#1f7a3d} .proscons .cons svg{color:#C0392B}
@media (max-width:680px){.proscons{grid-template-columns:1fr}}

/* ---------- Local facts (city pages) ---------- */
.local-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.local-facts .lf{background:linear-gradient(150deg,rgba(0,116,212,.06),rgba(230,244,255,.5)); border:1px solid var(--line-blue);
  border-radius:var(--radius); padding:22px 22px; box-shadow:var(--shadow-card)}
.local-facts .lf .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#fff;color:var(--blue);box-shadow:var(--shadow-1);margin-bottom:12px}
.local-facts .lf .ico svg{width:22px;height:22px}
.local-facts .lf h3{font-size:1.05rem;color:var(--ink);margin-bottom:6px}
.local-facts .lf p{font-size:.92rem;color:var(--ink-soft);line-height:1.5}

/* ---------- Related / interlink cards ---------- */
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.related a.rcard{display:flex; flex-direction:column; gap:7px; padding:22px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#F8FAFC); border:1px solid var(--line); box-shadow:var(--shadow-card);
  color:var(--ink); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.related a.rcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--line-blue)}
.related a.rcard .k{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); font-weight:700}
.related a.rcard strong{font-size:1.06rem; color:var(--ink); font-weight:700}
.related a.rcard span{font-size:.9rem; color:var(--ink-mute); line-height:1.45}
.related a.rcard .go{margin-top:6px; color:var(--blue-ink); font-weight:700; font-size:.88rem; display:inline-flex; align-items:center; gap:6px}
.related a.rcard .go svg{width:16px;height:16px; transition:transform .2s var(--ease)}
.related a.rcard:hover .go svg{transform:translateX(4px)}

/* generic two-up media + text reuse helper for sub-pages */
.section-head .sub-lead{margin-top:14px;color:var(--ink-soft);font-size:var(--f-lead);line-height:1.5;max-width:62ch}

/* a slimmer contained CTA band reused across sub-pages (uses .fin look) */
.cta-mini{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.4vw,48px); border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(120% 160% at 0% 0%,#0A78D6,#0068BE 55%,#005CA8); box-shadow:var(--shadow-2); position:relative; overflow:hidden}
.cta-mini::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,transparent 0 28px,rgba(255,255,255,.05) 28px 29px)}
.cta-mini .cm-body{position:relative;z-index:1;flex:1;min-width:260px}
.cta-mini h2{color:#fff;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
.cta-mini p{color:#EAF2FB;margin-top:6px;font-size:.98rem;max-width:60ch}
.cta-mini .cm-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap}

/* Full-bleed BLUE CTA band — the blue section is the strongest contrast device,
   so every page's bottom CTA becomes a full blue band (not a floating card).
   Uses :has() so no per-page markup changes; degrades to the blue card if unsupported. */
.section:has(.cta-mini){
  background:radial-gradient(120% 140% at 80% 0%,#1E86E6 0%,#0074D4 45%,#005CA8 100%);
  color:#fff; position:relative; overflow:hidden; border-block:0;
}
.section:has(.cta-mini)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.08) 47px 48px),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.07) 47px 48px);
}
.section:has(.cta-mini) > .container{position:relative; z-index:1}
.section:has(.cta-mini) .cta-mini{background:none; box-shadow:none; padding:0; overflow:visible}
.section:has(.cta-mini) .cta-mini::before{display:none}
.section:has(.cta-mini) .cta-mini h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.2rem)}
.section:has(.cta-mini) .cta-mini .btn-primary{background:#fff; color:var(--blue-ink); box-shadow:0 6px 18px rgba(4,18,40,.28)}
.section:has(.cta-mini) .cta-mini .btn-primary:hover{background:#EAF2FC; color:var(--blue-deep); transform:translateY(-2px)}
.section:has(.cta-mini) .cta-mini .btn-amber{background:#fff; color:var(--blue-ink)}

/* contact / showroom info grid */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.info-grid .info{background:linear-gradient(160deg,#fff,#F8FAFC);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.info-grid .info:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-blue)}
.info-grid .info .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:rgba(0,116,212,.10);color:var(--blue);margin-bottom:12px}
.info-grid .info .ico svg{width:23px;height:23px}
.info-grid .info h3{font-size:1.05rem;color:var(--ink);margin-bottom:6px}
.info-grid .info p{font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.info-grid .info a{color:var(--blue-ink);font-weight:700}

/* embedded map frame */
.mapframe{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);background:#EEF2F7}
.mapframe iframe{display:block;width:100%;height:340px;border:0}

/* simple step list reused on service/estimate pages (light bg variant of .steps) */
.lsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:ls}
.lstep{position:relative;background:linear-gradient(170deg,#fff,#F8FAFC);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 24px;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.lstep:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-blue)}
.lstep .num{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;margin-bottom:14px;background:linear-gradient(135deg,#0A78D6,#005CA8);color:#fff;font-weight:800;font-size:1.3rem;box-shadow:0 6px 16px rgba(0,116,212,.32)}
.lstep h3{font-size:1.12rem;color:var(--ink);margin-bottom:7px}
.lstep p{font-size:.93rem;color:var(--ink-soft);line-height:1.5}

/* lead form (free-estimate / contact) — posts nowhere yet; progressive enhancement TODO */
.lead-form{display:grid;gap:16px;background:linear-gradient(170deg,#fff,#F8FAFC);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-card)}
/* Honeypot: must be reachable by bots that parse CSS-less HTML but never seen
   or focusable by people, so it is moved off-canvas rather than display:none. */
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Submission status (aria-live) */
.form-status{margin:0;padding:12px 14px;border-radius:var(--radius-s);font-size:.94rem;font-weight:600;border:1px solid transparent}
.form-status.is-pending{background:#F1F5F9;border-color:var(--line);color:var(--ink-soft)}
.form-status.is-ok{background:#F0FAF3;border-color:#CDEAD7;color:#1f7a3d}
.form-status.is-err{background:#FCF3F2;border-color:#EAD4D0;color:#B33A2B}
.lead-form button[disabled]{opacity:.65;cursor:progress}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.lead-form .row{grid-template-columns:1fr}}
.lead-form label{display:grid;gap:6px;font-size:.86rem;font-weight:600;color:var(--ink)}
.lead-form input,.lead-form select,.lead-form textarea{font-family:inherit;font-size:1rem;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;width:100%}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.lead-form textarea{min-height:120px;resize:vertical}
.lead-form .form-note{font-size:.82rem;color:var(--ink-mute)}

/* faint blueprint grid on cream sub-page heroes */
.subhero:not(.subhero--photo){
  background-image:
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(71,85,105,.04) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(71,85,105,.04) 39px 40px);
  border-bottom:1px solid var(--line);
}

/* footer: expanded silo columns wrap nicely */
.site-footer .foot-col a.sub{padding-left:0}

/* clickable variant of .chip — topic chips that link straight to a guide.
   Inherits the pill look from styles.css; only adds link affordance. */
a.chip{color:var(--ink-soft); text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease),
             border-color .2s var(--ease), color .2s var(--ease)}
a.chip:hover{transform:translateY(-2px); color:var(--blue-ink);
  border-color:var(--line-blue); box-shadow:var(--shadow-2)}
a.chip:hover svg{color:var(--blue)}
@media (prefers-reduced-motion:reduce){
  a.chip{transition:none}
  a.chip:hover{transform:none}
}

/* guides index: the topic chips and the guide cards now share one section,
   so give the card grid room to breathe under the chip row. */
.chips + .related{margin-top:30px}

/* guides index: the intro now lives in the hero, so the guide list starts
   straight under the hero rule instead of a full section's worth of padding. */
.section--tight{padding-top:clamp(30px,2vw + 18px,48px)}

/* ==========================================================================
   FINANCING — Synchrony promotional offer cards (/financing/ only)
   Deferred-interest offers are regulated: the disclosure must stay visible
   (never collapsed behind a click), so .promo-fine is always rendered.
   ========================================================================== */
.promo-lede{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,42px); border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(120% 160% at 100% 0%,#0A78D6,#0068BE 55%,#005CA8);
  box-shadow:var(--shadow-2); position:relative; overflow:hidden;
}
.promo-lede::before{content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:repeating-linear-gradient(115deg,transparent 0 30px,rgba(255,255,255,.05) 30px 31px)}
.promo-lede .pl-body{flex:1; min-width:260px; position:relative; z-index:1}
.promo-lede h2{color:#fff; font-size:clamp(1.35rem,1.05rem + 1.1vw,1.85rem)}
.promo-lede p{color:#fff; margin-top:8px; font-size:1rem; max-width:64ch}
.promo-lede .btn{position:relative; z-index:1; flex:none}

.promo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:26px}
.promo{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1); overflow:hidden; position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.promo:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--line-blue)}
.promo::before{content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--blue),#41A5F0)}
.promo-head{
  display:flex; align-items:center; gap:18px;
  padding:26px clamp(20px,2.4vw,28px) 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(170deg,var(--pale),#fff);
}
.promo-term{
  display:grid; place-items:center; flex:none; width:82px; height:82px; border-radius:20px;
  background:linear-gradient(160deg,#0A78D6,#005CA8); color:#fff; box-shadow:var(--shadow-1);
  line-height:1;
}
.promo-term b{font-size:2.1rem; font-weight:800; letter-spacing:-.02em}
.promo-term span{font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:4px; opacity:.9}
.promo-head h3{font-size:1.12rem; line-height:1.32; color:var(--ink)}
.promo-head .promo-cond{margin-top:6px; font-size:.85rem; font-weight:700; color:var(--accent-text)}
.promo-body{padding:20px clamp(20px,2.4vw,28px) 24px; display:flex; flex-direction:column; flex:1}
.promo-body > p{color:var(--ink-soft); font-size:.94rem; line-height:1.55}
.promo-fine{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:.72rem; line-height:1.5; color:var(--ink-soft); opacity:.85;
}
.promo .btn{margin-top:18px; align-self:flex-start}

@media (max-width:860px){ .promo-grid{grid-template-columns:1fr} }
@media (max-width:420px){
  .promo-head{flex-direction:column; align-items:flex-start; gap:14px}
  .promo-term{width:70px; height:70px}
  .promo-term b{font-size:1.8rem}
}

/* ---- lead form: honeypot + submit status ------------------------------- */
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0 0 16px;padding:14px 16px;border-radius:var(--radius);
  font-size:.95rem;line-height:1.5;border:1px solid transparent}
.form-status.is-ok{background:#ECFDF3;border-color:#ABEFC6;color:#085D3A}
.form-status.is-err{background:#FEF3F2;border-color:#FECDCA;color:#B42318}
.form-status strong{display:block;font-weight:700;margin-bottom:2px}
.lead-form[aria-busy="true"]{opacity:.65;pointer-events:none}


/* Real Google reviews: rating badge, inline review callout, article quote grid */
.rating-badge{text-align:center; margin:-6px 0 28px}
.rating-badge a{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-1); color:var(--ink); font-size:.95rem; transition:border-color .16s var(--ease), transform .16s var(--ease)}
.rating-badge a:hover{border-color:var(--line-blue); transform:translateY(-2px)}
.rating-badge .rb-star{color:#E8A03C; font-size:1.15rem; line-height:1}
.rating-badge strong{font-weight:800}
.review-inline{margin:22px 0 28px; padding:22px 24px; border-left:4px solid var(--blue); background:#fff; border-radius:0 14px 14px 0; box-shadow:var(--shadow-1)}
.review-inline .stars{margin:0 0 8px}
.review-inline blockquote{margin:0}
.review-inline blockquote p{margin:0; font-size:1.02rem; line-height:1.6; color:var(--ink)}
.review-inline figcaption{margin-top:12px; font-weight:700; font-size:.9rem; color:var(--ink)}
.review-inline figcaption span{color:var(--ink-mute); font-weight:500}
.review-inline figcaption a{color:var(--blue); font-weight:600}
.quotes--article{margin:18px 0 8px}
.prose .quotes--article .quote{border-left:1px solid var(--line); padding:26px 24px 22px; background:#fff; border-radius:16px}
.prose .quotes--article .quote p{font-style:normal; font-size:.97rem; color:var(--ink-soft)}
.prose .rating-badge{text-align:left; margin:8px 0 22px}
@media (max-width:900px){.quotes--article{grid-template-columns:1fr}}


/* SMS consent block (A2P 10DLC) — shared by every lead form */
.lead-form .opt{font-weight:500; color:var(--ink-mute); font-size:.8rem}
.sms-consent{margin:4px 0 0; padding:18px 20px 16px; border:1px solid var(--line-blue); border-left:4px solid var(--blue); border-radius:0 12px 12px 0; background:var(--pale,#E6F4FF)}
.sms-consent legend{float:left; width:100%; margin:0 0 12px; padding:0; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.sms-consent .check{clear:both; display:flex; align-items:flex-start; gap:12px; margin:0 0 12px; font-size:.9rem; font-weight:500; line-height:1.5; color:var(--ink-soft); cursor:pointer}
.sms-consent .check input[type="checkbox"]{flex:0 0 auto; width:20px; height:20px; margin:2px 0 0; accent-color:var(--blue); cursor:pointer}
.sms-consent .check b{color:var(--ink); font-weight:700}
.sms-consent .opt-tag{display:inline-block; font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); background:#fff; border:1px solid var(--line); border-radius:4px; padding:1px 6px; margin:0 4px 0 0; vertical-align:1px}
.sms-consent .sms-disclosure{clear:both; margin:8px 0 0; padding-top:12px; border-top:1px solid var(--line-blue); font-size:.8rem; line-height:1.6; color:var(--ink-mute); font-weight:500}
.sms-consent .sms-disclosure strong{color:var(--ink); font-weight:700}
.sms-consent .sms-disclosure a{color:var(--blue); text-decoration:underline; text-underline-offset:2px}

/* Home CTA: copy + estimate form side by side */
.cta-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; text-align:left}
.cta-grid .eyebrow--center{margin-inline:0; justify-content:flex-start}
.cta-grid h2{margin-inline:0}
.cta-grid .cta p{margin-inline:0}
.cta-copy p{margin-left:0; margin-right:0}
.cta-grid .cta-actions{justify-content:flex-start}
.cta-form .lead-form{text-align:left; gap:14px}
.cta-form .form-title{font-size:1.15rem; font-weight:800; color:var(--ink); margin:0 0 2px}
.cta-form .lead-form textarea{min-height:76px}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr; text-align:center} .cta-grid .cta-actions{justify-content:center} .cta-grid h2{margin-inline:auto} .cta-copy p{margin-inline:auto} .cta-form .lead-form{text-align:left}}