/* First Choice Roofing — shared LP design system.
   Built for Meta traffic: mobile-first, fast, no nav, form above the fold. */

:root{
  --accent:#E2571F; --accent-dk:#C4471420; --accent-ink:#fff;
  --ink:#0F1B2B; --ink-2:#33455C; --ink-3:#64748B;
  --bg:#fff; --bg-2:#F4F6F9; --bg-3:#E9EDF2;
  --navy:#0F1B2B; --navy-2:#17273C;
  --line:#DEE4EC; --ok:#16A34A;
  --r:14px; --maxw:1120px; --pad:clamp(18px,5vw,40px);
  --shadow:0 10px 30px rgba(15,27,43,.10);
  --shadow-lg:0 24px 60px rgba(15,27,43,.18);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(30px,6.2vw,50px)}
h2{font-size:clamp(25px,4.6vw,36px)}
h3{font-size:clamp(19px,2.6vw,22px)}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.center{text-align:center}

/* ---------- header: no nav, one action ---------- */
/* Frosted glass, in two tints. Over the dark hero it is a dark glass carrying
   white text; once it passes onto the light page it becomes a light glass with
   dark text. The saturate() is what stops a blurred backdrop going flat grey,
   and it is what makes the sunset read through the bar over the hero. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(15,27,43,.28);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 24px rgba(15,27,43,.16);
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
/* .60 looked best over white, but the bar also passes over the dark stakes and
   final bands, and there the backdrop pulled the glass too dark for ink text.
   .76 keeps the backdrop visible while holding contrast everywhere. */
.hdr.is-stuck{background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.72));
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(15,27,43,.10);
  box-shadow:0 6px 28px rgba(15,27,43,.10)}
/* Without backdrop-filter the bar would be a flat wash over the content, so
   those browsers get an opaque bar instead of an unreadable translucent one. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{background:rgba(15,27,43,.82)}
  .hdr.is-stuck{background:rgba(255,255,255,.97)}
}
.hdr .brand{color:#fff;transition:color .28s ease;text-shadow:0 1px 10px rgba(15,27,43,.35)}
.hdr .brand small{color:rgba(255,255,255,.78);transition:color .28s ease}
.hdr.is-stuck .brand{color:var(--ink);text-shadow:none}
.hdr.is-stuck .brand small{color:var(--ink-3)}
/* the pill picks up a glass edge so it sits in the bar rather than on it */
.hdr-cta{box-shadow:0 2px 14px rgba(15,27,43,.28),inset 0 0 0 1px rgba(255,255,255,.12)}
.hdr.is-stuck .hdr-cta{box-shadow:0 2px 12px rgba(15,27,43,.18)}
/* Whatever comes first has to clear the fixed bar. The offer strip extends its
   own background up behind it; if lp.js removed the strip, the hero does. */
.hdr + .promo{padding-top:calc(11px + 62px)}
.hdr + .hero .hero-in{padding-top:calc(clamp(26px,5vw,54px) + 62px)}
.hdr + section:not(.hero),.hdr + .ty{padding-top:calc(62px + clamp(30px,5vw,60px))}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:10px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-weight:800;font-size:16px;letter-spacing:-.01em;line-height:1.2}
.brand small{display:block;font-weight:600;font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.hdr-cta{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:11px 16px;border-radius:999px;white-space:nowrap}
.hdr-cta svg{width:16px;height:16px;fill:currentColor}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,27,43,.62),rgba(15,27,43,.88)),
             var(--hero-img,linear-gradient(135deg,#1b2c44,#0f1b2b)) center/cover no-repeat}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(26px,5vw,54px) var(--pad) clamp(30px,5vw,58px);
  display:grid;gap:clamp(22px,4vw,44px);grid-template-columns:1fr}
@media(min-width:940px){.hero-in{grid-template-columns:1.05fr .95fr;align-items:start}}
.hero h1{color:#fff;margin-bottom:.35em}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-sub{font-size:clamp(16px,2.2vw,19px);color:rgba(255,255,255,.86);max-width:33ch;margin-bottom:1.1em}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.hero-ticks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.hero-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:rgba(255,255,255,.94)}
.hero-ticks svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;fill:var(--accent)}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(255,255,255,.72)}
.hero-proof b{color:#fff}

/* ---------- form card ---------- */
.card{background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:clamp(20px,3.4vw,28px)}
.card-head{margin-bottom:14px}
.card-head h2{font-size:clamp(20px,3vw,24px);margin-bottom:4px}
.card-head p{font-size:14px;color:var(--ink-3);margin:0}
.f-row{display:grid;gap:12px;margin-bottom:12px}
@media(min-width:520px){.f-row.two{grid-template-columns:1fr 1fr}}
label{display:block;font-size:13px;font-weight:700;margin-bottom:5px;color:var(--ink-2)}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748B'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:22px;padding-right:38px}
.btn{display:block;width:100%;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:17px;
  padding:16px 18px;border-radius:10px;background:var(--accent);color:var(--accent-ink);
  letter-spacing:.01em;transition:filter .15s,transform .05s;
  /* .btn is used on <button> and on <a>; these keep the anchor version identical */
  text-align:center;text-decoration:none;box-sizing:border-box}
.btn:hover{filter:brightness(1.07)} .btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.fine{font-size:12px;color:var(--ink-3);margin:10px 0 0;line-height:1.45}
.form-ok{display:none;text-align:center;padding:22px 8px}
.form-ok svg{width:52px;height:52px;fill:var(--ok);margin:0 auto 12px}
.form-ok h3{margin-bottom:6px}
.is-done .f-body{display:none} .is-done .form-ok{display:block}
.err{color:#B91C1C;font-size:13px;margin-top:8px;display:none}

/* ---------- sections ---------- */
section{padding:clamp(40px,6vw,68px) 0}
.sec-alt{background:var(--bg-2)}
.sec-head{max-width:640px;margin:0 auto clamp(24px,4vw,38px);text-align:center}
.sec-head p{color:var(--ink-2);font-size:17px;margin:0}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:10px}

/* trust bar */
.trust{background:var(--navy-2);color:#fff;padding:16px 0}
.trust-in{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;font-size:14px;font-weight:600}
.trust-in span{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.9)}
.trust-in svg{width:17px;height:17px;fill:var(--accent);flex:0 0 auto}

/* steps */
.steps{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px}
.step h3{margin-bottom:6px} .step p{margin:0;color:var(--ink-2);font-size:15.5px}

/* reviews */
.revs{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.stars{color:#F59E0B;font-size:15px;letter-spacing:2px;margin-bottom:8px}
.rev p{font-size:15.5px;color:var(--ink-2)} .rev b{font-size:14px}

/* faq */
.faq{max-width:760px;margin:0 auto}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px}
details[open]{border-color:var(--accent)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;color:var(--accent);font-weight:700;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0;color:var(--ink-2);font-size:15.5px}

/* final cta */
.final{background:var(--navy);color:#fff;text-align:center}
.final h2{color:#fff} .final p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 24px}
.final .btn{max-width:340px;margin:0 auto}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;margin-top:16px;color:#fff;text-decoration:none;
  font-weight:700;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}

/* footer */
footer{background:var(--navy-2);color:rgba(255,255,255,.62);font-size:13.5px;padding:26px 0 96px;text-align:center}
footer a{color:rgba(255,255,255,.85)}

/* sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;
  gap:10px;background:color-mix(in srgb,var(--accent) 86%,transparent);color:#fff;text-decoration:none;
  font-weight:800;font-size:17px;padding:15px 14px;
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  border-top:1px solid rgba(255,255,255,.22);box-shadow:0 -3px 22px rgba(0,0,0,.3)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .callbar{background:var(--accent)}
}
.callbar svg{width:19px;height:19px;fill:#fff}
@media(max-width:860px){.callbar{display:flex}}
@media(min-width:861px){footer{padding-bottom:26px}}

/* TBD placeholder — impossible to miss */
.tbd{background:#FEF3C7;color:#92400E;border-bottom:2px dotted #D97706;font-weight:700;padding:0 3px}

[data-rv]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;transition:none}}
@media (scripting: none){[data-rv]{opacity:1;transform:none}}

/* ---------- offer strip (pattern taken from Erie Home / West Shore Home) ---------- */
.promo{background:var(--accent);color:#fff;text-align:center;padding:11px var(--pad);font-weight:700;font-size:15px;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;line-height:1.35}
.promo .exp{font-weight:600;font-size:13px;opacity:.92}
.promo .terms{display:block;width:100%;font-weight:500;font-size:11.5px;opacity:.85}

/* ---------- what happens next ---------- */
.next{counter-reset:n;display:grid;gap:14px;grid-template-columns:1fr;max-width:820px;margin:0 auto}
@media(min-width:760px){.next{grid-template-columns:repeat(3,1fr)}}
.next li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.next li b{display:block;margin-bottom:5px;font-size:16px}
.next li span{color:var(--ink-2);font-size:15px}
.next li::before{counter-increment:n;content:counter(n);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:14px;margin-bottom:11px}

/* ---------- disclosure ---------- */
.disclosure{max-width:760px;margin:22px auto 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}

/* A2P 10DLC consent disclosure at point of collection */
.consent{font-size:11.5px;line-height:1.5}
.consent a{color:var(--ink-2);text-decoration:underline}
footer a{text-decoration:underline}

/* chat-only CTA card */
.chat-card{text-align:center}
.chat-card .btn{margin-top:4px}
.or{margin:12px 0 0;font-size:14px;color:var(--ink-3);text-align:center}
.or a{color:var(--ink-2)}
.opt{font-weight:500;color:var(--ink-3)}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--ink-2);
  text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--accent)}

/* ---- recent work gallery -------------------------------------------------
   Real job and drone-inspection photos from the client's own site. The whole
   point of this section is that they are not stock, so the caption says so. */
.work{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.work{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.work{grid-template-columns:repeat(3,1fr)}}
.work figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.work img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.work figcaption{padding:12px 14px;font-size:14px;color:var(--ink-2)}
.work .wide{grid-column:1/-1}
/* the before/after frame carries its own labels along the bottom edge,
   so it keeps its native ratio instead of being cropped to a banner */
.work .wide img{height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--bg-2)}

/* two real reviews should sit as a pair, not two thirds of a row */
@media(min-width:760px){.revs.two{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto}}

/* ---- two-step lead form -------------------------------------------------- */
.steps-bar{display:flex;gap:8px;margin-bottom:16px}
.sdot{flex:1;height:5px;border-radius:99px;background:var(--line)}
.sdot.on{background:var(--accent)}
.stepno{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.fstep[hidden]{display:none}
.backrow{margin-top:10px;text-align:center}
.backbtn{border:0;background:none;font:inherit;font-size:14px;color:var(--ink-3);
  text-decoration:underline;cursor:pointer;padding:6px}
.backbtn:hover{color:var(--accent)}

/* tap targets beat dropdowns on a phone: one tap instead of open-scroll-select */
.choices{display:grid;gap:8px;margin-bottom:14px}
@media(min-width:520px){.choices.two{grid-template-columns:1fr 1fr}}
.choice{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);
  border-radius:10px;padding:12px 14px;cursor:pointer;font-size:15px;background:#fff}
.choice:hover{border-color:#94A3B8}
.choice input{width:auto;margin:0;accent-color:var(--accent);flex:0 0 auto}
.choice.sel{border-color:var(--accent);background:#EFF9FE;font-weight:600}
.choice:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* ---- deductible band ------------------------------------------------------
   Texas HB 2102 makes it a crime for a contractor to pay, waive or rebate a
   homeowner's deductible, so "$0 out of pocket" must always carry "beyond your
   deductible". That is also the wording already published on firstchoiceroofs.com. */
.zeroband{background:#062A3A;color:#fff}
.zeroband .wrap{display:flex;gap:clamp(14px,3vw,32px);align-items:center;flex-wrap:wrap;
  padding-top:clamp(22px,3.5vw,32px);padding-bottom:clamp(22px,3.5vw,32px)}
.zeroband .big{font-size:clamp(30px,5vw,46px);font-weight:800;line-height:1;color:var(--accent);
  letter-spacing:-.02em;flex:0 0 auto}
.zeroband .zb-copy{flex:1 1 260px;min-width:0}
.zeroband b{display:block;font-size:clamp(17px,2.2vw,20px);margin-bottom:4px}
.zeroband p{margin:0;font-size:15px;color:rgba(255,255,255,.8);max-width:62ch}

/* ==========================================================================
   Flow borrowed from the Steady State K9 template
   ========================================================================== */

/* Two-tier hero subcopy: a bold promise line, then the lighter detail. */
.hero-lead{font-size:clamp(17px,2.4vw,20px);font-weight:700;color:#fff;
  max-width:34ch;margin:0 0 .5em;line-height:1.35}

/* Scroll affordance under the hero CTAs. */
.scrolldown{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.scrolldown svg{width:14px;height:14px;fill:currentColor;animation:sdbob 2.2s ease-in-out infinite}
@keyframes sdbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.scrolldown svg{animation:none}}

/* FAQ: the open item is the one that should read as active. */
details[open]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,174,239,.12)}
summary::after{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#EFF9FE;font-size:19px;flex:0 0 auto}
details[open] summary::after{background:var(--accent);color:#fff}
.faq-foot{text-align:center;margin-top:22px;font-size:15px;color:var(--ink-2)}
.faq-foot a{color:var(--ink);font-weight:700}

/* Final CTA sits over a washed photo instead of flat navy. */
.final{position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;
  background:var(--final-img) center 60%/cover;opacity:.20}
.final::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(15,23,42,.92))}
.final .wrap{position:relative;z-index:2}
.final .localnote{margin-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---- stakes: what the wrong roofer costs you ---------------------------
   Deliberately not another 3-up card grid. The page already has one of those
   for the process, and two in a row read as the same section twice. */
.stakes{background:var(--navy);color:#fff}
.stakes .wrap{display:grid;gap:clamp(24px,4vw,54px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.stakes .wrap{grid-template-columns:0.85fr 1.15fr}}
.stakes h2{color:#fff}
.stakes .kicker{color:var(--accent)}
.stakes-lead{color:rgba(255,255,255,.82);font-size:16.5px;margin:0}
.stakes-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.stakes-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}
.stakes-list li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.stakes-x{width:26px;height:26px;border-radius:50%;background:rgba(239,68,68,.16);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.stakes-x svg{width:13px;height:13px;fill:#F87171}
.stakes-list b{display:block;font-size:17px;margin-bottom:4px}
.stakes-list span{color:rgba(255,255,255,.74);font-size:15px;line-height:1.55}
.stakes-foot{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:16px;color:rgba(255,255,255,.9)}
.stakes-foot b{color:#fff}

/* ---- roof visualiser ------------------------------------------------------
   Five photographs of the same house, one per material, generated from the same
   source frame so they are pixel aligned. Switching material crossfades between
   them, which is why the shingle courses follow every plane and break over the
   hips properly: the perspective is in the photograph, not faked with a tiled
   texture. Colour is a tint pair over the roof mask, so the relief and the
   sunset light in the photograph carry through. */
.viz .wrap{display:grid;gap:clamp(22px,3.5vw,44px);grid-template-columns:1fr;align-items:start}
@media(min-width:980px){.viz .wrap{grid-template-columns:1.3fr .7fr}}
.viz-stage{position:relative;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--bg-3);isolation:isolate;aspect-ratio:1200/805}
.viz-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s ease}
.viz-layer.is-on{opacity:1}
.viz-lev,.viz-tint{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url('/assets/viz-mask.png');mask-image:url('/assets/viz-mask.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:background-color .25s ease,opacity .25s ease}
/* lightness first, then hue: `color` keeps the luminosity underneath it */
.viz-lev{opacity:0}
.viz-tint{mix-blend-mode:color}
@media(prefers-reduced-motion:reduce){.viz-layer,.viz-lev,.viz-tint{transition:none}}

.viz-panel{display:flex;flex-direction:column;gap:18px}
.viz-lbl{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.mats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mat{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:11px 12px;
  font:inherit;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;text-align:left;
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.mat:hover{border-color:#94A3B8}
.mat[aria-pressed="true"]{border-color:var(--accent);background:#EFF9FE;color:var(--ink)}
.mat:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mat.wide{grid-column:1/-1}

.viz-name{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.viz-desc{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55;min-height:4.6em}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.sw{position:relative;border:2px solid transparent;background:none;padding:0;cursor:pointer;
  border-radius:9px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 0 0 1px var(--line);
  transition:transform .14s ease,box-shadow .18s ease}
.sw i{display:block;width:100%;height:100%;background:var(--c)}
.sw:hover{transform:translateY(-2px)}
.sw[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 16px -8px rgba(0,0,0,.45)}
.sw:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sw span{position:absolute;left:-9999px}
.viz-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0}
.viz .btn{margin-top:2px}

/* ---- quote modal ----------------------------------------------------------
   The visualiser sits well down the page, so sending someone back to the hero
   form loses them the roof they just picked and the place they were reading.
   Same two-step form, opened in place. */
.qm{position:fixed;inset:0;z-index:120;display:none}
.qm.is-open{display:block}
.qm-bg{position:absolute;inset:0;background:rgba(9,16,26,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:qmfade .22s ease}
.qm-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 40px);overflow:auto;
  background:#fff;border-radius:18px;box-shadow:0 40px 90px rgba(9,16,26,.45);
  padding:clamp(20px,3.4vw,30px);animation:qmrise .26s cubic-bezier(.2,.8,.2,1)}
@keyframes qmfade{from{opacity:0}to{opacity:1}}
@keyframes qmrise{from{opacity:0;transform:translate(-50%,calc(-50% + 18px))}
                  to{opacity:1;transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.qm-bg,.qm-card{animation:none}}
.qm-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;cursor:pointer;
  border-radius:50%;background:var(--bg-2);color:var(--ink-2);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.qm-close:hover{background:var(--bg-3);color:var(--ink)}
.qm-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qm-pick{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;font-size:14px}
.qm-pick b{color:var(--ink)}
.qm-pick[hidden]{display:none}
body.qm-lock{overflow:hidden}

/* ---- SMS consent (Texas SB 140) -------------------------------------------
   Texas telemarketing law has covered texts since 1 Sep 2025 and consent may
   not be a condition of service. So this is a forced choice, not a required
   yes: they must answer, and "No" still submits. */
.consent-choice{margin:2px 0 14px;padding:14px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--bg-2)}
.consent-q{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:9px}
.consent-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.consent-opts .choice{background:#fff;font-size:14px}
.consent-fine{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:10px 0 0}
.consent-fine a{color:var(--ink-2);text-decoration:underline}

/* the nudge when someone declines texts */
.nudge{position:fixed;inset:0;z-index:140;display:none}
.nudge.is-open{display:block}
.nudge-bg{position:absolute;inset:0;background:rgba(9,16,26,.66);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.nudge-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 28px));background:#fff;border-radius:16px;
  box-shadow:0 40px 90px rgba(9,16,26,.45);padding:26px 24px;text-align:center}
.nudge-card h3{font-size:20px;margin-bottom:8px}
.nudge-card p{font-size:14.5px;color:var(--ink-2);margin-bottom:12px}
.nudge-btns{display:grid;gap:9px;margin-top:18px}
.nudge-btns .btn{margin:0}
.nudge-no{border:0;background:none;font:inherit;font-size:14px;color:var(--ink-3);
  text-decoration:underline;cursor:pointer;padding:8px}
.nudge-no:hover{color:var(--ink-2)}