/* ============================================================
   ROOF HELPLINE — premium redesign
   Navy + red identity, Inter, generous whitespace.
   Author: The Helplines design system
   ------------------------------------------------------------
   Contents
   1.  Design tokens (:root)
   2.  Reset & base
   3.  Layout utilities (container, section, eyebrow)
   4.  Buttons
   5.  Accessibility (skip link, focus)
   6.  Announcement bar
   7.  Header / nav
   8.  Mobile nav (burger, drawer, backdrop)  [JS state]
   9.  Hero
   10. Membership plans + whole-home strip
   11. Steps (how it works)
   12. Why join (navy band)
   13. What's included
   14. FAQ  [JS state]
   15. Final CTA
   16. Footer
   17. Checkout modal  [JS state]
   18. Responsive
   19. Reduced motion
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --navy:#0B2345;
  --navy-2:#12305A;
  --red:#D7262D;
  --red-dark:#B31E24;
  --ink:#1A2520;
  --muted:#5c6670;
  --cream:#FAF6EE;
  --paper:#FFFDF8;
  --hairline:#E7E1D6;
  --white:#FFFFFF;

  --red-tint:rgba(215,38,45,.10);
  --navy-tint:rgba(11,35,69,.06);

  --shadow-card:0 20px 45px rgba(11,35,69,.10);
  --shadow-soft:0 8px 24px rgba(11,35,69,.07);
  --shadow-lift:0 30px 60px rgba(11,35,69,.16);

  --radius-card:22px;
  --radius-lg:24px;
  --radius-pill:100px;

  --container:1200px;
  --nav-h:74px;
}

/* ---------- 2. RESET & BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}
strong{font-weight:700;}
em{font-style:normal;}

/* keep sticky-nav from covering anchored sections */
[id]{scroll-margin-top:calc(var(--nav-h) + 18px);}

/* ---------- 3. LAYOUT UTILITIES ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.section{padding:88px 0;}
.section--paper{background:var(--paper);}
.section--cream{background:var(--cream);}
.section--navy{background:var(--navy);color:#fff;}

.section-head{max-width:680px;margin-bottom:52px;}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}

.eyebrow{
  display:inline-block;
  font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px;
}
.eyebrow--onnavy{color:#fff;}

.section-title{
  font-size:clamp(30px,4vw,46px);
  font-weight:800;letter-spacing:-1.4px;line-height:1.08;
  color:inherit;
}
.section--navy .section-title{color:#fff;}
.section-sub{
  margin-top:16px;
  font-size:17px;line-height:1.65;color:var(--muted);
  max-width:600px;
}
.section-head--center .section-sub{margin-left:auto;margin-right:auto;}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;line-height:1;
  border:1.6px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease;
}
.btn--sm{padding:10px 18px;font-size:14px;}
.btn--lg{padding:16px 30px;font-size:16.5px;font-weight:700;}

.btn--red{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 10px 24px rgba(215,38,45,.22);}
.btn--red:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(215,38,45,.30);}

.btn--outline{background:transparent;color:var(--navy);border-color:var(--hairline);}
.btn--outline:hover{background:#fff;border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-soft);}

.btn--ghost{background:transparent;color:var(--navy);border-color:var(--hairline);}
.btn--ghost:hover{background:var(--cream);border-color:var(--navy-2);}

.btn--cream{background:#fff;color:var(--red-dark);border-color:#fff;}
.btn--cream:hover{background:var(--cream);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18);}

.btn--onred-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn--onred-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}

/* ---------- 5. ACCESSIBILITY ---------- */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:2000;
  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 ease;
}
.skip-link:focus{top:0;}

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;
}
.section--navy a:focus-visible,.section--navy button:focus-visible,
footer a:focus-visible,footer button:focus-visible,
.final-cta button:focus-visible,.announce a:focus-visible{
  outline-color:#fff;
}

/* ---------- 6. ANNOUNCEMENT BAR ---------- */
.announce{
  background:var(--navy);color:rgba(255,255,255,.9);
  padding:10px 24px;text-align:center;
  font-size:13.5px;font-weight:500;letter-spacing:.2px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;
}
.ann-item{display:inline-flex;align-items:center;}
.ann-phone{color:var(--red);flex-shrink:0;margin-right:7px;}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);font-weight:600;}
.announce a:hover{text-decoration-color:#fff;}
.announce-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin:0 14px;flex-shrink:0;}
.ann-secondary{opacity:.82;}

/* ---------- 7. HEADER / NAV ---------- */
nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,253,248,.88);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.nav-left{display:flex;align-items:center;gap:14px;min-width:0;}
.hub-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  color:var(--muted);background:transparent;border:1px solid transparent;
  white-space:nowrap;transition:all .15s ease;
}
.hub-back:hover{color:var(--navy);background:var(--cream);border-color:var(--hairline);}
.hub-back svg{flex-shrink:0;transition:transform .18s ease;}
.hub-back:hover svg{transform:translateX(-2px);}
.hub-divider{width:1px;height:26px;background:var(--hairline);flex-shrink:0;}
.nav-logo{cursor:pointer;display:flex;align-items:center;}
.nav-logo img{height:40px;width:auto;}

.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{
  padding:9px 14px;border-radius:10px;
  font-size:14.5px;font-weight:500;
  background:transparent;border:none;color:var(--ink);
  transition:all .15s ease;
}
.nav-link:hover{background:var(--navy-tint);color:var(--navy);}
.nav-link.act-b{color:var(--navy);font-weight:700;}

.nav-right{display:flex;align-items:center;gap:10px;}

/* ---------- 8. MOBILE NAV (burger / drawer / backdrop) ---------- */
.nav-burger{
  display:none;background:none;border:0;
  width:44px;height:44px;padding:9px;
  flex-direction:column;justify-content:center;gap:6px;align-items:stretch;margin-left:2px;
}
.nav-burger span{
  display:block;height:3px;border-radius:2px;background:var(--navy);
  transition:transform .22s ease,opacity .18s ease;
}
.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(11,20,36,.5);
  opacity:0;transition:opacity .22s ease;
}
.nav-backdrop.open{opacity:1;}

.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:300;
  width:min(86vw,344px);background:var(--paper);
  border-left:1px solid var(--hairline);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:18px 22px 26px;
  overflow-y:auto;box-shadow:-24px 0 60px rgba(11,35,69,.16);
}
.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;color:var(--ink);
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:-8px;
  border-radius:10px;transition:background .15s ease;
}
.nav-drawer-close:hover{background:var(--cream);}
.nav-drawer-links{display:flex;flex-direction:column;border-top:1px solid var(--hairline);}
.nav-drawer-links a{
  padding:16px 2px;border-bottom:1px solid var(--hairline);
  color:var(--ink);text-decoration:none;font-size:17px;font-weight:600;
  transition:color .15s ease;
}
.nav-drawer-links a:hover{color:var(--red);}
.nav-drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.nav-portal,.nav-phone{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;text-decoration:none;
}
.nav-portal{background:transparent;color:var(--navy);border:1.6px solid var(--hairline);}
.nav-portal:hover{background:var(--cream);}
.nav-phone{background:var(--red);color:#fff;border:1.6px solid var(--red);}
.nav-phone:hover{background:var(--red-dark);}

body.nav-open{overflow:hidden;}

/* ---------- 9. HERO ---------- */
.hero{
  background:var(--cream);
  padding:64px 0 72px;
  position:relative;overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hero-logo{height:auto;width:clamp(220px,26vw,300px);margin-bottom:26px;}
.hero h1{
  font-size:clamp(40px,6vw,72px);
  font-weight:800;letter-spacing:-2.4px;line-height:1.02;
  color:var(--navy);
}
.hero h1 em{color:var(--red);}
.hero .lead{
  margin-top:22px;
  font-size:19px;line-height:1.6;color:var(--ink);max-width:540px;
}
.hero .lead-soft{color:var(--muted);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}

.hero-chips{
  list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;
  margin-top:38px;padding-top:32px;border-top:1px solid var(--hairline);
  max-width:520px;
}
.chip{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink);}
.chip-ico{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--red-tint);color:var(--red);
}
.chip-ico svg{width:18px;height:18px;}

.hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:360px;
}
.hero-artline{
  position:absolute;
  width:min(120%,640px);height:auto;
  stroke:var(--navy);stroke-width:5;fill:none;
  opacity:.06;z-index:0;
  stroke-linecap:round;stroke-linejoin:round;
}
.hero-mascot{
  position:relative;z-index:1;
  width:100%;max-width:560px;height:auto;
  filter:drop-shadow(0 24px 40px rgba(11,35,69,.18));
}

/* ---------- 10. MEMBERSHIP PLANS ---------- */
.plan-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  align-items:stretch;
}
.plan{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:30px 26px;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);}
.plan--featured{
  border:2px solid var(--red);
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(215,38,45,.16);
}
.plan--featured:hover{transform:translateY(-11px);}

.plan-tag{
  display:inline-block;width:fit-content;
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--navy-tint);color:var(--navy);
  margin-bottom:18px;
}
.plan-tag--pop{background:var(--red);color:#fff;}
.plan-name{font-size:23px;font-weight:800;letter-spacing:-.6px;color:var(--navy);}
.plan-tagline{font-size:14px;line-height:1.55;color:var(--muted);margin-top:8px;min-height:44px;}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-top:18px;}
.plan-price .num{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--red);}
.plan-price .per{font-size:15px;font-weight:600;color:var(--muted);}
.plan-was{font-size:13px;color:var(--muted);margin-top:8px;min-height:20px;}
.plan-was strike{text-decoration:line-through;}

.plan-features{list-style:none;margin:22px 0 26px;flex:1;}
.plan-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.5;padding:9px 0;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
}
.plan-features li:last-child{border-bottom:none;}
.plan-features strong{color:var(--navy);}
.tick{
  flex-shrink:0;width:19px;height:19px;border-radius:50%;
  background:var(--red-tint);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;margin-top:1px;
}

.plan-btn{
  width:100%;padding:13px;border-radius:var(--radius-pill);
  font-weight:700;font-size:14.5px;
  border:1.6px solid var(--red);
  transition:all .18s ease;
}
.plan-btn--out{background:#fff;color:var(--red);}
.plan-btn--out:hover{background:var(--red-tint);}
.plan-btn--fill{background:var(--red);color:#fff;box-shadow:0 10px 22px rgba(215,38,45,.24);}
.plan-btn--fill:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px);}

/* whole-home strip */
.wholehome{
  margin-top:44px;
  background:var(--navy);color:#fff;border-radius:var(--radius-lg);
  padding:44px 46px;
  display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;
  box-shadow:var(--shadow-card);
}
.wholehome-text h3{font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.7px;line-height:1.18;margin-bottom:12px;}
.wholehome-text p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);margin-bottom:24px;max-width:560px;}
.wholehome-price{text-align:center;border-left:1px solid rgba(255,255,255,.18);padding-left:40px;}
.wholehome-now{display:flex;align-items:baseline;justify-content:center;gap:4px;}
.wholehome-now .num{font-size:62px;font-weight:800;letter-spacing:-2.5px;line-height:1;color:#fff;}
.wholehome-now .per{font-size:18px;color:rgba(255,255,255,.7);}
.wholehome-was{font-size:14px;color:rgba(255,255,255,.7);margin-top:8px;}
.wholehome-was strike{text-decoration:line-through;}
.wholehome-features{list-style:none;margin:0 0 26px;padding:0;columns:2;column-gap:28px;max-width:560px;}
.wholehome-features li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.9);padding:7px 0;break-inside:avoid;}
.wholehome-features .tick{background:rgba(255,255,255,.16);color:#fff;}

/* small-print / service agreement note */
.plan-smallprint{
  max-width:760px;margin:32px auto 0;
  padding:18px 24px;
  background:#fff;border:1px solid var(--hairline);border-radius:14px;
  font-size:13.5px;color:var(--muted);line-height:1.65;
}
.plan-smallprint strong{color:var(--navy);}

/* ---------- 11. STEPS ---------- */
.steps{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  position:relative;
}
/* connecting line behind the numbered circles */
.steps::before{
  content:"";position:absolute;top:56px;left:16%;right:16%;height:2px;
  background:repeating-linear-gradient(to right,var(--hairline) 0 10px,transparent 10px 18px);
  z-index:0;
}
.step{
  position:relative;z-index:1;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:34px 28px;box-shadow:var(--shadow-card);
}
.step-num{
  width:56px;height:56px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;letter-spacing:-.5px;
  margin-bottom:20px;box-shadow:0 10px 22px rgba(215,38,45,.24);
}
.step h4{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--navy);margin-bottom:8px;}
.step p{font-size:14.5px;color:var(--muted);line-height:1.65;}

/* ---------- 12. WHY JOIN (navy band) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.why-tile{
  background:#fff;
  border:1px solid rgba(11,35,69,.06);
  border-radius:var(--radius-card);
  padding:32px 26px;
  box-shadow:0 18px 42px rgba(0,0,0,.16);
}
.why-ico{
  width:52px;height:52px;border-radius:14px;
  border:none;color:var(--red);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;background:rgba(215,38,45,.10);
}
.why-ico svg{width:26px;height:26px;}
.why-tile h3{font-size:18.5px;font-weight:800;letter-spacing:-.4px;color:var(--navy);margin-bottom:9px;}
.why-tile p{font-size:14px;line-height:1.6;color:#5c6670;}

/* ---------- 13. WHAT'S INCLUDED ---------- */
.included-grid{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;
}
.included-visual{position:relative;display:flex;flex-direction:column;align-items:center;}
.speech-bubble{
  position:relative;
  background:#fff;border:1px solid var(--hairline);border-radius:18px;
  padding:18px 22px;margin-bottom:26px;
  font-size:15px;font-weight:600;line-height:1.5;color:var(--navy);
  box-shadow:var(--shadow-soft);max-width:360px;
}
.speech-bubble::after{
  content:"";position:absolute;bottom:-11px;left:44px;
  width:22px;height:22px;background:#fff;
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  transform:rotate(45deg);
}
.included-mascot{width:100%;max-width:440px;filter:drop-shadow(0 20px 36px rgba(11,35,69,.16));}

.included-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.card{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:28px 26px;box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.card-ico{
  width:48px;height:48px;border-radius:12px;
  background:var(--red-tint);color:var(--red);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card-ico svg{width:24px;height:24px;}
.card h3{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--navy);margin-bottom:9px;}
.card p{font-size:14px;line-height:1.6;color:var(--muted);}

/* ---------- 14. FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq{
  background:#fff;border:1px solid var(--hairline);border-radius:16px;
  overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease;
}
.faq.open{border-color:rgba(215,38,45,.35);box-shadow:var(--shadow-card);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;
  padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;font-size:16px;color:var(--navy);
}
.faq-q:hover{color:var(--red);}
.faq-chev{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--navy-tint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:transform .28s ease,background .2s ease,color .2s ease;
}
.faq.open .faq-chev{transform:rotate(180deg);background:var(--red);color:#fff;}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
  padding:0 24px;
}
.faq.open .faq-a{max-height:340px;padding:0 24px 22px;}
.faq-a p{font-size:15px;line-height:1.7;color:var(--muted);}
.faq-a a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ---------- 15. FINAL CTA ---------- */
.final-cta{
  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff;text-align:center;
}
.final-cta-inner{max-width:680px;}
.final-cta .section-title{color:#fff;}
.final-cta-sub{margin-top:16px;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.9);}
.final-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;}

/* ---------- 16. FOOTER ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.85);padding:68px 0 34px;}
.footer-grid{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:44px;
}
.footer-brand img{height:44px;width:auto;background:#fff;border-radius:8px;padding:6px 10px;margin-bottom:18px;}
.footer-brand p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.62);}
.footer-col h4{font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:11px;}
.footer-col ul li a{font-size:14px;color:rgba(255,255,255,.78);text-decoration:none;cursor:pointer;transition:color .15s ease;}
.footer-col ul li a:hover{color:#fff;}
.footer-bottom{
  max-width:var(--container);margin:0 auto;padding:28px 24px 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-size:12.5px;color:rgba(255,255,255,.5);
}
.footer-bottom em{opacity:.7;font-style:italic;}
.footer-bottom a{color:rgba(255,255,255,.6);text-decoration:none;cursor:pointer;}
.footer-bottom a:hover{color:#fff;}

/* ---------- 17. 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 .2s ease both;}
@keyframes coFade{from{opacity:0}to{opacity:1}}
.co-backdrop{
  position:absolute;inset:0;
  background:rgba(11,20,36,.62);
  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 -24px 70px rgba(11,35,69,.28);
  animation:coSlideUp .3s cubic-bezier(.2,.9,.3,1) both;
  -webkit-overflow-scrolling:touch;
}
@keyframes coSlideUp{from{transform:translateY(60px);opacity:.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;z-index:10;
  width:38px;height:38px;border-radius:50%;
  background:var(--cream);border:none;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;
}
.co-close:hover{background:var(--hairline);color:var(--ink);}
.co-title{
  font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--navy);
  text-align:center;margin-bottom:22px;padding:0 30px;
}
.co-summary{
  background:var(--cream);border:1px solid var(--hairline);border-radius:16px;
  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(--red);}
.co-summary-price #co-price-amount{font-size:38px;font-weight:800;letter-spacing:-1px;}
.co-price-per{font-size:18px;font-weight:600;color:var(--muted);}
.co-summary-meta{font-size:13px;color:var(--muted);margin-top:8px;min-height:18px;}
.co-summary-meta .save{color:var(--red);font-weight:700;}

.co-toggle-row{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:10px 18px;margin-bottom:22px;
}
.co-toggle-label{font-size:14px;font-weight:600;color:var(--muted);transition:color .18s ease;}
.co-toggle-label.active{color:var(--navy);}
.co-toggle{
  position:relative;width:46px;height:26px;
  background:var(--hairline);border-radius:var(--radius-pill);border:none;padding:0;
  transition:background .2s ease;
}
.co-toggle.on{background:var(--red);}
.co-toggle-knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .2s ease;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.co-toggle.on .co-toggle-knob{transform:translateX(20px);}
.co-toggle-badge{
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--red-tint);color:var(--red);
  font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
}

.co-addon-note{
  background:var(--navy-tint);border:1px solid var(--hairline);border-radius:12px;
  padding:14px 16px;margin:4px 0 18px;
}
.co-addon-note h4{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.co-addon-note p{font-size:13px;line-height:1.55;color:var(--muted);}

.submit-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 22px;border-radius:var(--radius-pill);
  background:var(--red);color:#fff;border:none;
  font-weight:700;font-size:15.5px;
  box-shadow:0 12px 26px rgba(215,38,45,.26);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.submit-btn:hover{background:var(--red-dark);transform:translateY(-1px);}
#co-go-btn.co-loading{opacity:.65;cursor:default;transform:none;}

.co-terms-note{font-size:11.5px;color:var(--muted);text-align:center;margin:14px 0 0;line-height:1.6;}
.co-terms-note a{color:var(--muted);text-decoration:underline;}
.co-secure{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline);}
.co-secure strong{color:var(--navy);font-weight:700;}

body.co-locked{overflow:hidden;}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */

/* Wider desktop breathing room — scale the content column up on large screens */
@media(min-width:1280px){ :root{--container:1300px;} }
@media(min-width:1440px){ :root{--container:1400px;} }
@media(min-width:1680px){ :root{--container:1560px;} }
@media(min-width:1920px){ :root{--container:1680px;} }

/* Tablet landscape — plans and why go 2 across */
@media(max-width:1080px){
  .plan-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .nav-right .btn--ghost{display:none;}
  .nav-links{gap:2px;}
  .nav-link{padding:8px 10px;font-size:13.5px;}
}

/* Collapse desktop nav → burger (matches main.js 900px breakpoint) */
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-right .btn{display:none;}
  .section{padding:64px 0;}
  .hero{padding:44px 0 52px;}
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-visual{order:-1;min-height:auto;}
  .hero-mascot{max-width:420px;}
  .section-head{margin-bottom:38px;}
  .included-grid{grid-template-columns:1fr;gap:40px;}
  .included-visual{order:-1;}
  .wholehome{grid-template-columns:1fr;text-align:center;padding:36px 30px;}
  .wholehome-text p{margin-left:auto;margin-right:auto;}
  .wholehome-features{columns:1;text-align:left;margin-left:auto;margin-right:auto;}
  .wholehome-price{border-left:none;border-top:1px solid rgba(255,255,255,.18);padding-left:0;padding-top:26px;}
  .steps{grid-template-columns:1fr;gap:16px;}
  .steps::before{display:none;}
  .step{display:flex;align-items:flex-start;gap:20px;padding:24px 24px;}
  .step-num{margin-bottom:0;width:48px;height:48px;font-size:16px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}

/* Phones */
@media(max-width:640px){
  .hero-chips{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .included-cards{grid-template-columns:1fr;}
  .final-cta-btns{flex-direction:column;}
  .final-cta-btns .btn{width:100%;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

@media(max-width:560px){
  .container,.nav-inner,.footer-grid,.footer-bottom{padding-left:18px;padding-right:18px;}
  .section{padding:52px 0;}
  .announce{font-size:12.5px;padding:9px 16px;}
  .announce .announce-dot,.announce .ann-secondary{display:none;}
  .plan-grid{grid-template-columns:1fr;}
  .plan--featured{transform:none;}
  .plan--featured:hover{transform:translateY(-5px);}
  .hero h1{letter-spacing:-1.4px;}
  .hero .lead{font-size:17.5px;}
  .step{flex-direction:column;gap:16px;}
  .step-num{margin-bottom:4px;}
  .footer-grid{grid-template-columns:1fr;}
  .co-sheet{padding:32px 22px 24px;}
  .co-title{font-size:22px;padding:0 24px;}
}

@media(max-width:380px){
  .hub-back-label{display:none;}
  .nav-logo img{height:34px;}
}

/* ============================================================
   19. REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* cream hero sweeps into the paper plans zone — matches the hub curve */
.zone-curve{ background:var(--cream); line-height:0; }
.zone-curve svg{ display:block; width:100%; height:clamp(38px,4.6vw,66px); }

/* ---------- mobile polish pass ---------- */
.announce a{ white-space:nowrap; }
@media (max-width:640px){
  .hero-logo{ display:none; }            /* nav logo + mascot card already brand the hero */
  .plan-tagline{ min-height:0; }
  .plan-was{ min-height:0; }
  .plan-features{ margin-top:14px; }
}

/* ============================================================
   20. CONTACT PAGE REDESIGN  (rc- = roof contact)
   Ports the hub contact/about component language into the roof
   stylesheet, adapted to roof tokens + the red accent (--red).
   ============================================================ */
.rc-page{ background:var(--paper); color:var(--ink); }
.rc-shell{ width:min(1240px, calc(100% - 48px)); margin:0 auto; }
.rc-eyebrow{
  display:inline-block;
  font-size:12.5px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.rc-page h1,.rc-page h2{ color:var(--navy); }

/* ---- Hero ---- */
.rc-hero{
  position:relative; overflow:hidden;
  padding:64px 0 84px;
  background:radial-gradient(120% 130% at 82% 18%, #fff 0%, var(--cream) 60%, #f3ecde 100%);
}
.rc-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);
  pointer-events:none;
}
.rc-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center;
}
.rc-hero-copy h1{
  max-width:560px;
  font-size:clamp(46px,5.6vw,74px); font-weight:800; line-height:1.02;
  letter-spacing:-2.4px; margin:0 0 22px;
}
.rc-hero-copy h1 em{ color:var(--red); font-style:normal; }
.rc-lead{ font-size:19px; line-height:1.65; color:#53606c; max-width:520px; margin:0 0 28px; }
.rc-chips{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rc-chip{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-pill);
  padding:9px 16px 9px 13px;
  font-size:13.5px; font-weight:650; color:var(--navy);
  box-shadow:var(--shadow-soft);
}
.rc-chip svg{ width:17px; height:17px; color:var(--red); flex:none; }

.rc-hero-media{ position:relative; min-height:470px; }
.rc-hero-media>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:26px; box-shadow:0 34px 70px rgba(11,35,69,.21);
}
.rc-hero-media::after{
  content:""; position:absolute; inset:0; border-radius:26px;
  background:linear-gradient(180deg,transparent 50%,rgba(7,25,50,.62)); pointer-events:none;
}
.rc-photo-card{
  position:absolute; z-index:2; left:22px; right:22px; bottom:22px;
  display:flex; align-items:center; gap:15px;
  background:rgba(11,35,69,.92); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:14px 17px; backdrop-filter:blur(8px);
}
.rc-photo-badge{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:9px; padding:7px 11px;
}
.rc-photo-badge img{ height:26px; width:auto; display:block; }
.rc-photo-card p{ margin:0; font-size:13.5px; line-height:1.5; color:#dbe3ee; }

/* ---- Main: contact cards + form ---- */
.rc-main{ background:var(--paper); padding:96px 0; }
.rc-contact-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:30px; align-items:start; }
.rc-contact-left{ display:flex; flex-direction:column; }
.rc-contact-left>.rc-eyebrow{ margin-bottom:18px; }
.rc-cards{ display:flex; flex-direction:column; gap:16px; }

.rc-card{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--hairline); border-radius:18px;
  padding:22px 24px; box-shadow:var(--shadow-soft);
}
a.rc-card{ text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.rc-card:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(11,35,69,.12); border-color:#dcd6c9; }
.rc-card-icon{ flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; }
.rc-card-icon svg{ width:23px; height:23px; }
.rc-icon-solid{ background:var(--red); color:#fff; box-shadow:0 10px 22px rgba(215,38,45,.24); }
.rc-icon-tint{ background:var(--red-tint); color:var(--red); }
.rc-card-body{ display:flex; flex-direction:column; flex:1; min-width:0; }
.rc-card-body small{ font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); font-weight:700; }
.rc-card-body strong{ font-size:24px; font-weight:800; letter-spacing:-.5px; color:var(--navy); margin:3px 0 2px; line-height:1.12; }
.rc-card-body .rc-card-email{ font-size:18px; word-break:break-word; }
.rc-card-body .rc-card-place{ font-size:19px; }
.rc-card-sub{ font-size:13.5px; color:var(--muted); line-height:1.5; }
.rc-card-addr{ font-size:14.5px; color:var(--muted); line-height:1.6; margin-top:6px; }
.rc-card-arrow{ flex:none; width:20px; height:20px; color:#b7bfca; }
a.rc-card:hover .rc-card-arrow{ color:var(--red); }
.rc-card-note{ background:rgba(215,38,45,.05); border-color:rgba(215,38,45,.14); box-shadow:none; align-items:flex-start; }
.rc-card-note .rc-card-body strong{ font-size:22px; }

.rc-form{
  background:#fff; border:1px solid var(--hairline); border-radius:24px;
  padding:38px 38px 40px; box-shadow:var(--shadow-card);
}
.rc-form-title{ font-size:clamp(27px,2.6vw,36px); font-weight:800; letter-spacing:-.6px; color:var(--navy); margin:2px 0 10px; line-height:1.08; }
.rc-form-intro{ font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 26px; }
.rc-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.rc-field{ margin-bottom:18px; }
.rc-field label{ display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.rc-field input,
.rc-field select,
.rc-field textarea{
  width:100%; border:1px solid var(--hairline); border-radius:12px;
  padding:13px 15px; font-family:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.rc-field textarea{ resize:vertical; min-height:120px; }
.rc-field input::placeholder,
.rc-field textarea::placeholder{ color:#9aa3ad; }
.rc-field input:focus,
.rc-field select:focus,
.rc-field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(215,38,45,.14); background:#fff; }
.rc-form-note{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin:2px 0 18px; }
.rc-form-note svg{ width:17px; height:17px; color:var(--red); flex:none; }
.rc-submit{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--red); color:#fff; border:none; border-radius:13px;
  padding:16px 24px; font-family:inherit; font-size:16px; font-weight:700; line-height:1;
  box-shadow:0 12px 28px rgba(215,38,45,.26);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rc-submit svg{ width:18px; height:18px; }
.rc-submit:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 16px 34px rgba(215,38,45,.32); }

/* ---- Base band ---- */
.rc-base-band{ background:var(--cream); padding:80px 0; }
.rc-base{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.rc-base-copy h2{ font-size:clamp(30px,3.4vw,44px); font-weight:800; letter-spacing:-1.2px; margin:0; }
.rc-base-copy p{ font-size:16px; line-height:1.8; color:var(--muted); margin-top:10px; }
.rc-base-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-left:56px; border-left:1px solid var(--hairline); }
.rc-base-brand img{ width:210px; height:auto; }
.rc-base-brand p{ font-size:15.5px; line-height:1.6; color:var(--muted); margin:0; max-width:330px; }

/* ---- Responsive ---- */
@media (max-width:960px){
  .rc-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .rc-hero-copy h1{ max-width:none; }
  .rc-lead{ max-width:none; }
  .rc-hero-media{ min-height:420px; }
  .rc-contact-grid{ grid-template-columns:1fr; gap:24px; }
  .rc-base{ grid-template-columns:1fr; gap:28px; }
  .rc-base-brand{ padding-left:0; border-left:none; padding-top:26px; border-top:1px solid var(--hairline); }
}
@media (max-width:640px){
  .rc-shell{ width:min(100% - 36px, 1240px); }
  .rc-hero{ padding:44px 0 60px; }
  .rc-hero-copy h1{ font-size:clamp(40px,12vw,58px); letter-spacing:-1.6px; }
  .rc-lead{ font-size:17px; }
  .rc-hero-media{ min-height:330px; }
  .rc-main{ padding:64px 0; }
  .rc-base-band{ padding:60px 0; }
  .rc-form{ padding:28px 22px 30px; }
  .rc-form-row{ grid-template-columns:1fr; gap:0; }
  .rc-card{ padding:18px; gap:14px; }
  .rc-card-body strong{ font-size:21px; }
  .rc-card-body .rc-card-email{ font-size:16px; }
  .rc-photo-card{ left:14px; right:14px; bottom:14px; }
}

/* ============================================================
   20. SERVICES PAGE
   ============================================================ */
/* Trust / benefits strip */
.svc-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-benefit{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-card);padding:30px 26px;box-shadow:var(--shadow-card);}
.svc-b-ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;margin-bottom:18px;}
.svc-b-ico svg{width:25px;height:25px;}
.svc-benefit h3{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--navy);margin-bottom:9px;}
.svc-benefit p{font-size:14px;line-height:1.6;color:var(--muted);}

/* Featured services — alternating image / text */
.svc-feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.svc-feat + .svc-feat{margin-top:66px;}
.svc-feat-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3;background:var(--cream);}
.svc-feat-media img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-feat--rev .svc-feat-media{order:2;}
.svc-feat-num{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:800;letter-spacing:1px;color:var(--red);margin-bottom:14px;}
.svc-feat-num::after{content:"";width:34px;height:2px;background:var(--red);}
.svc-feat-body h3{font-size:clamp(23px,2.8vw,31px);font-weight:800;letter-spacing:-.9px;line-height:1.12;color:var(--navy);margin-bottom:14px;}
.svc-feat-body p{font-size:16px;line-height:1.7;color:var(--muted);max-width:470px;margin-bottom:14px;}
.svc-feat-sub{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:24px;}

/* Full services grid */
.svc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.svc-tile{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:26px 18px;text-align:center;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:154px;transition:transform .2s ease,box-shadow .2s ease;}
.svc-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);}
.svc-tile-ico{width:44px;height:44px;color:var(--red);display:flex;align-items:center;justify-content:center;}
.svc-tile-ico svg{width:38px;height:38px;}
.svc-tile-ico--red{color:var(--red);}
.svc-tile span{font-size:14px;font-weight:700;color:var(--navy);line-height:1.32;}

/* Membership cross-sell */
.svc-cross{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:40px 46px;display:grid;grid-template-columns:1.5fr .5fr;gap:30px;align-items:center;overflow:hidden;box-shadow:var(--shadow-card);}
.svc-cross-text h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.8px;line-height:1.12;color:var(--navy);margin-bottom:12px;}
.svc-cross-text p{font-size:15.5px;line-height:1.62;color:var(--muted);max-width:540px;margin-bottom:24px;}
.svc-cross-btns{display:flex;gap:12px;flex-wrap:wrap;}
.svc-cross-mascot{display:flex;justify-content:center;align-items:flex-end;}
.svc-cross-mascot img{width:100%;max-width:210px;height:auto;filter:drop-shadow(0 18px 30px rgba(11,35,69,.16));}

@media(max-width:1080px){
  .svc-benefits{grid-template-columns:repeat(2,1fr);}
  .svc-tiles{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:900px){
  .svc-feat{grid-template-columns:1fr;gap:26px;}
  .svc-feat--rev .svc-feat-media{order:-1;}
  .svc-feat-media{order:-1;}
  .svc-cross{grid-template-columns:1fr;text-align:center;padding:34px 30px;}
  .svc-cross-text p{margin-left:auto;margin-right:auto;}
  .svc-cross-btns{justify-content:center;}
  .svc-cross-mascot{order:-1;}
  .svc-cross-mascot img{max-width:170px;}
}
@media(max-width:640px){
  .svc-benefits{grid-template-columns:1fr;}
  .svc-tiles{grid-template-columns:repeat(2,1fr);}
  .svc-cross-btns{flex-direction:column;}
  .svc-cross-btns .btn{width:100%;}
}

/* ============================================================
   WIDE-SCREEN TYPOGRAPHY — scale text up with the wider layout
   ============================================================ */
@media(min-width:1440px){
  .hero h1{font-size:clamp(40px,6vw,80px);}
  .hero .lead{font-size:21px;max-width:600px;}
  .chip{font-size:16px;}
  .hero-chips{max-width:700px;gap:14px 26px;}
  .section-head{max-width:760px;}
  .section-title{font-size:clamp(30px,4vw,54px);}
  .section-sub{font-size:18.5px;max-width:660px;}
  .eyebrow{font-size:13.5px;}
  .nav-link{font-size:15.5px;}
  .btn{font-size:16px;}
  .btn--lg{font-size:17.5px;}
  .btn--sm{font-size:14.5px;}
  .card h3{font-size:19.5px;} .card p{font-size:15.5px;}
  .why-tile h3{font-size:20px;} .why-tile p{font-size:15.5px;}
  .plan-name{font-size:25px;} .plan-tagline{font-size:15px;} .plan-features li{font-size:15px;} .plan-price .num{font-size:52px;}
  .step h4{font-size:20.5px;} .step p{font-size:15.5px;}
  .faq-q{font-size:17.5px;} .faq-a p{font-size:16px;}
  .speech-bubble{font-size:16px;} .announce{font-size:14.5px;}
  .footer-col ul li a{font-size:15px;} .footer-brand p{font-size:14.5px;}
  .svc-benefit h3{font-size:19.5px;} .svc-benefit p{font-size:15.5px;}
  .svc-feat-body h3{font-size:clamp(23px,2.8vw,35px);} .svc-feat-body p{font-size:17.5px;max-width:520px;}
  .svc-feat-sub{font-size:15px;}
  .svc-tile span{font-size:15.5px;}
  .svc-cross-text h2{font-size:clamp(24px,2.6vw,35px);} .svc-cross-text p{font-size:17px;}
}
@media(min-width:1680px){
  .hero .lead{font-size:22px;}
  .section-sub{font-size:20px;}
  .card h3,.why-tile h3,.svc-benefit h3{font-size:20.5px;}
  .card p,.why-tile p,.svc-benefit p{font-size:16px;}
  .svc-feat-body p{font-size:18.5px;}
  .plan-price .num{font-size:56px;}
}

/* ============================================================
   WIDE-SCREEN HERO — close the gap, enlarge mascot/photo, widen text
   ============================================================ */
@media(min-width:1440px){
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:36px;}
  .hero .lead{max-width:700px;}
  .hero-mascot{max-width:740px;}
  .hero-artline{width:min(132%,820px);}
  .svc-hero-photo{max-width:700px;}
}
@media(min-width:1680px){
  .hero-grid{gap:28px;}
  .hero .lead{max-width:760px;}
  .hero-mascot{max-width:820px;}
  .hero-artline{width:min(134%,900px);}
  .svc-hero-photo{max-width:760px;}
}

/* ============================================================
   20. ABOUT + CONTACT PAGE COMPONENTS   (redesign, added)
   ------------------------------------------------------------
   about.html   -> mirrors the hub About layout (.about2-*)
   contact.html -> mirrors the Roof Contact layout (.rc-*)
   Both ported into the Renewable RED system (--red #D7262D).
   Navy / cream / paper tokens unchanged. Fully responsive:
   every multi-column grid collapses to one column and the form
   goes full-width on narrow screens.
   ============================================================ */

/* -- aliases so the PRESERVED (unchanged) header markup, which
      references the legacy .btn-green/.btn-sm/.btn-ghost/.act-g
      classes, renders with the green accent. Additive only. -- */
.btn-green{ background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 10px 24px rgba(215,38,45,.22); }
.btn-green:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--hairline); }
.btn-ghost:hover{ background:var(--cream); border-color:var(--navy-2); }
.btn-sm{ padding:10px 18px; font-size:14px; }
.nav-link.act-g{ color:var(--red); font-weight:700; }

/* -- shared hero "phone + opening hours" cluster (both pages) -- */
.rh-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:4px; }
.rh-hours{ display:inline-flex; align-items:center; gap:11px; color:var(--navy); padding-left:22px; border-left:1px solid var(--hairline); }
.rh-hours>svg{ width:22px; height:22px; color:var(--red); flex:none; }
.rh-hours small{ display:block; font-size:13px; color:var(--muted); font-weight:600; line-height:1.3; }
.rh-hours strong{ display:block; font-size:18px; color:var(--navy); font-weight:800; line-height:1.25; }

/* ============================================================
   ABOUT — .about2-* (red port of the hub About system, adapted for Roof Helpline)
   ============================================================ */
.about2-page{ background:var(--paper); color:var(--ink); }
.about2-shell{ width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.about2-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.about2-eyebrow-light{ color:#8fd3ab; }
.about2-page h1,.about2-page h2,.about2-page h3{ color:var(--navy); }
.about2-page h2{ font-size:clamp(32px,3.9vw,50px); font-weight:800; letter-spacing:-1.4px; line-height:1.08; }

/* hero */
.about2-hero{ position:relative; overflow:hidden; padding:64px 0 128px; background:radial-gradient(100% 115% at 82% 20%,#fff 0%,var(--cream) 63%,#f1ecdf 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,.03),0 0 0 108px rgba(11,35,69,.025); pointer-events:none; }
.about2-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.about2-hero-copy h1{ max-width:640px; font-size:clamp(44px,5.6vw,72px); font-weight:800; line-height:1.03; letter-spacing:-2.4px; margin:0 0 22px; }
.about2-hero-copy h1 span{ color:var(--red); }
.about2-lead{ font-size:19px; line-height:1.62; color:#53606c; max-width:580px; margin:0 0 30px; }
.about2-hero-media{ position:relative; min-height:475px; }
.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 52%,rgba(7,25,50,.55)); pointer-events:none; }
.about2-photo-card{ position:absolute; z-index:2; left:22px; bottom:22px; width:min(370px,calc(100% - 44px)); background:rgba(11,35,69,.93); color:#fff; padding:18px 20px; border:1px solid rgba(255,255,255,.17); border-radius:16px; backdrop-filter:blur(8px); }
.about2-photo-badge{ display:inline-flex; background:#fff; border-radius:8px; padding:6px 10px; margin-bottom:11px; }
.about2-photo-badge img{ height:24px; width:auto; display:block; }
.about2-photo-card p{ margin:0; font-size:13.5px; color:#d5deeb; line-height:1.5; }

/* trust strip */
.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(--hairline); 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(--hairline); }
.about2-trust-item>span{ width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:var(--red-tint); color:var(--red); 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; }

/* sections */
.about2-section{ padding:96px 0; }
.about2-paper{ background:var(--paper); }
.about2-cream{ background:var(--cream); }
.about2-heading{ max-width:720px; margin-bottom:44px; }
.about2-heading-center{ text-align:center; margin-left:auto; margin-right:auto; }
.about2-heading h2{ margin-bottom:16px; }
.about2-heading p{ font-size:17px; line-height:1.65; color:#5f6d77; }

/* what we do — copy + green coverage panel */
.about2-do-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about2-do-copy h2{ margin:0 0 18px; max-width:520px; }
.about2-do-copy>p{ font-size:16.5px; line-height:1.75; color:#59656f; margin:0 0 26px; max-width:540px; }
.about2-dolist{ list-style:none; display:flex; flex-direction:column; gap:20px; margin:0; padding:0; }
.about2-do{ display:flex; align-items:flex-start; gap:16px; }
.about2-do-ico{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--red-tint); color:var(--red); display:grid; place-items:center; }
.about2-do-ico svg{ width:22px; height:22px; }
.about2-do-body strong{ display:block; font-size:16px; color:var(--navy); font-weight:750; margin-bottom:3px; }
.about2-do-body p{ margin:0; font-size:14.5px; line-height:1.6; color:#66727c; }

.about2-coverage{ position:relative; overflow:hidden; background:linear-gradient(160deg,#eaf4ed 0%,#dcecdf 100%); border:1px solid #cfe3d5; border-radius:26px; padding:44px 42px; }
.about2-coverage::after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; border:1px solid rgba(215,38,45,.16); right:-150px; bottom:-190px; box-shadow:0 0 0 46px rgba(215,38,45,.05); }
.about2-coverage-pins{ position:absolute; z-index:0; right:26px; top:34px; color:var(--red); opacity:.24; }
.about2-coverage-pins svg{ width:150px; height:auto; }
.about2-coverage>*{ position:relative; z-index:1; }
.about2-coverage h2{ font-size:clamp(26px,2.8vw,34px); margin:0 0 14px; max-width:340px; }
.about2-coverage>p{ font-size:15.5px; line-height:1.7; color:#3f5348; max-width:380px; margin:0 0 26px; }
.about2-cov-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #d3e4d9; border-radius:15px; padding:16px 18px; width:fit-content; box-shadow:0 14px 30px rgba(11,35,69,.08); }
.about2-cov-card svg{ flex:none; width:26px; height:26px; color:var(--red); }
.about2-cov-card strong{ display:block; font-size:14.5px; color:var(--navy); }
.about2-cov-card small{ display:block; font-size:12.5px; color:#66727c; margin-top:2px; }

/* complete care — 5 cards, centred so an odd last row doesn't sit flush left */
.about2-inc-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.about2-inc{ flex:0 1 calc(25% - 15px); background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:30px 26px; box-shadow:0 16px 40px rgba(11,35,69,.05); transition:transform .2s ease,box-shadow .2s ease; }
.about2-inc:hover{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(11,35,69,.1); }
.about2-inc-ico{ width:50px; height:50px; border-radius:14px; background:var(--red-tint); color:var(--red); display:grid; place-items:center; margin-bottom:18px; }
.about2-inc-ico svg{ width:25px; height:25px; }
.about2-inc h3{ font-size:18px; font-weight:800; letter-spacing:-.4px; margin:0 0 8px; }
.about2-inc p{ font-size:14px; line-height:1.6; color:#66727c; margin:0; }
.about2-inc-note{ text-align:center; font-size:14.5px; color:var(--muted); margin:34px 0 0; }
.about2-inc-note a{ color:var(--red); font-weight:700; text-decoration:none; }
.about2-inc-note a:hover{ text-decoration:underline; }

/* split panels — whole-home photo + mission (mascot) */
.about2-split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.about2-split-photo{ position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--hairline); background:#fff; box-shadow:0 22px 50px rgba(11,35,69,.1); display:flex; flex-direction:column; }
.about2-split-photo>img{ width:100%; height:280px; object-fit:cover; }
.about2-split-body{ padding:30px 32px 34px; }
.about2-split-body h3{ font-size:clamp(24px,2.5vw,30px); font-weight:800; letter-spacing:-.6px; margin:0 0 12px; }
.about2-split-body p{ font-size:15.5px; line-height:1.7; color:#5c6872; margin:0 0 18px; }
.about2-textlink{ display:inline-flex; align-items:center; gap:8px; font-weight:750; font-size:14.5px; text-decoration:none; color:var(--red); }
.about2-textlink svg{ width:17px; height:17px; transition:transform .18s ease; }
.about2-textlink:hover svg{ transform:translateX(3px); }
.about2-split-mission{ position:relative; overflow:hidden; border-radius:26px; border:1px solid #cbdcee; background:linear-gradient(150deg,#eaf1f8 0%,#dce7f2 100%); padding:42px 44px; display:flex; flex-direction:column; }
.about2-split-mission h3{ font-size:clamp(25px,2.7vw,33px); font-weight:800; letter-spacing:-.6px; margin:0 0 14px; max-width:340px; }
.about2-split-mission p{ font-size:16px; line-height:1.72; color:#3f4c58; margin:0 0 14px; max-width:400px; position:relative; z-index:1; }
.about2-split-mission .about2-mission-lead{ font-size:17px; color:var(--navy); font-weight:600; }
.about2-mission-mascot{ position:absolute; z-index:0; right:-18px; bottom:-14px; width:270px; height:auto; opacity:.96; filter:drop-shadow(0 18px 30px rgba(11,35,69,.16)); pointer-events:none; }

/* CTA card */
.about2-cta{ display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; background:#fff; border:1px solid var(--hairline); border-radius:24px; padding:36px 40px; box-shadow:0 20px 48px rgba(11,35,69,.07); }
.about2-cta-ico{ flex:none; width:60px; height:60px; border-radius:50%; background:var(--red-tint); color:var(--red); display:grid; place-items:center; }
.about2-cta-ico svg{ width:28px; height:28px; }
.about2-cta-copy h2{ font-size:clamp(24px,2.6vw,32px); margin:0 0 6px; }
.about2-cta-copy p{ font-size:15.5px; line-height:1.6; color:var(--muted); margin:0; }
.about2-cta-btn{ flex:none; }

@media (max-width:1050px){
  .about2-hero-grid,.about2-do-grid,.about2-split{ 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-inc{ flex-basis:calc(50% - 10px); }
  .about2-cta{ grid-template-columns:auto 1fr; row-gap:20px; }
  .about2-cta-btn{ grid-column:1 / -1; justify-self:start; }
}
@media (max-width:760px){
  .about2-shell{ width:min(100% - 36px,1240px); }
  .about2-hero{ padding:46px 0 105px; }
  .about2-hero-copy h1{ font-size:clamp(40px,12vw,60px); letter-spacing:-1.8px; }
  .about2-lead{ font-size:17px; }
  .about2-hero-media{ min-height:330px; }
  .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(--hairline); }
  .about2-trust-item::before{ display:none!important; }
  .about2-section{ padding:70px 0; }
  .about2-do-grid{ gap:40px; }
  .about2-coverage{ padding:34px 28px; }
  .about2-inc-grid{ grid-template-columns:1fr; }
  .about2-split-mission{ padding:34px 30px; }
  .about2-mission-mascot{ width:150px; right:-10px; }
  .about2-cta{ grid-template-columns:1fr; text-align:left; padding:30px 26px; }
  .about2-cta-btn{ justify-self:stretch; }
  .about2-cta-btn .btn{ width:100%; }
}
@media (max-width:420px){
  .rh-hours{ padding-left:16px; }
  .about2-cov-card{ width:auto; }
}


/* Issue-history status badges (portal-issues live feed) */
.issue-status-open{background:#FEF3C7;color:#92400E;}
.issue-status-closed{background:#D9F0DD;color:#1A6B2E;}
/* PORTAL */
.portal-bg{min-height:calc(100vh - 68px);background:var(--cream);padding:48px 24px;}

.portal-container{max-width:min(1680px, 94vw);margin:0 auto;}
.portal-header{
  background:#fff;border:1px solid var(--hairline);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(--red);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(--hairline);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(--red);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(--hairline);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(--hairline);border-radius:18px;padding:24px 26px;margin-bottom:14px;
  border-left:4px solid var(--navy);
}
.plan-mini.green-bar{border-left-color:var(--red);}
.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;}
.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(--hairline);}
.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;}

.appt-date{
  width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid var(--hairline);
  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(--hairline);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(--hairline);border-radius:100px;cursor:pointer;transition:background 0.2s;flex-shrink:0;}
.toggle.on{background:var(--red);}
.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(--red);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;}



/* Narrow phone safeguard for links and footer addresses. */
@media (max-width: 560px) {
  .footer-grid, .footer-grid > *, .footer-col { min-width: 0; }
  .footer-col a, .footer-bottom a { overflow-wrap: anywhere; }
  .hero-cta .btn, .actions .btn { max-width: 100%; white-space: normal; }
}

/* Shared Helplines navigation: keep specialist links accessible without crowding tablets. */
.nav-links .hl-cross-link{font-size:12px;white-space:nowrap;}
@media(max-width:1450px){
  .nav-links .hl-cross-link{display:none;}
}

/* Keep every division visible on desktop; allow compact scrolling rather than hiding links. */
@media(min-width:901px){
  .nav-links{min-width:0;overflow-x:auto;scrollbar-width:thin;}
  .nav-links .hl-cross-link{display:inline-flex!important;flex-shrink:0;font-size:11px;padding-inline:6px;}
}