/* Layout: faceted ice. The bear's angular planes become light facets over the navy hero and footer;
   content sections alternate white and ice grey like a contractor's service catalog.
   One committed light brand look (navy, flame red, ice) in every theme, so all colors are set explicitly. */
:root {
  --navy: #041131;
  --navy-2: #0b2254;
  --navy-3: #12306f;
  --red: #cf313a;
  --red-dark: #ad232c;
  --ice: #eef2f7;
  --ice-line: #dbe3ee;
  --white: #ffffff;
  --ink: #0b1733;
  --muted: #4a5873;
  --on-navy: #e8eef7;
  --on-navy-muted: #a9b7cf;
  --todo-bg: #fff3c4;
  --todo-line: #b8860b;
  --todo-ink: #5c4400;
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --radius: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--navy-3); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-stretch: 88%; line-height: 1.08; margin: 0; text-wrap: balance; color: inherit; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.eyebrow { font-family: var(--font-display); font-stretch: 100%; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.logo-img { background: url(logo.png) center / contain no-repeat; display: block; }

/* Draft placeholders (Hannah still needs to send these) */
.todo { display: inline-block; background: var(--todo-bg); color: var(--todo-ink); border: 1px dashed var(--todo-line); border-radius: 4px; padding: 0 6px; font-family: var(--font-body); font-weight: 600; font-size: 0.86em; letter-spacing: 0; text-transform: none; line-height: 1.5; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-stretch: 95%; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); }
.btn-line-light { color: var(--white); border-color: rgba(255, 255, 255, 0.55); background: transparent; }
.btn-line-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-3); }
.arrow { width: 16px; height: 16px; flex: none; }

/* Utility bar */
.utility { background: var(--navy); color: var(--on-navy-muted); font-size: 13px; }
.utility .wrap { display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: space-between; align-items: center; padding-block: 7px; }
.utility b { color: var(--on-navy); font-weight: 600; }
.utility a { color: var(--on-navy); font-weight: 600; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility .right { display: flex; flex-wrap: wrap; gap: 4px 22px; }
@media (max-width: 640px) { .utility .hide-sm { display: none; } }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--white); border-bottom: 1px solid var(--ice-line); box-shadow: 0 6px 18px -14px rgba(4, 17, 49, 0.45); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); margin-right: auto; }
.brand .logo-img { width: 54px; height: 56px; flex: none; }
.brand-text { display: grid; line-height: 1; }
.brand-name { font-family: var(--font-display); font-stretch: 100%; font-weight: 900; font-size: 25px; letter-spacing: 0.03em; text-transform: uppercase; }
.brand-sub { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); margin-top: 5px; }
.nav { display: flex; gap: 24px; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-stretch: 95%; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--red); border-bottom-color: var(--red); }
.menu-btn { display: none; background: none; border: 1.5px solid var(--ice-line); border-radius: 6px; padding: 9px 10px; cursor: pointer; color: var(--navy); }
.menu-btn svg { width: 22px; height: 22px; display: block; }
@media (max-width: 1199px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 16px; border-bottom: 1px solid var(--ice-line); box-shadow: 0 16px 24px -18px rgba(4, 17, 49, 0.5); }
  .nav.open { display: flex; }
  .nav a { padding-block: 12px; border-bottom: 1px solid var(--ice-line); }
  .nav a:hover { border-bottom-color: var(--ice-line); }
}
@media (max-width: 560px) { .site-header .btn-red { display: none; } .brand-name { font-size: 21px; } }

/* Facets: the logo's angular planes as a background treatment */
.facets {
  background:
    linear-gradient(116deg, transparent 0 56%, rgba(255, 255, 255, 0.045) 56% 71%, transparent 71%),
    linear-gradient(64deg, transparent 0 63%, rgba(255, 255, 255, 0.035) 63% 81%, transparent 81%),
    linear-gradient(150deg, transparent 0 78%, rgba(207, 49, 58, 0.10) 78% 86%, transparent 86%),
    linear-gradient(28deg, transparent 0 18%, rgba(255, 255, 255, 0.03) 18% 33%, transparent 33%),
    linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 62%);
  color: var(--on-navy);
}

/* Hero */
.hero { padding-block: 64px 120px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 56px; align-items: start; }
.hero .eyebrow { color: #ff8f95; }
.hero h1 { font-size: clamp(40px, 5.6vw, 66px); font-weight: 900; margin-top: 16px; color: var(--white); }
.hero h1 .accent { color: #ff8f95; }
.hero .lede { font-size: 19px; color: var(--on-navy-muted); max-width: 33em; margin-top: 20px; }
.hero-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.hero-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; font-weight: 600; color: var(--on-navy); }
.tick { width: 28px; height: 28px; border-radius: 50%; background: var(--red); display: grid; place-items: center; }
.tick svg { width: 15px; height: 15px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Request card */
.request-card { background: var(--white); color: var(--ink); border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); overflow: hidden; }
.request-card header { background: var(--red); color: var(--white); padding: 18px 24px; }
.request-card header h2 { font-size: 26px; font-weight: 900; }
.request-card header p { font-size: 14.5px; opacity: 0.92; margin-top: 2px; }
.request-card form { padding: 20px 24px 24px; display: grid; gap: 12px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--white); border: 1.5px solid var(--ice-line); border-radius: 6px; padding: 10px 12px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(18, 48, 111, 0.15); }
.field textarea { resize: vertical; min-height: 78px; }
.request-card .btn { width: 100%; margin-top: 4px; }
.form-note { font-size: 12.5px; color: var(--muted); }
.form-status { font-size: 14px; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero { padding-block: 44px 100px; } }
@media (max-width: 480px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

/* Trust bar overlapping the hero */
.trust { position: relative; z-index: 2; margin-top: -64px; }
.trust-bar { background: var(--white); border-radius: 12px; box-shadow: 0 18px 40px -22px rgba(4, 17, 49, 0.45); border: 1px solid var(--ice-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 22px 22px; }
.trust-item + .trust-item { border-left: 1px solid var(--ice-line); }
.trust-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--ice); display: grid; place-items: center; color: var(--navy); }
.trust-icon svg { width: 24px; height: 24px; }
.trust-item b { display: block; font-family: var(--font-display); font-stretch: 90%; font-weight: 800; font-size: 18px; line-height: 1.15; color: var(--navy); }
.trust-item span { font-size: 13.5px; color: var(--muted); line-height: 1.35; display: block; margin-top: 2px; }
@media (max-width: 1000px) {
  .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--ice-line); }
}
@media (max-width: 520px) {
  .trust-bar { grid-template-columns: minmax(0, 1fr); }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--ice-line); }
}

/* Sections */
.section { padding-block: 84px; }
.section.ice { background: var(--ice); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; display: grid; gap: 10px; justify-items: center; }
.section-head h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; color: var(--navy); }
.section-head p { color: var(--muted); font-size: 17.5px; }
.rule { width: 56px; height: 4px; background: var(--red); border-radius: 2px; }
@media (max-width: 700px) { .section { padding-block: 60px; } }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.svc { background: var(--white); border: 1px solid var(--ice-line); border-bottom: 4px solid var(--navy); border-radius: var(--radius); padding: 28px 26px 24px; display: grid; gap: 12px; align-content: start; transition: transform .18s, box-shadow .18s, border-color .18s; }
.svc:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(4, 17, 49, 0.5); border-bottom-color: var(--red); }
.svc-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ice); display: grid; place-items: center; color: var(--navy); }
.svc-icon.hot { color: var(--red); }
.svc-icon svg { width: 30px; height: 30px; }
.svc h3 { font-size: 23px; font-weight: 800; color: var(--navy); }
.svc p { color: var(--muted); font-size: 15.5px; }
.svc a { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.svc a:hover { color: var(--red-dark); }
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services { grid-template-columns: minmax(0, 1fr); } }

/* Why Comfort Zone */
.why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.brand-panel { border-radius: 14px; padding: 40px 32px; display: grid; justify-items: center; gap: 22px; text-align: center; position: relative; overflow: hidden; }
.brand-panel .logo-img { width: min(260px, 70%); aspect-ratio: 478 / 491; }
.seal { display: grid; gap: 2px; justify-items: center; }
.seal .big { font-family: var(--font-display); font-weight: 900; font-size: 40px; letter-spacing: 0.04em; color: var(--white); line-height: 1; }
.seal .small { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-navy-muted); }
.why-copy { display: grid; gap: 18px; }
.why-copy h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; color: var(--navy); }
.why-copy > p { color: var(--muted); font-size: 17px; max-width: 36em; }
.checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-weight: 600; font-size: 15.5px; color: var(--ink); line-height: 1.4; }
.checks .tick { width: 24px; height: 24px; }
.checks .tick svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .why { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 560px) { .checks { grid-template-columns: minmax(0, 1fr); } }

/* Maintenance */
.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.85fr); gap: 22px; align-items: stretch; }
.season { background: var(--white); border: 1px solid var(--ice-line); border-radius: var(--radius); padding: 26px; display: grid; gap: 14px; align-content: start; }
.season-top { display: flex; align-items: center; gap: 14px; }
.season .svc-icon { width: 48px; height: 48px; }
.season .svc-icon svg { width: 26px; height: 26px; }
.season h3 { font-size: 22px; font-weight: 800; color: var(--navy); }
.season .when { font-size: 13.5px; color: var(--muted); }
.season ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.season li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; }
.season li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--navy); transform: rotate(45deg); }
.season.fall li::before { background: var(--red); }
.plan-cta { border-radius: var(--radius); padding: 28px 26px; display: grid; gap: 14px; align-content: start; }
.plan-cta h3 { font-size: 26px; font-weight: 900; color: var(--white); }
.plan-cta p { color: var(--on-navy-muted); font-size: 15.5px; }
.plan-cta .btn { justify-self: start; }
@media (max-width: 1000px) { .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-cta { grid-column: 1 / -1; } }
@media (max-width: 640px) { .plan { grid-template-columns: minmax(0, 1fr); } }

/* Pricing strip */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ice-line); border-radius: 12px; overflow: hidden; background: var(--white); }
.price-item { padding: 30px 28px; display: grid; gap: 10px; align-content: start; }
.price-item + .price-item { border-left: 1px solid var(--ice-line); }
.price-item .num { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.14em; color: var(--red); }
.price-item h3 { font-size: 22px; font-weight: 800; color: var(--navy); }
.price-item p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 860px) { .pricing { grid-template-columns: minmax(0, 1fr); } .price-item + .price-item { border-left: 0; border-top: 1px solid var(--ice-line); } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--ice-line); border-radius: var(--radius); padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font-family: var(--font-display); font-stretch: 92%; font-weight: 800; font-size: 18.5px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 26px; line-height: 1; color: var(--red); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding-bottom: 20px; max-width: 64ch; }

/* Area + CTA band */
.area-band { padding-block: 72px; }
.area-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
.area-band h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; color: var(--white); }
.area-band p { color: var(--on-navy-muted); font-size: 17px; margin-top: 12px; max-width: 34em; }
.towns { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.towns li { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 14.5px; color: var(--on-navy); }
.cta-box { background: var(--white); color: var(--ink); border-radius: 12px; padding: 30px 28px; display: grid; gap: 14px; }
.cta-box h3 { font-size: 28px; font-weight: 900; color: var(--navy); }
.cta-box p { color: var(--muted); margin: 0; font-size: 15.5px; }
.cta-box .btn { justify-self: start; }
@media (max-width: 900px) { .area-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Footer */
.site-footer { background: #020a1f; color: var(--on-navy-muted); font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 56px 40px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand .brand { color: var(--white); }
.foot-brand .brand-sub { color: #ff8f95; }
.foot-brand p { max-width: 30em; }
.site-footer h4 { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--on-navy-muted); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; font-size: 13px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Guide cards */
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .card-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .card-grid, .card-grid.five { grid-template-columns: minmax(0, 1fr); } }
.gcard { background: var(--white); border: 1px solid var(--ice-line); border-radius: var(--radius); padding: 20px 20px 18px; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.gcard:hover { transform: translateY(-2px); box-shadow: 0 16px 26px -20px rgba(4, 17, 49, 0.55); border-color: var(--navy-3); }
.gcard .svc-icon { width: 44px; height: 44px; }
.gcard .svc-icon svg { width: 24px; height: 24px; }
.gcard h3 { font-size: 19px; font-weight: 800; color: var(--navy); }
.gcard p { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.gcard .go { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-top: 2px; }
.gcard.urgent { border-color: #f1b8bc; background: #fff6f6; }
.gcard.urgent .svc-icon { background: #fde3e5; color: var(--red); }
.grid-foot { display: flex; justify-content: center; margin-top: 30px; }
.section-head.left { text-align: left; justify-items: start; margin-left: 0; }

/* Help hub */
.hub-hero { padding-block: 56px 60px; }
.hub-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 900; color: var(--white); margin-top: 12px; max-width: 16em; }
.hub-hero p.lede { color: var(--on-navy-muted); font-size: 18px; margin-top: 14px; max-width: 38em; }
.search { margin-top: 26px; max-width: 560px; position: relative; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; font: inherit; font-size: 16px; padding: 15px 16px 15px 48px; border-radius: 8px; border: 0; background: var(--white); color: var(--ink); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.6); }
.search input:focus { outline: 3px solid #ff8f95; outline-offset: 2px; }
.hub-group { display: grid; gap: 22px; }
.hub-group + .hub-group { margin-top: 56px; }
.hub-group h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 900; color: var(--navy); }
.hub-group .sub { color: var(--muted); margin-top: 4px; }
.no-results { text-align: center; color: var(--muted); padding: 24px 0; }

/* Guide page */
.guide-hero { padding-block: 40px 44px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--on-navy-muted); }
.crumbs a { color: var(--on-navy); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.guide-hero .eyebrow { color: #ff8f95; margin-top: 18px; }
.guide-hero h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 900; color: var(--white); margin-top: 8px; max-width: 18em; }
.guide-hero .lede { color: var(--on-navy-muted); font-size: 18px; margin-top: 14px; max-width: 40em; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; padding-block: 48px 72px; align-items: start; }
.prose { display: grid; gap: 22px; min-width: 0; }
.prose h2 { font-size: 26px; font-weight: 900; color: var(--navy); }
.prose p, .prose li { font-size: 16.5px; color: var(--ink); }
.prose p { max-width: 68ch; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 66ch; }
.prose a { color: var(--navy-3); font-weight: 600; }
.prose section { display: grid; gap: 12px; }
.callout { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; background: #fff3f3; border: 1px solid #f3c4c7; border-left: 5px solid var(--red); border-radius: 8px; padding: 16px 18px; font-size: 15.5px; line-height: 1.55; }
.callout svg { width: 24px; height: 24px; color: var(--red); margin-top: 1px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; background: var(--white); border: 1px solid var(--ice-line); border-radius: var(--radius); padding: 20px 22px; }
.step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 19px; }
.step h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.step p { font-size: 16px; color: var(--ink); line-height: 1.6; max-width: 66ch; }
.tbl { overflow-x: auto; border: 1px solid var(--ice-line); border-radius: var(--radius); background: var(--white); }
.tbl table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.tbl th { background: var(--navy); color: var(--white); text-align: left; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.03em; padding: 12px 14px; font-size: 14.5px; }
.tbl td { padding: 12px 14px; border-top: 1px solid var(--ice-line); vertical-align: top; line-height: 1.45; }
.tbl tr:nth-child(even) td { background: #f7f9fc; }
.sources { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--ice-line); padding-top: 16px; }
.sources ul { padding-left: 18px; margin-top: 6px; }
.sources a { color: var(--muted); font-weight: 500; }
.aside { position: sticky; top: 96px; display: grid; gap: 18px; }
.aside-card { border-radius: 12px; padding: 24px; display: grid; gap: 12px; }
.aside-card h3 { font-size: 23px; font-weight: 900; color: var(--white); }
.aside-card p { color: var(--on-navy-muted); font-size: 15px; }
.aside-card .label { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #ff8f95; margin-top: 4px; }
.aside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.aside-card li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14.5px; color: var(--on-navy); line-height: 1.4; }
.aside-card li::before { content: ""; width: 7px; height: 7px; margin-top: 6px; background: #ff8f95; transform: rotate(45deg); }
.aside-card .btn { margin-top: 6px; }
.related { background: var(--white); border: 1px solid var(--ice-line); border-radius: 12px; padding: 20px 22px; display: grid; gap: 10px; }
.related h4 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.related a { color: var(--navy); font-weight: 600; text-decoration: none; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; }
.related a svg { width: 20px; height: 20px; color: var(--red); }
.related a:hover { color: var(--red); }
@media (max-width: 960px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } .aside { position: static; } }
@media (max-width: 520px) { .step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; } }
[hidden], [data-view][hidden] { display: none !important; }
/* Comfort Zone Club */
.club { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; background: var(--white); border: 1px solid var(--ice-line); border-radius: 16px; padding: 32px; box-shadow: 0 24px 40px -32px rgba(4, 17, 49, 0.45); }
.club-card { aspect-ratio: 1.586 / 1; border-radius: 16px; padding: 22px 24px; display: grid; grid-template-rows: 1fr auto; box-shadow: 0 22px 36px -20px rgba(4, 17, 49, 0.7); max-width: 420px; width: 100%; justify-self: center; transform: rotate(-3deg); }
.club-card .logo-img { width: 88px; height: 90px; }
.club-card-text { display: grid; gap: 4px; }
.club-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1; }
.club-sub { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #ff8f95; }
.club-offer { display: grid; gap: 18px; min-width: 0; }
.club-price-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.club-price { display: grid; justify-items: start; padding-right: 24px; border-right: 2px solid var(--ice-line); }
.club-price .amt { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.95; color: var(--navy); letter-spacing: -0.01em; }
.club-price .per { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-top: 4px; }
.club-promise { display: grid; gap: 6px; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.club-promise b { font-family: var(--font-display); font-stretch: 92%; font-size: 20px; color: var(--navy); line-height: 1.2; }
.club-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.club-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; font-weight: 600; font-size: 15px; }
.club-list .tick { width: 24px; height: 24px; }
.club-list .tick svg { width: 13px; height: 13px; }
.plan-note { margin-top: 18px; color: var(--muted); font-size: 15.5px; }
.plan-head { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 40px 0 14px; }
.plan { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .club { grid-template-columns: minmax(0, 1fr); padding: 24px; } .club-card { max-width: 340px; } }
@media (max-width: 640px) { .plan { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 520px) { .club-price-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } .club-price { border-right: 0; padding-right: 0; } .club-list { grid-template-columns: minmax(0, 1fr); } .club .btn { width: 100%; white-space: normal; } }
/* Homeowner First Response checklist */
.fr { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.prose { grid-template-columns: minmax(0, 1fr); }
.fr-summary, .opts { min-width: 0; }
.frq { margin: 0; border: 1px solid var(--ice-line); border-radius: var(--radius); background: var(--white); padding: 18px 20px 20px; display: grid; gap: 12px; min-width: 0; }
.frq legend { float: left; width: 100%; padding: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; font-family: var(--font-display); font-stretch: 92%; font-weight: 800; font-size: 19px; color: var(--navy); line-height: 1.25; }
.frq legend + * { clear: both; }
.frq .n { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font-size: 16px; font-weight: 900; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--ice-line); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--white); transition: background-color .12s, border-color .12s, color .12s; }
.opt:hover span { border-color: var(--navy-3); }
.opt input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.opt input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.fr-text { font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--ice-line); border-radius: 6px; width: 100%; color: var(--ink); background: var(--white); }
.tip { font-size: 14.5px; color: var(--muted); background: var(--ice); border-radius: 6px; padding: 10px 12px; line-height: 1.5; }
.tip b { color: var(--navy); }
.fr-summary { margin-top: 8px; border: 2px solid var(--navy); border-radius: 12px; background: var(--white); padding: 22px; display: grid; gap: 10px; }
.fr-summary h2 { font-size: 24px; }
.fr-help { color: var(--muted); font-size: 15px; }
.fr-out { font: inherit; font-size: 14.5px; line-height: 1.55; color: var(--ink); background: var(--ice); border: 1px solid var(--ice-line); border-radius: 8px; padding: 12px 14px; width: 100%; resize: vertical; }
.fr-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-ghost-navy { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-ghost-navy:hover { background: var(--ice); }
.fr-status { font-size: 14px; font-weight: 600; color: var(--navy-3); }
@media (max-width: 520px) { .fr-actions .btn { width: 100%; } }

/* Hero watermark, subtitle and gold year */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-mark { position: absolute; z-index: 0; left: max(0px, calc(50% - 640px)); top: 44%; width: min(58vw, 720px); aspect-ratio: 746 / 500; transform: translateY(-50%) rotate(-4deg);
  background: url(bear-head.png) left center / contain no-repeat; opacity: 0.19; pointer-events: none; }
.hero .eyebrow { color: var(--white); }
.hero .eyebrow .sep { color: rgba(255, 255, 255, 0.45); margin: 0 6px; }
.hero h1 .gold { color: #f2c14e; background: linear-gradient(180deg, #fff1b8 0%, #f5c955 42%, #d9a13a 70%, #b8801f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 960px) { .hero-mark { width: 100vw; left: -4%; top: 20%; opacity: 0.12; } }

/* Balanced brand lockup: Heating in red, Cooling in blue */
.brand-text { justify-items: center; text-align: center; }
.brand-sub { display: flex; justify-content: space-between; width: 100%; font-size: 13px; letter-spacing: 0.2em; }
.brand-sub .bs-cool { margin-right: -0.2em; }
@media (max-width: 560px) { .brand-sub { font-size: 11px; } }
.brand-sub .bs-heat { color: var(--red); }
.brand-sub .bs-amp { color: var(--muted); }
.brand-sub .bs-cool { color: #1c5ea6; }
.foot-brand .brand-sub .bs-heat { color: #ff6b6b; }
.foot-brand .brand-sub .bs-amp { color: var(--on-navy-muted); }
.foot-brand .brand-sub .bs-cool { color: #8fc6ff; }

/* Reviews */
.reviews { padding-top: 76px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rv-card { border: 2px dashed var(--ice-line); border-radius: 12px; background: var(--white); padding: 22px; display: grid; gap: 14px; min-height: 190px; align-content: start; }
.rv-stars { display: flex; gap: 3px; }
.rv-stars svg { width: 20px; height: 20px; fill: none; stroke: #e0b445; stroke-width: 1.6; stroke-linejoin: round; }
.rv-slot { color: var(--muted); font-size: 15px; font-style: italic; }
.rv-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.rv-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ice); }
.rv-name { width: 110px; height: 10px; border-radius: 5px; background: var(--ice); }
.rv-draft { text-align: center; margin-top: 16px; }
.rv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
@media (max-width: 860px) { .rv-grid { grid-template-columns: minmax(0, 1fr); } .rv-card { min-height: 0; } .rv-card:nth-child(n+2) { display: none; } }

/* Header slogan */
.head-slogan { display: grid; justify-items: end; text-decoration: none; line-height: 1; padding-left: 22px; border-left: 2px solid var(--ice-line); }
.head-slogan .hs1 { font-family: var(--font-display); font-weight: 900; font-stretch: 82%; font-size: 27px; letter-spacing: 0.01em; text-transform: uppercase;
  background: linear-gradient(90deg, #2f7de0 0%, #0b2254 48%, #0b2254 52%, #cf313a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 2px; }
.head-slogan .hs2 { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--red); margin-top: 4px; }
.head-slogan:hover .hs2 { color: var(--navy); }
@media (max-width: 1180px) { .head-slogan .hs1 { font-size: 23px; } }
@media (max-width: 640px) { .head-slogan { display: none; } }

/* Get in the Zone hero */
.zone-hero { position: relative; overflow: hidden; color: var(--on-navy); padding-block: 72px 132px;
  background:
    radial-gradient(ellipse 60% 70% at 0% 40%, rgba(61, 140, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 55% 70% at 100% 60%, rgba(255, 59, 48, 0.24), transparent 70%),
    linear-gradient(116deg, transparent 0 56%, rgba(255, 255, 255, 0.04) 56% 71%, transparent 71%),
    linear-gradient(64deg, transparent 0 63%, rgba(255, 255, 255, 0.03) 63% 81%, transparent 81%),
    linear-gradient(165deg, var(--navy-2) 0%, var(--navy) 62%); }
.zone-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zone-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; }
.zone-copy .eyebrow { color: #ff8f95; }
.slogan { margin-top: 18px; font-family: var(--font-display); font-weight: 900; line-height: 0.92; color: var(--white); display: grid; }
.slogan .s1 { font-size: clamp(30px, 4.2vw, 50px); font-stretch: 100%; letter-spacing: 0.02em; text-transform: uppercase; }
.slogan .s2 { font-size: clamp(64px, 10.5vw, 132px); font-stretch: 78%; letter-spacing: -0.01em; text-transform: uppercase;
  background: linear-gradient(90deg, #6fb2ff 0%, #d9ecff 40%, #ffffff 50%, #ffc7b5 60%, #ff4d3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(255, 255, 255, 0.18)); padding-bottom: 6px; }
.slogan .s3 { font-size: clamp(20px, 2.6vw, 30px); font-stretch: 100%; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #ff8f95; margin-top: 10px; }
.zone-copy .lede { font-size: 18.5px; color: var(--on-navy-muted); max-width: 32em; margin-top: 22px; }
.zone-copy .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dial { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-face { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.10); stroke-width: 1.5; }
.segs path { opacity: 0.55; }
.segs.zone path { opacity: 1; }
.ticks .tk { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; }
.ticks .tk-major { stroke: rgba(255, 255, 255, 0.7); stroke-width: 2.5; }
.zone-text { fill: var(--white); font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: 0.3em; }
.end-text { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.2em; }
.end-text.cold { fill: #8fc6ff; }
.end-text.hot { fill: #ff7a6b; }
.needle path { fill: var(--white); }
.needle { transform-box: view-box; transform-origin: 220px 220px; animation: needle-in 1.8s cubic-bezier(.2, .9, .25, 1.05) .2s both; }
@keyframes needle-in { from { transform: rotate(-135deg); } to { transform: rotate(0deg); } }
.segs.zone { animation: zone-pulse 3.6s ease-in-out 2s infinite; }
@keyframes zone-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
.dial-center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; pointer-events: none; }
.dial-center .logo-img { width: 42%; aspect-ratio: 478 / 491; }
.dial-temp { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); color: var(--white); line-height: 1; letter-spacing: 0.02em; }
.dial-temp sup { font-size: 0.55em; color: #ff8f95; }
@media (prefers-reduced-motion: reduce) { .needle, .segs.zone { animation: none; } }
@media (max-width: 900px) { .zone-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .zone-hero { padding-block: 48px 110px; } .dial { width: min(86%, 360px); } }

/* Request section */
.request-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.request-copy { display: grid; gap: 14px; position: sticky; top: 110px; }
.request-copy h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; color: var(--navy); }
.request-copy > p { color: var(--muted); font-size: 17px; max-width: 32em; }
.request-copy .checks { grid-template-columns: minmax(0, 1fr); }
#request-section .request-card { border: 1px solid var(--ice-line); box-shadow: 0 30px 50px -34px rgba(4, 17, 49, 0.55); }
@media (max-width: 900px) { .request-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .request-copy { position: static; } }

/* Request wizard */
.wizard header { display: grid; gap: 10px; }
.wz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; counter-reset: wz; }
.wz-steps li { counter-increment: wz; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); border-top: 3px solid rgba(255, 255, 255, 0.35); padding-top: 6px; }
.wz-steps li::before { content: counter(wz) ". "; }
.wz-steps li.on { color: var(--white); border-top-color: var(--white); }
.wz-body { padding: 20px 24px 24px; }
.wz-step { display: grid; gap: 14px; }
.wz-lead { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--navy); }
.wz-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wz-pick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink); background: var(--white); border: 1.5px solid var(--ice-line); border-radius: 8px; padding: 11px 12px; cursor: pointer; line-height: 1.25; }
.wz-pick svg { width: 22px; height: 22px; color: var(--navy-3); }
.wz-pick:hover { border-color: var(--navy-3); background: var(--ice); }
.wz-pick.sel { border-color: var(--navy); background: var(--navy); color: var(--white); }
.wz-pick.sel svg { color: #ff8f95; }
.wz-pick[data-pick="club"] { border-color: #d9a13a; background: linear-gradient(180deg, #fffaf0 0%, #fdeeb8 100%); color: #7a1219; }
.wz-pick[data-pick="club"]:hover { border-color: var(--red); background: linear-gradient(180deg, #fff6d8 0%, #f9dd86 100%); }
.wz-pick[data-pick="club"] svg { color: var(--red); }

/* Join the Comfort Zone Club: gold and red, made to be pressed */
.btn.btn-club { position: relative; overflow: hidden; isolation: isolate; gap: 10px; color: #7a1219; border: 2px solid #b3261e; border-radius: 10px;
  background: linear-gradient(180deg, #fff4c9 0%, #f8d56b 36%, #ebb640 68%, #d69a2c 100%);
  box-shadow: 0 5px 0 #9e1f28, 0 16px 26px -12px rgba(158, 31, 40, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 0 rgba(255, 244, 201, 0.8); transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, filter .15s ease; }
.btn.btn-club::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-20deg); animation: club-sheen 4.2s ease-in-out 1.2s infinite; }
@keyframes club-sheen { 0% { left: -70%; } 28%, 100% { left: 135%; } }
.btn.btn-club .cb-star { width: 20px; height: 20px; fill: var(--red); stroke: #7a1219; stroke-width: 1; stroke-linejoin: round; flex: none; filter: drop-shadow(0 1px 0 rgba(255, 244, 201, 0.9)); transition: transform .25s cubic-bezier(.2, .9, .3, 1.5); }
.btn.btn-club svg:not(.cb-star) { color: #9e1f28; }
.btn.btn-club:hover { color: #5e0c12; filter: saturate(1.12) brightness(1.04); transform: translateY(-2px); box-shadow: 0 7px 0 #9e1f28, 0 22px 30px -12px rgba(158, 31, 40, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.btn.btn-club:hover .cb-star { transform: rotate(-18deg) scale(1.2); }
.btn.btn-club:active { transform: translateY(4px); box-shadow: 0 1px 0 #9e1f28, 0 6px 12px -8px rgba(158, 31, 40, 0.6), inset 0 2px 4px rgba(122, 18, 25, 0.25); }
.btn.btn-club:focus-visible { outline: 3px solid #ffd966; outline-offset: 3px; }
.btn.btn-club-lg { font-size: 16.5px; padding: 17px 28px; }
.btn.btn-club-lg .cb-star { width: 22px; height: 22px; }
.hero .btn.btn-club { border-color: #cf313a; box-shadow: 0 5px 0 #9e1f28, 0 16px 30px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.75); }
@media (prefers-reduced-motion: reduce) { .btn.btn-club::after { animation: none; display: none; } .btn.btn-club, .btn.btn-club .cb-star { transition: none; } }
/* "I'm not sure, I just need some help" */
.help-cta { position: relative; overflow: hidden; isolation: isolate; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; font: inherit; color: var(--white); text-decoration: none; background: linear-gradient(135deg, #123a7a 0%, var(--navy) 62%); border: 0; border-radius: 12px; padding: 15px 18px; cursor: pointer; box-shadow: 0 14px 26px -16px rgba(4, 17, 49, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.help-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--red) 0%, #9e1f28 100%); opacity: 0; transition: opacity .2s ease; }
.help-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent); transform: skewX(-18deg); animation: hc-sheen 5.5s ease-in-out 1.4s infinite; }
@keyframes hc-sheen { 0% { left: -60%; } 22%, 100% { left: 130%; } }
.help-cta:hover, .help-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(158, 31, 40, 0.8); }
.help-cta:hover::before, .help-cta:focus-visible::before { opacity: 1; }
.help-cta:focus-visible { outline: 3px solid #8fc6ff; outline-offset: 3px; }
.help-cta .hc-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22); }
.help-cta .hc-q { width: 24px; height: 24px; color: var(--white); }
.help-cta .hc-text { display: grid; gap: 3px; min-width: 0; }
.help-cta .hc-text b { font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1.2; letter-spacing: 0.005em; }
.help-cta .hc-text small { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.help-cta .hc-arrow { width: 22px; height: 22px; color: var(--white); transition: transform .18s ease; }
.help-cta:hover .hc-arrow { transform: translateX(4px); }
.wizard .wz-pick.help-cta { grid-template-columns: auto minmax(0, 1fr) auto; border: 0; padding: 15px 18px; color: var(--white); }
.wizard .wz-pick.help-cta svg { color: var(--white); }
.help-cta-sm { padding: 11px 14px; gap: 12px; border-radius: 10px; }
.help-cta-sm .hc-icon { width: 34px; height: 34px; }
.help-cta-sm .hc-q { width: 20px; height: 20px; }
.help-cta-sm .hc-text b { font-size: 15.5px; }
.help-cta-sm .hc-text small { font-size: 12.5px; }
.fr-request { scroll-margin-top: 110px; margin-top: 8px; border: 2px solid var(--navy); border-radius: 14px; background: var(--white); padding: 24px; display: grid; gap: 14px; box-shadow: 0 24px 40px -32px rgba(4, 17, 49, 0.6); }
.fr-request h2 { font-size: 26px; margin: -8px 0 0; }
.fr-request .wz-kicker { color: var(--red); }
.fr-request .wz-causes li, .fr-request .wz-causes p { font-size: 15.5px; }
.fr-request .fr-sub { color: var(--muted); font-size: 15.5px; margin-top: -6px; }
.fr-request .rq-form { display: grid; gap: 12px; }
.fr-request .rq-form .btn { width: 100%; margin-top: 4px; }
.fr-request .wz-causes:not([hidden]), .fr-request .wz-answers:not([hidden]), .fr-request .wz-help-note:not([hidden]) { animation: wz-li .45s ease both; }
@media (max-width: 480px) { .fr-request { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .fr-request .wz-causes, .fr-request .wz-answers, .fr-request .wz-help-note { animation: none !important; } }
.or-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 2px 0 -4px; color: var(--muted); font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.or-rule::before, .or-rule::after { content: ""; height: 1px; background: var(--ice-line); }
.fr-top-help { display: grid; gap: 12px; background: var(--white); border: 1px solid var(--ice-line); border-left: 5px solid var(--navy); border-radius: 12px; padding: 16px 18px; }
.fr-top-help p { font-size: 15.5px; color: var(--ink); }
.fr-top-help p b { color: var(--navy); }
.help-strip { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 22px; align-items: center; background: var(--white); border: 1px solid var(--ice-line); border-radius: 14px; padding: 20px 22px; box-shadow: 0 18px 34px -30px rgba(4, 17, 49, 0.6); }
.help-strip p { font-size: 16.5px; color: var(--ink); }
.help-strip p b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 21px; color: var(--navy); margin-bottom: 2px; }
@media (max-width: 760px) { .help-strip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .help-cta { padding: 13px 14px; gap: 11px; } .help-cta .hc-icon { width: 36px; height: 36px; } .help-cta .hc-text b { font-size: 15.5px; } }

/* Request form: day, arrival window, address */
.cz-req { display: grid; gap: 14px; }
.rq-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.rq-set legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rq-hint { font-size: 12.5px; color: var(--muted); margin: 0; }
.dp-cap { margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.dp-head, .dp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dp-head { margin-bottom: 6px; }
.dp-head span { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.day, .win { position: relative; cursor: pointer; background: var(--white); border: 1.5px solid var(--ice-line); color: var(--navy); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.day input, .win input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.day { display: grid; place-items: center; align-content: center; gap: 1px; min-height: 50px; border-radius: 8px; line-height: 1.05; }
.day .dn { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.day .dm { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.win { display: grid; place-items: center; min-height: 46px; border-radius: 999px; padding: 6px 8px; font-weight: 700; font-size: 14.5px; text-align: center; white-space: nowrap; }
.win-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wizard .win-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.day:hover, .win:hover { border-color: var(--navy-3); }
.day:focus-within, .win:focus-within { box-shadow: 0 0 0 3px rgba(18, 48, 111, 0.22); }
.day.on, .win.on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.day.on .dm { color: rgba(255, 255, 255, 0.8); }
.day.off, .win.off { cursor: not-allowed; background: var(--ice); color: #9aa6bd; border-color: var(--ice-line); }
.day.off .dm { color: #9aa6bd; }
.row2.cityzip { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.cz-req .bad, .cz-req input.bad { border-color: var(--red) !important; }
.day-picker.bad .dp-grid, .win-grid.bad { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 10px; }
.rq-msg { margin: 0; font-size: 14.5px; font-weight: 600; color: #b3261e; }
.rq-msg.err { display: grid; gap: 10px; background: #fff4f4; border: 1px solid #f3c4c7; border-radius: 10px; padding: 12px 14px; }
.rq-msg .rq-retry { width: auto; justify-self: start; margin: 0; }
.rq-done { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; background: #eef8f1; border: 1px solid #b9dfc6; border-left: 5px solid #2e8b57; border-radius: 12px; padding: 16px 18px; outline: none; animation: wz-li .45s ease both; }
.rq-done svg { width: 32px; height: 32px; fill: none; stroke: #2e8b57; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rq-done div { display: grid; gap: 4px; }
.rq-done b { color: var(--navy); font-size: 17px; line-height: 1.35; }
.rq-done span { color: var(--ink); font-size: 15px; }
.rq-done .todo { justify-self: start; margin-top: 6px; }
@media (max-width: 560px) { .win-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .day { min-height: 46px; } .day .dn { font-size: 16px; } .row2.cityzip { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rq-done { animation: none; } }

/* Comic bubble in the hero */
.comic { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; max-width: 540px; }
.comic-bear { flex: none; width: 70px; height: 70px; border-radius: 50%; background: var(--white); border: 3px solid #0b1b3f; box-shadow: 4px 4px 0 var(--red); display: grid; place-items: center; animation: comic-bear .55s cubic-bezier(.2, .9, .3, 1.35) .25s both; }
.comic-bear .logo-img { width: 50px; height: 51px; }
.comic-bubble { position: relative; margin: 0; font-family: "Bangers", "Archivo", Impact, system-ui, sans-serif; font-weight: 400; font-size: 25px; line-height: 1.12; letter-spacing: 0.035em; color: #0b1b3f; background: #ffe45c radial-gradient(rgba(11, 27, 63, 0.10) 1px, transparent 1.6px) 0 0 / 7px 7px; border: 3px solid #0b1b3f; border-radius: 20px; padding: 12px 18px 11px; box-shadow: 5px 5px 0 var(--red); transform: rotate(-2deg); transform-origin: left center; animation: comic-pop .7s cubic-bezier(.2, .9, .3, 1.3) .5s both; }
.comic-bubble b { font-weight: 400; color: var(--red); white-space: nowrap; }
.comic-bubble::before { content: ""; position: absolute; left: -19px; top: 50%; margin-top: -11px; border-style: solid; border-width: 11px 19px 11px 0; border-color: transparent #0b1b3f transparent transparent; }
.comic-bubble::after { content: ""; position: absolute; left: -13px; top: 50%; margin-top: -7px; border-style: solid; border-width: 7px 13px 7px 0; border-color: transparent #ffe45c transparent transparent; }
@keyframes comic-pop { 0% { opacity: 0; transform: scale(.35) rotate(-10deg); } 60% { opacity: 1; transform: scale(1.07) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes comic-bear { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 600px) { .comic { gap: 13px; } .comic-bear { width: 56px; height: 56px; } .comic-bear .logo-img { width: 40px; height: 41px; } .comic-bubble { font-size: 20px; padding: 10px 14px 9px; } }
@media (prefers-reduced-motion: reduce) { .comic-bear, .comic-bubble { animation: none; } }

/* Leave a review */
.review-cta { padding-block: 72px; }
.rc-box { max-width: 760px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 12px; background: var(--white); border: 1px solid var(--ice-line); border-top: 5px solid var(--red); border-radius: 16px; padding: 38px 30px 32px; box-shadow: 0 26px 44px -34px rgba(4, 17, 49, 0.6); }
.rc-stars { display: flex; gap: 6px; margin-bottom: 4px; }
.rc-stars svg { width: 34px; height: 34px; fill: #f5c542; stroke: #d9a13a; stroke-width: 1; stroke-linejoin: round; }
.rc-box.rv-in .rc-stars svg, .rc-box.rv-done .rc-stars svg { animation: rc-star .5s cubic-bezier(.2, .9, .3, 1.4) both; }
.rc-box .rc-stars svg:nth-child(2) { animation-delay: .08s; } .rc-box .rc-stars svg:nth-child(3) { animation-delay: .16s; }
.rc-box .rc-stars svg:nth-child(4) { animation-delay: .24s; } .rc-box .rc-stars svg:nth-child(5) { animation-delay: .32s; }
@keyframes rc-star { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
.rc-box h2 { font-size: clamp(34px, 4.4vw, 48px); font-weight: 900; color: var(--navy); }
.rc-copy { color: var(--muted); font-size: 17px; max-width: 34em; }
.rc-box .btn { margin-top: 8px; }
.rc-soon { margin-top: 6px; font-weight: 700; color: var(--navy); }
@media (max-width: 480px) { .rc-box { padding: 30px 20px 26px; } .rc-box .btn { width: 100%; } .rc-stars svg { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .rc-box .rc-stars svg { animation: none !important; } }

/* Geothermal & water-source */
.geo .section-head h2 { color: var(--white); }
.geo .section-head p { color: var(--on-navy-muted); }
.geo .section-head .eyebrow { color: #ff8f95; }
.geo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.geo-card { background: var(--white); color: var(--ink); border-radius: var(--radius); border-bottom: 4px solid var(--red); padding: 28px 28px 24px; display: grid; gap: 14px; align-content: start; box-shadow: 0 26px 40px -30px rgba(0, 0, 0, 0.7); }
.geo-top { display: flex; align-items: center; gap: 14px; }
.geo-card h3 { font-size: 24px; font-weight: 800; color: var(--navy); }
.geo-card p { color: var(--muted); font-size: 15.5px; }
.geo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.geo-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.geo-list li svg { width: 20px; height: 20px; color: var(--red); margin-top: 1px; }
.geo-card > a { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.geo-card > a svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .geo-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .geo-list { grid-template-columns: minmax(0, 1fr); } .geo-card { padding: 22px 20px 20px; } }

/* Wizard: each step slides in */
.wizard .wz-body { overflow: hidden; }
@keyframes wz-in-f { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes wz-in-b { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes wz-li { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wz-step.wz-fwd { animation: wz-in-f .42s cubic-bezier(.2, .75, .25, 1) both; }
.wz-step.wz-bk { animation: wz-in-b .42s cubic-bezier(.2, .75, .25, 1) both; }
.wz-step.wz-fwd .wz-causes li { animation: wz-li .45s ease both; }
.wz-step.wz-fwd .wz-causes li:nth-child(1) { animation-delay: .18s; }
.wz-step.wz-fwd .wz-causes li:nth-child(2) { animation-delay: .28s; }
.wz-step.wz-fwd .wz-causes li:nth-child(3) { animation-delay: .38s; }
.wz-step.wz-fwd .wz-causes li:nth-child(4) { animation-delay: .48s; }
.wz-steps li { transition: color .3s ease, border-color .3s ease; }
@media (prefers-reduced-motion: reduce) { .wz-step.wz-fwd, .wz-step.wz-bk, .wz-step.wz-fwd .wz-causes li, .help-cta::after { animation: none; } .help-cta, .help-cta .hc-arrow { transition: none; } }
.wz-help-note { background: var(--ice); border-radius: 8px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.wz-help-note b { color: var(--navy); }
.wz-co { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.wz-co svg { width: 18px; height: 18px; color: var(--red); margin-top: 1px; }
.wz-co a { color: var(--red); font-weight: 600; }
.wz-kicker { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.wz-title { font-size: 22px; font-weight: 900; color: var(--navy); margin-top: -8px; }
.wz-intro { font-size: 14.5px; color: var(--muted); margin-top: -6px; }
.wizard .fr { gap: 10px; }
.wizard .frq { padding: 14px 14px 16px; gap: 10px; }
.wizard .frq legend { font-size: 16.5px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.wizard .frq .n { width: 26px; height: 26px; font-size: 14px; }
.wizard .opt span { padding: 7px 13px; font-size: 14px; }
.wizard .tip { font-size: 13.5px; padding: 8px 10px; }
.wz-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.wizard .wz-nav .btn { width: auto; }
.wizard .wz-nav .wz-next { flex: 1; }
.wz-causes { background: #fff6f6; border: 1px solid #f3c4c7; border-left: 5px solid var(--red); border-radius: 8px; padding: 14px 16px; display: grid; gap: 8px; }
.wz-causes h3 { font-size: 19px; font-weight: 900; color: var(--navy); }
.wz-causes ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14.5px; }
.wz-note { font-size: 12.5px; color: var(--muted); }
.wz-answers { background: var(--ice); border-radius: 8px; padding: 12px 14px; display: grid; gap: 6px; }
.wz-answers h4 { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wz-answers-text { margin: 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; color: var(--ink); }
.wizard form.fr, .wizard #request-form { padding: 0; }
@media (max-width: 420px) { .wz-picks { grid-template-columns: minmax(0, 1fr); } .wz-body { padding: 18px; } }

.js-anim :is(.hero .wrap > div:first-child > *, .hero .wizard, .trust-item, .section-head, .rc-box, .geo-card, .club-card, .club-offer, .plan-head, .season, .plan-note, .svc, .card-grid > *, .help-strip, .brand-panel, .why-copy, .faq > details, .area-grid > *, .guide-hero .wrap > *, .prose > *, .aside > *, .hub-hero .wrap > *, .hub-group > div:first-child):not(.rv-done) { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .85s cubic-bezier(.2, .75, .25, 1); }
.js-anim :is(.hero .wrap > div:first-child > *, .hero .wizard, .trust-item, .section-head, .rc-box, .geo-card, .club-card, .club-offer, .plan-head, .season, .plan-note, .svc, .card-grid > *, .help-strip, .brand-panel, .why-copy, .faq > details, .area-grid > *, .guide-hero .wrap > *, .prose > *, .aside > *, .hub-hero .wrap > *, .hub-group > div:first-child).rv-in:not(.rv-done) { opacity: 1; transform: none; }

.brand-name, .nav a, .head-slogan .hs1, .head-slogan .hs2 { white-space: nowrap; }