/* RoofsDirect.com — extracted from index.html so a strict CSP can use style-src 'self' */
/* ============================================================
   RoofsDirect.com — single-page static site
   Palette lifted from the approved Lovable mockup.
   ============================================================ */

:root{
  --brand:#00abca;          /* primary teal   */
  --brand-dark:#006278;
  --brand-deep:#00404f;
  --brand-light:#b7f0fe;
  --brand-tint:#eefaff;

  --green:#88c72a;          /* accent / savings */
  --green-dark:#518200;
  --green-light:#d5f9b2;
  --green-tint:#f2fce4;

  --bg:#f9f8f5;             /* warm cream page */
  --surface:#ffffff;
  --surface-alt:#f4f2ed;
  --fg:#151b24;
  --muted:#56637a;          /* darkened from mockup for AA contrast */
  --border:#e2e5ea;

  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(21,27,36,.06), 0 1px 3px rgba(21,27,36,.05);
  --shadow-md:0 4px 12px rgba(21,27,36,.07), 0 12px 32px rgba(21,27,36,.06);
  --shadow-lg:0 18px 50px rgba(0,64,79,.16);

  --maxw:1180px;
  --font-display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* keep the hidden attribute winning over any class that sets display */
[hidden]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;margin:0;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:1.16rem;letter-spacing:-.01em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(64px,8vw,104px) 0}
.section--alt{background:var(--surface-alt)}
.section--white{background:var(--surface)}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:.735rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.42em 1em;border-radius:999px;margin-bottom:18px;
}
.eyebrow--teal{background:var(--brand-light);color:var(--brand-deep)}
.eyebrow--green{background:var(--green-light);color:var(--green-dark)}

.section-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:52px}
.section-head p{color:var(--muted);font-size:1.08rem;margin-top:16px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  padding:.85em 1.6em;border-radius:10px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none!important;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(0,171,202,.32)}
.btn--primary:hover{background:#0098b4;box-shadow:0 6px 18px rgba(0,171,202,.4)}
.btn--green{background:var(--green-dark);color:#fff;box-shadow:0 2px 8px rgba(81,130,0,.28)}
.btn--green:hover{background:#456e00}
.btn--ghost{background:transparent;color:var(--brand-deep);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--brand);background:var(--brand-tint)}
.btn--onblue{background:#fff;color:var(--brand-deep)}
.btn--onblue:hover{background:var(--brand-tint)}
/* FIX: mockup had this button white-on-white and invisible */
.btn--onblue-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn--onblue-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--lg{font-size:1.06rem;padding:1em 1.9em}
.btn .ar{transition:transform .15s ease}
.btn:hover .ar{transform:translateX(3px)}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:#cfd6de}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}

/* ---- cards that open a detail dialog ---- */
.situation{cursor:pointer;position:relative}
.situation:hover{border-color:var(--brand)}
.situation:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.situation__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:15px;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--brand-dark);
  opacity:0;transform:translateY(-5px);
  transition:opacity .18s ease, transform .18s ease;
}
.situation:hover .situation__more,
.situation:focus-visible .situation__more,
.situation:focus-within .situation__more{opacity:1;transform:none}
.situation:hover .situation__more .ar{transform:translateX(3px)}
.situation__more .ar{transition:transform .18s ease}
/* touch devices have no hover — always show the affordance there */
@media (hover:none){ .situation__more{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .situation__more{transition:none} }

/* ---- detail dialog ---- */
.infopanel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(26px,3.6vw,40px);box-shadow:var(--shadow-lg);
}
.infopanel h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px}
.infopanel h4{
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;
  margin:26px 0 10px;color:var(--brand-deep);
}
.infopanel p{color:var(--muted);font-size:1rem}
.infopanel .lead{
  font-size:1.07rem;color:var(--fg);border-left:3px solid var(--green);
  padding-left:16px;margin:18px 0 4px;
}
.infopanel .ticklist{margin:0}
.infopanel .ticklist li{font-size:.97rem;color:var(--muted)}
.infopanel .ticklist strong{color:var(--fg)}
.infopanel .note{
  margin-top:24px;padding:15px 18px;background:var(--surface-alt);
  border-radius:var(--radius);font-size:.92rem;color:var(--muted);
}
.infopanel__cta{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--border);
}
@media(max-width:520px){.infopanel__cta .btn{width:100%}}

.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

.icon-chip{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-dark);margin-bottom:16px;flex:none;
}
.icon-chip--green{background:var(--green-tint);color:var(--green-dark)}
.icon-chip svg{width:21px;height:21px}

.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:13px}
/* The tick sits in the margin rather than being a flex sibling: as a flex item
   a leading <strong> became its own narrow column and the sentence broke into
   two ragged halves. As normal text flow, bold lead-ins read as one sentence. */
.ticklist li{display:block;position:relative;padding-left:30px;font-size:1rem}
.ticklist svg{position:absolute;left:0;top:3px;width:19px;height:19px;color:var(--green-dark)}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.header__inner{display:flex;align-items:center;gap:26px;height:76px}
.brand{flex:none}
.brand img{height:38px;width:auto}
.nav{display:flex;gap:26px;flex:1;justify-content:center}
.nav a{
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--fg);
  padding:6px 2px;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;
}
.nav a:hover{color:var(--brand-dark);border-bottom-color:var(--brand)}
.header__right{margin-left:auto;display:flex;align-items:center;gap:16px}
.phone-pill{
  display:flex;flex-direction:column;line-height:1.15;flex:none;white-space:nowrap;
  background:var(--green);color:#fff;font-family:var(--font-display);
  padding:.5em 1.05em;border-radius:9px;text-decoration:none!important;font-weight:700;
  /* a thin dark outline so white reads against the bright green. paint-order
     puts the stroke behind the fill, so it outlines the letters instead of
     eating into them. */
  -webkit-text-stroke:.5px rgba(0,0,0,.55);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.4);
}
.phone-pill span{font-size:.68rem;font-weight:600;opacity:.92;white-space:nowrap;
  -webkit-text-stroke:.45px rgba(0,0,0,.6)}
.header__right .btn--primary{white-space:nowrap;padding:.62em 1.4em}
.phone-pill[href]:hover{background:#7ab625}
/* on a desktop a phone number is not a link - tel: has nowhere to go there */
.phone-pill:not([href]){cursor:default}
a.btn:not([href]),
a.talk__num:not([href]){cursor:default}
a.btn:not([href]):hover{filter:none}
.burger{display:none;background:none;border:1px solid var(--border);border-radius:9px;padding:9px;cursor:pointer}
.burger svg{width:22px;height:22px;display:block}
@media(max-width:1240px){.nav{gap:18px}.header__inner{gap:18px}}
.zbtn{min-height:44px}
@media(max-width:1060px){
  .nav,.header__right .phone-pill{display:none}
  .burger{display:block;margin-left:auto}
  .header__right{gap:10px}
}
@media(max-width:560px){
  /* the burger menu already carries this CTA — drop it from the bar so nothing overflows */
  .header__right .btn--primary{display:none}
  .header__inner{height:66px;gap:12px}
  .brand{display:flex;align-items:center;padding:6px 0}
  .brand img{height:32px;width:auto}
  .wrap{padding-inline:18px}
}

.mobile-nav{display:none;border-bottom:1px solid var(--border);background:#fff}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:15px 24px;border-bottom:1px solid var(--border);
  font-family:var(--font-display);font-weight:600;color:var(--fg);text-decoration:none;
}
.mobile-nav .m-cta{padding:18px 24px;display:grid;gap:10px}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--brand-deep)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,64,79,.72) 0%, rgba(0,64,79,.58) 42%, rgba(0,64,79,.86) 100%),
    radial-gradient(105% 78% at 50% 8%, rgba(0,171,202,.34), transparent 62%);
}
.hero__inner{padding:clamp(72px,10vw,124px) 0 clamp(64px,8vw,96px);text-align:center;color:#fff}
.hero h1{color:#fff;max-width:15ch;margin-inline:auto;text-shadow:0 2px 24px rgba(0,32,40,.45)}
.hero h1 em{font-style:normal;color:var(--green-light)}
.hero__sub em{font-style:normal;font-weight:700;color:var(--green-light)}
.hero__sub{
  max-width:60ch;margin:22px auto 0;font-size:clamp(1.03rem,1.9vw,1.2rem);
  color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(0,32,40,.4);
}

.addressbar{
  display:flex;gap:10px;max-width:660px;margin:34px auto 0;
  background:#fff;padding:9px;border-radius:16px;box-shadow:var(--shadow-lg);
}
.addressbar .field{flex:1;display:flex;align-items:center;gap:10px;padding-left:14px;min-width:0}
.addressbar .field svg{width:20px;height:20px;color:var(--brand);flex:none}
.addressbar input{
  flex:1;min-width:0;border:0;outline:0;font-family:var(--font-body);
  font-size:1.03rem;color:var(--fg);background:transparent;padding:14px 0;
}
.addressbar input::placeholder{color:#8a94a6}
.addressbar .btn{flex:none}
@media(max-width:600px){
  .addressbar{flex-direction:column;padding:12px;gap:12px}
  .addressbar .field{border:1px solid var(--border);border-radius:10px;padding:2px 14px}
  .addressbar .btn{width:100%}
}

/* one line on desktop; only phones are allowed to wrap it */
.hero__note{margin-top:16px;font-size:.9rem;color:rgba(255,255,255,.82);margin-inline:auto;white-space:nowrap}
/* a link in the hero note sits on the dark photo, so it cannot use the
   dark brand link colour the rest of the page uses */
.hero__note a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hero__note a:hover{color:#fff}
@media(max-width:680px){.hero__note{white-space:normal;max-width:44ch}}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  padding:.5em 1em;border-radius:999px;backdrop-filter:blur(4px);
}
.chip svg{width:15px;height:15px;color:var(--green-light)}

/* ---------- stat bar ---------- */
.stats{background:var(--surface);border-bottom:1px solid var(--border)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center}
.stat{padding:34px 18px;border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.35rem);color:var(--brand-dark);font-weight:800;line-height:1.1}
.stat span{display:block;font-size:.87rem;color:var(--muted);margin-top:5px}
@media(max-width:620px){
  .stats__grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--border);padding:22px 18px}
  .stat:last-child{border-bottom:0}
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:940px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.step__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step__num{font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:var(--brand-light);line-height:1}
.step .icon-chip{margin:0}
.step h3{margin-bottom:7px}
.step p{color:var(--muted);font-size:.97rem}

/* ---------- savings ---------- */
.breakdown{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.breakdown{grid-template-columns:1fr}}
.bd__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.bd__pct{font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--green-dark)}

.compare{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow-sm);
}
.compare h3{font-size:1.4rem;margin-bottom:5px}
.compare .sub{color:var(--muted);font-size:.96rem;margin-bottom:26px}
.bar-row{margin-bottom:22px}
.bar-row__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;margin-bottom:8px}
.bar-row__label .amt{font-family:var(--font-display);font-weight:800;font-size:1.16rem}
.bar{height:11px;border-radius:99px;background:#e9ecf1;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}
.bar--retail i{width:100%;background:#b9c1cd}
.bar--direct i{width:79.5%;background:linear-gradient(90deg,var(--green),var(--green-dark))}
.bar-row small{display:block;color:var(--muted);font-size:.83rem;margin-top:7px}
.savings-callout{
  background:var(--green-tint);border:1px solid var(--green-light);
  border-radius:var(--radius);padding:20px 22px;margin-top:6px;
}
.savings-callout b{font-family:var(--font-display);font-size:1.3rem;color:var(--green-dark);display:flex;align-items:center;gap:9px}
.savings-callout p{color:#3f5b1a;font-size:.93rem;margin:8px 0 0}

/* comparison table (idea borrowed from Gunner) */
.vs{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vs th,.vs td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border);font-size:.97rem}
.vs thead th{background:var(--surface-alt);font-family:var(--font-display);font-size:.9rem;letter-spacing:.02em}
.vs thead th:nth-child(2){color:var(--brand-dark)}
.vs th:nth-child(2),.vs td:nth-child(2),
.vs th:nth-child(3),.vs td:nth-child(3){text-align:center;width:150px}
.vs tbody tr:last-child td{border-bottom:0}
.vs .yes{color:var(--green-dark);font-weight:700}
.vs .no{color:#96a0af}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .vs th,.vs td{padding:13px 12px;font-size:.9rem}
  .vs th:nth-child(2),.vs td:nth-child(2),
  .vs th:nth-child(3),.vs td:nth-child(3){width:76px}
}

/* ---------- address autocomplete ---------- */
.rdac__panel{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:320px;overflow-y:auto;text-align:left;
}
.rdac__opt{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--border);padding:12px 15px;
  font-family:var(--font-body);font-size:.95rem;color:var(--fg);
}
.rdac__opt:last-child{border-bottom:0}
.rdac__opt:hover,.rdac__opt.is-active{background:var(--brand-tint)}
.rdac__opt svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:3px}
.rdac__opt b{display:block;font-weight:600}
.rdac__opt i{display:block;font-style:normal;color:var(--muted);font-size:.86rem}
.rdac__msg{padding:13px 15px;color:var(--muted);font-size:.9rem}
.rdac__msg--warn{color:#8a5a00}

.rdconf{
  margin-top:14px;background:var(--surface);border:1px solid var(--brand-light);
  border-left:4px solid var(--brand);border-radius:12px;padding:18px 20px;
  box-shadow:var(--shadow-md);text-align:left;
}
.rdconf__head{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--brand-deep)}
.rdconf__head svg{width:19px;height:19px;flex:none}
.rdconf__head b{font-family:var(--font-display);font-size:1.02rem}
.rdconf__head--warn{color:#8a5a00}
.rdconf__issues{margin:0 0 14px;padding-left:20px;color:#8a5a00;font-size:.89rem}
.rdconf__compare{display:grid;gap:9px;margin-bottom:16px}
.rdconf__row{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:baseline;font-size:.94rem}
.rdconf__row span{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.rdconf__row em{font-style:normal;color:var(--muted);text-decoration:line-through}
.rdconf__row strong{color:var(--fg);font-weight:700}
.rdconf__note{font-size:.88rem;color:#8a5a00;background:#fff8e8;border-radius:9px;padding:11px 13px;margin:0 0 14px}
.rdconf__btns{display:flex;gap:10px;flex-wrap:wrap}
.rdconf__btns .btn{font-size:.93rem;padding:.7em 1.25em}
@media(max-width:560px){.rdconf__btns .btn{width:100%}.rdconf__row{grid-template-columns:1fr;gap:2px}}

.addr-ok{
  display:flex;align-items:center;gap:9px;margin-top:12px;font-size:.9rem;
  color:var(--green-dark);background:var(--green-tint);border:1px solid var(--green-light);
  border-radius:9px;padding:10px 13px;text-align:left;
}
.addr-ok svg{width:17px;height:17px;flex:none}
.addr-ok button{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--brand-dark);
  font-family:var(--font-display);font-weight:700;font-size:.85rem;text-decoration:underline;padding:4px;
}

/* ---------- states map ---------- */
.mapwrap{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
@media(max-width:980px){.mapwrap{grid-template-columns:1fr}}
.mapcol{min-width:0}

.map__toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.map__legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.87rem;color:var(--muted)}
.map__legend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block;flex:none}
.sw--live{background:var(--brand-dark)}
.sw--soon{background:var(--brand-light);border:1px solid var(--brand)}
.sw--off{background:#fff;border:1.5px solid #111}

.map__zoombtns{display:flex;gap:8px}
.zbtn{
  font-family:var(--font-display);font-weight:600;font-size:.84rem;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:9px 13px;color:var(--fg);min-height:40px;
}
.zbtn:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-tint)}
.zbtn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.map{
  position:relative;background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:10px;overflow:hidden;
}
.map svg{width:100%;height:auto;display:block;overflow:visible}
[data-map-zoom]{transition:transform .45s cubic-bezier(.4,0,.2,1);transform-origin:0 0}
@media (prefers-reduced-motion:reduce){[data-map-zoom]{transition:none}}

.st{
  fill:#fff;stroke:#111;stroke-width:.7;stroke-linejoin:round;
  cursor:pointer;transition:fill .16s ease, stroke .16s ease;
  outline:none;
}
.st--live{fill:var(--brand-dark);stroke:var(--brand-deep)}
.st--soon{fill:var(--brand-light);stroke:var(--brand-dark)}
.st:hover{fill:var(--green);stroke:var(--green-dark);stroke-width:1.1}
.st--live:hover{fill:var(--brand-deep)}
.st:focus-visible{stroke:var(--green-dark);stroke-width:2}
.st--sel{stroke:var(--green-dark);stroke-width:2}

.map__tip{
  position:absolute;pointer-events:none;z-index:3;
  background:var(--fg);color:#fff;font-size:.82rem;font-weight:600;
  padding:6px 10px;border-radius:7px;white-space:nowrap;transform:translate(-50%,-140%);
  box-shadow:var(--shadow-md);
}
.map__tip b{display:block;font-family:var(--font-display);font-size:.9rem}
.map__tip i{font-style:normal;opacity:.75;font-weight:500}
.map__hint{margin-top:12px;font-size:.85rem;color:var(--muted);text-align:center}
@media (hover:none){.map__hint{display:none}}

.statecard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);position:sticky;top:96px;
}
@media(max-width:980px){.statecard{position:static}}
.statecard__badge{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.4em .9em;border-radius:999px;margin-bottom:12px;
}
.badge--live{background:var(--brand-light);color:var(--brand-deep)}
.badge--soon{background:var(--green-light);color:var(--green-dark)}
.badge--off{background:var(--muted);color:var(--fg)}
.statecard h3{font-size:1.5rem;margin-bottom:8px}
.statecard p{color:var(--muted);font-size:.95rem}
.statecard__rows{display:grid;gap:14px;margin:20px 0}
.statecard__row{display:flex;gap:11px;align-items:flex-start;font-size:.94rem}
.statecard__row svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--brand)}
.statecard__row span{display:block;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.statecard__row a,.statecard__row strong{color:var(--fg);font-weight:600;word-break:break-word}
.statecard__row a:hover{color:var(--brand-dark)}
.statecard .btn{width:100%;margin-top:4px}
.statecard__empty{color:var(--muted);font-size:.95rem}

.statelist{margin-top:44px}
.statelist__h{font-size:1rem;margin-bottom:14px;color:var(--muted);font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;font-size:.8rem}
.statelist__row{display:flex;flex-wrap:wrap;gap:10px}
.spill{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--brand);color:#fff;border:2px solid var(--brand);border-radius:999px;
  font-family:var(--font-display);font-weight:700;font-size:.94rem;padding:.6em 1.2em;min-height:44px;
  transition:background .15s ease,transform .15s ease;
}
.spill:hover{background:var(--brand-dark);border-color:var(--brand-dark);transform:translateY(-1px)}
.spill:focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px}
.spill--soon{background:transparent;color:var(--brand-deep);border-color:var(--brand-light)}
.spill--soon:hover{background:var(--brand-tint);border-color:var(--brand)}

/* ---------- financing ---------- */
.estimate{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow-sm);
}
.estimate__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.estimate__head h3{margin-bottom:3px}
.estimate__head p{color:var(--muted);font-size:.92rem}
.estimate__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.estimate__grid{grid-template-columns:1fr}}
.estimate__cell{background:var(--surface-alt);border-radius:var(--radius);padding:18px}
.estimate__cell span{display:block;font-size:.83rem;color:var(--muted)}
.estimate__cell b{display:block;font-family:var(--font-display);font-size:1.6rem;margin:3px 0 2px}
.estimate__cell small{color:var(--muted);font-size:.79rem}
.disclosure{
  margin-top:18px;padding:16px 18px;background:#fff8e8;border:1px solid #f0dfb4;
  border-radius:var(--radius);font-size:.85rem;color:#5c4813;line-height:1.6;
}
.disclosure-italic{
  margin-top:12px;text-align:center;font-size:.87rem;color:var(--muted);
}

.after{display:grid;gap:20px}
.after__item{display:flex;gap:15px;align-items:flex-start}
.after__item .icon-chip{margin:0;width:38px;height:38px}
.after__item h3{font-size:1.03rem;margin-bottom:4px}
.after__item p{color:var(--muted);font-size:.95rem}

/* ---------- founder ---------- */
.quote-block{
  background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--green);
  border-radius:var(--radius);padding:clamp(24px,3.2vw,36px);box-shadow:var(--shadow-sm);
}
.quote-block .q{font-family:var(--font-display);font-size:clamp(1.08rem,1.9vw,1.3rem);line-height:1.5;font-weight:500}
.quote-block .by{margin-top:16px;font-weight:700;color:var(--brand-dark);font-size:.95rem}

/* ---------- faq ---------- */
.faq__controls{max-width:840px;margin:0 auto 16px;display:flex;gap:9px;justify-content:flex-end}
@media(max-width:520px){.faq__controls{justify-content:stretch}.faq__controls .zbtn{flex:1}}
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq details[open]{border-color:var(--brand-light);box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 54px 19px 22px;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:1.03rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-dark)}
.faq summary:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 22px 20px;color:var(--muted);font-size:.98rem}

/* ---------- quote form panel ---------- */
.quotepanel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-md);
}
.qp__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.qp__step{font-family:var(--font-display);font-weight:700;font-size:.87rem;color:var(--brand-dark)}
.qp__dots{display:flex;gap:6px}
.qp__dots i{width:26px;height:4px;border-radius:99px;background:var(--border)}
.qp__dots i.on{background:var(--brand)}
.qp label{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;margin-bottom:4px}
.qp .hint{color:var(--muted);font-size:.87rem;margin-bottom:11px}
.qp .inp{
  width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--border);
  border-radius:10px;padding:0 14px;background:var(--surface);margin-bottom:22px;
}
.qp .inp input{padding:13px 0}   /* input fills the box so the whole field is tappable */
.qp .inp:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,171,202,.16)}
.qp .inp svg{width:18px;height:18px;color:var(--muted);flex:none}
.qp .inp input{flex:1;min-width:0;border:0;outline:0;font-family:var(--font-body);font-size:1rem;background:transparent}
.opts{display:grid;gap:9px;margin-bottom:20px}
.opt{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);border-radius:10px;
  padding:13px 15px;font-family:var(--font-body);font-size:.97rem;color:var(--fg);
  transition:border-color .15s ease, background .15s ease;
}
.opt svg{width:18px;height:18px;color:var(--muted);flex:none}
.opt:hover{border-color:var(--brand);background:var(--brand-tint)}
.opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 2px rgba(0,171,202,.2)}
.opt[aria-pressed="true"] svg{color:var(--brand-dark)}
.qp .btn{width:100%}
.qp .fine{text-align:center;color:var(--muted);font-size:.8rem;margin-top:12px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
/* financing: the left column is taller than the form, so the two
   columns start together rather than floating at their centres */
.split--top{align-items:start}

/* ---------- CTA band ---------- */
.cta{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.92);margin-top:14px}
.cta__call{margin-top:18px;text-align:center;font-size:1.12rem;line-height:1.5;color:rgba(255,255,255,.92)}
.cta__call a{color:var(--green-light);text-decoration:underline;text-underline-offset:3px}
.cta__call a:hover{color:#fff}
.cta .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media(max-width:900px){.cta .btns{justify-content:center}.cta .split>div:first-child{text-align:center}}

/* ---------- footer ---------- */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:60px 0 30px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:36px}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer img{height:34px;width:auto;margin-bottom:16px}
.footer p,.footer li{color:var(--muted);font-size:.92rem}
.footer h4{font-family:var(--font-display);font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px;color:var(--fg)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--brand-dark);text-decoration:underline}
.footer__contact{display:grid;gap:8px;margin-top:16px}
.footer__contact a{display:flex;align-items:center;gap:9px;font-size:.92rem}
.eml{cursor:pointer}
.eml__txt{display:inline}
.footer__contact svg{width:16px;height:16px;color:var(--brand)}
.footer__why li{display:flex;gap:9px;align-items:flex-start}
.footer__why svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--green-dark)}
.footer__bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:.86rem;
}
.footer__bottom nav{display:flex;gap:20px}
.licenses{margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}
.licenses h4{margin-bottom:12px}
.licenses ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.licenses li{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:8px}
.licenses li b{
  font-family:var(--font-display);color:var(--brand-deep);background:var(--brand-tint);
  border-radius:5px;padding:2px 7px;font-size:.78rem;letter-spacing:.04em;
}

.legal{margin-top:18px;color:#8792a3;font-size:.79rem;line-height:1.6;max-width:78ch}

/* ---- touch ergonomics: 44px minimum tap targets ---- */
@media(max-width:900px){
  .footer ul{gap:0}
  .footer ul a{display:flex;align-items:center;min-height:44px}
  .footer__contact a{min-height:44px}
  .footer__bottom{align-items:center}
  .footer__bottom nav{gap:6px}
  .footer__bottom nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .qp .fine a{display:inline-block;padding:12px 4px}
  .eyebrow{font-size:.79rem}
  .burger{padding:11px}
  .footer img{padding:4px 0}
}

/* Narrow phones (320px). Long button labels are nowrap by default, which
   forces a min-content width wider than the viewport — let them wrap here,
   and stop grid/flex children refusing to shrink below their content. */
@media(max-width:560px){
  .btn{white-space:normal;text-align:center}
  .split>*,.grid>*,.breakdown>*,.steps>*{min-width:0}
  .modal{padding:12px}
  .addressbar .btn,.infopanel__cta .btn{width:100%}
}

/* ---------- back to top ---------- */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:70;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:54px;height:54px;justify-content:center;
  background:var(--brand);color:#fff;border:0;border-radius:14px;
  box-shadow:0 6px 20px rgba(0,64,79,.28);
  font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.04em;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s, background .15s ease;
}
.totop.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.totop:hover{background:var(--brand-dark)}
.totop:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}
.totop svg{width:19px;height:19px}
@media(max-width:560px){.totop{right:14px;bottom:14px;width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal__scrim{position:absolute;inset:0;background:rgba(0,40,50,.55);backdrop-filter:blur(3px)}
.modal__body{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto}
.modal__body--wide{width:min(760px,100%)}
.modal__close{
  position:absolute;top:14px;right:14px;z-index:2;background:var(--surface);
  border:1px solid var(--border);border-radius:9px;width:36px;height:36px;
  display:grid;place-items:center;cursor:pointer;
}
.modal__close svg{width:17px;height:17px}
.modal .quotepanel{padding-top:34px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1;transform:none}

.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- utilities ----------
   These exist so index.html carries no inline style attributes, which lets
   the CloudFront CSP use style-src 'self' without 'unsafe-inline'. */
.visually-hidden{position:absolute;left:-9999px}
.u-green{color:var(--green-dark)}

/* Cedar Valley Exteriors, our sister company, linked from the popups */
.cve-link{color:#0b64d0;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cve-link:hover{color:#094ea5}
.cve-link:visited{color:#0b64d0}
.u-lede{color:var(--muted);margin:16px 0 24px}
.u-narrow{max-width:860px;margin-inline:auto}
.u-mb-md{margin-bottom:26px}
.u-mb-lg{margin-bottom:30px}
.u-mb-xl{margin-bottom:56px}
.u-mt-lg{margin-top:44px}
.u-mt-xl{margin-top:56px}
.bestfor{
  background:var(--green-tint);color:var(--green-dark);border-radius:9px;
  padding:11px 14px;margin-top:16px;font-size:.9rem;font-weight:600;
}

/* autocomplete panels anchor to these; declared here rather than set from JS */
.addressbar .field,.qp .inp{position:relative}

/* ---------- partner logo (Sunlight Financial) ---------- */
.partner-logo{
  width:auto;height:34px;max-width:100%;
  margin:4px 0 18px;display:block;
}
.partner-logo--sm{height:26px;margin:18px 0 0;opacity:.9}
@media(max-width:560px){
  .partner-logo{height:28px}
  .partner-logo--sm{height:23px}
}

/* ---------- post-submit confirmation ---------- */
.quote-done{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--green-tint);border:1px solid var(--green-light);
  border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm);
}
.quote-done svg{width:24px;height:24px;flex:none;color:var(--green-dark);margin-top:2px}
.quote-done b{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--green-dark);margin-bottom:5px}
.quote-done span{display:block;color:#3f5b1a;font-size:.95rem;line-height:1.55}

/* ---------- mobile/tablet close rail for the detail dialog ----------
   On a long dialog the top-right X scrolls out of reach. This rail is fixed
   to the LEFT viewport edge, vertically centred, so Close stays put however
   far the dialog is scrolled. Desktop keeps the X only. */
.modal__rail{display:none}
@media(max-width:1024px){
  .modal.open .modal__rail{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:6;
    width:42px;padding:20px 0;cursor:pointer;
    background:#f8d7d5;color:#a3231b;border:1px solid #f0bcb8;border-left:0;
    border-radius:0 14px 14px 0;
    box-shadow:3px 0 14px rgba(0,0,0,.16);
  }
  .modal.open .modal__rail svg{width:17px;height:17px;flex:none}
  .modal.open .modal__rail span{
    writing-mode:vertical-rl;text-orientation:mixed;
    font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  }
  .modal.open .modal__rail:active{background:#f3c2be}
  .modal.open .modal__rail:focus-visible{outline:3px solid #a3231b;outline-offset:2px}
  /* keep the rail off the text */
  .modal.open .modal__body{padding-left:34px}
}
@media(max-width:560px){
  .modal.open .modal__rail{width:38px;padding:16px 0}
  .modal.open .modal__body{padding-left:30px}
}

/* ---------- mobile sticky CTA tab ----------
   Small red tab pinned mid-screen; taps through to the hero address field. */
.cta-tab{display:none}
@media(max-width:900px){
  .cta-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:65;
    width:40px;padding:18px 0;cursor:pointer;border:0;
    background:#d63b30;color:#fff;
    border-radius:12px 0 0 12px;
    box-shadow:-3px 0 14px rgba(0,0,0,.22);
    font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.07em;
  }
  .cta-tab span{writing-mode:vertical-rl;text-orientation:mixed}
  .cta-tab svg{width:15px;height:15px;flex:none}
  .cta-tab:active{background:#b93125}
  .cta-tab:focus-visible{outline:3px solid #fff;outline-offset:-4px}
  /* never let it sit on top of the dialog close rail */
  body.modal-open .cta-tab{display:none}
}
@media(prefers-reduced-motion:reduce){.cta-tab{transition:none}}

/* the hero field pulses briefly when a CTA sends you there */
.addressbar.is-target{box-shadow:0 0 0 4px rgba(214,59,48,.35),var(--shadow-lg)}

/* ---------- Roofle ContractorLoan PRO embed ----------
   The widget script inserts <iframe id="loan-calculator-embedded-iframe">
   as its own next sibling, so this container just has to let it breathe. */
.roofle{min-height:0}
.roofle iframe,
#hearth-lead-capture-widget{
  width:100%;border:0;display:block;border-radius:var(--radius);
  min-height:620px;background:var(--surface-alt);
}
.roofle-fallback{
  background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 22px;
}
.roofle-fallback p{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.roofle-fallback strong{color:var(--fg)}

/* ---------- "prefer to talk" panel in the closing CTA band ---------- */
.talk{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-lg);padding:26px 28px;backdrop-filter:blur(4px);
}
.talk__eyebrow{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-light);margin-bottom:8px;
}
.talk__num{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,3vw,1.95rem);color:#fff;letter-spacing:-.01em;
  text-decoration:none!important;line-height:1.1;
}
.talk__num:hover{color:var(--green-light)}
.talk__hours{display:block;color:rgba(255,255,255,.82);font-size:.87rem;margin-top:5px}
.talk__list{
  list-style:none;margin:20px 0 0;padding:20px 0 0;display:grid;gap:10px;
  border-top:1px solid rgba(255,255,255,.22);
}
.talk__list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:rgba(255,255,255,.94)}
.talk__list svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--green-light)}
@media(max-width:900px){.talk{margin-top:28px;text-align:left}}

/* ---------- RoofQuotePRO embed on /quote.html ---------- */
.rqp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);min-height:640px}
.rqp iframe,#roof-quote-pro-embedded-frame{width:100%!important;border:0;display:block;min-height:640px}

/* licence type + issuing authority, under the licence number */
.statecard__sub{display:block;margin-top:2px;font-style:normal;font-size:.8rem;color:var(--muted);line-height:1.4}

/* ---------- InstaRoof visualizer: colour tiles locked until renders finish ----------
   The widget already disables the tiles (and ignores clicks) until every render has
   decoded, then adds .is-ready to .ir-wrap. A disabled tile looks identical to a ready
   one, so dim it and block hover too. Keyed off the widget's own class — if BuildCraft
   renames .ir-wrap / .ir-thumb / .is-ready this silently stops applying (no breakage). */
.ir-wrap:not(.is-ready) .ir-thumb{pointer-events:none;opacity:.55;cursor:progress;filter:saturate(.6)}
.ir-wrap.is-ready .ir-thumb{transition:opacity .25s ease,filter .25s ease,box-shadow .15s,border-color .15s}

/* ---------- quote page layout (quote.html) ----------
   Desktop: the InstaRoof embed turns this .wrap into a 1fr 1fr grid (visualizer
   left, Roofle right). Here we only widen that container and tighten the heading
   so Roofle's first button sits higher on the screen.
   Mobile: the grid switches off and the page stacks in source order. We want
   Roofle first, but MOVING the Roofle block in the DOM would reload its iframe and
   drop the visitor's session — so the order is changed with CSS `order` instead.
   The !important rules override inline styles written by infra/build-quote.py. */
#quote-main.section{padding-top:16px!important;padding-bottom:56px}
#quote-main > .wrap{max-width:1760px;padding-inline:clamp(16px,2.5vw,40px)}
#quote-main .section-head{max-width:none;margin-bottom:14px!important}
#quote-main .section-head .eyebrow{margin-bottom:4px}
#quote-main .section-head h1{font-size:clamp(1.5rem,2.2vw,2rem)}
#quote-main .section-head p{margin-top:4px;font-size:.95rem}

@media(max-width:900px){
  #quote-main > .wrap{display:flex;flex-direction:column;row-gap:16px}
  #quote-main > .wrap > .section-head{order:0;margin-bottom:0!important}
  #quote-main > .wrap > [data-rqp]{order:1}
  #quote-main > .wrap > #instaroof{order:2}
  #quote-main > .wrap > p.muted{order:3;margin-top:0!important}
}
@media(min-width:901px){
  /* Roofle's iframe grows taller as it gets wider (its map scales with width):
     at 1fr/1fr (826px) its button fell below a 1034px-tall screen; at ~600px it
     sits at the fold. So: fixed ~580px Roofle column, visualizer takes the rest.
     Selector must out-rank the embed's own `*:has(> #instaroof[data-ir-layout])`. */
  #quote-main > .wrap:has(> #instaroof[data-ir-layout]){grid-template-columns:minmax(0,1fr) 580px}
  /* the address is already filled in on arrival, so this line is redundant here */
  #quote-main .section-head p{display:none}
}
@media(min-width:901px){
  /* InstaRoof v3: photo left, 96px tile rail right. The photo is square by
     default, so in a ~1072px column it ran ~190px taller than Roofle. Cap its
     height so the visualizer ends about where Roofle does; on narrower screens
     (where the square is already short enough) the min() keeps it square.
     Uses a container query on the widget's scene: 100cqw = scene width. */
  #quote-main .ir-wrap[data-ir-layout=v3] .ir-scene{container-type:inline-size}
  #quote-main .ir-wrap[data-ir-layout=v3] .ir-stage{aspect-ratio:auto;height:min(calc(100cqw - 108px), 770px)} /* match Roofle's height */
}
/* one-line quote heading (quote.html) */
#quote-main .section-head h1{font-size:clamp(1.35rem,2vw,1.9rem)}
@media(min-width:901px){#quote-main .section-head h1{white-space:nowrap}}

/* ---------- header: logo, How It Works, FAQ, phone, Roofs to Close ----------
   Savings / States / Financing / About now live in the footer only. The Minnesota
   logo is much larger than the old one; the Roofs to Close logo sits at the far right
   (placeholder artwork for now) and hides with the phone pill on smaller screens. */
.header__inner{height:96px}
.brand img{height:72px;width:auto}
.nav{gap:36px}
.brand-partner{flex:none;display:flex;align-items:center}
.brand-partner img{height:56px;width:auto;display:block}
.brand-partner{text-decoration:none!important;transition:opacity .15s}
.brand-partner:hover{opacity:.85}
@media(max-width:1060px){
  .header__inner{height:76px}
  .brand img{height:52px}
  .brand-partner{display:none}
}

/* hero badge that wraps onto two lines ("27 years / Roofing in MN") */
.chip--two{align-items:center}
.chip--two > span{line-height:1.15;text-align:left}
/* anchor offset for the taller header (96px desktop / 76px below 1060px) */
html{scroll-padding-top:108px}
@media(max-width:1060px){html{scroll-padding-top:88px}}

/* ---------- home: header sits on the hero photo ----------
   A 10px white strip across the very top, then the header floats over the photo
   (transparent, white nav text) with the logos 25% larger. Once the visitor scrolls
   past it, app.js adds .is-stuck and it becomes a compact white bar pinned to the top,
   so the phone and logos stay reachable. The quote page keeps the plain white header. */
.home{--hdr-h:151px;border-top:10px solid #fff}
.home .header{position:absolute;top:10px;left:0;right:0;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0}
.home .header__inner{height:var(--hdr-h)}
.home .brand img{height:119px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}   /* 72px + 25% */
.home .brand-partner img{height:70px}                                          /* 56px + 25% */
.home .header:not(.is-stuck) .nav a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.home .header:not(.is-stuck) .nav a:hover{color:var(--green-light);border-bottom-color:var(--green-light)}
.home .header:not(.is-stuck) .burger{border-color:rgba(255,255,255,.65);color:#fff;background:rgba(0,0,0,.15)}
.home .hero__inner{padding-top:calc(var(--hdr-h) + clamp(28px,5vw,72px))}

.home .header.is-stuck{position:fixed;top:0;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);animation:rdHdrIn .22s ease-out}
.home .header.is-stuck .header__inner{height:106px}
.home .header.is-stuck .brand img{height:81px;filter:none}
.home .header.is-stuck .brand-partner img{height:50px}
@keyframes rdHdrIn{from{transform:translateY(-100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.home .header.is-stuck{animation:none}}

@media(max-width:1060px){
  .home{--hdr-h:113px}
  .home .brand img{height:86px}                                                /* 52px + 25% */
  .home .header.is-stuck .header__inner{height:92px}
  .home .header.is-stuck .brand img{height:68px}
}

/* ---------- home on tablet + phone (1060px and below) ----------
   The header on the photo shows BOTH logos and the phone number, with no menu
   button; How It Works / FAQ sit under the hero badges instead (.hero__links).
   Tablet: one row (logo, phone, Roof-to-Close). Phone: the two logos side by side,
   then a full-width phone button. The .header__right wrapper is flattened with
   display:contents so its items can be reordered next to the logo. */
.hero__links{display:none}
@media(max-width:1060px){
  .home .header .burger{display:none}
  .home .header__right{display:contents}
  .home .header__inner{flex-wrap:wrap;height:auto;min-height:var(--hdr-h);row-gap:10px;column-gap:14px;padding-block:10px}
  .home .brand{order:1}
  .home .header__right .phone-pill{display:flex;order:2;margin-left:auto;min-height:50px;justify-content:center}
  .home .brand-partner{display:flex;order:3}
  .home .brand-partner img{height:50px}
  .home .hero__links{display:flex;justify-content:center;gap:28px;margin-top:24px}
  .home .hero__links a{font-family:var(--font-display);font-weight:600;color:#fff;text-decoration:none;
    padding:6px 2px;border-bottom:2px solid rgba(255,255,255,.55)}
  .home .hero__links a:hover{color:var(--green-light);border-bottom-color:var(--green-light)}
  .home .header.is-stuck .header__inner{height:auto;min-height:0;padding-block:8px}
}
@media(max-width:600px){
  .home{--hdr-h:179px}
  .home .brand img{height:64px}
  .home .brand-partner{order:2;margin-left:auto}
  .home .brand-partner img{height:44px}
  .home .header__right .phone-pill{order:3;flex-basis:100%;margin:0;align-items:center;text-align:center;min-height:46px;justify-content:center}
  /* scrolled on a phone: one slim row, Minnesota logo + phone */
  .home .header.is-stuck .brand-partner{display:none}
  .home .header.is-stuck .brand img{height:51px}
  .home .header.is-stuck .header__right .phone-pill{order:2;flex-basis:auto;margin-left:auto}
}

/* ---------- home header: wider, bigger logos ----------
   Desktop: the header spans the page with 10% side padding instead of the 1180px
   column, and the logos scale with the screen (about 115px / 90px tall at 1920px,
   shrinking on smaller laptops so nothing collides). Phones keep the normal edge
   gutter; both logos are just a little larger to fill the row. */
@media(min-width:1061px){
  .home{--hdr-h:clamp(126px, calc(7.9vw + 32px), 187px)}
  .home .header .wrap{max-width:none;padding-inline:10vw}
  .home .brand img{height:clamp(95px, 7.9vw, 156px)}
  .home .brand-partner img{height:clamp(56px, 4.7vw, 92px)}
  .home .header .phone-pill{min-height:clamp(56px, 4.7vw, 92px);justify-content:center}
  .home .nav{gap:clamp(26px, 2.4vw, 48px)}
  .home .nav a{font-size:clamp(.95rem, .9vw, 1.15rem)}
}
@media(max-width:600px){
  /* Both logos share the top row on a portrait phone. At 375px the fixed
     heights wanted 396px of width against 339px available, so Roof-to-Close
     dropped to its own line; scaling with the viewport keeps them together
     down to 320px. */
  .home .brand img{height:clamp(44px,14.4vw,66px)}
  .home .brand-partner img{height:clamp(31px,10.1vw,46px)}
}
/* more breathing room between How It Works and FAQ */
@media(min-width:1061px){ .home .nav{gap:clamp(40px, 3.6vw, 72px);justify-content:space-evenly} }
@media(max-width:1060px){ .home .hero__links{gap:44px} }
/* How RoofsDirect works: less space above it (was 64-104px, the standard section padding) */
#how.section{padding-top:clamp(36px, 3vw, 56px)}

/* ---------- phone button: compact "Call" version ----------
   The full button shows the number + hours; .pp-call is a short icon + "Call" used
   in the scrolled bar on phones, where it sits between the two logos. */
.phone-pill .pp-num{font-weight:700}
.phone-pill .pp-call{display:none;align-items:center;gap:6px;font-weight:700}
.phone-pill .pp-call svg{width:16px;height:16px;flex:none}
@media(max-width:600px){
  /* scrolled on a phone: Minnesota logo | Call | Roof-to-Close, one row */
  .home .header.is-stuck .header__inner{flex-wrap:nowrap;justify-content:space-between;column-gap:10px}
  .home .header.is-stuck .brand img{height:47px}
  .home .header.is-stuck .brand-partner{display:flex;order:3;margin-left:0}
  .home .header.is-stuck .brand-partner img{height:32px}
  .home .header.is-stuck .header__right .phone-pill{order:2;flex-basis:auto;margin:0 auto;
    flex-direction:row;align-items:center;padding:.6em 1em}
  .home .header.is-stuck .phone-pill .pp-num,
  .home .header.is-stuck .phone-pill > span{display:none}
  .home .header.is-stuck .phone-pill .pp-call{display:inline-flex}
}

/* ---------- scrolled header: the hero photo instead of white ----------
   Same photo and dark tint as the hero, so the logos and white links read the same
   way they do at the top of the page. app.js pans it (--hdr-py, 25% -> 75%) as the
   visitor scrolls: a parallax strip the height of the bar. */
.home .header.is-stuck{
  background-color:var(--brand-deep);
  /* same recipe as the hero: deep teal, the photo showing through faintly, and the
     soft cyan glow from the top, so the bar reads as the same blue */
  background-image:radial-gradient(120% 220% at 50% 0%, rgba(0,171,202,.34), transparent 65%),
    linear-gradient(rgba(0,64,79,.80),rgba(0,64,79,.80)),url(home.webp);
  background-size:cover;background-repeat:no-repeat;
  background-position:center var(--hdr-py,40%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.home .header.is-stuck .brand img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.home .header.is-stuck .nav a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.home .header.is-stuck .nav a:hover{color:var(--green-light);border-bottom-color:var(--green-light)}
/* red "Get roof price" tab: a little higher on the right edge (was centred at 50%) */
@media(max-width:900px){ .cta-tab{top:38%} }
/* home: the red tab stays hidden until the hero address box has scrolled off screen
   (body.show-cta, set in app.js), then slides in from the right edge */
@media(max-width:900px){
  .home .cta-tab{opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(100%,-50%);transition:transform .25s ease,opacity .25s ease,visibility 0s .25s}
  .home.show-cta .cta-tab{opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(-50%);transition:transform .25s ease,opacity .25s ease,visibility 0s}
}

/* ---------- contact popup (address confirmed -> who are you?) ---------- */
.qp__title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;margin:0 0 4px}
.qp__addr{margin:0 0 16px;color:var(--brand-dark);font-weight:600}
.qp__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qp__field{display:grid;gap:5px;margin-bottom:12px}
.qp__field label{font-size:.85rem;font-weight:600;color:var(--fg)}
.qp__field input{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid var(--border);
  border-radius:10px;font:inherit;font-size:1rem;background:#fff}
.qp__field input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.qp__privacy{margin:4px 0 14px;padding:11px 13px;background:var(--green-tint);border:1px solid var(--green-light);
  border-radius:10px;font-size:.86rem;line-height:1.5;color:#2c3a12}
.qp__err{margin:0 0 12px;padding:10px 12px;background:#f8d7d5;border:1px solid #f0bcb8;border-radius:10px;
  color:#a3231b;font-size:.9rem}
.qp__go{width:100%;justify-content:center}
@media(max-width:520px){.qp__row{grid-template-columns:1fr}}

/* ---------- quote page: Artemis roof previews + price ---------- */
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.qviz{min-width:0}
.qhero{position:relative;aspect-ratio:984/642;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-alt);border:1px solid var(--border)}
.qhero img,.qhero svg{width:100%;height:100%;object-fit:cover;display:block}
.qhero__empty{display:grid;place-items:center;height:100%;color:var(--muted);font-size:.95rem;padding:20px;text-align:center}
.qhero__tag{position:absolute;left:12px;top:12px;background:rgba(0,43,54,.78);color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:6px 10px;border-radius:8px}
.qhero svg .sec,.qthumb svg .sec{fill:rgba(0,171,202,.22);stroke:var(--brand);vector-effect:non-scaling-stroke}

.qthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}
.qthumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:12px;
  overflow:hidden;background:var(--surface-alt);cursor:pointer;font:inherit;color:inherit;text-align:left}
.qthumb img,.qthumb svg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.qthumb span{display:block;padding:7px 9px;font-size:.78rem;font-weight:600;background:var(--surface);
  border-top:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qthumb.selected{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.qthumb.pending{cursor:default}
.qthumb .ph{display:grid;place-items:center;aspect-ratio:1/1;color:var(--muted);font-size:.78rem}

.qcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-sm);position:sticky;top:96px}
.qcard__status{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--brand-tint);
  color:var(--brand-dark);font-size:.88rem}
.qcard__status.is-error{background:#f8d7d5;border:1px solid #f0bcb8;color:#a3231b}
.qstat{padding:14px 0;border-bottom:1px solid var(--border)}
.qstat span{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.qstat b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:800;line-height:1.1;margin-top:3px}
.qstat small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.qstat--price b{color:var(--brand-dark);font-size:2.3rem}
.qcard__cta{width:100%;justify-content:center;margin-top:18px}
.qcard__fine{margin:12px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}

@media(max-width:900px){
  .qgrid{grid-template-columns:1fr}
  .qcard{position:static;order:1}
  .qviz{order:2}
}

/* ---------- indeterminate progress bar (ported from the Artemis prototype) ---------- */
.loadbar{position:relative;height:6px;margin:14px 0 4px;border-radius:99px;background:var(--surface-alt);overflow:hidden}
.loadbar[hidden]{display:none}
.loadbar span{position:absolute;top:0;bottom:0;width:30%;border-radius:99px;background:var(--brand);
  animation:sweep 1.4s ease-in-out infinite alternate}
@keyframes sweep{from{left:0}to{left:70%}}
@media(prefers-reduced-motion:reduce){.loadbar span{animation-duration:3s}}

/* bigger, friendlier popup fields */
.qp__field label{font-size:.9rem}
.qp__field input{padding:15px 16px;font-size:1.05rem;border-radius:12px;border-width:1.5px}
.qp__field input::placeholder{color:#9aa6b8}
.qp__field input:hover{border-color:var(--brand-light)}
.qp__row{gap:14px}
.qp__field{margin-bottom:15px}
.qp__wait{margin:10px 0 0;text-align:center;color:var(--brand-dark);font-weight:600;font-size:.95rem}

/* ---------- quote page: click a building to leave it out ---------- */
.qhero svg .sec{cursor:pointer;transition:fill .15s,opacity .15s}
.qhero svg .sec.on:hover{fill:rgba(0,171,202,.38)}
.qhero svg .sec.off{fill:rgba(255,255,255,.06);stroke:#fff;opacity:.85}
.qthumb svg .sec.off{fill:rgba(255,255,255,.06);stroke:#fff}
.qviz__hint{margin:12px 0 0;font-size:.9rem;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qviz__reset{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--brand-dark);
  text-decoration:underline;cursor:pointer}
.qcard__removed{margin:10px 0 0;padding:8px 10px;background:#fff8e8;border:1px solid #f0dfb4;border-radius:9px;
  font-size:.82rem;color:#8a5a00}