:root{
  /* Brand identity (kept) */
  --red:#D20B1E;
  --red-dark:#A80816;
  --blue:#1E3A8A;
  --blue-dark:#15296b;
  --blue-soft:#E8EEFB;
  --green:#1D3D2E;
  --green-dark:#142A20;
  --green-mid:#2C5A45;
  --green-soft:#E8F0EA;
  --green-accent:#3E7558;

  /* Surfaces - Eco Home Energy palette */
  --cream:#FAF6EE;   /* warm cream, no green tint */
  --cream-dark:#F4EEDF;
  --paper:#FFFDF8;
  --ink:#1A2520;
  --ink-soft:#3D4A43;
  --muted:#617167;
  --line:#E2DCCF;
  --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;}

/* PAGE SYSTEM */
.page{display:none;animation:fadeIn 0.3s ease both;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ANNOUNCEMENT BAR */
.announce{
  background:var(--green);color:#fff;
  padding:9px 24px;text-align:center;
  font-size:13px;font-weight:500;letter-spacing:0.2px;
}
.announce span{opacity:0.9;}
.announce-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#A7D7B5;margin:0 14px;vertical-align:middle;}

/* NAV */
nav{
  position:sticky;top:0;z-index:200;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:0 24px;
}
.nav-inner{
  max-width:min(1680px, 94vw);margin:0 auto;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-left{display:flex;align-items:center;gap:14px;}
.hub-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:100px;
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--muted);background:transparent;border:1px solid transparent;
  cursor:pointer;transition:all 0.15s;
  letter-spacing:0.2px;
  white-space:nowrap;
}
.hub-back:hover{
  color:var(--ink);
  background:var(--cream);
  border-color:var(--line);
}
.hub-back svg{flex-shrink:0;transition:transform 0.18s;}
.hub-back:hover svg{transform:translateX(-2px);}
.hub-divider{
  width:1px;height:24px;background:var(--line);
}
.nav-logo{cursor:pointer;display:flex;align-items:center;gap:12px;}
.nav-logo img{height:38px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-link{
  padding:9px 14px;border-radius:8px;
  font-size:14px;font-weight:500;
  /* Written for <button>, which is why nothing turned the underline off. The
     hub's nav uses <a>, and an anchor underlines by default. */
  text-decoration:none;
  cursor:pointer;border:none;background:transparent;color:var(--ink-soft);
  transition:all 0.15s;
}
.nav-link:hover{background:rgba(0,0,0,0.04);color:var(--ink);}
.nav-link.act-b{color:var(--blue);font-weight:600;}
.nav-link.act-g{color:var(--green);font-weight:600;}
.nav-right{display:flex;align-items:center;gap:10px;}

/* ─── RESPONSIVE NAV ─── */
@media (max-width: 720px){
  nav{padding:0 14px;}
  .nav-inner{height:64px;}
  .nav-logo{gap:8px !important;}
  .nav-logo img{height:32px;}
  /* divider between dual logos */
  .nav-logo > a > div, .nav-logo > div[style*="background:var(--line)"]{
    height:22px !important;
  }
  /* drop the lowest-priority pill */
  .nav-right .btn-ghost{display:none;}
  .nav-right{gap:6px;}
  .nav-right .btn-sm{padding:8px 14px;font-size:13px;}
}
@media (max-width: 560px){
  /* hide nav phone button — the announce bar above the nav has the same number */
  .nav-right .btn-green{display:none;}
}
@media (max-width: 420px){
  .nav-logo img{height:28px;}
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:100px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
  cursor:pointer;border:1.5px solid transparent;transition:all 0.18s;
  text-decoration:none;white-space:nowrap;
}
.btn-green{background:var(--green);color:#fff;border-color:var(--green);}
.btn-green:hover{background:var(--green-dark);}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-blue:hover{background:var(--blue-dark);}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-red:hover{background:var(--red-dark);}
.btn-cream{background:var(--cream);color:var(--ink);border-color:var(--line);}
.btn-cream:hover{background:var(--cream-dark);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{background:var(--cream);}
.btn-outline-g{background:#fff;color:var(--green);border-color:var(--green);}
.btn-outline-g:hover{background:var(--green-soft);}
.btn-outline-b{background:#fff;color:var(--blue);border-color:var(--blue);}
.btn-outline-b:hover{background:var(--blue-soft);}
.btn svg{transition:transform 0.18s;}
.btn:hover svg{transform:translateX(3px);}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-lg{padding:17px 32px;font-size:16px;font-weight:700;}

/* HERO */
.hero{
  padding:48px 24px 56px;
  position:relative;
  overflow:hidden;
}
.hero-bg-green{background:var(--green);color:#fff;}
.hero-bg-blue{background:var(--blue);color:#fff;}
.hero-bg-cream{background:var(--cream);color:var(--ink);}
.hero-inner{max-width:min(1680px, 94vw);margin:0 auto;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;}
.hero-grid-center{grid-template-columns:1fr;text-align:center;max-width:1680px;margin:0 auto;}

/* HERO STACKED (landing): full-width title on top, two cols below */
.hero-stacked{padding:72px 24px 56px;}
.hero-stacked .hero-inner{max-width:min(1680px, 94vw);}
.hero-top{margin-bottom:48px;max-width:1680px;}
.hero-top h1{margin-bottom:0;}
.hero-bottom{
  display:grid;grid-template-columns:1fr 1.5fr;
  gap:32px;align-items:start;
}
.hero-bottom-text .lead{margin-top:4px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;
  background:rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.9);
  margin-bottom:22px;
}
.hero-bg-cream .eyebrow{background:rgba(29,61,46,0.08);color:var(--green);}
.eyebrow-blue{background:rgba(255,255,255,0.14);color:rgba(255,255,255,0.9);}
.hero h1{
  font-size:clamp(44px,7.2vw,96px);
  font-weight:800;letter-spacing:-2.4px;line-height:1.0;
  margin-bottom:22px;
}
.hero h1 em{font-style:normal;color:rgba(255,255,255,0.7);font-weight:600;}
.hero-bg-cream h1 em{color:#9CA89E;font-weight:800;}
.hero p.lead{
  font-size:19px;line-height:1.55;
  margin-bottom:30px;opacity:0.85;max-width:560px;
}
.hero-grid-center .lead{margin-left:auto;margin-right:auto;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.hero-grid-center .hero-cta{justify-content:center;}

/* HERO MASCOT/IMAGE SLOT */



/* Unmute button overlay on hero video */
.hero-unmute{
  position:absolute;
  bottom:18px; right:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:rgba(29,61,46,0.92);
  color:#fff;
  border:none; border-radius:100px;
  font-size:13px; font-weight:600; font-family:inherit;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:all 0.18s ease;
  z-index:5;
  pointer-events:auto;   /* parent .hero-visual sets none; restore here so the button is clickable */
}
.hero-unmute:hover{
  background:rgba(29,61,46,1);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,0.22);
}
.hero-unmute.is-unmuted{
  background:rgba(255,255,255,0.92);
  color:var(--green);
}
.hero-unmute.is-unmuted:hover{
  background:#fff;
}
.hero-unmute svg{flex-shrink:0;}
@media (max-width: 720px){
  .hero-unmute{padding:9px 13px;font-size:12px;bottom:10px;right:10px;}
  .hero-unmute .hu-text{display:none;}
}
.hero-side-card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:18px;padding:28px;
  backdrop-filter:blur(8px);
  color:#fff;
}
.hero-side-card .label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;opacity:0.7;margin-bottom:8px;font-weight:600;}
.hero-side-card .phone-num{font-size:30px;font-weight:800;margin-bottom:6px;letter-spacing:-0.5px;}
.hero-side-card .hours{font-size:13.5px;opacity:0.7;margin-bottom:18px;}
.hero-side-card .email{font-size:13px;opacity:0.85;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.1);}
.hero-side-card .email a{color:#fff;text-decoration:none;font-weight:500;}

/* HERO BOTTOM ROW (icons strip) */
.hero-trust{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin-top:34px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,0.12);
}
.hero-bg-cream .hero-trust{border-color:var(--line);}
.hero-trust-item{display:flex;align-items:center;gap:10px;font-size:15.5px;opacity:0.9;}
.hero-trust-item svg{flex-shrink:0;}
@media (max-width: 600px){
  .hero-trust{grid-template-columns:1fr;}
}

/* SECTIONS */
.sec{padding:80px 24px;}
.sec-cream{background:var(--cream);}
.sec-paper{background:var(--paper);}
.sec-green{background:var(--green);color:#fff;}
.sec-inner{max-width:min(1680px, 94vw);margin:0 auto;}
.sec-inner-narrow{max-width:780px;margin:0 auto;}
.sec-head{margin-bottom:48px;}
.sec-head-center{text-align:center;}
.sec-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}
.sec-green .sec-eyebrow{color:#A7D7B5;}
.sec-title{
  font-size:clamp(32px,4vw,46px);font-weight:800;letter-spacing:-1.2px;line-height:1.1;
  max-width:680px;margin-bottom:14px;
}
.sec-head-center .sec-title{margin-left:auto;margin-right:auto;}
.sec-sub{
  font-size:16.5px;color:var(--muted);line-height:1.65;max-width:620px;
}
.sec-head-center .sec-sub{margin-left:auto;margin-right:auto;}
.sec-green .sec-sub{color:rgba(255,255,255,0.75);}

/* CARDS */
.card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:32px 28px;transition:all 0.2s;
}
.card-cream{background:var(--cream);border-color:var(--cream-dark);}
.card-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.card-icon-b{background:var(--blue-soft);}
.card-icon svg{width:24px;height:24px;}
.card h3{
  font-size:19px;font-weight:700;letter-spacing:-0.4px;margin-bottom:10px;
}
.card p{font-size:14.5px;color:var(--muted);line-height:1.65;}
.card .price-tag{
  margin-top:14px;font-size:15px;font-weight:700;color:var(--green);
}

/* CARD STACK (vertical list — Eco Home Energy style) */
.card-stack{display:flex;flex-direction:column;gap:14px;max-width:680px;margin:0 auto;}

/* CARD GRID 2/3-col */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}

/* PRICE / PLAN CARDS */
.plan{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:32px 26px;display:flex;flex-direction:column;
  transition:transform 0.2s,box-shadow 0.2s;
}
.plan:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(29,61,46,0.08);}
.plan.featured{background:var(--green);color:#fff;border-color:var(--green);}
.plan.featured-blue{background:var(--blue);color:#fff;border-color:var(--blue);}
.plan-tag{
  display:inline-block;padding:5px 12px;border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--green-soft);color:var(--green);
  margin-bottom:18px;width:fit-content;
}
.plan.featured .plan-tag,.plan.featured-blue .plan-tag{background:rgba(255,255,255,0.2);color:#fff;}
.plan-tag-b{background:var(--blue-soft);color:var(--blue);}
.plan-name{font-size:24px;font-weight:800;letter-spacing:-0.7px;margin-bottom:8px;}
.plan-tagline{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:22px;min-height:44px;}
.plan.featured .plan-tagline,.plan.featured-blue .plan-tagline{color:rgba(255,255,255,0.8);}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:4px;}
.plan-price .num{font-size:48px;font-weight:800;letter-spacing:-2px;line-height:1;}
.plan-price .per{font-size:15px;color:var(--muted);font-weight:500;}
.plan.featured .plan-price .per,.plan.featured-blue .plan-price .per{color:rgba(255,255,255,0.7);}
.plan-was{font-size:13px;color:var(--muted);margin-bottom:24px;min-height:20px;}
.plan.featured .plan-was,.plan.featured-blue .plan-was{color:rgba(255,255,255,0.7);}
.plan-was strike{text-decoration:line-through;}
.plan-features{list-style:none;margin:0 0 26px;flex:1;}
.plan-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.5;padding:8px 0;
  border-bottom:1px solid var(--line);
}
.plan.featured .plan-features li,.plan.featured-blue .plan-features li{border-color:rgba(255,255,255,0.12);}
.plan-features li:last-child{border-bottom:none;}
.plan-tick{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;margin-top:1px;
}
.plan-tick-b{background:var(--blue-soft);color:var(--blue);}
.plan.featured .plan-tick,.plan.featured-blue .plan-tick{background:rgba(255,255,255,0.2);color:#fff;}
.plan-btn{
  width:100%;padding:13px;border-radius:100px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
  cursor:pointer;border:1.5px solid;transition:all 0.18s;text-align:center;
}
.plan-btn-g{background:var(--green);color:#fff;border-color:var(--green);}
.plan-btn-g:hover{background:var(--green-dark);}
.plan-btn-g-out{background:#fff;color:var(--green);border-color:var(--green);}
.plan-btn-g-out:hover{background:var(--green-soft);}
.plan-btn-b{background:var(--blue);color:#fff;border-color:var(--blue);}
.plan-btn-b:hover{background:var(--blue-dark);}
.plan-btn-b-out{background:#fff;color:var(--blue);border-color:var(--blue);}
.plan-btn-b-out:hover{background:var(--blue-soft);}
.plan.featured .plan-btn,.plan.featured-blue .plan-btn{background:#fff;color:var(--green);border-color:#fff;}
.plan.featured-blue .plan-btn{color:var(--blue);}
.plan.featured .plan-btn:hover,.plan.featured-blue .plan-btn:hover{background:var(--cream);}

/* STEPS (How it works) */
.steps{display:flex;flex-direction:column;gap:14px;max-width:1680px;margin:0 auto;}
.step{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:24px 28px;
  display:flex;align-items:flex-start;gap:20px;
}
.step-num{
  width:36px;height:36px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex-shrink:0;
}
.step-content h4{font-size:17px;font-weight:700;letter-spacing:-0.3px;margin-bottom:6px;}
.step-content p{font-size:14.5px;color:var(--muted);line-height:1.6;}
/* Wide displays only: lay the steps side by side instead of a stacked list.
   Below 1024px (phones, tablets, normal laptops) it stays the single-column
   stacked list exactly as before — these are min-width rules so nothing
   changes on non-wide screens or other devices. */
@media(min-width:1024px){
  .steps{
    display:grid;
    grid-template-columns:1fr 1fr;   /* 2 × 2 */
    gap:16px;
    max-width:1680px;
    align-items:stretch;
  }
}
@media(min-width:1280px){
  .steps{
    grid-template-columns:repeat(4,1fr);   /* full row of four */
    max-width:1680px;
  }
  /* Stack the number above the text so the narrower four-up cards breathe */
  .step{flex-direction:column;gap:14px;}
}

/* COMBINED BANNER */
.combined-cta{
  background:var(--green);color:#fff;
  border-radius:24px;padding:48px 44px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;
  margin-top:40px;
}
.combined-cta .eyebrow{background:rgba(255,255,255,0.12);}
.combined-cta h3{font-size:32px;font-weight:800;letter-spacing:-0.9px;line-height:1.15;margin-bottom:12px;}
.combined-cta p{font-size:15px;line-height:1.6;opacity:0.85;margin-bottom:22px;}
.combined-cta .price-stack{text-align:center;border-left:1px solid rgba(255,255,255,0.18);padding-left:36px;}
.combined-cta .price-stack .num{font-size:62px;font-weight:800;letter-spacing:-2.5px;line-height:1;}
.combined-cta .price-stack .per{font-size:18px;opacity:0.7;}
.combined-cta .price-stack .was{font-size:13px;opacity:0.7;margin-top:6px;}
.combined-cta .price-stack .was strike{text-decoration:line-through;}
.combined-features{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;
  margin:18px 0 26px;padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.combined-feature-head{
  font-size:13px;font-weight:700;
  margin-bottom:10px;opacity:0.95;
  letter-spacing:0.2px;
}
.combined-feature-list{
  list-style:none;padding:0;margin:0;
  font-size:13.5px;line-height:1.55;
  opacity:0.88;
}
.combined-feature-list li{
  padding-left:18px;position:relative;margin-bottom:5px;
}
.combined-feature-list li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:rgba(255,255,255,0.85);font-weight:700;
}
@media (max-width: 720px){
  .combined-features{grid-template-columns:1fr;gap:18px;}
}

/* SPLIT BUTTONS (landing) */
.choose-row{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  max-width:1680px;margin:0 auto;padding:0 24px 60px;
}

.choose-btn{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:48px 40px;cursor:pointer;
  transition:all 0.25s;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:340px;text-align:left;
  text-decoration:none;color:var(--ink);
}
.choose-btn,
.choose-btn *{text-decoration:none;}
.choose-btn:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,0.08);}
.choose-btn.bg-blue:hover{border-color:var(--blue);}
.choose-btn.bg-green:hover{border-color:var(--green);}
.choose-eyebrow{
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  padding:5px 12px;border-radius:100px;width:fit-content;margin-bottom:18px;
}
.bg-blue .choose-eyebrow{background:var(--blue-soft);color:var(--blue);}
.bg-green .choose-eyebrow{background:var(--green-soft);color:var(--green);}
.choose-btn h2{
  font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1.05;
  margin-bottom:14px;color:var(--ink);
}
.choose-btn p{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:22px;}
.choose-btn .visit{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:14.5px;
}
.bg-blue .visit{color:var(--blue);}
.bg-green .visit{color:var(--green);}
.choose-btn:hover .visit svg{transform:translateX(5px);}
.choose-btn .visit svg{transition:transform 0.2s;}

/* REVIEW SECTION (Trustpilot style) */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.review{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;
}
.review-stars{color:#00B67A;font-size:18px;margin-bottom:14px;letter-spacing:2px;}
.review p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-bottom:18px;font-style:italic;}
.review .reviewer{font-size:13px;font-weight:600;color:var(--ink);}
.review .reviewer span{color:var(--muted);font-weight:400;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:8px;max-width:780px;margin:0 auto;}
.faq{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.faq-q{
  padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  font-weight:600;font-size:15.5px;user-select:none;transition:background 0.15s;gap:14px;
}
.faq-q:hover{background:var(--cream);}
.faq-chev{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;transition:transform 0.25s;
}
.faq.open .faq-chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.3s,padding 0.3s;font-size:14.5px;color:var(--muted);line-height:1.7;padding:0 24px;}
.faq.open .faq-a{max-height:400px;padding:0 24px 22px;}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:flex-start;}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 32px;
}
.form-card h3{font-size:22px;font-weight:800;letter-spacing:-0.6px;margin-bottom:6px;}
.form-card .form-intro{font-size:14.5px;color:var(--muted);margin-bottom:26px;}
.form-group{margin-bottom:18px;}
.form-group label{
  display:block;font-size:12px;font-weight:600;color:var(--ink-soft);
  margin-bottom:7px;letter-spacing:0.3px;
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;background:var(--cream);border:1.5px solid transparent;border-radius:10px;
  padding:12px 16px;color:var(--ink);font-family:inherit;font-size:14.5px;
  outline:none;transition:all 0.18s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  background:#fff;border-color:var(--green);
}
.form-group select{cursor:pointer;}
.form-group textarea{resize:vertical;min-height:110px;}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.submit-btn{
  width:100%;padding:14px;border-radius:100px;
  font-family:inherit;font-weight:600;font-size:15px;
  cursor:pointer;border:none;transition:all 0.18s;color:#fff;
  margin-top:6px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}

.contact-card-stack{display:flex;flex-direction:column;gap:14px;}
.contact-block{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;
  display:flex;align-items:flex-start;gap:16px;
}
.contact-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-icon svg{width:22px;height:22px;}
.contact-icon-b{background:var(--blue-soft);color:var(--blue);}
.contact-icon-r{background:#FEE7E9;color:var(--red);}
.contact-block h5{font-size:15px;font-weight:700;margin-bottom:4px;}
.contact-block p{font-size:13.5px;color:var(--muted);line-height:1.6;}
.contact-block a{color:var(--ink);text-decoration:none;font-weight:500;}
.contact-block a:hover{text-decoration:underline;}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.live-dot{width:7px;height:7px;border-radius:50%;background:#7CFC00;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* PORTAL */
.portal-bg{min-height:calc(100vh - 68px);background:var(--cream);padding:48px 24px;}
.login-card{
  max-width:440px;margin:60px auto;
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:48px 40px;
  box-shadow:0 24px 48px rgba(29,61,46,0.06);
}
.login-logo{text-align:center;margin-bottom:32px;}
.login-logo .brand{font-size:24px;font-weight:800;letter-spacing:-0.5px;}
.login-logo .sub{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:8px;}
.login-card h2{font-size:26px;font-weight:800;letter-spacing:-0.7px;text-align:center;margin-bottom:6px;}
.login-card .login-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:30px;}
.login-meta{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px;}
.login-meta a{color:var(--green);font-weight:600;text-decoration:none;cursor:pointer;}
.login-divider{text-align:center;font-size:12px;color:var(--muted);margin:20px 0;position:relative;letter-spacing:1px;}
.login-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);z-index:0;}
.login-divider span{background:#fff;padding:0 14px;position:relative;z-index:1;}

.portal-container{max-width:min(1680px, 94vw);margin:0 auto;}
.portal-header{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:28px 32px;margin-bottom:24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.portal-user{display:flex;align-items:center;gap:16px;}
.portal-avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;
}
.portal-user h3{font-size:20px;font-weight:800;letter-spacing:-0.5px;}
.portal-user p{font-size:13.5px;color:var(--muted);margin-top:2px;}

.portal-tabs{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:5px;margin-bottom:24px;display:flex;flex-wrap:wrap;gap:3px;
}
.portal-tab{
  padding:11px 18px;border-radius:10px;background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-weight:500;font-size:13.5px;color:var(--muted);
  transition:all 0.15s;flex:1;min-width:130px;text-align:center;
}
.portal-tab:hover{background:var(--cream);color:var(--ink);}
.portal-tab.active{background:var(--navy);color:#fff;font-weight:600;}
.portal-pane{display:none;animation:fadeIn 0.3s ease both;}
.portal-pane.active{display:block;}

.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;}
.portal-card h4{font-size:16px;font-weight:700;letter-spacing:-0.2px;margin-bottom:18px;display:flex;align-items:center;gap:9px;}

.plan-mini{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-bottom:14px;
  border-left:4px solid var(--blue);
}
.plan-mini.green-bar{border-left-color:var(--green);}
.plan-mini--roof{border-left-color:var(--brand-red, var(--red));}
.plan-mini--renewable{border-left-color:var(--green);}
.plan-mini-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.plan-mini-name{font-size:18px;font-weight:800;letter-spacing:-0.4px;display:flex;align-items:center;gap:9px;}
.plan-mini-brand{width:20px;height:20px;border-radius:6px;object-fit:contain;flex-shrink:0;}
.plan-mini-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
.plan-mini-status{padding:4px 12px;border-radius:100px;background:#D9F0DD;color:#1A6B2E;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;}
.plan-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:14px;border-top:1px solid var(--line);}
.plan-mini-grid .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}
.plan-mini-grid .val{font-size:16px;font-weight:700;margin-top:3px;letter-spacing:-0.3px;}

.list-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:var(--cream);border-radius:12px;margin-bottom:8px;
}
.list-item-info h5{font-size:14px;font-weight:700;letter-spacing:-0.2px;}
.list-item-info p{font-size:12.5px;color:var(--muted);margin-top:3px;}
.list-item .right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.tag-status{padding:4px 12px;border-radius:100px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.tag-progress{background:#DBEAFE;color:#1E3A8A;}
.tag-open{background:#FEF3C7;color:#92400E;}
.tag-resolved{background:#D9F0DD;color:#1A6B2E;}
.issue-status-open{background:#FEF3C7;color:#92400E;}
.issue-status-closed{background:#D9F0DD;color:#1A6B2E;}

.appt-date{
  width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;
}
.appt-date .month{font-size:10px;font-weight:700;color:var(--red);letter-spacing:1px;text-transform:uppercase;}
.appt-date .day{font-size:22px;font-weight:800;line-height:1;letter-spacing:-0.5px;}

.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);gap:14px;}
.toggle-row:last-child{border-bottom:none;}
.toggle-row h5{font-size:14.5px;font-weight:700;}
.toggle-row p{font-size:13px;color:var(--muted);margin-top:2px;}
.toggle{position:relative;width:46px;height:26px;background:var(--line);border-radius:100px;cursor:pointer;transition:background 0.2s;flex-shrink:0;}
.toggle.on{background:var(--green);}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
.toggle.on::after{transform:translateX(20px);}

.upgrade-cta{
  background:var(--green);color:#fff;border-radius:18px;padding:24px 26px;margin-top:14px;
}
.upgrade-cta h5{font-size:16px;font-weight:800;letter-spacing:-0.3px;margin-bottom:6px;}
.upgrade-cta p{font-size:13.5px;opacity:0.85;line-height:1.55;margin-bottom:14px;}

/* FOOTER */
footer{background:var(--green);color:rgba(255,255,255,0.85);padding:64px 24px 32px;}
.footer-grid{max-width:min(1680px, 94vw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-bottom:40px;}
.footer-brand img{height:42px;margin-bottom:18px;background:#fff;border-radius:8px;padding:4px 8px;}
.footer-brand p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,0.6);}
.footer-col h4{font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;color:rgba(255,255,255,0.5);}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,0.75);text-decoration:none;cursor:pointer;transition:color 0.15s;}
.footer-col ul li a:hover{color:#fff;}
.footer-bottom{
  max-width:min(1680px, 94vw);margin:0 auto;padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-size:12.5px;color:rgba(255,255,255,0.5);
}
.footer-bottom a{color:rgba(255,255,255,0.5);text-decoration:none;cursor:pointer;}
.footer-bottom a:hover{color:#fff;}

/* RESPONSIVE */
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-inner{height:64px;padding:0;}
  nav{padding:0 16px;}
  .hero{padding:36px 20px 40px;}
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  /* Hero-stacked on mobile: flatten so lead → video → CTAs → trust */
  .hero-stacked{padding:36px 20px 24px;}
  .hero-top{margin-bottom:24px;}
  .hero-bottom{
    display:flex; flex-direction:column; gap:20px;
  }
  /* Flatten the text container so its children join hero-visual as siblings */
  .hero-bottom-text{display:contents;}
  /* Now we can reorder freely */
  .hero-bottom .lead{order:1; margin-bottom:0;}
  .hero-visual{order:2; padding:0;}
  .hero-bottom .hero-cta{order:3;}
  .hero-bottom .hero-trust{order:4;}
  /* Make CTAs full-width on mobile for thumb-friendly tap targets */
  .hero-bottom .hero-cta{flex-direction:column; align-items:stretch; gap:10px;}
  .hero-bottom .hero-cta .btn{justify-content:center; width:100%;}
  .hero h1{font-size:clamp(32px,7vw,46px);}
  .hero-side-card{padding:24px;}
  .hero-side-card .phone-num{font-size:26px;}
  .sec{padding:56px 20px;}
  .sec-head{margin-bottom:32px;}
  .sec-title{font-size:clamp(28px,5.5vw,38px);}
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .combined-cta{grid-template-columns:1fr;text-align:center;padding:32px 24px;}
  .combined-cta h3{font-size:24px;}
  .combined-cta .price-stack{border-left:none;border-top:1px solid rgba(255,255,255,0.18);padding-left:0;padding-top:24px;}
  .choose-row{grid-template-columns:1fr;padding:0 20px 40px;}
  .choose-btn{min-height:auto;padding:36px 28px;}
  .choose-btn h2{font-size:30px;}
  .reviews-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;gap:28px;}
  .form-2col{grid-template-columns:1fr;}
  .portal-grid{grid-template-columns:1fr;}
  .plan-mini-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  footer{padding:48px 20px 28px;}
  .portal-bg{padding:28px 16px;}
  .login-card{padding:36px 26px;}
  /* Nav buttons shrink */
  .nav-right .btn-sm{padding:8px 12px;font-size:12.5px;}
}
@media(max-width:560px){
  .chatbot-window{width:calc(100vw - 24px);right:12px;bottom:88px;}
  .chatbot-fab{right:16px;bottom:16px;width:54px;height:54px;}
  .hero h1{letter-spacing:-1px;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .announce span:not(:first-child){display:none;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
  /* Very small screens — nav even tighter */
  nav{padding:0 12px;}
  .nav-logo img{height:32px;}
  .nav-right{gap:6px;}
  .nav-right .btn-sm{padding:8px 11px;font-size:12px;}
  /* Hub-back becomes icon-only on tiny screens to save room */
  .hub-back{padding:7px 9px;}
  .hub-back .hub-back-label{display:none;}
  .nav-left{gap:8px;}
  .hub-divider{height:20px;}
  /* Combined-cta tighter on small phones */
  .combined-cta{padding:28px 20px;}
  .combined-cta h3{font-size:22px;}
  .combined-cta .price-stack .num{font-size:50px;}
  /* Plan cards a bit tighter on small */
  .plan{padding:26px 22px;}
  .plan-price .num{font-size:42px;}
  /* Form-card padding tighter */
  .form-card{padding:28px 22px;}
  /* Sec inner padding tighter */
  .sec{padding:48px 16px;}
}
/* ════════════ BLOG STYLES ════════════ */
.blog-featured{
  display:grid;grid-template-columns:1fr 1.1fr;gap:40px;
  background:#fff;border:1px solid var(--line);border-radius:24px;
  overflow:hidden;cursor:pointer;
  transition:all 0.25s;
}
.blog-featured:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,0.08);}
.blog-featured-img{
  min-height:340px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.blog-featured-img-icon{
  font-size:140px;opacity:0.4;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.2));
}
.blog-featured-body{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;}
.blog-featured-body h2{
  font-size:32px;font-weight:800;letter-spacing:-0.9px;line-height:1.12;
  margin:16px 0 14px;color:var(--ink);
}
.blog-featured-body p{
  font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:22px;
}
.blog-tags{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.blog-tag{
  padding:5px 12px;border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
}
.blog-meta{font-size:12.5px;color:var(--muted);font-weight:500;}
.blog-meta-date{font-size:13px;color:var(--muted);margin-top:14px;display:block;}
.blog-read-link{
  font-weight:600;font-size:14.5px;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--blue);transition:gap 0.2s;
}
.blog-featured:hover .blog-read-link,.blog-card:hover .blog-read-link{gap:10px;}

.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.blog-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.blog-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:all 0.25s;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08);}
.blog-card-img{
  height:180px;display:flex;align-items:center;justify-content:center;
  font-size:72px;color:rgba(255,255,255,0.5);
}
.blog-card-body{padding:24px 26px;display:flex;flex-direction:column;flex:1;}
.blog-card-body h3{
  font-size:19px;font-weight:700;letter-spacing:-0.4px;line-height:1.3;
  margin:14px 0 10px;color:var(--ink);
}
.blog-card-body p{font-size:14px;line-height:1.6;color:var(--muted);flex:1;}

/* ARTICLE BODY */
.article-wrap{
  max-width:760px;margin:0 auto;padding:56px 24px 64px;
}
.article-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;margin-bottom:28px;
  background:none;border:none;font-family:inherit;
  transition:color 0.15s;
}
.article-back:hover{color:var(--ink);}
.article-header{margin-bottom:36px;}
.article-header h1{
  font-size:clamp(32px,4.5vw,48px);
  font-weight:800;letter-spacing:-1.4px;line-height:1.1;
  margin:18px 0 18px;
}
.article-meta-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:18px;margin-top:22px;border-top:1px solid var(--line);
}
.article-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.article-avatar.b{background:var(--blue);}
.article-author-name{font-size:14px;font-weight:700;}
.article-author-role{font-size:12.5px;color:var(--muted);margin-top:1px;}
.article-hero-img{
  height:340px;border-radius:20px;margin-bottom:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:120px;color:rgba(255,255,255,0.5);
}
.article-body{
  font-size:17px;line-height:1.8;color:var(--ink-soft);
}
.article-body p{margin-bottom:20px;}
.article-body h2{
  font-size:26px;font-weight:800;letter-spacing:-0.6px;
  margin:42px 0 14px;color:var(--ink);
}
.article-body h3{
  font-size:20px;font-weight:700;letter-spacing:-0.3px;
  margin:32px 0 10px;color:var(--ink);
}
.article-body ul,.article-body ol{padding-left:22px;margin-bottom:22px;}
.article-body li{margin-bottom:10px;}
.article-body strong{color:var(--ink);font-weight:700;}
.article-body blockquote{
  border-left:3px solid var(--green);background:var(--cream);
  margin:28px 0;padding:20px 26px;border-radius:0 14px 14px 0;
  font-style:italic;font-size:16.5px;color:var(--ink-soft);
}
.article-body blockquote.b{border-left-color:var(--blue);}
.article-body .callout{
  background:var(--green-soft);border-radius:14px;
  padding:22px 26px;margin:28px 0;
  border:1px solid var(--green-soft);
}
.article-body .callout.b{background:var(--blue-soft);border-color:var(--blue-soft);}
.article-body .callout strong{display:block;margin-bottom:6px;}
.article-body .callout p{margin:0;font-size:15.5px;line-height:1.65;}

@media(max-width:900px){
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured-img{min-height:240px;}
  .blog-featured-img-icon{font-size:100px;}
  .blog-featured-body{padding:32px 28px;}
  .blog-featured-body h2{font-size:26px;}
  .blog-grid,.blog-grid-3{grid-template-columns:1fr;}
  .article-wrap{padding:32px 20px 48px;}
  .article-hero-img{height:220px;font-size:80px;}
}

.blog-featured-img-photo{
  padding:0;overflow:hidden;
}
.blog-featured-img-photo img{
  width:100%;height:100%;object-fit:cover;display:block;min-height:340px;
}

.checkbox-row{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
  cursor:pointer;
}
.checkbox-row input[type="checkbox"]{
  width:18px;height:18px;margin-top:2px;flex-shrink:0;
  accent-color:var(--green);cursor:pointer;
}
.checkbox-row a{color:var(--green);font-weight:600;text-decoration:underline;cursor:pointer;}

@media(max-width:600px){
}

/* ════════════ CHECKOUT MODAL ════════════ */
.co-modal{
  position:fixed;inset:0;z-index:1000;
  display:none;
  align-items:flex-end;justify-content:center;
}
.co-modal.open{display:flex;animation:coFade 0.2s ease both;}
@keyframes coFade{from{opacity:0}to{opacity:1}}
.co-backdrop{
  position:absolute;inset:0;
  background:rgba(20,42,32,0.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.co-sheet{
  position:relative;
  background:#fff;
  border-radius:24px 24px 0 0;
  width:100%;max-width:520px;
  max-height:92vh;overflow-y:auto;
  padding:40px 32px 32px;
  box-shadow:0 -20px 60px rgba(0,0,0,0.25);
  animation:coSlideUp 0.28s cubic-bezier(0.2,0.9,0.3,1) both;
  -webkit-overflow-scrolling:touch;
}
@keyframes coSlideUp{from{transform:translateY(60px);opacity:0.6}to{transform:none;opacity:1}}
@media(min-width:680px){
  .co-modal{align-items:center;}
  .co-sheet{border-radius:24px;max-height:90vh;}
}
.co-close{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;border-radius:50%;
  background:var(--cream);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all 0.15s;
  z-index:10;
}
.co-close:hover{background:var(--line);color:var(--ink);}
.co-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;background:none;border:none;font-family:inherit;
  margin-bottom:18px;padding:0;transition:color 0.15s;
}
.co-back:hover{color:var(--ink);}

.co-title{
  font-size:24px;font-weight:800;letter-spacing:-0.6px;
  color:var(--ink);margin-bottom:20px;text-align:center;
  padding-right:30px;padding-left:30px;
}

/* Summary box */
.co-summary{
  background:var(--cream);border-radius:14px;
  padding:22px 24px;margin-bottom:22px;
  text-align:center;
}
.co-summary-label{
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.co-summary-price{
  display:flex;align-items:baseline;justify-content:center;gap:4px;
  color:var(--green);
}
.co-summary-price #co-price-amount{font-size:36px;font-weight:800;letter-spacing:-1px;}
.co-price-per{font-size:18px;font-weight:600;color:var(--green-mid);}
.co-summary-meta{
  font-size:13px;color:var(--muted);margin-top:6px;
  min-height:18px;
}
.co-summary-meta .save{color:var(--green);font-weight:600;}

.co-summary-compact{
  text-align:left;padding:14px 18px;
}
.co-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:14.5px;
}
.co-summary-row strong{color:var(--green);font-size:18px;font-weight:800;}

/* Toggle */
.co-toggle-row{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--cream);border-radius:100px;
  padding:10px 18px;margin-bottom:22px;flex-wrap:wrap;
}
.co-toggle-label{
  font-size:14px;font-weight:600;color:var(--muted);transition:color 0.18s;
}
.co-toggle-label.active{color:var(--ink);}
.co-toggle{
  position:relative;width:44px;height:24px;
  background:var(--line);border-radius:100px;
  cursor:pointer;border:none;padding:0;
  transition:background 0.2s;
}
.co-toggle.on{background:var(--green);}
.co-toggle-knob{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform 0.2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.co-toggle.on .co-toggle-knob{transform:translateX(20px);}
.co-toggle-badge{
  padding:3px 9px;border-radius:100px;
  background:var(--green-soft);color:var(--green);
  font-size:10.5px;font-weight:700;letter-spacing:0.6px;
  text-transform:uppercase;
}

/* Payment method cards */
.co-methods{display:flex;flex-direction:column;gap:10px;}

/* Bolt-ons (Solar-Shield only) */
.co-addons{margin-bottom:22px;}
.co-addons-head{margin-bottom:10px;}
.co-addons-head h4{
  font-size:13px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--green);margin-bottom:4px;
}
.co-addons-head p{
  font-size:13px;color:var(--muted);
}
.co-addon-list{display:flex;flex-direction:column;gap:8px;}
.co-addon{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;cursor:pointer;
  transition:all 0.18s;
  position:relative;
}
.co-addon:hover{border-color:var(--green);background:#FCFAF5;}
.co-addon input[type="checkbox"]{
  width:20px;height:20px;flex-shrink:0;
  accent-color:var(--green);cursor:pointer;
  margin:0;
}
.co-addon:has(input:checked){
  border-color:var(--green);background:var(--green-soft);
}
.co-addon-body{flex:1;min-width:0;}
.co-addon-body h5{
  font-size:14px;font-weight:700;letter-spacing:-0.1px;
  color:var(--ink);margin-bottom:2px;
}
.co-addon-body p{
  font-size:12.5px;color:var(--muted);line-height:1.4;
}
.co-addon-price{
  flex-shrink:0;font-size:15px;font-weight:800;
  color:var(--green);letter-spacing:-0.3px;
}
.co-addon-price span{
  font-size:11px;color:var(--muted);font-weight:500;
  margin-left:2px;
}
.co-method{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:16px 18px;cursor:pointer;
  font-family:inherit;text-align:left;width:100%;
  transition:all 0.18s;
}
.co-method:hover{border-color:var(--green);background:#FCFAF5;transform:translateY(-1px);}
.co-method-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.co-icon-card{background:var(--blue-soft);}
.co-icon-paypal{background:#FEF3C7;}
.co-icon-finance{background:var(--green-soft);}
.co-method-body{flex:1;min-width:0;}
.co-method-body h4{
  font-size:15.5px;font-weight:700;letter-spacing:-0.2px;
  color:var(--ink);margin-bottom:2px;
}
.co-method-body p{
  font-size:13px;color:var(--muted);line-height:1.4;
}
.co-method-arrow{
  font-size:18px;color:var(--muted);font-weight:400;
  flex-shrink:0;
}

/* Stripe footer */
.co-stripe-footer{
  text-align:center;font-size:12.5px;color:var(--muted);
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
}
.co-stripe-footer strong{color:var(--ink);font-weight:700;}

/* Form */
.co-form{display:flex;flex-direction:column;gap:0;}
.co-form-group{margin-bottom:14px;}
.co-form-group label{
  display:block;font-size:11.5px;font-weight:600;
  color:var(--ink-soft);margin-bottom:6px;letter-spacing:0.3px;
}
.co-form-group input{
  width:100%;background:var(--cream);
  border:1.5px solid transparent;border-radius:10px;
  padding:12px 14px;color:var(--ink);
  font-family:inherit;font-size:14.5px;outline:none;
  transition:all 0.18s;
}
.co-form-group input:focus{background:#fff;border-color:var(--green);}
.co-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.co-notice{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--blue-soft);border-radius:12px;
  padding:14px 16px;margin-bottom:16px;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}
.co-notice-icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--blue);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
}
.co-notice strong{color:var(--ink);display:block;margin-bottom:3px;}
.co-notice p{margin:0;font-size:13px;color:var(--muted);}

.co-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.5;color:var(--ink-soft);
  margin:6px 0 16px;cursor:pointer;
}
.co-check input[type="checkbox"]{
  width:18px;height:18px;margin-top:1px;flex-shrink:0;
  accent-color:var(--green);cursor:pointer;
}
.co-check a{color:var(--green);font-weight:600;text-decoration:underline;cursor:pointer;}

.co-submit{
  width:100%;padding:14px;border-radius:100px;
  background:var(--green);color:#fff;
  font-family:inherit;font-weight:700;font-size:15px;
  cursor:pointer;border:none;transition:all 0.18s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:4px;
}
.co-submit:hover{background:var(--green-dark);}
.co-submit svg{flex-shrink:0;}

/* Success */
.co-success{text-align:center;padding:20px 0;}
.co-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;
  margin:0 auto 18px;
}
.co-success-msg{
  font-size:15px;line-height:1.6;color:var(--muted);
  margin-bottom:24px;
}
.co-success-msg strong{color:var(--ink);}

/* Small screens */
@media(max-width:560px){
  .co-sheet{padding:32px 22px 22px;}
  .co-title{font-size:22px;padding-right:36px;padding-left:0;text-align:left;}
  .co-summary-price #co-price-amount{font-size:32px;}
  .co-form-2col{grid-template-columns:1fr 1fr;gap:10px;}
  .co-toggle-row{padding:8px 14px;gap:10px;}
  .co-toggle-badge{font-size:10px;padding:3px 8px;}
}

/* Lock body scroll when modal open */
body.co-locked{overflow:hidden;}

/* Portal Demo Modal */
.pdm-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,30,25,0.65); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.pdm-overlay.open{ display:flex; animation:pdmFade 0.18s ease both; }
@keyframes pdmFade{ from{opacity:0} to{opacity:1} }
.pdm-card{
  background:#fff; border-radius:20px;
  max-width:480px; width:100%; padding:36px 32px 28px;
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
  animation:pdmSlide 0.22s ease both;
}
@keyframes pdmSlide{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.pdm-close{
  position:absolute; top:14px; right:18px;
  background:transparent; border:none;
  font-size:28px; line-height:1; cursor:pointer;
  color:var(--ink-light); padding:4px 8px;
}
.pdm-close:hover{ color:var(--ink); }
.pdm-badge{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  background:#FFF7E0; color:#8B6F00;
  padding:5px 11px; border-radius:100px; margin-bottom:14px;
}
.pdm-title{
  font-size:22px; font-weight:800; line-height:1.2;
  letter-spacing:-0.5px; margin:0 0 10px; color:var(--ink);
}
.pdm-body{
  font-size:14.5px; line-height:1.55; color:var(--ink-light);
  margin:0 0 18px;
}
.pdm-meta{
  background:#FAF7F1; border-radius:12px;
  padding:14px 16px; margin-bottom:18px;
}
.pdm-meta-row{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.5;
  color:var(--ink); margin-bottom:8px;
}
.pdm-meta-row:last-child{ margin-bottom:0; }
.pdm-meta-icon{ flex-shrink:0; }

@media (max-width: 720px){
}

/* OFFICE / SUPPORT-TEAM BAND (hub) ───────────────────────── */
.office-band .office-inner{
  max-width:1680px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; padding:0 24px;
}
.office-band .office-photo img{
  width:100%; height:auto; display:block;
  border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,0.12);
}
.office-band .office-text h2{
  font-size:clamp(28px,3.4vw,38px); font-weight:800;
  letter-spacing:-0.8px; line-height:1.12; margin:8px 0 16px; color:var(--ink);
}
.office-band .office-text p{
  font-size:16.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:24px;
}
@media (max-width:780px){
  .office-band .office-inner{
    grid-template-columns:1fr; gap:28px;
  }
}

/* ============================================================
   Widescreen layout & readability pass
   • Main container widened 1320 → 1600 (applied above).
   • Larger, more legible secondary text on tablet/desktop.
   • Mobile keeps its original sizing (rules scoped ≥1024px).
   ============================================================ */

.hero-grid-center .lead{ max-width:760px; }

/* ---- Header & footer legibility on larger screens ---- */


/* ============================================================
   Legibility pass — larger, comfortable text on tablet/desktop
   across header, body, forms, contact cards and footer.
   Mobile keeps original sizing (scoped >=1024px).
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP TYPE SCALE  (>= 1024px)
   The single place desktop sizing is set. Everything below 1024px is
   untouched and renders at the mobile sizes defined further up.
   Replaces four earlier overlapping blocks that fought each other.
   ═══════════════════════════════════════════════════════════════════ */
/* The nav is position:sticky, so a section scrolled to via a link lands
   underneath it. Give anything linkable a margin to clear it. */
section[id], div[id], [id^="roof-"], [id^="renew-"], [id^="combined"] { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }

/* keep a brand name together so it wraps as one unit, not mid-name */
.nb{ white-space:nowrap; }

/* About page prose. Was inline font-size:17px on the wrapper, which no
   stylesheet rule could override — that's why the type scale never reached it. */
.about-prose{ font-size:17px; line-height:1.8; color:var(--ink-soft); }
.about-prose p{ margin-bottom:22px; }
.about-prose strong{ color:var(--ink); }

/* ── BLOG CARDS ──────────────────────────────────────────────────────
   The markup uses .blog-card-meta and .blog-card-link; the stylesheet only
   ever defined .blog-meta and .blog-read-link. Those two elements have had NO
   rule at all — the date line and "Read more →" were falling back to browser
   defaults. Styling them properly here, matching their siblings.
   Also styles the wrappers the markup expects but the CSS never had. */
.blog-card-meta{
  font-size:12.5px; color:var(--muted); font-weight:600;
  letter-spacing:0.3px;
}
.blog-card-link{
  margin-top:14px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:6px;
  color:var(--blue); transition:gap 0.18s;
}
.blog-card:hover .blog-card-link{ gap:10px; }
.blog-featured-meta{ font-size:13px; color:var(--muted); font-weight:600; }
.blog-featured-badge{
  display:inline-block; padding:5px 12px; border-radius:100px;
  background:var(--blue-soft); color:var(--blue);
  font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;
  margin-bottom:14px;
}
.blog-wrap{ max-width:1680px; margin:0 auto; }
.blog-grid-head{ margin-bottom:22px; }
.blog-read-more{ font-weight:700; color:var(--blue); }

/* The Helplines lockup is 3.24:1 — close to the ~4:1 of the old brand logos,
   so it sits at much the same height rather than needing extra room. */
.nav-logo img[src*="helplines-logo"]{ height:46px; }

/* Footer: the group mark leads, the two brands sit beneath it. The hub's nav
   carries The Helplines alone, so this is the one place both brands are named
   in the chrome — and they're the thing a visitor is actually choosing between. */
.footer-brand .footer-mark{
  height:46px; width:auto; display:block; align-self:flex-start;
  margin-bottom:16px; background:none; border-radius:0; padding:0;
}
.footer-brands{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.footer-brands a{ display:block; line-height:0; }
.footer-brands img{
  height:30px; width:auto; display:block; margin:0;
  background:#fff; border-radius:6px; padding:5px 8px;
  transition:transform 0.18s;
}
.footer-brands a:hover img{ transform:translateY(-2px); }

/* ── CHOOSE CARDS ────────────────────────────────────────────────────
   The brand logo leads the card — it's the fastest way to know which of the
   two you're looking at, faster than reading the heading. The list gives a
   visitor something to actually choose on; one sentence wasn't enough for the
   most important decision on the page. */
.choose-logo{
  height:38px; width:auto; display:block; margin-bottom:20px;
  /* .choose-btn is a flex column with no align-items, so it defaults to
     stretch — which pulls the logo to the full card width and squashes it.
     align-self:flex-start opts this one item out. */
  align-self:flex-start;
}
.choose-list{
  list-style:none; padding:0; margin:0 0 24px;
}
.choose-list li{
  position:relative; padding-left:26px; margin-bottom:9px;
  font-size:14.5px; color:var(--ink-soft); line-height:1.5;
}
.choose-list li::before{
  content:""; position:absolute; left:0; top:6px;
  width:15px; height:15px; border-radius:50%; background:var(--line);
}
.choose-list li::after{
  content:""; position:absolute; left:5px; top:10px;
  width:5px; height:2.5px;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}
.bg-blue .choose-list li::before{ background:var(--blue-soft); }
.bg-blue .choose-list li::after{ border-color:var(--blue); }
.bg-green .choose-list li::before{ background:var(--green-soft); }
.bg-green .choose-list li::after{ border-color:var(--green); }

.choose-meta{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 0 20px; margin-top:auto;
  border-top:1px solid var(--line);
}
.choose-price{ font-size:16px; color:var(--ink); font-weight:600; }
.choose-price strong{ font-size:22px; font-weight:800; letter-spacing:-0.5px; }
.bg-blue .choose-price strong{ color:var(--blue); }
.bg-green .choose-price strong{ color:var(--green); }
.choose-hours{ font-size:12.5px; color:var(--muted); }

/* The plans are service & maintenance agreements, not insurance — true of BOTH
   brands, and stated in terms 1.3, both checkout flows, about, contact and the
   blog. It belongs on its own line rather than tacked onto the opening hours. */
.choose-note{
  font-size:12px; color:var(--muted); font-style:italic;
  margin-top:2px; display:block;
}

/* ── HERO BRAND BUTTONS ──────────────────────────────────────────────
   The logo replaces the label rather than sitting beside it: "Visit Roof
   Helpline" next to a logo that says Roof Helpline is the brand read twice,
   at a size where neither reads once.

   The emblem alone won't do either — Roof's and Renewable's marks are the
   SAME artwork (a red phone round a house) and differ only in one accent
   colour, navy vs green. At icon size they're indistinguishable. It's the
   wordmark that tells them apart, so the logo has to be big enough to read
   it: 34px is the floor, below that the .co.uk turns to mush. */
.brand-btn{
  display:inline-flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; text-decoration:none;
  /* The two logos are 1.26:1 and 1.47:1 — at equal height they'd come out
     different widths and the pair would look accidental. A min-width levels
     them; the logo centres in whatever's left. */
  min-width:200px; justify-content:space-between;
  color:var(--ink); transition:transform .18s, box-shadow .18s, border-color .18s;
}
.brand-btn img{
  /* Back on the HORIZONTAL logos (4:1), so the height comes down: 62px was
     sized for the 1.26:1 stacked lockups and would render these 248px wide.
     At 4:1 the wordmark reads from about 28px. */
  height:34px; width:auto; display:block; flex-shrink:0; margin:0 auto;
}
.brand-btn-arrow{ opacity:0.45; transition:transform .18s, opacity .18s; flex-shrink:0; }
.brand-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,32,26,0.13);
  border-color:transparent;
}
.brand-btn:hover .brand-btn-arrow{ transform:translateX(3px); opacity:0.9; }

/* ── FOOTER ──────────────────────────────────────────────────────────
   One row: identity block, then three link columns divided by rules.
   Each column's rule takes its brand's colour. */
footer{ background:#0F1E30; color:rgba(255,255,255,0.72); }

.footer-grid{
  max-width:min(1680px, 94vw); margin:0 auto 8px;
  display:grid; grid-template-columns:1.45fr 1fr 1fr 1fr; gap:0 44px;
}
.footer-identity .footer-mark{
  height:60px; width:auto; display:block; align-self:flex-start;
  margin:0 0 26px; background:none; border-radius:0; padding:0;
}
.footer-brands{ display:flex; align-items:center; gap:14px; margin:0 0 26px; flex-wrap:wrap; }
.footer-brand-tile{
  display:block; line-height:0; background:#fff; border-radius:12px;
  padding:12px 16px; transition:transform .18s, box-shadow .18s;
}
.footer-brand-tile img{ height:34px; width:auto; display:block; margin:0; background:none; padding:0; border-radius:0; }
.footer-brand-tile:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.3); }

.fc-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; text-decoration:none; }
.fc-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85);
}
.fc-icon svg{ width:20px; height:20px; }
.fc-icon-red{ color:#D72027; }
.fc-body{ font-size:15px; line-height:1.65; color:rgba(255,255,255,0.6); padding-top:2px; }
.fc-body strong{ display:block; color:#fff; font-weight:700; margin-bottom:3px; }
.fc-phone{ align-items:center; }
.fc-tel{ color:#fff; font-size:24px; font-weight:800; letter-spacing:-0.5px; }
.fc-phone:hover .fc-tel{ text-decoration:underline; text-underline-offset:4px; }

/* columns */
.footer-col{ padding-left:44px; border-left:1px solid rgba(255,255,255,0.10); }
.footer-col h4{
  position:relative; padding-bottom:12px; margin-bottom:18px;
  color:#fff; font-weight:700;
}
.footer-col h4::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:2px;
}
.rule-roof::after{ background:#D72027; }
.rule-renew::after{ background:#5FAA4F; }
.rule-hub::after{ background:#2C5AA8; }
.footer-col ul li a{ color:rgba(255,255,255,0.62); }
.footer-col ul li a:hover{ color:#fff; }
.footer-col-contact ul li a{ display:flex; align-items:center; gap:12px; }
.footer-col-contact .fc-icon{ width:38px; height:38px; border-radius:10px; }
.footer-col-contact .fc-icon svg{ width:17px; height:17px; }

/* trust strip */
.footer-trust{
  max-width:min(1680px, 94vw); margin:0 auto; padding:28px 0 6px;
  border-top:1px solid rgba(255,255,255,0.10);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.ft-item{ display:flex; align-items:center; gap:16px; padding:8px 26px; }
.ft-item + .ft-item{ border-left:1px solid rgba(255,255,255,0.10); }
.ft-item:first-child{ padding-left:0; }
.ft-icon svg{ width:32px; height:32px; color:#fff; }
.ft-text{ display:flex; flex-direction:column; line-height:1.4; }
.ft-text strong{ color:#fff; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.ft-text span{ font-size:13.5px; color:rgba(255,255,255,0.55); }

@media (max-width: 1000px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .footer-grid{ margin-bottom:0; }
  .footer-identity{ grid-column:1 / -1; }
  .footer-col{ padding-left:0; border-left:none; }
  .footer-trust{ grid-template-columns:1fr 1fr; gap:16px 0; }
  .ft-item{ padding:8px 14px; }
  .ft-item:nth-child(odd){ border-left:none; padding-left:0; }
}
@media (max-width: 620px){
  /* one column on a phone. This has to come AFTER the top-level rule —
     media queries add no specificity, so the old max-width:560px rule further
     up the file was losing to it and the footer was trying to run two columns
     on a 375px screen. */
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-trust{ grid-template-columns:1fr; gap:14px; }
  .ft-item{ border-left:none !important; padding-left:0; }
}

/* ── HEADER + HERO ───────────────────────────────────────────────────
   Announce bar in the group navy so it reads as one band with the footer;
   the hero's accent is the brand red rather than green — the hub is the
   group, and green is Renewable's. */
.announce{
  background:#0F1E30; color:rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px 22px;
}
.ann-item{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.ann-ico{ color:#D72027; flex-shrink:0; }
.ann-dim{ color:rgba(255,255,255,0.55); }
.announce a{ color:#fff; text-decoration:underline; text-underline-offset:3px;
             text-decoration-color:rgba(255,255,255,0.35); font-weight:600; }
.announce-dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.3); }

/* nav buttons */
.nav-portal, .nav-phone{
  display:inline-flex; align-items:center; gap:9px;
  border-radius:100px; text-decoration:none; font-weight:700;
  transition:transform .16s, box-shadow .16s;
}
.nav-portal{
  background:#fff; color:var(--ink);
  border:1.5px solid var(--line); padding:9px 18px;
}
.nav-portal:hover{ border-color:var(--ink); }
.nav-phone{
  background:var(--red); color:#fff; border:1.5px solid var(--red); padding:10px 20px;
}
.nav-phone:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(215,32,39,0.3); }
.nav-sep{ width:1px; height:26px; background:var(--line); margin:0 4px; }

/* hero accents — red, not green */
.eyebrow{ background:rgba(215,32,39,0.09); color:var(--red); }
h1 em, .hero h1 em{ color:var(--red); font-style:normal; font-weight:800; }
.ht-ico{ color:var(--red); flex-shrink:0; }
.hero-trust-item{ display:flex; align-items:center; gap:10px; }

/* brand buttons — white tiles, bordered, per the mock */
.brand-btn{ background:#fff; border:1px solid var(--line); }

/* ── hub pages: about + contact ──────────────────────────────────────
   The hub's accent is red — .act-b and .act-g already exist for the two
   brand sites, but the group had no active-nav colour of its own. */
.act-r{ color:var(--red); font-weight:600; }
.contact-lead{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.5px; text-decoration:none; }
.contact-lead:hover{ color:var(--red); }
/* the callout style lives in the blog's article.css, which the hub doesn't
   load — so the About page needs its own copy */
.art-callout{
  background:var(--cream); border-left:4px solid var(--red);
  padding:22px 26px; border-radius:0 14px 14px 0;
  font-size:16px; line-height:1.7; color:var(--ink);
}
.art-callout strong{ color:var(--ink); }

/* ── MOBILE NAV ──────────────────────────────────────────────────────
   There was none. @media(max-width:900px) hid .nav-links and put nothing in
   its place, so every page of all three sites lost its navigation on a phone. */
.nav-burger{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:8px; flex-direction:column;
  justify-content:center; gap:6px; align-items:stretch; margin-left:4px;
}
.nav-burger span{
  display:block; height:3px; border-radius:2px; background:var(--ink);
  transition:transform .22s, opacity .18s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.nav-backdrop{
  position:fixed; inset:0; z-index:290;
  background:rgba(12,20,16,0.45); opacity:0; transition:opacity .22s;
}
.nav-backdrop.open{ opacity:1; }

.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:300;
  width:min(86vw, 340px); background:var(--paper);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:18px 22px 26px;
  overflow-y:auto;
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.nav-drawer-title{ font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.nav-drawer-close{
  background:none; border:0; cursor:pointer; color:var(--ink);
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  margin-right:-8px;
}
.nav-drawer-links{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.nav-drawer-links a{
  padding:16px 2px; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:17px; font-weight:600;
}
.nav-drawer-links a:hover{ color:var(--red); }
.nav-drawer-cta{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.nav-drawer-cta a{ justify-content:center; }

body.nav-open{ overflow:hidden; }

@media (max-width: 900px){
  .nav-burger{ display:flex; }
  /* the portal + phone buttons move into the drawer, so the bar keeps a logo
     and a burger rather than three things fighting for 390px */
  .nav-right .nav-portal, .nav-right .nav-sep{ display:none; }
}
@media (max-width: 560px){
  .nav-right .nav-phone{ padding:10px 14px; }
  .nav-right .nav-phone span, .nav-right .nav-phone{ font-size:0; gap:0; }
  .nav-right .nav-phone svg{ width:18px; height:18px; }
}

/* ── FOCUS, SKIP, MOTION ─────────────────────────────────────────────
   Keyboard and assistive-tech support. Without these the site is unusable
   for some people and merely unpleasant for others. */

/* :focus-visible so it shows for keyboard users, not on mouse clicks.
   Red on light grounds, white in the footer and announce bar. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:6px;
}
footer a:focus-visible, footer button:focus-visible, .announce a:focus-visible{
  outline-color:#fff;
}

/* off-screen until focused, then the first thing you land on */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:400;
  background:var(--red); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 10px;
  font-weight:700; font-size:15px; text-decoration:none;
  transition:top .16s;
}
.skip-link:focus{ top:0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  html{ scroll-behavior:auto !important; }
}

/* The .eyebrow accent went red when the hero moved to the group's colour —
   but this one sits on the dark green combined band and inherited it. Red on
   #1D3D2E is 1.9:1, which is illegible, not just off-brand. */
.combined-cta .eyebrow{
  background:rgba(255,255,255,0.14);
  color:#fff;
}

/* ── HERO MASCOTS ────────────────────────────────────────────────────
   Two stills, not the video: the video's mascots still wear the old
   red-phone logos on their chests, and it's the first thing on the page.
   The old radial mask is gone too — it was eating their feet. These are
   already transparent, so nothing needs masking at all. */
.hero-visual{
  display:flex; align-items:flex-end; justify-content:center; gap:0;
  /* No negative margins. The old rules pulled this 60px left and 90px up so a
     video with a baked white background could bleed its capes past the column
     edge. These are transparent PNGs — they need no bleed, and the pull was
     dragging them over the headline. min-width:0 lets the flex item actually
     shrink to its column instead of pushing left when the images want more. */
  min-width:0; overflow:visible;
}
.hero-mascot{
  width:auto; height:auto; max-width:52%; display:block;
  mix-blend-mode:normal; mask-image:none; -webkit-mask-image:none;
  filter:drop-shadow(0 18px 34px rgba(20,32,26,0.16));
}
.hero-mascot-b{ margin-left:-6%; }
@media (max-width:900px){
  .hero-mascot{ max-width:50%; }
  .hero-mascot-b{ margin-left:-4%; }
}

/* ── LINE LENGTH ─────────────────────────────────────────────────────
   Widening the container to 1680px pushed several paragraphs past the
   readable limit — they had no cap and simply took their column. A card
   can be 830px wide; the prose inside it shouldn't be. Capped in ch so a
   future container change can't undo this again. */
.choose-btn p{ max-width:66ch; }
.office-text p{ max-width:70ch; }
.combined-cta p{ max-width:74ch; }

@media (min-width: 1024px) {

  body { font-size: 18.5px; }

  /* ── chrome: announce bar, logo, nav ── */
  .announce        { font-size: 17px; padding: 11px 24px; }
  .nav-logo img    { height: 48px; }            /* was 38px, never scaled */
  .nav-link        { font-size: 18px; padding: 10px 16px; }
  .hub-back        { font-size: 14.5px; padding: 8px 14px; }
  .btn             { font-size: 16.5px; padding: 13px 26px; }
  .btn-sm          { font-size: 15px; padding: 10px 18px; }

  /* ── eyebrows: were 11.5–12px everywhere, on every page ── */
  .eyebrow         { font-size: 14px; letter-spacing: 1.6px; }
  .sec-eyebrow     { font-size: 14px; letter-spacing: 1.6px; }
  .choose-eyebrow  { font-size: 13.5px; letter-spacing: 1.4px; }
  .art-eyebrow     { font-size: 13px; }

  /* ── hero ── */
  /* 75ch, not 680px. A px cap has to be re-guessed every time the font size
     changes; ch tracks it. 680px at 23px was ~59 characters — BELOW the
     comfortable 60–80, so it wrapped to three lines where two would do. */
  .hero p.lead     { font-size: 23px; max-width: 75ch; }
  .hero-trust-item { font-size: 17px; }

  /* ── sections and cards ── */
  .sec-sub         { font-size: 20.5px; max-width: 720px; }
  .card h3         { font-size: 22.5px; }
  .card p          { font-size: 18px; }

  /* ── plans ── */
  .plan-name       { font-size: 28px; }
  .plan-tagline    { font-size: 17.5px; }
  .plan-features li{ font-size: 17.5px; }
  .plan-was        { font-size: 15px; }
  .combined-feature-list { font-size: 17px; }

  /* ── faq ── */
  .faq-q           { font-size: 18.5px; }
  .faq-a           { font-size: 17.5px; }

  /* ── forms and contact ── */
  .form-group label { font-size: 15.5px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 17.5px; }
  .form-card .form-intro { font-size: 17.5px; }
  .contact-block h5 { font-size: 18px; }
  .contact-block p  { font-size: 16.5px; }
  .contact-block a  { font-size: 17.5px; }

  /* ── footer ── */
  .footer-brand p     { font-size: 17.5px; line-height: 1.75; }
  .footer-col h4      { font-size: 16px; }
  .footer-col ul li a { font-size: 17.5px; }
  .footer-col ul li   { margin-bottom: 12px; }
  .footer-bottom      { font-size: 16px; }


  /* ── combined / whole-home band ── */
  .combined-cta h3      { font-size: 34px; }
  .combined-cta p       { font-size: 18px; line-height: 1.7; }   /* was 15px, never scaled */
  .price-stack .per     { font-size: 20px; }
  .price-stack .was     { font-size: 16px; }                     /* the crossed-out price */
  .was                  { font-size: 16px; }
  .price-stack .was strike, .was strike { font-size: 16px; }

  /* ── contact page: form + the four cards ── */
  .form-card h3         { font-size: 25px; }
  .form-card .form-intro, .form-intro { font-size: 18px; }
  .form-group label     { font-size: 16px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 17.5px; }
  .form-group input::placeholder, .form-group textarea::placeholder { font-size: 17.5px; }
  .contact-block h5     { font-size: 19.5px; }
  .contact-block p      { font-size: 17.5px; line-height: 1.65; }
  .contact-block a      { font-size: 18.5px; }
  .contact-icon         { width: 46px; height: 46px; }

  /* buttons carry a lot of the page's voice — one more step */
  .btn                  { font-size: 17.5px; padding: 14px 28px; }
  .btn-sm               { font-size: 15.5px; padding: 10px 18px; }


  /* ── swept: everything small that had no desktop size ── */
  .article-author-name                                 { font-size: 16.5px; }   /* was 14px */
  .article-author-role                                 { font-size: 15px; }   /* was 12.5px */
  .article-back                                        { font-size: 16px; }   /* was 13.5px */
  .article-body .callout p                             { font-size: 18.5px; }   /* was 15.5px */
  .article-body blockquote                             { font-size: 19px; }   /* was 16.5px */
  .blog-card-body p                                    { font-size: 16.5px; }   /* was 14px */
  .blog-featured-body p                                { font-size: 19px; }   /* was 16px */
  .blog-meta                                           { font-size: 15px; }   /* was 12.5px */
  .blog-meta-date                                      { font-size: 15.5px; }   /* was 13px */
  .blog-read-link                                      { font-size: 17px; }   /* was 14.5px */
  .btn-lg                                              { font-size: 19px; }   /* was 16px */
  .checkbox-row                                        { font-size: 16px; }   /* was 13.5px */
  .choose-btn .visit                                   { font-size: 17px; }   /* was 14.5px */
  .choose-btn p                                        { font-size: 17.5px; }   /* was 15px */
  .co-addon-body h5                                    { font-size: 16.5px; }   /* was 14px */
  .co-addon-body p                                     { font-size: 15px; }   /* was 12.5px */
  .co-addon-price                                      { font-size: 17.5px; }   /* was 15px */
  .co-addon-price span                                 { font-size: 13px; }   /* was 11px */
  .co-addons-head h4                                   { font-size: 15.5px; }   /* was 13px */
  .co-addons-head p                                    { font-size: 15.5px; }   /* was 13px */
  .co-back                                             { font-size: 16px; }   /* was 13.5px */
  .co-form-group input                                 { font-size: 17px; }   /* was 14.5px */
  .co-form-group label                                 { font-size: 13.5px; }   /* was 11.5px */
  .co-method-body h4                                   { font-size: 18.5px; }   /* was 15.5px */
  .co-method-body p                                    { font-size: 15.5px; }   /* was 13px */
  .co-notice                                           { font-size: 16px; }   /* was 13.5px */
  .co-notice p                                         { font-size: 15.5px; }   /* was 13px */
  .co-stripe-footer                                    { font-size: 15px; }   /* was 12.5px */
  .co-submit                                           { font-size: 17.5px; }   /* was 15px */
  .co-success-msg                                      { font-size: 17.5px; }   /* was 15px */
  .co-summary-label                                    { font-size: 13.5px; }   /* was 11.5px */
  .co-summary-meta                                     { font-size: 15.5px; }   /* was 13px */
  .co-summary-row                                      { font-size: 17px; }   /* was 14.5px */
  .co-toggle-label                                     { font-size: 16.5px; }   /* was 14px */
  .combined-cta .price-stack .was                      { font-size: 15.5px; }   /* was 13px */
  .combined-feature-head                               { font-size: 15.5px; }   /* was 13px */
  .hero-side-card .email                               { font-size: 15.5px; }   /* was 13px */
  .hero-side-card .hours                               { font-size: 16px; }   /* was 13.5px */
  .hero-side-card .label                               { font-size: 13px; }   /* was 11px */
  .list-item-info h5                                   { font-size: 16.5px; }   /* was 14px */
  .list-item-info p                                    { font-size: 15px; }   /* was 12.5px */
  .login-card .login-sub                               { font-size: 16.5px; }   /* was 14px */
  .login-divider                                       { font-size: 14px; }   /* was 12px */
  .login-logo .sub                                     { font-size: 14px; }   /* was 12px */
  .login-meta                                          { font-size: 16px; }   /* was 13.5px */
  .office-band .office-text p                          { font-size: 19px; }   /* was 16.5px */
  .pdm-body                                            { font-size: 17px; }   /* was 14.5px */
  .pdm-meta-row                                        { font-size: 15.5px; }   /* was 13px */
  .plan-btn                                            { font-size: 17px; }   /* was 14.5px */
  .plan-mini-grid .lbl                                 { font-size: 13.5px; }   /* was 11.5px */
  .plan-mini-grid .val                                 { font-size: 19px; }   /* was 16px */
  .plan-mini-sub                                       { font-size: 15px; }   /* was 12.5px */
  .plan-price .per                                     { font-size: 17.5px; }   /* was 15px */
  .portal-card h4                                      { font-size: 19px; }   /* was 16px */
  .portal-tab                                          { font-size: 16px; }   /* was 13.5px */
  .portal-user p                                       { font-size: 16px; }   /* was 13.5px */
  .review .reviewer                                    { font-size: 15.5px; }   /* was 13px */
  .review p                                            { font-size: 17.5px; }   /* was 15px */
  .step-content p                                      { font-size: 17px; }   /* was 14.5px */
  .submit-btn                                          { font-size: 17.5px; }   /* was 15px */
  .toggle-row h5                                       { font-size: 17px; }   /* was 14.5px */
  .toggle-row p                                        { font-size: 15.5px; }   /* was 13px */
  .upgrade-cta h5                                      { font-size: 19px; }   /* was 16px */
  .upgrade-cta p                                       { font-size: 16px; }   /* was 13.5px */

  /* eyebrows read smaller than they measure — uppercase, widely tracked */
  .eyebrow         { font-size: 16px; letter-spacing: 1.8px; }
  .sec-eyebrow     { font-size: 16px; letter-spacing: 1.8px; }
  .choose-eyebrow  { font-size: 15px; letter-spacing: 1.5px; }
  .art-eyebrow     { font-size: 14.5px; }

  /* ── how-it-works steps ── */
  .step-content h4 { font-size: 20px; }
  .step-content p  { font-size: 17px; line-height: 1.65; }
  .step-num        { width: 44px; height: 44px; font-size: 16px; }

  section[id], div[id], [id^="roof-"], [id^="renew-"], [id^="combined"] { scroll-margin-top: 96px; }

  /* This had NO cap and sat in a 1680px container = 172 characters a line.
     I'd narrowed the whole site to 1320px to fix exactly this, then widened
     it back and left the prose behind. 72ch is the fix that survives a
     container change. */
  .about-prose   { font-size: 19.5px; line-height: 1.75; max-width: 72ch; }
  .about-prose p { margin-bottom: 26px; }

  /* eyebrows — uppercase and widely tracked, so they read smaller than they measure */
  .eyebrow         { font-size: 18px; letter-spacing: 2px; }
  .sec-eyebrow     { font-size: 18px; letter-spacing: 2px; }
  .choose-eyebrow  { font-size: 17px; letter-spacing: 1.7px; }

  /* ── blog cards ── */
  .blog-card-meta       { font-size: 15px; }
  .blog-card-body h3    { font-size: 22px; }
  .blog-card-body p     { font-size: 17px; }
  .blog-card-link       { font-size: 17px; }
  .blog-featured-body h2{ font-size: 30px; }
  .blog-featured-meta   { font-size: 15.5px; }

  .nav-logo img[src*="helplines-logo"]    { height: 56px; }

  .footer-brand .footer-mark { height: 54px; }
  .footer-brands img         { height: 34px; }

  /* ── choose cards ── */
  .choose-logo    { height:54px; }
  .choose-list li { font-size: 16.5px; }
  .choose-price   { font-size: 18px; }
  .choose-price strong { font-size: 25px; }
  .choose-hours   { font-size: 14.5px; }

  .choose-note { font-size: 13.5px; }

  .brand-btn     { padding: 16px 24px; gap: 20px; min-width: 236px; border-radius: 16px; }
  .brand-btn img { height: 40px; }

  .footer-identity .footer-mark { height: 66px; }
  .footer-brand-tile img        { height: 34px; }
  .fc-name                      { font-size: 17.5px; }
  .fc-addr                      { font-size: 16.5px; }
  .fc-phone                     { font-size: 28px; }
  .ft-text strong               { font-size: 14px; }
  .ft-text span                 { font-size: 15px; }

  .footer-identity .footer-mark { height: 70px; }
  .footer-brand-tile img        { height: 40px; }
  .fc-body                      { font-size: 16.5px; }
  .fc-tel                       { font-size: 28px; }
  .footer-col h4                { font-size: 16px; letter-spacing: 0.6px; }
  .ft-text strong               { font-size: 14px; }
  .ft-text span                 { font-size: 15px; }

  .announce      { gap: 10px 26px; }
  .nav-portal    { padding: 11px 22px; font-size: 16px; }
  .nav-phone     { padding: 12px 24px; font-size: 16.5px; }

  .contact-lead { font-size: 25px; }
  .art-callout  { font-size: 17.5px; }

  /* room at the edges on wide displays (kept from the old block) */
  .sec { padding-left: 40px; padding-right: 40px; }
}


/* ==================================================================
   PREMIUM RESKIN — navy hero + floating trust bar (Helplines refresh)
   ================================================================== */
:root{
  --navy:#0B2345; --navy-2:#12305A; --navy-dark:#081A34;
  --brand-red:#D7262D; --brand-red-dark:#B31E24;
  --grey-50:#F4F6F9; --tp-green:#00B67A;
}
.btn-red2{ background:var(--brand-red); color:#fff; border-color:var(--brand-red); box-shadow:0 8px 20px rgba(215,38,45,0.30); }
.btn-red2:hover{ background:var(--brand-red-dark); border-color:var(--brand-red-dark); transform:translateY(-2px); }
.btn-navy-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.55); }
.btn-navy-outline:hover{ background:#fff; color:var(--navy); border-color:#fff; transform:translateY(-2px); }
.hero-navy{ position:relative; overflow:hidden; color:#fff; background:radial-gradient(125% 130% at 80% 42%, #18386f 0%, #0B2345 56%, #081A34 100%); padding:70px 24px 150px; }
.hero-navy .hero-inner{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.06fr; gap:52px; align-items:center; }
.hero-copy{ max-width:600px; }
.hero-navy h1{ font-size:clamp(40px,5.2vw,66px); font-weight:800; letter-spacing:-1.8px; line-height:1.05; color:#fff; margin-bottom:20px; }
.hero-navy h1 em{ font-style:normal; color:#fff; }
.hero-navy .lead{ font-size:19px; line-height:1.62; color:#bcc8db; max-width:540px; margin-bottom:30px; opacity:1; }
.hero-navy .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:26px; }
.hero-trustpilot{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; color:#c9d5e8; flex-wrap:wrap; }
.hero-trustpilot .tp-label{ font-weight:600; color:#fff; }
.hero-trustpilot .tp-stars{ display:inline-flex; gap:3px; }
.hero-trustpilot .tp-stars i{ width:20px; height:20px; background:var(--tp-green); display:inline-flex; align-items:center; justify-content:center; border-radius:3px; color:#fff; font-style:normal; font-size:12px; line-height:1; }
.hero-trustpilot .tp-name{ font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:5px; }
.hero-media{ position:relative; }
.hero-van{ display:block; width:116%; max-width:none; margin-right:-16%; border-radius:22px; box-shadow:0 40px 70px rgba(0,0,0,0.45); }
.trust-bar-wrap{ background:var(--paper); padding:0 24px 6px; }
.trust-bar{ max-width:min(1240px,94vw); margin:-84px auto 0; position:relative; z-index:5; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 60px rgba(11,35,69,0.13); display:grid; grid-template-columns:repeat(4,1fr); padding:14px; }
.trust-card{ text-align:center; padding:28px 22px; position:relative; }
.trust-card + .trust-card::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--line); }
.trust-ico{ width:58px; height:58px; border-radius:50%; background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.trust-ico svg{ width:26px; height:26px; }
.trust-card h3{ font-size:16.5px; font-weight:700; color:var(--navy); margin-bottom:8px; letter-spacing:-0.2px; }
.trust-card p{ font-size:13.5px; line-height:1.55; color:var(--muted); max-width:220px; margin:0 auto; }
@media (max-width:960px){
  .hero-navy{ padding:48px 20px 118px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-media{ order:2; }
  .hero-van{ width:100%; margin-right:0; }
  .trust-bar{ grid-template-columns:repeat(2,1fr); margin-top:-64px; }
  .trust-card::before{ display:none; }
  .trust-card:nth-child(2)::before{ display:block; }
}
@media (max-width:560px){
  .trust-bar{ grid-template-columns:1fr; }
  .trust-card::before{ display:none !important; }
  .trust-card + .trust-card{ border-top:1px solid var(--line); }
}

/* brand cohesion on the hub: navy announcement bar + navy section labels */
.announce{ background:var(--navy); }
.sec-eyebrow{ color:var(--navy); }

/* --- premium pass: navy footer + navy why-us icon circles --- */
footer{ background:var(--navy); }
.footer-identity .footer-mark{ height:54px; }
/* why-us icons kept original green */

/* cohesion: navy whole-home-plan band + red team CTA */
.combined-cta{ background:var(--navy); }
.office-text .btn-green{ background:var(--brand-red); border-color:var(--brand-red); }
.office-text .btn-green:hover{ background:var(--brand-red-dark); border-color:var(--brand-red-dark); }

/* accessibility: reduced motion + visible keyboard focus */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #3B82F6; outline-offset:2px; border-radius:6px;
}

/* WHY CHOOSE — navy split with home photo */
.why-split-sec{ background:var(--paper); }
.why-split{ display:grid; grid-template-columns:1.04fr 1fr; border-radius:28px; overflow:hidden; background:var(--navy); box-shadow:0 30px 60px rgba(11,35,69,0.16); }
.why-panel{ background:var(--navy); color:#fff; padding:clamp(34px,4vw,58px); display:flex; flex-direction:column; justify-content:center; }
.why-eyebrow{ font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:#8fb0e6; margin-bottom:14px; }
.why-h2{ font-size:clamp(28px,3vw,40px); font-weight:800; letter-spacing:-1px; line-height:1.12; margin-bottom:28px; color:#fff; }
.why-list{ list-style:none; display:flex; flex-direction:column; gap:18px; margin:0; padding:0; }
.why-list li{ display:flex; gap:14px; align-items:flex-start; }
.why-tick{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--brand-red); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.why-tick svg{ width:14px; height:14px; }
.why-list li strong{ display:block; font-size:16px; font-weight:700; color:#fff; margin-bottom:2px; letter-spacing:-0.2px; }
.why-list li span{ display:block; font-size:14px; color:#bcc8db; line-height:1.5; }
.why-photo{ position:relative; min-height:440px; }
.why-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .why-split{ grid-template-columns:1fr; }
  .why-photo{ min-height:260px; order:2; }
}

/* LIGHT HERO (replaces navy per feedback) — wider copy, 2-line title */
.hero-light{ position:relative; overflow:hidden; color:var(--ink);
  background:radial-gradient(130% 120% at 78% 22%, #ffffff 0%, var(--cream) 60%);
  padding:60px 24px 150px; }
.hero-light .hero-grid{ grid-template-columns:1.35fr 1fr; gap:44px; align-items:center; }
.hero-light .hero-copy{ max-width:720px; }
.hero-light h1{ font-size:clamp(42px,5.6vw,68px); font-weight:800; letter-spacing:-2px; line-height:1.05; color:var(--navy); margin-bottom:20px; }
.hero-light h1 em{ font-style:normal; color:var(--navy); }
.hero-light .lead{ font-size:19px; line-height:1.6; color:var(--ink-soft); max-width:580px; margin-bottom:26px; opacity:1; }
.hero-light .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:24px; }
.hero-light .btn-navy-outline{ background:#fff; color:var(--navy); border-color:#c9cfda; }
.hero-light .btn-navy-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.hero-light .hero-trustpilot{ color:var(--ink-soft); }
.hero-light .hero-trustpilot .tp-label{ color:var(--ink); }
.hero-light .hero-trustpilot .tp-name{ color:var(--ink); }
@media (max-width:960px){ .hero-light .hero-grid{ grid-template-columns:1fr; } }

/* HERO van: full-bleed on the right, faded into cream (better fit) */
.hero-light{ position:relative; overflow:hidden; min-height:600px; display:flex; align-items:center; background:var(--cream); padding:76px 24px 150px; }
.hero-light .hero-media{ position:absolute; top:0; right:0; bottom:0; width:60%; z-index:1; }
.hero-light .hero-media .hero-van{ width:100%; height:100%; object-fit:cover; object-position:50% 54%; border-radius:0; box-shadow:none; margin:0; max-width:none; }
.hero-light .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--cream) 0%, var(--cream) 6%, rgba(250,246,238,0.55) 30%, rgba(250,246,238,0) 60%); }
.hero-light .hero-inner{ position:relative; z-index:2; width:100%; }
.hero-light .hero-copy{ max-width:600px; }
@media (max-width:900px){
  .hero-light{ display:flex; flex-direction:column; min-height:0; padding:52px 20px 120px; }
  .hero-light .hero-inner{ order:1; }
  .hero-light .hero-media{ order:2; position:relative; width:auto; height:250px; margin:26px -20px 0; border-radius:18px; overflow:hidden; }
  .hero-light .hero-media::after{ background:linear-gradient(0deg, var(--cream) 0%, rgba(250,246,238,0) 48%); }
}

/* hero balance: two-line title + van bleed */
.hero-light .hero-media{ width:50%; }
.hero-light .hero-media .hero-van{ object-position:46% 55%; }
.hero-light .hero-copy{ max-width:780px; }
.hero-light h1{ font-size:clamp(40px,4.6vw,58px); letter-spacing:-1.6px; }
@media (max-width:900px){ .hero-light .hero-media{ width:auto; } }

/* nudge van left so the rear isn't cut off */
.hero-light .hero-media .hero-van{ object-position:70% 54%; }

/* bigger hero title + bigger trust-bar cards */
.hero-light h1{ font-size:clamp(44px,5.2vw,68px); letter-spacing:-2px; }
.hero-light .hero-copy{ max-width:840px; }
.trust-ico{ width:70px; height:70px; margin-bottom:18px; }
.trust-ico svg{ width:32px; height:32px; }
.trust-card{ padding:36px 26px; }
.trust-card h3{ font-size:19px; margin-bottom:10px; }
.trust-card p{ font-size:15px; max-width:250px; line-height:1.6; }

/* larger description text under the trust icons */
.trust-card p{ font-size:16.5px; max-width:265px; line-height:1.6; }

/* keep hero subheading narrow (3–4 lines), clear of the van */
.hero-light .lead{ max-width:460px !important; }

/* ============ HERO v2 — cutout van, pill, red-accent headline, markers ============ */
.hero-v2{ position:relative; overflow:hidden; background:var(--cream); color:var(--ink); padding:52px 24px 150px; }
.hero-v2 .hero-inner{ display:grid; grid-template-columns:1.08fr 0.92fr; gap:20px; align-items:center; }
.hero-pill{ display:inline-block; background:#8b95a3; color:#fff; font-size:12px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; padding:9px 18px; border-radius:100px; margin-bottom:22px; }
.hero-v2 h1{ font-size:clamp(42px,5.4vw,64px); font-weight:800; letter-spacing:-1.9px; line-height:1.03; color:var(--navy); margin-bottom:22px; max-width:760px; }
.hero-v2 h1 em{ font-style:normal; color:var(--brand-red); }
.hero-v2 .lead{ font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:500px; margin-bottom:26px; }
.hero-v2 .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.hero-markers{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; padding-top:26px; border-top:1px solid var(--line); max-width:540px; }
.hmk{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:600; color:var(--ink); }
.hmk svg{ width:22px; height:22px; flex-shrink:0; stroke:var(--brand-red); color:var(--brand-red); }
.hero-cutout{ position:relative; }
.hero-cutout img{ display:block; width:120%; max-width:none; margin-left:-8%; margin-right:-14%; filter:drop-shadow(0 28px 26px rgba(11,35,69,0.20)); }
@media (max-width:920px){
  .hero-v2{ padding:40px 20px 120px; }
  .hero-v2 .hero-inner{ grid-template-columns:1fr; gap:6px; }
  .hero-cutout{ order:2; }
  .hero-cutout img{ width:100%; margin:14px 0 0; }
  .hero-markers{ max-width:none; }
}

/* hero-v2: legible secondary CTA on the light background */
.hero-v2 .btn-navy-outline{ background:#fff; color:var(--navy); border-color:#c9cfda; }
.hero-v2 .btn-navy-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* hero-v2 layout: wide two-line title above the van; van fully on-screen */
.hero-v2 .hero-inner{ display:block; }
.hero-head{ position:relative; z-index:3; }
.hero-v2 h1{ max-width:1060px; margin-bottom:0; }
.hero-body{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:20px; align-items:start; }
.hero-body .hero-copy{ padding-top:20px; position:relative; z-index:2; }
.hero-cutout{ margin-top:-120px; position:relative; z-index:1; }
.hero-cutout img{ width:100%; max-width:none; margin:0; }
@media (max-width:920px){
  .hero-body{ grid-template-columns:1fr; }
  .hero-cutout{ margin-top:8px; order:2; }
  .hero-cutout img{ width:100%; }
  .hero-v2 h1{ max-width:none; }
}

/* drop the hero van down a little */
.hero-cutout{ margin-top:-72px; }

/* larger hero title, scales up on wide screens */
.hero-v2 h1{ font-size:clamp(46px,5.6vw,84px); max-width:none; letter-spacing:-2.2px; }

/* hero-v2 flow — copy wraps the van silhouette; bigger title */
.hero-flow{ display:block; }
.hero-van-float{
  float:right; width:53%; max-width:none;
  shape-outside:url('/assets/van-cutout.webp');
  shape-margin:26px;
  margin:135px -3% 12px 34px;
  filter:drop-shadow(0 24px 26px rgba(11,35,69,0.18));
}
.hero-v2 h1{ font-size:clamp(50px,6.4vw,94px); max-width:none; letter-spacing:-2.4px; line-height:1.02; }
.hero-flow .lead{ max-width:none; }
.hero-markers{ clear:both; max-width:560px; }
@media (max-width:920px){
  .hero-van-float{ float:none; width:100%; shape-outside:none; margin:16px 0 0; }
  .hero-v2 h1{ font-size:clamp(40px,9vw,60px); letter-spacing:-1.4px; }
}

/* more gap between hero title and paragraph */
.hero-v2 h1{ margin-bottom:26px; }

/* swap hero float from van to shield mascot — mascot is more compact/landscape */
.hero-van-float{
  width:50%;
  shape-outside:url('/assets/mascot-cutout.webp');
  shape-margin:20px;
  margin:96px -2% 10px 30px;
  filter:drop-shadow(0 22px 24px rgba(11,35,69,0.16));
}
@media (max-width:920px){
  .hero-van-float{ float:none; width:88%; margin:14px auto 0; display:block; }
}

/* ============================================================
   Brand-lockup hero — mark + wordmark + tagline + explainer,
   keeping the CTA buttons and trust markers below.
   ============================================================ */
.hero-lockup{ padding:54px 24px 120px; overflow:hidden; }
.hero-lockup .hero-inner{ max-width:1120px; margin:0 auto; text-align:center; }

.hero-lockup .lockup{
  display:inline-flex; align-items:center; gap:46px;
  text-align:left; margin:6px 0 30px; max-width:100%;
}
.hero-lockup .lockup-mark{
  width:clamp(220px,24vw,370px); height:auto; flex:none;
  filter:drop-shadow(0 16px 22px rgba(11,35,69,0.12));
}
.hero-lockup .lockup-text{ flex:0 1 auto; min-width:0; }

.wordmark{ display:inline-block; }
.wordmark .wm-top{ display:flex; align-items:center; gap:16px; padding:0 2px 5px; }
.wm-the{ font-size:clamp(32px,4vw,58px); font-weight:800; letter-spacing:.13em; color:#969ba3; line-height:1; }
.wm-rule{ display:flex; align-items:center; gap:9px; flex:1; }
.wm-rule .r-red{ display:block; width:32px; height:5px; border-radius:3px; background:var(--brand-red); }
.wm-rule .r-navy{ display:block; height:4px; border-radius:3px; background:var(--navy); flex:1; }
.wm-name{ font-size:clamp(58px,8vw,126px); font-weight:900; letter-spacing:-.5px; color:var(--navy); line-height:.9; }

.brand-tagline{ font-size:clamp(19px,2.15vw,30px); font-weight:800; color:var(--navy); letter-spacing:-.3px; margin:17px 0 22px; }
.brand-tagline .ts-red{ color:var(--brand-red); }

.brand-points{ list-style:none; margin:0; padding:0; display:grid; gap:13px; max-width:560px; }
.brand-points li{ display:flex; align-items:flex-start; gap:13px; }
.bp-ico{ flex:none; width:26px; display:flex; justify-content:center; margin-top:1px; }
.bp-ico svg{ width:24px; height:24px; }
.bp-red{ color:var(--brand-red); }
.bp-navy{ color:var(--navy); }
.bp-txt{ font-size:clamp(14px,1.35vw,16.5px); line-height:1.42; color:#5d6672; font-weight:500; }

/* keep CTAs + markers, centred under the lockup */
.hero-lockup .hero-cta{ justify-content:center; margin:32px 0 8px; gap:30px; }
.hero-lockup .hero-markers{ margin-left:auto; margin-right:auto; text-align:left; }

@media (max-width:880px){
  .hero-lockup .lockup{ flex-direction:column; gap:20px; text-align:center; }
  .wordmark .wm-top{ justify-content:center; }
  .wm-rule{ max-width:190px; }
  .brand-tagline{ text-align:center; }
  .brand-points{ text-align:left; margin:0 auto; max-width:440px; }
}

/* ============================================================
   Cream hero-zone sweeps into the paper divisions zone (curve)
   + 'Everything your home needs. One team to call.' lead-in
   ============================================================ */
.trust-bar-wrap{ background:var(--cream); }          /* unify hero + trust cards as one cream zone */
.zone-curve{ background:var(--cream); line-height:0; }
.zone-curve svg{ display:block; width:100%; height:clamp(38px,4.6vw,66px); }

.leadin-inner{ max-width:1680px; margin:0 auto; padding:6px 24px 0; text-align:center; }
.leadin-title{ font-size:clamp(30px,3.9vw,52px); font-weight:800; line-height:1.05; letter-spacing:-1px; color:var(--navy); margin:0 0 14px; }
.leadin-title .ts-red{ color:var(--brand-red); }
.leadin-sub{ font-size:clamp(15px,1.5vw,18px); line-height:1.55; color:#5c6570; max-width:620px; margin:0 auto 26px; }
@media (max-width:720px){
  .leadin-inner{ text-align:center; padding-left:20px; padding-right:20px; }
}
/* ==================================================================
   ABOUT PAGE — aligned with redesigned hub / Roof / Renewable pages
   ================================================================== */
.about2-page{ background:var(--paper); color:var(--ink); }
.about2-shell{ width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.about2-eyebrow{ font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--navy); margin-bottom:14px; }
.about2-eyebrow-light{ color:#9bb6df; }
.about2-page h1,.about2-page h2,.about2-page h3{ color:var(--navy); }
.about2-page h2{ font-size:clamp(34px,4vw,52px); font-weight:800; letter-spacing:-1.4px; line-height:1.08; }

.about2-hero{ position:relative; overflow:hidden; padding:64px 0 128px; background:radial-gradient(100% 115% at 82% 20%,#fff 0%,#faf6ee 63%,#f3ecde 100%); }
.about2-hero::before{ content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(11,35,69,.08); border-radius:50%; right:-180px; top:-210px; box-shadow:0 0 0 52px rgba(215,38,45,.025),0 0 0 108px rgba(11,35,69,.025); }
.about2-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:58px; align-items:center; }
.about2-hero-copy h1{ max-width:650px; font-size:clamp(48px,6vw,78px); font-weight:850; line-height:1.01; letter-spacing:-2.8px; margin:0 0 23px; }
.about2-hero-copy h1 span{ color:var(--brand-red); }
.about2-lead{ font-size:19px; line-height:1.65; color:#53606c; max-width:580px; margin:0 0 30px; }
.about2-hero-actions{ display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
.about2-outline{ background:#fff; color:var(--navy); border-color:#cfd5df; box-shadow:0 8px 20px rgba(11,35,69,.06); }
.about2-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px); }
.about2-hero-note{ display:flex; align-items:center; gap:12px; margin-top:28px; color:var(--navy); }
.about2-note-icon{ width:39px; height:39px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(11,35,69,.09); color:var(--brand-red); }
.about2-note-icon svg{ width:20px; height:20px; }
.about2-hero-note strong,.about2-hero-note small{ display:block; }
.about2-hero-note strong{ font-size:14px; }
.about2-hero-note small{ font-size:12.5px; color:#697480; margin-top:2px; }
.about2-hero-media{ position:relative; min-height:485px; }
.about2-hero-media>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:28px; box-shadow:0 34px 70px rgba(11,35,69,.21); }
.about2-hero-media::after{ content:""; position:absolute; inset:0; border-radius:28px; background:linear-gradient(180deg,transparent 54%,rgba(7,25,50,.55)); pointer-events:none; }
.about2-photo-card{ position:absolute; z-index:2; left:24px; bottom:24px; width:min(360px,calc(100% - 48px)); background:rgba(11,35,69,.93); color:#fff; padding:20px 22px; border:1px solid rgba(255,255,255,.17); border-radius:17px; backdrop-filter:blur(8px); }
.about2-photo-card img{ height:32px; width:auto; margin-bottom:9px; }
.about2-photo-card p{ margin:0; font-size:13.5px; color:#d5deeb; line-height:1.5; }

.about2-trust-wrap{ padding:0 24px; background:var(--paper); }
.about2-trust{ width:min(1240px,100%); margin:-70px auto 0; position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 26px 56px rgba(11,35,69,.13); padding:12px; }
.about2-trust-item{ display:flex; align-items:center; gap:13px; padding:23px 20px; position:relative; }
.about2-trust-item+.about2-trust-item::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:var(--line); }
.about2-trust-item>span{ width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
.about2-trust-item svg{ width:22px; height:22px; }
.about2-trust-item strong,.about2-trust-item small{ display:block; }
.about2-trust-item strong{ font-size:14.5px; color:var(--navy); line-height:1.3; }
.about2-trust-item small{ font-size:12px; color:#73808a; margin-top:3px; line-height:1.35; }

.about2-section{ padding:100px 0; }
.about2-paper{ background:var(--paper); }
.about2-cream{ background:var(--cream); }
.about2-story-grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:72px; align-items:center; padding-top:20px; }
.about2-story-copy h2{ margin:0 0 25px; max-width:570px; }
.about2-story-copy p{ font-size:16.5px; line-height:1.78; color:#59656f; margin:0 0 18px; }
.about2-story-copy .about2-intro{ font-size:18px; color:#37434d; }
.about2-story-copy strong{ color:var(--navy); }
.about2-home-photo{ position:relative; min-height:500px; }
.about2-home-photo>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:28px; box-shadow:0 28px 60px rgba(11,35,69,.14); }
.about2-home-badge{ position:absolute; left:-28px; bottom:34px; background:#fff; border-left:5px solid var(--brand-red); border-radius:13px; padding:16px 22px; box-shadow:0 18px 40px rgba(11,35,69,.16); }
.about2-home-badge span,.about2-home-badge strong{ display:block; }
.about2-home-badge span{ font-size:12px; color:#77818b; text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.about2-home-badge strong{ font-size:18px; color:var(--navy); margin-top:2px; }

.about2-insight{ background:var(--navy); color:#fff; padding:92px 0; position:relative; overflow:hidden; }
.about2-insight::after{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; border:1px solid rgba(255,255,255,.08); right:-250px; bottom:-310px; box-shadow:0 0 0 70px rgba(255,255,255,.025); }
.about2-insight-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start; }
.about2-insight h2{ color:#fff; max-width:560px; }
.about2-insight-copy{ padding-left:38px; border-left:1px solid rgba(255,255,255,.18); }
.about2-insight-copy p{ color:#c8d3e2; font-size:16.5px; line-height:1.75; margin:0 0 17px; }
.about2-insight-copy p:first-child{ color:#fff; font-size:20px; font-weight:650; line-height:1.5; }

.about2-heading{ max-width:710px; margin-bottom:44px; }
.about2-heading-center{ text-align:center; margin-left:auto; margin-right:auto; }
.about2-heading h2{ margin-bottom:17px; }
.about2-heading p{ font-size:17px; line-height:1.65; color:#62707a; }
.about2-divisions{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.about2-division{ min-height:430px; border-radius:27px; overflow:hidden; position:relative; display:flex; align-items:stretch; box-shadow:0 22px 50px rgba(11,35,69,.1); }
.about2-roof{ background:linear-gradient(135deg,#fff 0%,#fff 58%,#f7e6e8 100%); border:1px solid #ecd2d5; }
.about2-renew{ background:linear-gradient(135deg,#fff 0%,#fff 58%,#e5f0e9 100%); border:1px solid #d3e4d9; }
.about2-division::before{ content:""; position:absolute; right:-110px; bottom:-160px; width:360px; height:360px; border-radius:50%; background:rgba(11,35,69,.045); }
.about2-division-copy{ position:relative; z-index:2; width:62%; padding:42px 0 38px 40px; display:flex; flex-direction:column; align-items:flex-start; }
.about2-division-logo{ width:auto; height:48px; margin-bottom:26px; }
.about2-division-copy p{ font-size:15.5px; line-height:1.7; color:#5c6872; margin-bottom:24px; }
.about2-text-link{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:750; font-size:14.5px; text-decoration:none; color:var(--navy); }
.about2-text-link:hover{ color:var(--brand-red); }
.about2-mascot{ position:absolute; z-index:1; object-fit:contain; object-position:bottom right; right:-58px; bottom:-35px; width:54%; height:82%; }
.about2-mascot-roof{ right:-48px; }
.about2-mascot-renew{ right:-58px; }

.about2-care-grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:24px; align-items:center; }
.about2-care-panel{ background:var(--navy); border-radius:27px; color:#fff; padding:52px; display:flex; flex-direction:column; justify-content:center; min-height:430px; }
.about2-care-panel h2{ color:#fff; margin:0 0 23px; }
.about2-care-panel p{ color:#c9d3e1; font-size:16px; line-height:1.72; margin:0 0 16px; }
.about2-care-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.about2-care-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 26px; display:flex; flex-direction:column; justify-content:center; min-height:216px; transition:.2s ease; }
.about2-care-card:hover{ transform:translateY(-4px); box-shadow:0 20px 45px rgba(11,35,69,.08); }
.about2-card-num{ font-size:14px; font-weight:800; letter-spacing:1.4px; color:var(--brand-red); margin-bottom:16px; }
.about2-care-card h3{ font-size:23px; margin:0 0 12px; }
.about2-care-card p{ font-size:14px; color:#69757e; line-height:1.65; }

.about2-smallprint-section{ padding-top:78px; padding-bottom:78px; }
.about2-plain-card{ background:#fff; border:1px solid var(--line); border-radius:25px; padding:42px 48px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; box-shadow:0 18px 45px rgba(11,35,69,.07); }
.about2-plain-icon{ width:58px; height:58px; border-radius:50%; background:#fce9ea; color:var(--brand-red); display:flex; align-items:center; justify-content:center; }
.about2-plain-icon svg{ width:27px; height:27px; }
.about2-plain-card h2{ font-size:clamp(27px,3vw,39px); margin:0 0 13px; }
.about2-plain-card p{ font-size:15.5px; color:#5f6b75; line-height:1.7; max-width:920px; }

.about2-final{ background:linear-gradient(130deg,#102b53 0%,#081a34 100%); color:#fff; padding:88px 0; }
.about2-final-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; }
.about2-final h2{ color:#fff; margin:0 0 20px; max-width:700px; }
.about2-final p{ max-width:720px; color:#c4cfde; font-size:16px; line-height:1.72; margin:0 0 13px; }
.about2-final-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding-left:34px; border-left:1px solid rgba(255,255,255,.17); }
.about2-final-phone{ color:#fff; text-decoration:none; }
.about2-final-phone small,.about2-final-phone strong{ display:block; }
.about2-final-phone small{ color:#aabbd1; text-transform:uppercase; letter-spacing:1.2px; font-size:11px; font-weight:700; margin-bottom:3px; }
.about2-final-phone strong{ font-size:27px; letter-spacing:-.5px; }

@media (max-width:1050px){
  .about2-hero-grid,.about2-story-grid,.about2-insight-grid,.about2-care-grid,.about2-final-grid{ grid-template-columns:1fr; }
  .about2-hero-media{ min-height:440px; }
  .about2-trust{ grid-template-columns:repeat(2,1fr); }
  .about2-trust-item::before{ display:none; }
  .about2-trust-item:nth-child(even)::before{ display:block; }
  .about2-home-photo{ min-height:420px; }
  .about2-home-badge{ left:24px; }
  .about2-insight-copy{ padding-left:0; border-left:none; }
  .about2-divisions{ grid-template-columns:1fr; }
  .about2-care-cards{ min-height:auto; }
  .about2-care-card{ min-height:auto; }
  .about2-final-actions{ padding-left:0; border-left:none; }
}
@media (max-width:760px){
  .about2-shell{ width:min(100% - 36px,1240px); }
  .about2-hero{ padding:46px 0 105px; }
  .about2-hero-copy h1{ font-size:clamp(42px,13vw,62px); letter-spacing:-1.9px; }
  .about2-lead{ font-size:17px; }
  .about2-hero-media{ min-height:335px; }
  .about2-photo-card{ left:14px; bottom:14px; width:calc(100% - 28px); }
  .about2-trust-wrap{ padding:0 18px; }
  .about2-trust{ grid-template-columns:1fr; margin-top:-58px; }
  .about2-trust-item+.about2-trust-item{ border-top:1px solid var(--line); }
  .about2-trust-item::before{ display:none!important; }
  .about2-section{ padding:72px 0; }
  .about2-story-grid{ gap:42px; }
  .about2-home-photo{ min-height:320px; }
  .about2-home-badge{ left:14px; bottom:14px; }
  .about2-insight{ padding:72px 0; }
  .about2-divisions{ gap:18px; }
  .about2-division{ min-height:520px; }
  .about2-division-copy{ width:100%; padding:34px 30px 0; }
  .about2-division-copy p{ max-width:100%; }
  .about2-mascot{ width:74%; height:55%; right:-12%; bottom:-28px; }
  .about2-care-panel{ padding:38px 30px; min-height:auto; }
  .about2-care-cards{ grid-template-columns:1fr; }
  .about2-care-card{ min-height:auto; }
  .about2-plain-card{ grid-template-columns:1fr; padding:32px 28px; }
  .about2-final{ padding:72px 0; }
}

/* about page — mobile: division mascot sits below the copy, clear of the link */
@media (max-width:640px){
  .about2-division{ min-height:auto; flex-direction:column; }
  .about2-division-copy{ width:100%; padding:32px 28px 18px; }
  .about2-mascot{ position:static; width:66%; height:auto; margin:4px auto 0; right:auto; bottom:auto; }
  .about2-mascot-roof, .about2-mascot-renew{ right:auto; }
}

/* ==================================================================
   CONTACT PAGE — reuses the About2 design language
   ================================================================== */
.contact2-page .about2-shell{ width:min(1360px,calc(100% - 48px)); }
.contact2-hero-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:4px; }
.contact2-hours{ display:flex; flex-direction:column; padding-left:22px; border-left:1px solid var(--line); line-height:1.3; }
.contact2-hours span{ font-size:14px; color:#5c6872; font-weight:600; }
.contact2-hours strong{ font-size:19px; color:var(--navy); font-weight:800; }

.contact2-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:40px; align-items:start; }
.contact2-left{ display:flex; flex-direction:column; }
.contact2-lead-head{ max-width:none; margin-bottom:26px; }
.contact2-cards{ display:flex; flex-direction:column; gap:16px; }

.contact2-call{ display:flex; align-items:center; gap:18px; background:var(--navy); color:#fff; border-radius:20px; padding:24px 26px; text-decoration:none; box-shadow:0 18px 40px rgba(11,35,69,.14); transition:transform .18s ease, box-shadow .18s ease; }
.contact2-call:hover{ transform:translateY(-3px); box-shadow:0 24px 50px rgba(11,35,69,.2); }
.contact2-call-icon{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--brand-red); display:grid; place-items:center; }
.contact2-call-icon svg{ width:24px; height:24px; color:#fff; }
.contact2-call-body{ display:flex; flex-direction:column; flex:1; }
.contact2-call-body small{ font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:700; }
.contact2-call-body strong{ font-size:26px; font-weight:800; letter-spacing:-.5px; margin:2px 0; }
.contact2-call-sub{ font-size:14.5px; color:rgba(255,255,255,.72); }
.contact2-call .contact2-arrow{ flex:none; color:rgba(255,255,255,.75); }

.contact2-email{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:16px; padding:20px 22px; text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease; }
.contact2-email:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(11,35,69,.1); }
.contact2-email-roof{ border-left-color:var(--brand-red); }
.contact2-email-renew{ border-left-color:#178A47; }
.contact2-email-logo{ flex:none; width:118px; height:auto; }
.contact2-email-body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.contact2-email-body strong{ font-size:16.5px; color:var(--navy); font-weight:750; word-break:break-word; }
.contact2-email-body span{ font-size:14.5px; color:#5c6872; margin-top:3px; }
.contact2-email .contact2-arrow{ flex:none; color:#b7bfca; }
.contact2-email-roof:hover .contact2-arrow{ color:var(--brand-red); }
.contact2-email-renew:hover .contact2-arrow{ color:#178A47; }

.contact2-note{ display:flex; align-items:flex-start; gap:14px; background:rgba(215,38,45,.055); border:1px solid rgba(215,38,45,.12); border-radius:14px; padding:18px 20px; }
.contact2-note-icon{ flex:none; width:34px; height:34px; border-radius:9px; background:#fff; display:grid; place-items:center; color:var(--brand-red); box-shadow:0 4px 12px rgba(215,38,45,.12); }
.contact2-note-icon svg{ width:20px; height:20px; }
.contact2-note p{ font-size:15px; line-height:1.55; color:#5c6872; margin:0; }
.contact2-note strong{ color:var(--navy); }

.contact2-form{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:42px 44px 46px; box-shadow:0 22px 50px rgba(11,35,69,.08); }
.contact2-form-title{ font-size:clamp(26px,2.6vw,34px); font-weight:800; letter-spacing:-.5px; color:var(--navy); margin:2px 0 10px; line-height:1.1; }
.contact2-form-intro{ font-size:16px; line-height:1.6; color:#5c6872; margin:0 0 26px; }
.contact2-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact2-field{ margin-bottom:18px; }
.contact2-field label{ display:block; font-size:14px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.contact2-field input,
.contact2-field select,
.contact2-field textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-family:inherit; font-size:16.5px; color:var(--ink); background:var(--paper); transition:border-color .15s ease, box-shadow .15s ease; }
.contact2-field textarea{ resize:vertical; min-height:120px; }
.contact2-field input::placeholder,
.contact2-field textarea::placeholder{ color:#9aa3ad; }
.contact2-field input:focus,
.contact2-field select:focus,
.contact2-field textarea:focus{ outline:none; border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(215,38,45,.14); background:#fff; }
.contact2-submit{ width:100%; justify-content:center; margin-top:6px; }

.contact2-visit{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.contact2-visit-copy p{ font-size:16px; line-height:1.8; color:#5c6872; margin-top:6px; }
.contact2-visit-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-left:56px; border-left:1px solid var(--line); }
.contact2-visit-brand img{ width:230px; height:auto; }
.contact2-visit-brand p{ font-size:15.5px; line-height:1.6; color:#5c6872; margin:0; max-width:330px; }

@media (max-width:860px){
  .contact2-grid{ grid-template-columns:1fr; gap:22px; }
  .contact2-visit{ grid-template-columns:1fr; gap:26px; }
  .contact2-visit-brand{ padding-left:0; border-left:none; padding-top:26px; border-top:1px solid var(--line); }
}
@media (max-width:560px){
  .contact2-form{ padding:28px 22px 30px; }
  .contact2-form-row{ grid-template-columns:1fr; gap:0; }
  .contact2-call-body strong{ font-size:22px; }
  .contact2-email-logo{ width:104px; }
}

/* contact hero: brand caption sits under the call button (left column), not over the photo */
.contact2-page .about2-hero-media::after{ display:none; }
.contact2-brand-card{ position:static; width:auto; max-width:430px; margin-top:24px; backdrop-filter:none; box-shadow:0 16px 36px rgba(11,35,69,.14); }

/* ==================================================================
   THANK YOU PAGE
   ================================================================== */
.ty-page{ background:var(--cream); }
.ty-hero{ padding:56px 24px 10px; }
.ty-card{ max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:28px; box-shadow:0 30px 66px rgba(11,35,69,.10); padding:48px 46px 40px; text-align:center; }
.ty-check{ width:76px; height:76px; border-radius:50%; background:rgba(46,158,88,.14); color:#2E9E58; display:grid; place-items:center; margin:0 auto 24px; }
.ty-check svg{ width:34px; height:34px; }
.ty-card h1{ font-size:clamp(34px,4vw,46px); font-weight:900; letter-spacing:-1px; color:var(--navy); margin:0 0 8px; line-height:1.05; }
.ty-sub{ font-size:clamp(17px,1.8vw,20px); font-weight:700; color:var(--navy); margin:0 0 16px; }
.ty-lead{ font-size:15.5px; line-height:1.7; color:#5c6872; margin:0 auto; max-width:450px; }
.ty-divider{ height:1px; background:var(--line); margin:34px 0 30px; }
.ty-callrow{ display:inline-flex; align-items:center; gap:16px; text-decoration:none; text-align:left; }
.ty-callrow-icon{ flex:none; width:56px; height:56px; border-radius:50%; background:rgba(215,38,45,.10); color:var(--brand-red); display:grid; place-items:center; }
.ty-callrow-icon svg{ width:24px; height:24px; }
.ty-callrow-body{ display:flex; flex-direction:column; }
.ty-callrow-body small{ font-size:13.5px; color:#5c6872; }
.ty-callrow-body strong{ font-size:22px; font-weight:800; color:var(--navy); letter-spacing:-.3px; margin:2px 0; }
.ty-callrow-hours{ font-size:13px; color:#5c6872; }

.ty-next{ padding:52px 24px 84px; }
.ty-shell{ max-width:1120px; margin:0 auto; }
.ty-next-head{ text-align:center; margin-bottom:38px; }
.ty-eyebrow{ font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--brand-red); margin-bottom:12px; }
.ty-next-head h2{ font-size:clamp(30px,3.6vw,44px); font-weight:900; letter-spacing:-1px; color:var(--navy); margin:0 0 12px; }
.ty-next-head p{ font-size:16px; color:#5c6872; margin:0; }

.ty-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:22px; }
.ty-step{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:0 16px 38px rgba(11,35,69,.05); }
.ty-step-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.ty-step-ico{ width:50px; height:50px; border-radius:14px; background:rgba(215,38,45,.10); color:var(--brand-red); display:grid; place-items:center; }
.ty-step-ico svg{ width:24px; height:24px; }
.ty-step-num{ font-size:17px; font-weight:800; color:var(--brand-red); letter-spacing:.5px; }
.ty-step h3{ font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.4px; margin:0 0 10px; }
.ty-step p{ font-size:14px; line-height:1.6; color:#5c6872; margin:0; }

.ty-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; }
.ty-action{ display:flex; align-items:center; justify-content:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; text-decoration:none; color:var(--navy); font-weight:750; font-size:15px; box-shadow:0 10px 26px rgba(11,35,69,.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ty-action:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(11,35,69,.10); border-color:#cfd6e0; }
.ty-action img{ height:26px; width:auto; }
.ty-action svg{ color:var(--brand-red); }
.ty-action-brand{ justify-content:space-between; }

.ty-assist{ display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 28px; box-shadow:0 16px 40px rgba(11,35,69,.06); }
.ty-assist-icon{ flex:none; width:52px; height:52px; border-radius:50%; background:rgba(215,38,45,.10); color:var(--brand-red); display:grid; place-items:center; }
.ty-assist-icon svg{ width:24px; height:24px; }
.ty-assist-copy{ flex:1; display:flex; flex-direction:column; }
.ty-assist-copy strong{ font-size:16.5px; color:var(--navy); font-weight:800; }
.ty-assist-copy span{ font-size:14px; color:#5c6872; margin-top:2px; }
.ty-assist-btn{ flex:none; }
.ty-assist-hours{ flex:none; font-size:13.5px; color:#5c6872; }

@media (max-width:820px){
  .ty-steps{ grid-template-columns:1fr; }
  .ty-actions{ grid-template-columns:1fr; }
  .ty-assist{ flex-wrap:wrap; }
  .ty-assist-copy{ flex-basis:100%; }
  .ty-assist-hours{ order:3; }
}
@media (max-width:560px){
  .ty-card{ padding:36px 24px 32px; }
  .ty-assist{ flex-direction:column; align-items:flex-start; }
  .ty-assist-btn{ width:100%; justify-content:center; }
}

/* ==================================================================
   LEGAL PAGES (Privacy / Terms) — brand styled
   ================================================================== */
.legal2-page{ background:var(--cream); }
.legal2-wrap{ max-width:860px; margin:0 auto; padding:52px 24px 84px; }
.legal-header{ margin-bottom:8px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.legal-eyebrow{ font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--brand-red); margin-bottom:12px; }
.legal-header h1{ font-size:clamp(32px,4vw,46px); font-weight:900; letter-spacing:-1.2px; line-height:1.08; color:var(--navy); margin:0 0 10px; }
.legal-header .legal-sub{ font-size:17px; color:#5c6872; margin:0 0 6px; }
.legal-header .legal-version{ font-size:13.5px; color:#8a94a0; margin:0; }
.legal-callout{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--brand-red); border-radius:14px; padding:20px 24px; margin:28px 0 34px; font-size:15px; line-height:1.65; color:#41505c; box-shadow:0 12px 30px rgba(11,35,69,.05); }
.legal-callout strong{ display:block; margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--brand-red); font-weight:800; }
.legal-brand-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 8px; }
.legal-brand-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; text-decoration:none; color:var(--navy); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.legal-brand-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(11,35,69,.08); border-color:#cfd6e0; }
.legal-brand-card strong{ display:block; font-size:16.5px; margin-bottom:4px; color:var(--navy); }
.legal-brand-card span{ font-size:13.5px; color:#5c6872; }
.legal-body{ margin-top:14px; }
.legal-body h2{ font-size:22px; font-weight:800; letter-spacing:-.5px; margin:42px 0 14px; padding-bottom:10px; border-bottom:2px solid var(--line); color:var(--navy); }
.legal-body h3{ font-size:16px; font-weight:700; margin:22px 0 8px; color:var(--navy); }
.legal-body p, .legal-body li{ font-size:15.5px; line-height:1.72; color:#3f4954; }
.legal-body p{ margin:0 0 14px; }
.legal-body ul{ padding-left:22px; margin:10px 0 16px; }
.legal-body li{ margin-bottom:7px; }
.legal-body a{ color:var(--brand-red); font-weight:600; text-decoration:none; }
.legal-body a:hover{ text-decoration:underline; }
.legal-body em{ color:#69737e; font-style:italic; }
.legal-controller{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin:20px 0 30px; font-size:15px; line-height:1.7; color:#3f4954; box-shadow:0 10px 26px rgba(11,35,69,.04); }
.legal-controller strong{ color:var(--navy); }
.legal-footer{ margin-top:46px; padding-top:26px; border-top:1px solid var(--line); font-size:14px; color:#69737e; }
.legal-footer a{ color:var(--brand-red); font-weight:600; text-decoration:none; }
.legal-footer strong{ color:var(--navy); }
@media (max-width:640px){
  .legal2-wrap{ padding:36px 18px 60px; }
  .legal-brand-cards{ grid-template-columns:1fr; }
}

/* Boiler Helpline purple/navy branding: homepage and footer */
.choose-btn.boiler-card{background:linear-gradient(155deg,#fbf8ff,#efe6fc)!important;border:2px solid #d7bdeb!important;box-shadow:0 16px 35px rgba(11,35,73,.08);color:#102b50!important;display:flex;flex-direction:column;gap:12px;}
.boiler-card .boiler-eyebrow{color:#7416ba;font-weight:850;letter-spacing:.1em;font-size:13px;}
.choose-btn.boiler-card h2{color:#102b50!important;margin:0;}
.choose-btn.boiler-card p{color:#334562!important;margin-bottom:0;}
.boiler-card .choose-list li{color:#152e53!important;}
.boiler-card .choose-list li::before{background:#e8d2ff!important;}
.boiler-card .choose-list li::after{border-color:#7416ba!important;}
.boiler-card .choose-meta{border-top:1px solid #d8c2ec;}
.boiler-card .choose-price{color:#102b50!important;}
.boiler-card .choose-price strong{color:#7416ba!important;}
.boiler-card .choose-note{color:#435371!important;}
.boiler-card .visit{color:#7416ba!important;}
.footer-brand-tile.footer-boiler-brand{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#102b50!important;padding:10px 17px;text-decoration:none;min-height:63px;}
.footer-boiler-brand span:last-child{display:flex;flex-direction:column;line-height:1;font-size:19px;letter-spacing:-.035em;}
.footer-boiler-brand small{font-size:12px;font-weight:900;color:#7416ba;letter-spacing:.12em;}
.footer-boiler-brand strong{font-size:19px;font-weight:900;color:#102b50;}
.footer-boiler-icon{display:grid;place-items:center;border:3px solid #102b50;color:#7416ba;width:39px;height:39px;border-radius:50%;font-size:24px;}
@media(max-width:720px){.choose-btn.boiler-card{min-height:unset}.footer-boiler-brand strong{font-size:16px}}


/* Mobile launch audit: keep full email addresses and cards within narrow viewports. */
@media (max-width: 560px) {
  .contact2-email { gap: 10px; padding: 15px 12px; min-width: 0; }
  .contact2-email-logo { width: clamp(58px, 21vw, 90px); max-width: 27%; height: auto; }
  .contact2-email-body { min-width: 0; }
  .contact2-email-body strong { font-size: clamp(12px, 3.45vw, 15px); overflow-wrap: anywhere; word-break: normal; }
  .contact2-email-body span { font-size: 12.5px; overflow-wrap: anywhere; }
  .contact2-email .contact2-arrow { flex: 0 0 16px; width: 16px; }
  .footer-grid, .footer-grid > *, .footer-col { min-width: 0; }
  .footer-col a, .footer-grid a { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .contact2-email { gap: 8px; padding: 12px 9px; }
  .contact2-email-logo { width: 55px; }
}

/* Contact card logo alignment: identical visual slots for each division. */
.contact2-email-logo {
  display:block;
  flex:0 0 118px;
  width:118px;
  height:62px;
  object-fit:contain;
  object-position:center;
}
@media (max-width:560px) {
  .contact2-email-logo {
    flex:0 0 clamp(70px, 22vw, 94px);
    width:clamp(70px, 22vw, 94px);
    max-width:none;
    height:54px;
    object-fit:contain;
  }
}
@media (max-width:360px) {
  .contact2-email-logo {
    flex-basis:70px;
    width:70px;
    height:48px;
  }
}

/* About: expandable specialist Helplines directory. */
.about2-divisions{grid-template-columns:repeat(2,minmax(0,1fr));}
.about2-boiler{background:linear-gradient(135deg,#fff 0%,#fff 58%,#f1e6f7 100%);border:1px solid #e6d5ef;}
.about2-boiler .about2-division-logo{object-fit:contain;object-position:left center;}
.about2-growth-note{max-width:790px;margin:30px auto 0;text-align:center;line-height:1.7;color:var(--muted);}
@media(max-width:760px){
  .about2-divisions{grid-template-columns:1fr;}
  .about2-boiler .about2-division-copy{width:68%;}
}
@media(max-width:420px){
  .about2-boiler .about2-division-copy{width:75%;}
}

/* Contact page: Boiler artwork has more internal whitespace than other logos.
   Increase only its rendered image size while retaining the same aligned logo slot. */
.contact2-email-boiler .contact2-email-logo{
  transform:scale(1.28);
  transform-origin:center;
}
@media(max-width:560px){
  .contact2-email-boiler .contact2-email-logo{transform:scale(1.25);}
}

/* Shared homepage division card system. All future Helplines use choose-btn + theme. */
.choose-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;}
.choose-row>.choose-btn{min-width:0;min-height:100%;gap:0;background:#fff;}
.choose-row>.choose-btn .choose-logo{height:54px;width:240px;max-width:100%;object-fit:contain;object-position:left center;align-self:flex-start;margin-bottom:20px;}
.choose-row>.choose-btn .choose-eyebrow{margin-bottom:18px;}
.choose-row>.choose-btn .choose-list{margin-bottom:24px;}
.choose-row>.choose-btn .choose-meta{margin-top:auto;}
.choose-row>.choose-btn .visit{margin-top:0;}
.bg-purple .choose-eyebrow{background:#f1e8f8;color:#7134a0;}
.bg-purple .choose-price strong,.bg-purple .visit{color:#7134a0;}
.bg-purple .choose-list li::before{background:#f1e8f8;}
.bg-purple .choose-list li::after{border-color:#7134a0;}
.choose-btn.bg-purple:hover{border-color:#7134a0;}
.bg-yellow .choose-eyebrow{background:#fff3d6;color:#986300;}
.bg-yellow .choose-price strong,.bg-yellow .visit{color:#b57900;}
.bg-yellow .choose-list li::before{background:#fff3d6;}
.bg-yellow .choose-list li::after{border-color:#d59600;}
.choose-btn.bg-yellow:hover{border-color:#d59600;}
@media(max-width:760px){
  .choose-row{grid-template-columns:1fr;}
  .choose-row>.choose-btn .choose-logo{width:min(240px,100%);height:48px;}
}
@media(max-width:420px){
  .choose-row>.choose-btn{padding:28px 22px;}
  .choose-row>.choose-btn h2{font-size:clamp(28px,8vw,38px);}
}

/* Helplines navigation menu — click label, vertical dropdown */
.nav-links .helplines-nav-dropdown{position:relative;display:flex;align-items:center;z-index:100;}
.nav-links .helplines-nav-dropdown>summary{display:block;list-style:none;cursor:pointer;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-soft,#334155);white-space:nowrap;text-decoration:none;}
.nav-links .helplines-nav-dropdown>summary::-webkit-details-marker{display:none;}
.nav-links .helplines-nav-dropdown>summary::marker{content:"";}
.nav-links .helplines-nav-dropdown>summary:hover,.nav-links .helplines-nav-dropdown[open]>summary{background:rgba(0,0,0,.045);color:#132b4c;}
.nav-links .helplines-nav-dropdown>summary:focus-visible{outline:2px solid #dc1022;outline-offset:3px;}
.nav-links .helplines-nav-options{position:absolute;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;top:calc(100% + 13px);left:0;width:max-content;min-width:235px;padding:9px;background:#fff;border:1px solid #e2e7ee;border-radius:12px;box-shadow:0 14px 35px rgba(10,35,68,.16);z-index:200;}
.nav-links .helplines-nav-options>a,.nav-links .helplines-nav-coming-soon{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 12px;border-radius:8px;line-height:1.4;font-size:14px;font-weight:500;text-decoration:none!important;color:#182f4b;white-space:nowrap;box-sizing:border-box;}
.nav-links .helplines-nav-options>a:hover,.nav-links .helplines-nav-options>a:focus-visible{background:#f0f5fb;color:#c90c22;}
.nav-links .helplines-nav-coming-soon{color:#778194;}
.nav-links .helplines-nav-coming-soon small{font-size:11px;color:#778194;background:#f1f3f6;border-radius:12px;padding:3px 7px;}
@media(max-width:960px){.nav-links .helplines-nav-dropdown{display:none;}}

/* Match the Helplines dropdown trigger to the other desktop navigation links. */
@media(min-width:961px){.nav-links .helplines-nav-dropdown>summary.nav-link{font-size:18px;padding:10px 16px;font-weight:500;line-height:normal;}}

/* Keep all Helpline footer logo tiles visually consistent. */
.footer-brands .footer-brand-tile{box-sizing:border-box;min-width:198px;min-height:64px;display:flex;align-items:center;justify-content:center;}
.footer-brands .footer-brand-tile.footer-boiler-brand{padding:6px 12px;}
.footer-brands .footer-brand-tile.footer-boiler-brand img{height:56px;width:auto;max-width:100%;object-fit:contain;transform:none;}
@media(max-width:420px){.footer-brands .footer-brand-tile{min-width:min(198px,100%);}}