/* Ridgewood AC & Heating: dark "thermal spectrum" design (from the approved demo), grown into a multi-page site 10/11/26.
   Bundled by build.py into site/assets/site.css. */
:root{
  --ink:#060b14;--panel:#0c1524;--panel-2:#111e33;
  --line:rgba(148,180,220,.14);--line-2:rgba(148,180,220,.26);
  --text:#e9f0f9;--soft:#cdd9e8;--muted:#96a8bf;
  --cool:#3aa7f0;--cool-deep:#1e7fd1;--warm:#ff7a2f;--ember:#e8442e;--gold:#f5b32f;
  --fire1:#d4461e;--fire2:#b5301a;
  --spectrum:linear-gradient(90deg,#2e8fe0 0%,#3ec3d8 22%,#f5b32f 55%,#ff7a2f 78%,#e8442e 100%);
  --radius:14px;--wrap:1160px;--hdr:72px;
  --f-disp:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;--f-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--ink);color:var(--text);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
[hidden]{display:none!important}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{width:min(100% - 2.75rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.75rem,820px);margin-inline:auto}
h1,h2,h3,.disp{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.015em;line-height:1.02;font-weight:800}
.grad{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.icon,.btn svg{flex:none}

/* eyebrow: centred = dash both sides, left-aligned desktop = one dash */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 .78rem/1.3 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--cool)}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:28px;background:var(--spectrum);flex:none}
@media (min-width:1024px){.left-desk .eyebrow::after,.eyebrow.left::after{display:none}}

/* section rhythm: kicker->h2 1rem, h2->lede 1rem, head->content 3rem */
section{padding:clamp(3.8rem,7vw,6.2rem) 0}
.sec-head{text-align:center;margin-bottom:3rem;display:flex;flex-direction:column;align-items:center}
.sec-head h2{font-size:clamp(2.3rem,5.6vw,3.6rem);margin-top:1rem;max-width:22ch;text-wrap:balance}
.sec-head p{color:var(--muted);max-width:620px;margin:1rem auto 0;text-wrap:pretty}
.panel{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:700 1.04rem/1.2 var(--f-body);padding:1rem 1.7rem;min-height:54px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap;background-origin:border-box!important}
.btn svg{width:19px;height:19px}
.btn-fire{background:linear-gradient(135deg,var(--fire1),var(--fire2));color:#fff;box-shadow:0 8px 30px rgba(200,60,30,.38)}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(200,60,30,.5)}
.btn-ice{border-color:rgba(88,167,240,.6);color:#e4f1fc;background:rgba(9,20,36,.82)}
.btn-ice:hover{transform:translateY(-2px);background:rgba(18,48,82,.95)}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;align-items:center}
.or-call{color:var(--muted);font-size:.95rem;margin-top:.9rem}
.or-call a{color:var(--text);font-weight:700;border-bottom:1px solid var(--line-2)}
@media (max-width:640px){
  .cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-inline:auto}
  .cta-row .btn{width:100%}
}
/* desktop with a mouse: online first (book / quote), the number stays visible as text */
.cta-call{order:1}.cta-online{order:2}
@media (min-width:900px) and (hover:hover){
  .cta-online{order:1}.cta-call{order:2}
  .cta-call.btn-fire{background:rgba(9,20,36,.82);border-color:rgba(88,167,240,.6);box-shadow:none;color:#e4f1fc}
  .cta-online.btn-ice{background:linear-gradient(135deg,var(--fire1),var(--fire2));border-color:transparent;color:#fff;box-shadow:0 8px 30px rgba(200,60,30,.38)}
}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(6,11,20,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr::after{content:"";display:block;height:2px;background:var(--spectrum);opacity:.85}
.nav-row{display:flex;align-items:center;gap:1rem;height:calc(var(--hdr) - 2px)}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:44px;width:auto}
.nav{display:none;align-items:center;gap:.2rem;margin-left:auto}
.nav>a,.dd>button{font:600 .93rem var(--f-body);color:var(--soft);padding:.6rem .75rem;border-radius:8px;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.35rem}
.nav>a:hover,.dd>button:hover,.nav>a[aria-current]{color:#fff}
.dd{position:relative}
.dd>button svg{width:14px;height:14px;transition:transform .2s}
.dd-panel{position:absolute;top:calc(100% + 6px);left:-10px;min-width:290px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:.8rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd:hover>button svg,.dd.open>button svg{transform:rotate(180deg)}
.dd-panel .lbl{display:block;font:700 .68rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--cool);padding:.3rem .6rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.35rem}
.dd-panel a{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:8px;font-size:.93rem;color:var(--soft)}
.dd-panel a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spectrum);flex:none}
.dd-panel a:hover{background:var(--panel-2);color:#fff}
.dd-panel a.all{color:var(--gold);font-weight:700}
.dd-panel a.all::before{display:none}
.hdr-cta{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.hdr-phone{display:none;align-items:center;gap:.45rem;font:700 1.05rem var(--f-body);color:#fff;white-space:nowrap}
.hdr-phone svg{width:19px;height:19px;color:var(--gold)}
.hdr-call,.hdr-book{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--fire1),var(--fire2));color:#fff;font:700 .95rem var(--f-body);padding:.62rem 1.1rem;border-radius:999px;white-space:nowrap;min-height:44px;background-origin:border-box}
.hdr-call svg,.hdr-book svg{width:17px;height:17px}
.hdr-book{display:none}
.burger{width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:none}
.burger i{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:380px){.hdr-call span{display:none}.hdr-call{padding:.62rem .8rem}.logo img{height:38px}}
@media (min-width:1081px){
  .nav{display:flex}.burger{display:none}.hdr-cta{margin-left:1rem}
}
@media (min-width:900px) and (hover:hover){
  .hdr-call{display:none}.hdr-book{display:inline-flex}.hdr-phone{display:inline-flex}
}
@media (min-width:1081px) and (max-width:1219px){.hdr-phone span{display:none}}

/* mobile menu */
.mnav{position:fixed;inset:var(--hdr) 0 0 0;z-index:59;background:var(--ink);overflow-y:auto;padding:1.4rem 0 7rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s ease}
.menu-open .mnav{opacity:1;visibility:visible;transform:none}
.mnav .wrap{display:flex;flex-direction:column}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:1.05rem .2rem;font:800 1.5rem var(--f-disp);text-transform:uppercase;cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary small{font:600 .75rem var(--f-body);letter-spacing:.12em;color:var(--cool);margin-left:.6rem;text-transform:uppercase}
.mnav summary svg{width:20px;height:20px;transition:transform .2s}
.mnav details[open] summary svg{transform:rotate(180deg)}
.mnav details a{display:block;padding:.7rem .2rem .7rem 1rem;color:var(--soft);border-top:1px solid var(--line)}
.mnav>.wrap>a{padding:1.05rem .2rem;font:800 1.5rem var(--f-disp);text-transform:uppercase;border-bottom:1px solid var(--line)}
.mnav .cta-row{margin-top:1.8rem}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;padding:0;display:flex;align-items:center;min-height:calc(92vh - var(--hdr));min-height:calc(92svh - var(--hdr))}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:68% 40%}
@media (prefers-reduced-motion:no-preference){.hero-bg img{animation:kb 26s ease-out both}}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,20,.62) 0%,rgba(6,11,20,.66) 40%,rgba(6,11,20,.9) 100%)}
.hero>.wrap,.phero>.wrap{position:relative;z-index:1;width:min(100% - 2.75rem,var(--wrap))}
.hero-inner{padding:2.6rem 0 3.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.15rem}
.hero h1{font-size:clamp(2.9rem,12vw,5.8rem);max-width:12ch;text-shadow:0 2px 24px rgba(6,11,20,.6);text-wrap:balance}
.hero-sub{color:#d3deeb;max-width:36rem;font-size:1.06rem;text-shadow:0 1px 12px rgba(6,11,20,.9);text-wrap:balance}
.hero-sub strong{color:#fff}
.trust{list-style:none;display:grid;gap:.5rem;text-align:left;margin-top:.4rem}
.trust li{display:flex;align-items:center;gap:.65rem;font-size:.95rem;font-weight:600;color:#dbe6f2}
.trust svg{width:18px;height:18px;color:var(--gold);flex:none}
.trust .st{fill:var(--gold);stroke:var(--gold)}
@media (min-width:1024px){
  .hero{min-height:min(calc(88vh - var(--hdr)),760px)}
  .hero-bg img{object-position:65% 35%}
  .hero-bg::after{background:linear-gradient(90deg,rgba(6,11,20,.92) 0%,rgba(6,11,20,.82) 32%,rgba(6,11,20,.5) 50%,rgba(6,11,20,.12) 66%,rgba(6,11,20,0) 80%)}
  .hero-inner{text-align:left;align-items:flex-start;padding:5.5rem 0;max-width:620px}
  .hero .cta-row{justify-content:flex-start}
  .trust{grid-template-columns:auto auto;column-gap:1.6rem}
}

/* ---------- page hero (every landing page mirrors the home hero) ---------- */
.phero{position:relative;overflow:hidden;display:flex;align-items:center;padding:0;min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr))}
.phero .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.72) 0%,rgba(6,11,20,.7) 45%,rgba(6,11,20,.92) 100%)}
.phero .hero-inner{padding:2.2rem 0 3rem}
.phero h1{font-size:clamp(2.6rem,11vw,5rem);max-width:14ch;text-shadow:0 2px 24px rgba(6,11,20,.6);text-wrap:balance}
.crumbs{font-size:.85rem;color:#b9c7d8;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem .5rem}
.crumbs a{padding:.72rem 0;margin:-.72rem 0;color:#dbe6f2}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}
@media (min-width:640px){.phero{min-height:0}.phero .hero-inner{padding:5rem 0}}
@media (min-width:1024px){
  .phero{min-height:560px}
  .phero .hero-bg::after{background:linear-gradient(90deg,rgba(6,11,20,.93) 0%,rgba(6,11,20,.84) 36%,rgba(6,11,20,.5) 56%,rgba(6,11,20,.14) 72%,rgba(6,11,20,0) 86%)}
  .phero .hero-inner{text-align:left;align-items:flex-start;max-width:640px}
  .phero .cta-row,.crumbs{justify-content:flex-start}
  .phero .trust{grid-template-columns:auto auto;column-gap:1.6rem}
}

/* ---------- promise strip ---------- */
.fee-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:1.35rem 0}
.fee-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;text-align:center}
.fee-item .disp{font-size:1.9rem}
.fee-item .disp em{font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.fee-item p{font-size:.84rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
@media (min-width:760px){.fee-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- service cards (whole card = link, real photo, no icon chips) ---------- */
.svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}
.svc-grid>.svc{width:100%}
@media (min-width:640px){.svc-grid>.svc{width:calc(50% - .6rem)}}
@media (min-width:1024px){.svc-grid>.svc{width:calc(33.333% - .8rem)}}
.svc{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .18s ease,border-color .18s ease}
.svc:hover{transform:translateY(-4px);border-color:var(--line-2)}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;opacity:.95}
.svc.cool::before{background:linear-gradient(90deg,var(--cool-deep),var(--cool))}
.svc.warm::before{background:linear-gradient(90deg,var(--warm),var(--ember))}
.svc.mix::before{background:var(--spectrum)}
.svc figure{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.svc figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover figure img{transform:scale(1.04)}
.svc-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.svc h3{font-size:1.55rem;margin-bottom:.5rem}
.svc p{font-size:.95rem;color:var(--muted);flex:1}
.svc .more{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.9rem;font-weight:700;color:var(--gold)}
.svc .more svg{width:16px;height:16px;transition:transform .2s}
.svc:hover .more svg{transform:translateX(3px)}
.brands{margin-top:2.4rem;text-align:center;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;align-items:baseline}
.brands strong{color:var(--text)}
.brands .lbl{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cool)}
@media (max-width:759px){.brands .lbl{flex-basis:100%}}

/* ---------- split prose ---------- */
.split{display:grid;gap:2.6rem;align-items:start}
@media (min-width:980px){.split{grid-template-columns:1.15fr .85fr;gap:3.6rem}}
.prose{text-align:center}
.prose h2{font-size:clamp(2.2rem,5vw,3.2rem);margin:1rem 0 1rem;text-wrap:balance}
.prose p{color:var(--soft);margin-top:1rem;max-width:62ch;margin-inline:auto;text-wrap:pretty}
.prose p:first-of-type{margin-top:0}
@media (min-width:980px){.prose{text-align:left}.prose p{margin-inline:0}}
.side{display:flex;flex-direction:column;gap:1.2rem}
.side-photo{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.side-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pts ul{list-style:none;display:grid;gap:.15rem}
.pts{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem}
.pts h3{font-size:1.35rem;margin-bottom:.5rem}
.pts li{display:flex;gap:.8rem;padding:.75rem 0;border-top:1px solid var(--line)}
.pts li:first-of-type{border-top:0}
.pts li svg{width:20px;height:20px;color:var(--cool);flex:none;margin-top:.15rem}
.pts b{display:block;font-weight:700;color:var(--text)}
.pts span{display:block;font-size:.92rem;color:var(--muted)}

/* ---------- reviews ---------- */
.rev-hero{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:2.4rem}
.rev-hero .score{font:800 5.2rem/1 var(--f-disp)}
.stars{display:flex;gap:.25rem;color:var(--gold)}
.stars svg{width:22px;height:22px;fill:var(--gold);stroke:var(--gold)}
.rev-hero p{color:var(--muted);font-size:.95rem}
.rev-hero p strong{color:var(--text)}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.rev .st{color:var(--gold);letter-spacing:.12em;font-size:.95rem}
.rev p{font-size:.95rem;color:var(--soft);flex:1}
.rev-by{display:flex;align-items:center;gap:.7rem}
.rev-av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:var(--spectrum)}
.rev-by .nm{font-weight:700;font-size:.92rem}
.rev-by .src{font-size:.78rem;color:var(--muted)}
.marquee{overflow:hidden;padding:.3rem 0}
.mq-track{display:flex;gap:1.1rem;width:max-content;animation:mq var(--mq,90s) linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
.mq-track .rev{width:340px;flex:none}
.mq-track .rev p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee{overflow-x:auto;overflow-y:hidden}}
@media (max-width:640px){.mq-track .rev{width:290px}}
.rev-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:760px){.rev-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev-note{text-align:center;color:var(--muted);font-size:.92rem;margin-top:1.8rem}
.rev-note a{color:var(--cool);font-weight:700}
.side .rev{background:var(--panel)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:860px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal button{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;background:var(--panel-2)}
.gal button img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gal button:hover img{transform:scale(1.04)}
.gal-cta{text-align:center;margin-top:2rem}
.gal-dots{display:none}
@media (max-width:760px){
  .gal.swipe{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:.7rem;margin:0 -1.375rem;padding:0 1.375rem;scrollbar-width:none}
  .gal.swipe::-webkit-scrollbar{display:none}
  .gal.swipe button{flex:0 0 80%;scroll-snap-align:center}
  .gal-dots{display:flex;justify-content:center;gap:7px;margin-top:1rem}
  .gal-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:all .2s}
  .gal-dots i.on{background:var(--gold);width:20px;border-radius:4px}
}
.lb{position:fixed;inset:0;z-index:90;background:rgba(3,6,12,.96);display:none;flex-direction:column;justify-content:center}
.lb.on{display:flex}
.lb-view{overflow:hidden;width:100%;touch-action:pan-y}
.lb-track{display:flex;transition:transform .3s ease}
.lb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;height:80vh;padding:0 1rem}
.lb-slide img{max-height:100%;max-width:100%;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.lb button{position:absolute;background:rgba(12,21,36,.9);border:1px solid var(--line-2);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb button svg{width:22px;height:22px}
.lb-x{top:16px;right:16px}.lb-p{left:16px;top:50%}.lb-n{right:16px;top:50%}
.lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--muted);font-size:.9rem}
@media (max-width:640px){.lb-p,.lb-n{display:none!important}}

/* ---------- club ---------- */
.club{position:relative;overflow:hidden}
.club::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--spectrum)}
.club-grid{display:grid;grid-template-columns:1fr;gap:2.6rem;align-items:center}
@media (min-width:1024px){.club-grid{grid-template-columns:1.05fr .95fr}}
.club-copy{text-align:center}
.club-copy h2{font-size:clamp(2.3rem,5.4vw,3.4rem);margin-top:1rem}
.club-copy>p{color:var(--muted);margin:1rem auto 0;max-width:520px}
.checks{list-style:none;margin:1.6rem auto 0;display:inline-grid;grid-template-columns:1fr;gap:.6rem;text-align:left}
@media (min-width:560px){.checks{grid-template-columns:1fr 1fr;column-gap:1.6rem}}
.checks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--soft)}
.checks svg{width:18px;height:18px;color:var(--cool);flex:none;margin-top:.22rem}
@media (min-width:1024px){.club-copy{text-align:left}.club-copy>p{margin-left:0}.club-copy .checks{margin-left:0}}
.club-card{background:var(--ink);border:1px solid var(--line);border-radius:18px;padding:2rem 1.7rem;position:relative;overflow:hidden}
.club-card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;background:var(--spectrum);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}
.club-price{display:flex;align-items:baseline;justify-content:center;gap:.4rem}
.club-price .num{font:800 4.6rem/1 var(--f-disp);background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.club-price .per{color:var(--muted);font-weight:600}
.club-sub{text-align:center;color:var(--muted);font-size:.9rem;margin-top:.3rem}
.seasons{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.5rem 0 1.4rem}
.season{border:1px solid var(--line);border-radius:12px;padding:1rem .9rem;text-align:center}
.season svg{width:26px;height:26px;margin:0 auto .5rem}
.season.spring svg{color:var(--cool)}.season.fall svg{color:var(--warm)}
.season .disp{font-size:1.25rem}
.season p{font-size:.82rem;color:var(--muted)}
.club-card .btn{width:100%}
.perk-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.perk{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem}
@media (min-width:640px){.perk{width:calc(50% - .5rem)}}
@media (min-width:1024px){.perk{width:calc(25% - .75rem)}}
.perk h3{font-size:1.35rem;margin-bottom:.4rem}
.perk p{color:var(--muted);font-size:.93rem}

/* ---------- forms (quote wizard + club signup) ---------- */
.form-sec{position:relative}
.qf{display:grid;gap:2.6rem;align-items:start}
@media (min-width:980px){.qf{grid-template-columns:.9fr 1.1fr;gap:3.6rem}}
.qf-copy{text-align:center}
.qf-copy h2{font-size:clamp(2.3rem,5.4vw,3.4rem);margin:1rem 0}
.qf-copy p{color:var(--muted);max-width:520px;margin-inline:auto}
@media (min-width:980px){.qf-copy{text-align:left}.qf-copy p{margin-inline:0}}
.contact-list{list-style:none;margin-top:1.6rem;display:inline-grid;gap:.2rem;text-align:left}
.contact-list a,.contact-list span{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;color:var(--soft);font-weight:600}
.contact-list svg{width:20px;height:20px;color:var(--gold);flex:none}
.card{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:1.6rem 1.4rem;position:relative}
@media (min-width:640px){.card{padding:2rem 2rem}}
.qw-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;font-size:.82rem;color:var(--muted);font-weight:600}
.qw-bar{height:4px;background:var(--panel-2);border-radius:4px;overflow:hidden;margin-bottom:1.4rem}
.qw-bar i{display:block;height:100%;width:25%;background:var(--spectrum);transition:width .3s ease}
.qw-step h3{font-size:1.7rem;margin-bottom:1rem}
.qw-step .hint{color:var(--muted);font-size:.9rem;margin:-.5rem 0 1rem}
.opts{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (min-width:480px){.opts.c2{grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}}
.opt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:left;padding:.9rem 1rem;border-radius:12px;border:1.5px solid var(--line-2);background:var(--ink);color:var(--text);font-weight:600;cursor:pointer;min-height:52px;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--cool)}
.opt.on{border-color:var(--gold);background:rgba(245,179,47,.08)}
.opt svg{width:16px;height:16px;opacity:.5}
.fld{display:block;margin-bottom:.9rem}
.fld span{display:block;font-size:.85rem;font-weight:700;color:var(--soft);margin-bottom:.35rem}
.fld span em{font-style:normal;color:var(--muted);font-weight:500}
.fld input,.fld textarea,.fld select{width:100%;font:500 1rem var(--f-body);color:var(--text);background:var(--ink);border:1.5px solid var(--line-2);border-radius:10px;padding:.85rem .9rem;min-height:52px}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--cool)}
.fld.bad input{border-color:var(--ember)}
.err{color:#ff9a86;font-size:.85rem;margin-top:.35rem}
.seg{display:flex;gap:.5rem;margin-bottom:.9rem}
.seg .opt{flex:1;justify-content:center;min-height:46px;padding:.6rem}
.qw-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem}
.qw-back{background:none;border:0;color:var(--muted);font-weight:700;cursor:pointer;padding:.7rem 0;display:inline-flex;align-items:center;gap:.4rem}
.qw-back svg{width:16px;height:16px}
.qw-nav .btn{flex:1;max-width:280px;margin-left:auto}
.urgent{display:flex;align-items:center;gap:.9rem;background:rgba(212,70,30,.12);border:1px solid rgba(212,70,30,.5);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem;font-size:.92rem;color:var(--soft)}
.urgent a{white-space:nowrap}
.qw-foot{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);text-align:center}
.qw-foot a{color:var(--text);font-weight:700}
.qw-done{text-align:center;padding:1rem 0}
.qw-done svg{width:54px;height:54px;color:var(--gold);margin:0 auto 1rem}
.qw-done h3{font-size:2rem;margin-bottom:.6rem}
.qw-done p{color:var(--muted)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.send-err{margin-top:.9rem;color:#ff9a86;font-size:.9rem;text-align:center}
.send-err a{color:#fff;font-weight:700;text-decoration:underline}

/* ---------- booking ---------- */
.book-frame{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}
.book-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--spectrum);z-index:2}
.book-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.book-bar a{color:var(--cool);font-weight:700;white-space:nowrap}
.book-frame iframe{width:100%;height:860px;border:0;background:#fff}
@media (max-width:640px){.book-frame iframe{height:min(1100px,150vh)}}
.book-alt{text-align:center;color:var(--muted);font-size:.93rem;margin-top:1.3rem}
.book-alt a{color:var(--cool);font-weight:700}

/* ---------- areas: map + editorial index list (no pills) ---------- */
.area-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:stretch}
@media (min-width:960px){.area-grid{grid-template-columns:1.05fr .95fr}}
.area-map{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:360px}
.area-map iframe{width:100%;height:100%;min-height:360px;border:0}
.area-side{text-align:center}
.area-side h3{font-size:1.9rem;margin-bottom:.6rem}
.area-side>p{color:var(--muted);font-size:.96rem}
@media (min-width:960px){.area-side{text-align:left}}
.idx{list-style:none;margin-top:1.3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));column-gap:1.6rem;border-top:1px solid var(--line-2);text-align:left}
.idx li{border-bottom:1px solid var(--line-2)}
.idx a,.idx span.row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.8rem .15rem;min-height:48px;font-weight:600;color:var(--soft)}
.idx a:hover{color:#fff}
.idx a svg{width:16px;height:16px;opacity:.5;flex:none;transition:transform .2s,opacity .2s}
.idx a:hover svg{opacity:1;transform:translateX(3px)}
.idx small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cool);font-weight:700}
.idx [aria-current]{background:var(--panel-2);color:#fff;padding-inline:.7rem;border-radius:8px}
@media (max-width:560px){.idx{grid-template-columns:1fr}}
.idx-lbl{font:700 .78rem var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--cool);text-align:center;margin-top:2.6rem}
.hours{list-style:none;display:grid;gap:.15rem;margin:.5rem 0 1rem;text-align:left}
.hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.93rem;color:var(--soft);border-bottom:1px solid var(--line);padding:.45rem 0}
.hours li span:first-child{color:var(--muted);font-weight:600}
.sa-card{margin-top:1.4rem;background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:1.3rem;text-align:left}
.sa-card .disp{font-size:1.35rem}
.sa-card a.tel{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:.45rem}
.sa-card a.tel svg{width:16px;height:16px}

/* ---------- faq ---------- */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem .2rem;font-weight:700;font-size:1.04rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary svg{width:20px;height:20px;flex:none;color:var(--warm);transition:transform .2s}
.faq-list details[open] summary svg{transform:rotate(45deg)}
.faq-list details p{color:var(--muted);padding:0 .2rem 1.2rem;max-width:68ch}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center}
@media (min-width:960px){.about-grid{grid-template-columns:.9fr 1.1fr}}
.about-photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);max-width:460px;margin:0 auto;width:100%}
.about-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.about-copy{text-align:center}
.about-copy h2{font-size:clamp(2.2rem,5vw,3.2rem);margin-top:1rem}
.about-copy p{color:var(--muted);margin-top:1rem}
.about-copy p strong{color:var(--text)}
.about-quote{margin-top:1.4rem;padding:1.1rem 1.3rem;border-left:3px solid var(--warm);background:var(--panel);border-radius:0 12px 12px 0;text-align:left;font-size:1.05rem;font-weight:500}
.about-quote cite{display:block;margin-top:.55rem;font-style:normal;font-size:.85rem;color:var(--muted);font-weight:600}
.creds{list-style:none;margin-top:1.4rem;border-top:1px solid var(--line);text-align:left}
.creds li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.creds li span:first-child{color:var(--muted)}
.creds li span:last-child{font-weight:700}
.about-cta{margin-top:1.6rem}
@media (min-width:960px){.about-copy{text-align:left}.about-cta{justify-content:flex-start}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center}
.cta-band .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.84),rgba(6,11,20,.9))}
.cta-band .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem}
.cta-band h2{font-size:clamp(2.4rem,6vw,4rem);max-width:18ch;text-wrap:balance}
.cta-band p{color:#c3d1e2;max-width:540px}

/* ---------- legal / simple pages ---------- */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.8rem;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--soft);margin-top:.7rem}
.legal ul{padding-left:1.2rem}
.legal a{color:var(--cool);font-weight:600}

/* ---------- footer ---------- */
.ftr{position:relative;padding:3.6rem 0 calc(5.6rem + env(safe-area-inset-bottom));background:#04080f}
.ftr::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum);opacity:.7}
.ftr-grid{display:grid;gap:2.2rem;text-align:center}
.ftr-brand img{height:52px;width:auto;margin:0 auto 1rem}
.ftr-brand p{color:var(--muted);font-size:.9rem}
.ftr-brand .tel{display:inline-flex;align-items:center;gap:.5rem;font:800 1.6rem var(--f-disp);margin-top:.8rem}
.ftr-brand .tel svg{width:20px;height:20px;color:var(--gold)}
.ftr h4{font:700 .74rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--cool);margin-bottom:.8rem}
.ftr ul{list-style:none;display:grid;gap:.15rem}
.ftr ul a{color:var(--soft);font-size:.92rem;display:inline-block;padding:.32rem 0}
.ftr ul a:hover{color:#fff}
.ftr-social{display:flex;gap:.8rem;justify-content:center;margin-top:1.1rem}
.ftr-social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ftr-social a:hover{color:#fff}
.ftr-social svg{width:18px;height:18px;fill:currentColor}
.ftr-bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem;align-items:center;color:var(--muted);font-size:.84rem;text-align:center}
.ftr-bottom nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.2rem}
.ftr-bottom a{padding:.4rem 0}
.ftr-bottom a:hover{color:#fff}
@media (min-width:900px){
  .ftr{padding-bottom:2.4rem}
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;text-align:left}
  .ftr-brand img{margin:0 0 1rem}
  .ftr-social{justify-content:flex-start}
  .ftr-bottom{flex-direction:row;justify-content:space-between}
}

/* ---------- sticky mobile bar: hidden until the hero is scrolled past ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr 1fr;background:rgba(6,11,20,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);transform:translateY(115%);transition:transform .35s ease;pointer-events:none}
.callbar.on{transform:none;pointer-events:auto}
.menu-open .callbar{transform:translateY(115%)!important}
.callbar a{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.65rem 0 .75rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);min-height:56px}
.callbar svg{width:20px;height:20px}
.callbar .c-call{color:#fff;background:linear-gradient(135deg,var(--fire1),var(--fire2))}
.callbar .c-text svg{color:var(--cool)}
.callbar .c-book svg{color:var(--gold)}
@media (min-width:900px) and (hover:hover){.callbar{display:none}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.gal .reveal,.marquee .reveal{transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.nj .reveal{opacity:1;transform:none}

/* ---- round 2 (10/11): rules sweep ---- */
h2{text-wrap:balance}
@media (max-width:640px){.eyebrow{letter-spacing:.16em;gap:10px}.eyebrow::before,.eyebrow::after{width:20px}}
/* left-aligned desktop kickers get one dash only */
@media (min-width:980px){.prose .eyebrow::after,.qf-copy .eyebrow::after{display:none}}
@media (min-width:960px){.about-copy .eyebrow::after{display:none}}
@media (min-width:1024px){.club-copy .eyebrow::after,.hero-inner .eyebrow::after{display:none}}
/* phones: long card lists become a swipe row that drifts slowly (stops on touch, resumes 3.5s later) */
@media (max-width:760px){
  .svc-grid.swipe{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:.9rem;margin:0 -1.375rem;padding:0 1.375rem .3rem;scrollbar-width:none}
  .svc-grid.swipe::-webkit-scrollbar{display:none}
  .svc-grid.swipe>.svc{flex:0 0 82%;width:auto;scroll-snap-align:center}
  .svc-grid.swipe .reveal{opacity:1;transform:none}
}
.is-clone{display:none!important}
@media (max-width:760px){
  .drift{scroll-snap-type:none!important}
  .drift>*{transform:translate3d(calc(var(--dx,0)*-1px),0,0)!important;transition:none!important}
  .drift>a.svc.is-clone{display:flex!important}
  .drift>button.is-clone{display:block!important}
  .drift+.gal-dots{display:none}
  .svc-grid.drift>.svc:hover{transform:translate3d(calc(var(--dx,0)*-1px),0,0)!important}
}
.swipe-hint{display:none;text-align:center;color:var(--muted);font-size:.85rem;margin-top:.9rem}
@media (max-width:760px){.swipe-hint{display:block}}

.prose .rev{margin-top:2rem;text-align:left}
.cta-band .hero-bg{z-index:0}

/* round 3 (10/12/26 QA): let the job photos show more color behind heroes and CTA bands */
@media (max-width:1023px){
  .phero .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.55) 0%,rgba(6,11,20,.62) 30%,rgba(6,11,20,.7) 55%,rgba(6,11,20,.9) 100%)}
}
.cta-band .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.66),rgba(6,11,20,.84))}
.cta-band h2{text-shadow:0 2px 24px rgba(6,11,20,.6)}

/* round 4 (10/12/26, Jeffrey's desktop review)
   Headlines = Arimo Bold: Arial Bold letterforms, the same wide grotesque as the RIDGEWOOD logo and truck decals
   (Big Shoulders was tall + condensed, the logo is not). The logo's soft dark shadow behind each letter is a
   drop-shadow filter, not text-shadow, so it also works on the gradient (background-clip:text) words.
   Arimo is ~1.6x wider than Big Shoulders, so every display size steps down. Fallback = Arial, nearly identical. */
:root{--f-disp:'Arimo',Arial,'Helvetica Neue',Helvetica,sans-serif}
/* 10/22/26: Tommy's NEW logo sets its wordmark in Open Sans Bold (rendered beside it), so the headlines follow it.
   Same width as Arimo at every size, so no display size moves. Fallback stays Arial. */
:root{--f-disp:'Open Sans',Arial,'Helvetica Neue',Helvetica,sans-serif}
h1,h2,h3,.disp{font-weight:700;letter-spacing:.005em;line-height:1.08}
/* ONE drop-shadow: two chained ones drew a hard dark box behind the heading wherever it crossed a swirl (10/22) */
h1,h2,.disp{filter:drop-shadow(0 2px 5px rgba(0,0,0,.72))}
.hero h1,.phero h1{text-shadow:none}
.hero h1{font-size:clamp(2.15rem,8.6vw,4.1rem);max-width:none}
.phero h1{font-size:clamp(1.95rem,7.6vw,3.6rem);max-width:none}
.sec-head h2{font-size:clamp(1.7rem,4.2vw,2.6rem);max-width:24ch}
.prose h2{font-size:clamp(1.6rem,3.8vw,2.35rem)}
.club-copy h2,.qf-copy h2{font-size:clamp(1.7rem,4vw,2.5rem)}
.cta-band h2{font-size:clamp(1.8rem,4.4vw,2.9rem);max-width:22ch}
.svc h3{font-size:1.18rem}
.pts h3,.perk h3{font-size:1.06rem}
.qw-step h3{font-size:1.32rem}
.fee-item .disp{font-size:1.4rem}
.season .disp{font-size:1rem}
.mnav summary,.mnav>.wrap>a{font-size:1.2rem}
@media (min-width:1024px){
  .hero-inner{max-width:720px}
  .phero .hero-inner{max-width:720px}
}

/* logo: bigger in the header (the wordmark was tiny at 44px) */
:root{--hdr:80px}
.logo img{height:54px}
@media (min-width:1081px){:root{--hdr:96px}.logo img{height:76px}}
@media (max-width:380px){.logo img{height:46px}}

/* the spectrum line under the header sat ON TOP of the open dropdowns: it has opacity (= its own stacking layer)
   and comes later in the DOM than the panels. Panels get their own higher layer. Same bug as LRT. */
.dd-panel{z-index:5}
.hdr::after{position:relative;z-index:0}
/* the header's backdrop-filter made Chrome paint the dropdown panels see-through (the hero showed through the menu).
   The blur now lives on a ::before layer behind the header content, so the panels are fully opaque. */
.hdr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,11,20,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* promise strip on tablets: three columns are too narrow for the uppercase captions, so stack until 960px */
@media (min-width:760px) and (max-width:959px){.fee-grid{grid-template-columns:1fr}}
.opts.c2{grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))}

/* ==========================================================================
   round 5 (10/20/26): art-direction pass on the header, hero, proof row and promise strip.
   - ONE accent: coastal blue for headline words, kickers and icons. Orange only on buttons.
     The logo's spectrum stays as thin lines (header rule, footer rule, club frame, quote bar).
   - Hero: the copy sits on a solid navy side of the photo, the truck stays clear on the right.
     Ken Burns zoom kept on purpose (Jeffrey's hero rule).
   - Proof row (rating / license / hours) + promise strip (Thomas's three promises), no repeats.
   REVERT: delete everything from this comment down, then restore build.py + data.py from
   _backup/design-2026-10-20-before/ (or run tools/revert_design_2026_10_20.py).
   ========================================================================== */
:root{--accent:#4aaef2;--cta:#c93f1b;--cta-hover:#ae2e17;--rule:rgba(148,180,220,.2)}

/* accent words + kickers: one colour, no rainbow text */
.grad,.club-price .num{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent)}
.eyebrow{color:var(--accent)}
.eyebrow::before,.eyebrow::after{background:currentColor;opacity:.75}

/* buttons: solid fills, quiet shadows */
.btn-fire,.hdr-call,.hdr-book,.callbar .c-call{background:var(--cta)}
.btn-fire{box-shadow:0 6px 18px rgba(0,0,0,.3)}
.btn-fire:hover,.hdr-call:hover,.hdr-book:hover{background:var(--cta-hover);box-shadow:0 8px 22px rgba(0,0,0,.36)}
.btn-ice{border-color:rgba(74,174,242,.55);background:rgba(6,11,20,.85)}
.btn-ice:hover{background:rgba(14,36,62,.92)}
@media (min-width:900px) and (hover:hover){
  .cta-online.btn-ice{background:var(--cta);border-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.3)}
  .cta-online.btn-ice:hover{background:var(--cta-hover)}
  .cta-call.btn-fire{background:rgba(6,11,20,.85);border-color:rgba(74,174,242,.55);box-shadow:none}
  .cta-call.btn-fire:hover{background:rgba(14,36,62,.92)}
}
.callbar .c-book svg{color:var(--accent)}

/* header: nav and the call/book cluster split by a hairline, active page underlined */
.nav>a,.dd>button{color:#d3deeb;position:relative}
.nav>a[aria-current]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.18rem;height:2px;border-radius:2px;background:var(--accent)}
.hdr-phone svg{color:var(--accent)}
@media (min-width:1081px){.hdr-cta{margin-left:1.2rem;padding-left:1.4rem;border-left:1px solid var(--rule);gap:1.1rem}}

/* hero: one rhythm for kicker > h1 > lede > buttons > proof */
.hero-inner,.phero .hero-inner{gap:0}
.hero .eyebrow,.phero .eyebrow{margin-bottom:1rem}
@media (max-width:1023px){.hero .eyebrow,.phero .eyebrow{color:#d2e9fb}}  /* pale blue: clears 4.5:1 over the sky on phones (measured 320-430) */
.phero .crumbs{margin-bottom:1rem}
.hero h1{line-height:1.03;letter-spacing:-.005em}
.hero-sub{margin-top:1.1rem;font-size:1.08rem;line-height:1.6;color:#d6e0ec}
.hero .cta-row,.phero .cta-row{margin-top:1.8rem}
/* phones + tablets: the photo shows at the top and bottom, solid enough behind the copy */
@media (max-width:1023px){
  .hero .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.52) 0%,rgba(6,11,20,.68) 10%,rgba(6,11,20,.71) 28%,rgba(6,11,20,.77) 55%,rgba(6,11,20,.86) 80%,rgba(6,11,20,.95) 100%)}
  .hero .hero-bg img{object-position:72% 40%}
}
@media (min-width:1024px){
  .hero{min-height:min(calc(86vh - var(--hdr)),720px)}
  .hero-inner{max-width:640px;padding:4.5rem 0 4.75rem}
  .hero h1{font-size:clamp(2.6rem,4.4vw,4rem)}
  .hero-sub{max-width:31rem;font-size:1.12rem}
  /* copy side near-solid navy, falls off fast past the text so the truck's cab and front stay clear */
  .hero .hero-bg::after,.phero .hero-bg::after{background:
    linear-gradient(90deg,rgba(6,11,20,.95) 0%,rgba(6,11,20,.92) 38%,rgba(6,11,20,.8) 47%,rgba(6,11,20,.42) 58%,rgba(6,11,20,.1) 68%,rgba(6,11,20,0) 76%),
    linear-gradient(0deg,rgba(6,11,20,.5) 0%,rgba(6,11,20,0) 26%)}
  .phero .hero-inner{max-width:640px}
}

/* proof row: three facts with hairline dividers under the buttons */
.trust{display:grid;grid-template-columns:repeat(3,auto);gap:0;margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--rule);text-align:left;justify-content:center}
.trust li{display:flex;align-items:center;gap:.7rem;padding:0 1.35rem;font-weight:400}
.trust li:first-child{padding-left:0}
.trust li:last-child{padding-right:0}
.trust li+li{border-left:1px solid var(--rule)}
.trust svg{width:22px;height:22px;color:var(--accent)}
.trust b{display:block;font:700 .98rem/1.25 var(--f-body);color:#fff}
.trust small{display:block;font-size:.84rem;line-height:1.35;color:#b6c5d7}
@media (min-width:1024px){.trust,.phero .trust{grid-template-columns:repeat(3,auto);justify-content:start}}
/* short phones (SE-size): keep the Call button above the fold */
@media (max-width:640px) and (max-height:700px){.hero .cta-row,.phero .cta-row{margin-top:1.3rem}.hero-sub{margin-top:.9rem}}
@media (max-width:640px){
  .trust{grid-template-columns:repeat(3,1fr);width:100%;max-width:360px;margin-inline:auto;text-align:center}
  .trust li,.trust li:first-child,.trust li:last-child{flex-direction:column;gap:.4rem;padding:0 .45rem}
  .trust b{font-size:.86rem}
  .trust small{font-size:.76rem}
}

/* promise strip: icon + short heading + one plain sentence, hairline dividers on desktop */
.fee-strip{padding:2rem 0}
.fee-grid{grid-template-columns:1fr;gap:1.35rem;text-align:left;max-width:440px}
.fee-item{display:flex;align-items:flex-start;gap:1rem}
.fee-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:rgba(74,174,242,.1);border:1px solid rgba(74,174,242,.28)}
.fee-ic svg{width:21px;height:21px}
.fee-h{font:700 1.06rem/1.25 var(--f-disp);text-transform:uppercase;letter-spacing:.01em;color:#fff;text-wrap:balance}
.fee-item p{margin-top:.3rem;font-size:.95rem;line-height:1.5;color:var(--soft);text-transform:none;letter-spacing:0;font-weight:400;text-wrap:pretty}
@media (min-width:960px){
  .fee-strip{padding:2.2rem 0}
  .fee-grid{grid-template-columns:repeat(3,1fr);gap:0;max-width:none}
  .fee-item{padding:0 1.8rem}
  .fee-item:first-child{padding-left:0}
  .fee-item:last-child{padding-right:0}
  .fee-item+.fee-item{border-left:1px solid var(--line)}
}

/* ==========================================================================
   online booking (10/21/26): our screens on Tommy's FieldPulse schedule (replaces the portal iframe)
   ========================================================================== */
.book-wrap{max-width:880px;margin-inline:auto}
.bk{padding:1.7rem 1.5rem 1.2rem;overflow:hidden}
.bk::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--spectrum)}
.bk h3[tabindex]:focus{outline:none}
.bk-svc{align-items:center;min-height:88px}
.bk-svc>span,.bk-time>span{display:flex;flex-direction:column;gap:.2rem}
.bk-svc b{font-size:1.02rem}
.bk-svc small{font-weight:500;color:var(--muted);font-size:.86rem;line-height:1.45}
.bk-svc.on small{color:var(--soft)}
.bk-load{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.95rem;padding:.2rem 0 1rem}
.bk-load svg{width:18px;height:18px;color:var(--accent);animation:bkpulse 1.1s ease-in-out infinite alternate}
@keyframes bkpulse{from{opacity:.35}to{opacity:1}}
.bk-days{display:flex;gap:.55rem;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:0 -2px .9rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.65rem .3rem .6rem;border-radius:12px;border:1.5px solid var(--line-2);background:var(--ink);color:var(--text);cursor:pointer;scroll-snap-align:start;transition:border-color .15s ease,background .15s ease}
.bk-day:hover{border-color:var(--accent)}
.bk-day.on{border-color:var(--gold);background:rgba(245,179,47,.08)}
.bk-day .dw{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bk-day .dn{font:800 1.95rem/1 var(--f-disp)}
.bk-day .dm{font-size:.78rem;font-weight:600;color:var(--soft)}
.bk-day .dc{font-size:.7rem;color:var(--muted);margin-top:.25rem;white-space:nowrap}
.bk-day.on .dw,.bk-day.on .dc{color:var(--gold)}
.bk-times{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.bk-time{min-height:64px}
.bk-time b{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bk-time>span{font-size:1.1rem;font-weight:700}
.bk-time.on b{color:var(--gold)}
.bk-note{margin-top:1rem;font-size:.9rem;color:var(--muted)}
.bk-note a,.bk-none a:not(.btn),.bk-done-more a{color:var(--text);font-weight:700;border-bottom:1px solid var(--line-2)}
.bk-none{padding:.2rem 0 .4rem}
.bk-none p{color:var(--soft);margin-bottom:1rem}
.bk-none .cta-row{justify-content:flex-start}
.bk-sum{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-radius:12px;background:rgba(74,174,242,.07);border:1px solid rgba(74,174,242,.28);margin-bottom:1.3rem}
.bk-sum-t{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.bk-sum-t b{font-size:1rem}
.bk-sum-t span{color:var(--soft);font-size:.93rem}
.bk-change{background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;padding:.5rem 0;flex:none}
.bk-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0 .9rem;grid-auto-flow:row dense}
.bk-grid .fld{grid-column:span 3}
.bk-grid .bk-wide{grid-column:1/-1}
.bk-grid .bk-third{grid-column:span 2}
@media (max-width:560px){
  .bk{padding:1.4rem 1.05rem 1rem}
  .bk-grid{grid-template-columns:1fr 1fr}
  .bk-grid .fld,.bk-grid .bk-town{grid-column:1/-1}
  .bk-grid .bk-third:not(.bk-town){grid-column:span 1}
  .bk-svc{min-height:0}
}
.bk .qw-done .bk-done-when{color:var(--text);font-weight:600;font-size:1.08rem;margin-bottom:.6rem;text-wrap:balance}
.bk .qw-done .bk-done-more{text-wrap:pretty}
@media (min-width:761px){.bk-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));overflow:visible;margin:0 0 1rem;padding:0}.bk-day{width:auto}}
@media (max-width:560px){
  .bk-grid{grid-template-columns:1fr 7.2rem}
  .bk-grid .fld,.bk-grid .bk-third:not(.bk-town){grid-column:1/-1}
  .bk-grid .bk-town{grid-column:1}
  .bk-grid .bk-town+.bk-third{grid-column:2}
}
@media (max-width:400px){
  .qw-nav:has(.btn){flex-direction:column-reverse;align-items:stretch;gap:.4rem}
  .qw-nav:has(.btn) .btn{max-width:none;margin-left:0}
  .qw-nav:has(.btn) .qw-back{justify-content:center}
  .bk .qw-top span+span{display:none}
}

/* ==========================================================================
   punch list (10/22/26): words and lines. build.py glues the last two words of short text and wraps phone
   numbers in .nw; CSS balances headings and keeps long paragraphs from ending on one word.
   ========================================================================== */
.nw{white-space:nowrap}
h1,h2,h3,h4,.disp,.fee-h,.eyebrow{text-wrap:balance}
p,li,small,figcaption,blockquote,cite{text-wrap:pretty}
.sec-head h2{max-width:28ch}
/* headings round 4 missed when it stepped the display sizes down for Arimo */
.about-copy h2{font-size:clamp(1.7rem,4vw,2.5rem)}
.area-side h3{font-size:clamp(1.3rem,3vw,1.6rem)}
.qw-done h3{font-size:clamp(1.5rem,5vw,1.8rem)}
.cta-band h2{font-size:clamp(1.7rem,4.4vw,2.9rem)}
/* 320-400px phones: "System Replacement" fits on one line inside the card */
@media (max-width:400px){.svc-body{padding:1.2rem 1.15rem 1.3rem}.svc h3{font-size:1.08rem}}

/* ==========================================================================
   punch list (10/22/26) part 2: section photo layers, Jeffrey's club + booking mockup, promise-strip icons,
   bigger desktop headlines, real reviewer avatars. REVERT: _backup/punch-2026-10-22-before/ (css, build.py, data.py, js).
   ========================================================================== */
/* logo-swirl colours for icons */
.k1{color:#4aaef2}.k2{color:#3ec3d8}.k3{color:#f5b32f}.k4{color:#ff8a3d}.k5{color:#f0553a}
.pg{display:block;fill:currentColor;flex:none}
.t-spec{background:linear-gradient(90deg,#2e8fe0 0%,#3ec3d8 26%,#f5b32f 56%,#ff7a2f 80%,#e8442e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-warm{background:linear-gradient(90deg,#ffa23a 0%,#ff7a2f 45%,#e8442e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* photo layers behind sections (real photos instead of a run of flat navy). Phone files are pre-cropped, so centre them. */
.has-bg{position:relative;isolation:isolate;overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:-2}
.sec-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--bp,50% 50%)}
.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
@media (max-width:760px){.sec-bg img{object-position:50% 50%}}
.has-bg .sec-head p,.has-bg .qf-copy p,.has-bg .area-side>p,.has-bg .rev-hero p{color:var(--soft)}
/* reviews: the iced suction line in navy duotone */
#reviews.has-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.86) 0%,rgba(6,11,20,.58) 42%,rgba(6,11,20,.62) 70%,rgba(6,11,20,.9) 100%)}
/* service area: the bay and the skyline; heavier on the text side, the map card stays the feature */
#area.has-bg::after{background:linear-gradient(180deg,rgba(12,21,36,.86) 0%,rgba(12,21,36,.5) 30%,rgba(12,21,36,0) 55%),
  linear-gradient(90deg,rgba(12,21,36,.62) 0%,rgba(12,21,36,.72) 44%,rgba(12,21,36,.93) 56%,rgba(12,21,36,.95) 100%)}
.has-bg .area-map{box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
/* quote: duotone photo behind the heading side only, solid behind the form */
@media (min-width:980px){
  .form-sec .sec-bg{right:auto;width:56%}
  .form-sec.has-bg::after{background:linear-gradient(90deg,rgba(12,21,36,.7) 0%,rgba(12,21,36,.8) 34%,rgba(12,21,36,.97) 50%,var(--panel) 56%)}
}
/* town pages: the town behind "about this town" */
.town-local.has-bg::after{background:linear-gradient(90deg,rgba(6,11,20,.94) 0%,rgba(6,11,20,.88) 46%,rgba(6,11,20,.6) 70%,rgba(6,11,20,.5) 100%),
  linear-gradient(0deg,rgba(6,11,20,.5),rgba(6,11,20,0) 35%,rgba(6,11,20,.4))}
/* footer: the Harbor Bridge at night along the bottom, very dark */
.ftr.has-bg{background:#04080f}
.ftr.has-bg::after{background:linear-gradient(180deg,#04080f 0%,rgba(4,8,15,.94) 35%,rgba(4,8,15,.8) 100%)}
.ftr.has-bg::before{z-index:1}
/* phones: the photo sits at the top of tall sections and fades into the section colour */
@media (max-width:979px){
  .form-sec.has-bg .sec-bg{bottom:auto;height:560px}
  .form-sec.has-bg::after{bottom:auto;height:560px;background:linear-gradient(180deg,rgba(12,21,36,.74) 0%,rgba(12,21,36,.82) 50%,var(--panel) 100%)}
  .town-local.has-bg .sec-bg{bottom:auto;height:600px}
  .town-local.has-bg::after{bottom:auto;height:600px;background:linear-gradient(180deg,rgba(6,11,20,.74) 0%,rgba(6,11,20,.84) 50%,var(--ink) 100%)}
  #area.has-bg .sec-bg{bottom:auto;height:640px}
  #area.has-bg::after{bottom:auto;height:640px;background:linear-gradient(180deg,rgba(12,21,36,.82) 0%,rgba(12,21,36,.6) 40%,var(--panel) 100%)}
}
@media (max-width:899px){
  .ftr.has-bg .sec-bg{top:auto;height:560px}
  .ftr.has-bg::after{background:linear-gradient(180deg,#04080f 0%,#04080f calc(100% - 560px),rgba(4,8,15,.86) calc(100% - 300px),rgba(4,8,15,.78) 100%)}
}

/* the logo swirl as decoration (club + booking mockup) */
.swirl{position:absolute;z-index:-1;pointer-events:none;height:auto;max-width:none}
.sw-club{left:-250px;top:-110px;width:700px;opacity:.15}
.sw-bl{left:-290px;bottom:-260px;width:640px;opacity:.13}
.sw-br{right:-300px;top:-160px;width:600px;opacity:.1;transform:scaleX(-1)}
@media (max-width:760px){.sw-club{left:auto;right:-170px;top:-60px;width:340px;transform:scaleX(-1);opacity:.14}.sw-bl{width:360px;left:-200px;bottom:-140px}.sw-br{width:320px;right:-190px;top:-80px}}

/* ---------- club section (Jeffrey's mockup 10/22/26) ---------- */
.club{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(4rem,7vw,6.4rem) 0}
.club .club-photo{left:auto;width:min(60%,900px)}
.club.has-bg::after{background:
  linear-gradient(90deg,var(--ink) 0%,var(--ink) 40%,rgba(6,11,20,.84) 50%,rgba(6,11,20,.5) 70%,rgba(6,11,20,.4) 100%),
  linear-gradient(0deg,rgba(6,11,20,.75),rgba(6,11,20,0) 30%),linear-gradient(180deg,rgba(6,11,20,.6),rgba(6,11,20,0) 25%)}
.club-grid{grid-template-columns:1fr;gap:2.6rem}
@media (min-width:1024px){.club-grid{grid-template-columns:1.1fr .9fr;gap:3.6rem}}
.club-copy,.club-copy>p{text-align:left;margin-left:0}
.club-copy .eyebrow::after{display:none}
.club-copy h2{font-size:clamp(2.15rem,6.6vw,4.1rem);line-height:1.02;margin-top:1rem}
.club-copy>p{color:var(--soft);font-size:1.08rem;max-width:34rem;margin-top:1.2rem}
.perks6{list-style:none;display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:1.9rem;max-width:34rem}
@media (min-width:560px){.perks6{grid-template-columns:1fr 1fr;column-gap:2rem;row-gap:1.1rem}}
.perks6 li{display:flex;align-items:center;gap:.9rem;font-weight:600;font-size:1.02rem;color:var(--text)}
.ring{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;background:rgba(6,11,20,.5)}
.ring .pg{width:21px;height:21px}
@media (max-width:559px){.ring{width:36px;height:36px}.ring .pg{width:18px;height:18px}.perks6 li{font-size:.98rem}}
.club-card{background:rgba(6,11,20,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;border-radius:20px;padding:2rem 1.8rem 1.5rem;max-width:460px;width:100%;margin:0 auto;box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.club-card::before{border-radius:20px;padding:2px;opacity:1;background:linear-gradient(135deg,#2e8fe0 0%,#3ec3d8 28%,#f5b32f 58%,#ff7a2f 80%,#e8442e 100%)}
.cc-k{display:block;font:700 .8rem/1.3 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.club-card .club-price{justify-content:flex-start;align-items:center;gap:.7rem;margin-top:.5rem}
.club-card .club-price .num{font:700 5rem/1 var(--f-disp);color:#fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.club-card .club-price .per{font:600 1.08rem/1.2 var(--f-body);color:var(--soft);text-align:left}
.club-card .club-sub{text-align:left;color:var(--soft);font-size:1rem;line-height:1.5;margin-top:.5rem}
.club-card .seasons{gap:.8rem;margin:1.4rem 0}
.club-card .season{background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:14px;padding:1.1rem .7rem 1rem}
.club-card .season .pg{width:42px;height:42px;margin:0 auto .55rem}
.club-card .season.spring .pg{color:#4aaef2}.club-card .season.fall .pg{color:#f5a623}
.club-card .season .disp{font-size:1.08rem}
.club-card .season p{font-size:.9rem;color:var(--soft);line-height:1.35;margin-top:.15rem}
.btn-club{width:100%;background:linear-gradient(90deg,#e9651f 0%,#cf3a1b 100%);color:#fff;font-size:1.2rem;min-height:60px;box-shadow:0 12px 30px -10px rgba(232,90,30,.7)}
.btn-club:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn-club svg{width:21px;height:21px}
.cc-foot{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.95rem}
@media (max-width:1023px){.club .club-photo{display:none}.club.has-bg::after{content:none}}
@media (max-width:420px){.club-card{padding:1.6rem 1.15rem 1.3rem}.club-card .club-price .num{font-size:4.2rem}}

/* ---------- booking section (Jeffrey's mockup 10/22/26) ---------- */
.book-sec{position:relative;isolation:isolate;overflow:hidden}
.book-head{display:grid;gap:1.6rem;margin-bottom:2.2rem;align-items:end}
@media (min-width:1024px){.book-head{grid-template-columns:1fr auto;gap:3rem}}
.book-head .eyebrow::after{display:none}
.bh-copy h2{font-size:clamp(2.05rem,5.8vw,3.7rem);margin-top:1rem;line-height:1.02}
.bh-copy p{color:var(--soft);font-size:1.06rem;max-width:38rem;margin-top:1rem}
.bh-feats{list-style:none;display:flex;padding-bottom:.4rem}
.bh-feats li{display:flex;align-items:center;gap:.75rem;padding:0 1.35rem;font-size:.92rem;line-height:1.35;color:var(--soft)}
.bh-feats li+li{border-left:1px solid var(--line-2)}
.bh-feats li:first-child{padding-left:0}
.bh-feats li:last-child{padding-right:0}
.bh-feats .pg{width:34px;height:34px}
.bh-feats a{color:#fff;font-weight:700;font-size:1rem}
@media (max-width:1023px){.bh-feats{display:none}}
.book-sec .book-wrap{max-width:none}
.bk{background:rgba(9,17,30,.88);border:1px solid var(--line-2);border-radius:20px;padding:1.8rem 2rem 1.3rem}
.bk .qw-count{text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}
.bk .qw-step h3{font-size:clamp(1.3rem,2.2vw,1.6rem);text-transform:none;letter-spacing:0}
.bk-main{display:grid;grid-template-columns:1fr;gap:.75rem}
@media (min-width:900px){.bk-main{grid-template-columns:repeat(3,1fr);gap:1rem}}
.opt.bk-card{align-items:center;gap:1.05rem;padding:1.05rem 1.1rem;background:rgba(6,11,20,.7);border-radius:14px}
@media (min-width:900px){.opt.bk-card{min-height:136px;padding:1.3rem 1.2rem}}
.bk-card .bk-ic .pg{width:46px;height:46px;opacity:1}
.bk-t{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:0}
.bk-t b{font-size:1.06rem;color:#fff}
.bk-t small{color:var(--muted);font-weight:500;font-size:.88rem;line-height:1.45}
.bk-card.on .bk-t small{color:var(--soft)}
@media (max-width:560px){.bk-t small{display:none}.bk-card .bk-ic .pg{width:32px;height:32px}.opt.bk-card{min-height:62px}}
.bk-club .qw-nav{justify-content:flex-start}
.bk .qw-foot a{color:var(--accent)}
@media (max-width:560px){.bk{padding:1.4rem 1.05rem 1rem}}

/* ---------- promise strip: bigger freestanding pictograms, no tinted circles (Jeffrey 10/22) ---------- */
.fee-ic{width:auto;height:auto;border:0;background:none;border-radius:0;display:block}
.fee-ic .pg{width:46px;height:46px}
.fee-item{align-items:center;gap:1.1rem}

/* ---------- reviews: the reviewer's real Google picture (or Google's letter avatar) + the real Google G ---------- */
.rev-av{width:40px;height:40px;font-size:1rem;object-fit:cover}
span.rev-av{background:#455a64}
.rev-by .src{display:flex;align-items:center;gap:.4rem}
.rev-by .src .g{width:14px;height:14px}

/* ---------- headlines a size up on desktop (Jeffrey 10/22) ---------- */
@media (min-width:1024px){
  .hero-inner{max-width:700px}
  .hero h1{font-size:clamp(3rem,4.9vw,4.6rem)}
  .phero h1{font-size:clamp(2.8rem,4.3vw,4.1rem)}
  .phero .hero-inner{max-width:700px}
  .sec-head h2{font-size:clamp(2.4rem,3.4vw,3.2rem)}
  .prose h2{font-size:clamp(2.1rem,3vw,2.8rem)}
  .qf-copy h2,.about-copy h2{font-size:clamp(2.2rem,3.2vw,3rem)}
  .cta-band h2{font-size:clamp(2.4rem,3.6vw,3.4rem)}
}

/* club, wide screens (mockup): copy | card, and the real Ridgewood sticker on a unit shows to the right of the card */
@media (min-width:1024px) and (max-width:1199px){.club .club-photo{display:none}.club.has-bg::after{content:none}}
@media (min-width:1200px){
  .club .club-grid{width:min(100% - 8vw,1320px);grid-template-columns:clamp(540px,41vw,690px) 410px;justify-content:start;gap:48px}
  .club-copy h2{font-size:clamp(3rem,3.9vw,4.1rem)}
  .club .club-photo{left:calc((100% - min(92%,1320px)) / 2 + clamp(540px,41vw,690px) + 388px);width:auto}
  .club.has-bg::after{background:
    linear-gradient(90deg,var(--ink) 0,var(--ink) calc((100% - min(92%,1320px)) / 2 + clamp(540px,41vw,690px) + 388px),rgba(6,11,20,.5) calc((100% - min(92%,1320px)) / 2 + clamp(540px,41vw,690px) + 500px),rgba(6,11,20,.3) calc((100% - min(92%,1320px)) / 2 + clamp(540px,41vw,690px) + 640px),rgba(6,11,20,.38) 100%),
    linear-gradient(0deg,rgba(6,11,20,.8),rgba(6,11,20,0) 28%),linear-gradient(180deg,rgba(6,11,20,.7),rgba(6,11,20,0) 26%)}
  .club-card{margin:0}
}

/* "Systems we install": the three logos across the section (Jeffrey 10/22) */
.brands{display:block;margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.brands .lbl{display:block;text-align:center;margin-bottom:1.6rem}
.brand-row{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;gap:1rem}
.brand-row img{width:auto;opacity:.92}
.brand-row .b-rheem{height:74px}.brand-row .b-daikin{height:40px}.brand-row .b-goodman{height:44px}
@media (max-width:640px){.brand-row .b-rheem{height:52px}.brand-row .b-daikin{height:24px}.brand-row .b-goodman{height:27px}.brands{margin-top:2.4rem}}

/* the logo swirl on the plain sections too, alternating sides */
.sw-sec{position:relative;isolation:isolate;overflow:hidden}
.sw-a{left:-300px;top:-140px;width:620px;opacity:.1}
.sw-b{right:-300px;top:-120px;width:600px;opacity:.09;transform:scaleX(-1)}
.sw-c{left:-310px;bottom:-240px;width:620px;opacity:.09}
@media (max-width:760px){.sw-a,.sw-c{width:340px;left:-210px}.sw-b{width:320px;right:-200px}}

/* footer listings: Google, Facebook, Instagram, TikTok, YouTube */
.ftr-social .pg{width:18px;height:18px}
.ftr-social{flex-wrap:wrap}

/* trust bar: solid icons; phones use the short wording so the three columns line up (Jeffrey 10/22) */
.trust .pg{width:22px;height:22px;color:var(--accent)}
.m-only{display:none}
@media (max-width:640px){.d-only{display:none}.m-only{display:inline}.trust svg,.trust .pg{width:24px;height:24px}}

/* hours: three groups, one per line, never broken inside */
.hrs{display:inline-grid;gap:.1rem;text-align:left}
.ftr-hrs .hrs{display:grid;justify-items:center;margin-top:.3rem;text-align:center}
@media (min-width:900px){.ftr-hrs .hrs{justify-items:start;text-align:left}}
.contact-list .hrs{font-weight:600}
.contact-list li:has(.hrs) span{align-items:flex-start}

/* "Real jobs, up close": bento on tablets and desktop (phones keep the swipe row) */
@media (min-width:761px){
  .gal.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15.5vw,220px);grid-auto-flow:dense;gap:.9rem}
  .gal.bento button{aspect-ratio:auto;border-radius:14px}
  .gal.bento .t-big{grid-column:span 2;grid-row:span 2}
  .gal.bento .t-wide{grid-column:span 2}
}

/* booking step 3 (10/22): name + phone, email, address + ZIP; the town comes from the ZIP; extras behind one link */
.bk-grid{grid-template-columns:repeat(6,1fr)}
.bk-grid .fld.bk-half{grid-column:span 3}
.bk-grid .fld.bk-addr{grid-column:span 4}
.bk-grid .fld.bk-zip{grid-column:span 2}
.bk-grid .bk-wide{grid-column:1/-1}
.bk-townline{display:flex;align-items:center;gap:.7rem;margin:-.35rem 0 .8rem;font-size:.92rem;color:var(--soft)}
.bk-townline span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ec3d8;margin-right:.5rem;vertical-align:middle}
.bk-town-edit,.bk-more{background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;padding:.45rem 0;font-size:.92rem;text-align:left;justify-self:start}
.bk-extra{display:grid;gap:0}
@media (max-width:560px){
  .bk-grid{grid-template-columns:1fr 6.6rem}
  .bk-grid .fld.bk-half,.bk-grid .fld.bk-wide{grid-column:1/-1}
  .bk-grid .fld.bk-addr{grid-column:1}
  .bk-grid .fld.bk-zip{grid-column:2}
}
.gal button img{object-position:var(--fp,50% 50%)}

/* punch list 10/22, sweep round 3 */
/* hours inside the quote contact list: the list's span{display:flex} made the three groups one wide row (card overflowed) */
.contact-list .hrs{display:grid;gap:.1rem;padding:0}
.contact-list .hrs span{display:block;padding:0}
/* swirls live in their own clipping layer; sections with swipe rows stay unclipped */
.sw-clip{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.sw-sec{overflow:visible}
/* club: the swirl shows above the dark overlay (behind the copy), like the mockup */
.club .sw-clip{z-index:0}
.club .club-grid{position:relative;z-index:1}
.club .sw-club{opacity:.2}
/* trust bar: desktop and phone wording are block lines, so the second line reads as deliberate */
.trust .d-only,.trust .m-only{display:block}
@media (min-width:641px){.trust .m-only{display:none}}
@media (max-width:640px){.trust .d-only{display:none}}
/* club headline: "Zero surprises." on one line from 320px up */
.club-copy h2{font-size:clamp(1.65rem,7.4vw,4.1rem)}
@media (min-width:1024px) and (max-width:1199px){.club-copy h2{font-size:clamp(2.6rem,4.6vw,3.4rem)}}
@media (min-width:1200px){.club-copy h2{font-size:clamp(3rem,3.9vw,4.1rem)}}
@media (max-width:340px){.svc h3{font-size:1rem}}
.bh-feats .bh-tel,.bh-feats .bh-tel .nw{display:block}

/* Jeffrey 10/22, phone pass */
/* promise strip: centred on phones and tablets, icon over the words */
@media (max-width:959px){
  .fee-grid{max-width:400px;margin-inline:auto;text-align:center;gap:1.8rem}
  .fee-item{flex-direction:column;align-items:center;gap:.6rem}
  .fee-item p{text-wrap:balance}
}
/* map boxes: an "Open in Google Maps" card sits behind the embed, which fades in once it has loaded */
.area-map{position:relative;background:var(--panel)}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.5rem;text-align:center;color:var(--text)}
.map-ph .pg{width:40px;height:40px;color:var(--accent);margin-bottom:.2rem}
.map-ph b{font:700 1.05rem/1.3 var(--f-disp)}
.map-ph span{font-size:.92rem;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.area-map iframe{position:relative;z-index:1;display:block;opacity:0;pointer-events:none;transition:opacity .5s ease}
.area-map iframe.ok{opacity:1;pointer-events:auto}
/* club season tiles: shrink with the card (at 320 the glued "system checkup" pushed the Fall tile out of the card) */
.club-card .seasons{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:350px){.club-card .season{padding-inline:.45rem}.club-card .season p{font-size:.8rem}}
/* reviews: a scroll row the JS drifts (the CSS marquee couldn't be swiped); the keyframes stay as the no-JS fallback */
.marquee.mq-js{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.marquee.mq-js::-webkit-scrollbar{display:none}
.marquee.mq-js .mq-track{animation:none;transform:translate3d(calc(var(--dx,0)*-1px),0,0);will-change:transform}
.marquee.dragging{cursor:grabbing;user-select:none}
/* swirls on phones: bigger share on screen, brighter, each parked in its section's emptiest spot. Right edge = the
   image as-is, left edge = mirrored, so the solid back of the C shows instead of the thin blade tips */
@media (max-width:760px){
  .swirl{width:300px;opacity:.26}
  #services .swirl{left:-135px;right:auto;top:-55px;bottom:auto;transform:scaleX(-1)}
  #work .swirl{left:auto;right:-140px;top:-70px;bottom:auto;transform:none}
  .club .sw-club{left:auto;right:-150px;top:clamp(270px,calc(84vw - 40px),330px);transform:none;opacity:.32}
  #about .swirl{left:-140px;right:auto;top:calc(100vw - 50px);transform:scaleX(-1)}
  #book .sw-br{left:auto;right:-140px;top:-45px;transform:none;opacity:.3}
  #book .sw-bl{display:none}
  #faq .swirl{left:-140px;right:auto;top:-90px;bottom:auto;transform:scaleX(-1)}
  #perks .swirl{left:-140px;right:auto;top:-60px;transform:scaleX(-1)}
}

/* home hero on phones: proof row in a card (Jeffrey's mockup, 10/22). Centred like every other phone hero again since
   10/23 (the mockup's left-aligned copy was there to clear a decal on the right). Photo (10/23): the whole truck across the top (hero-truck-m,
   tools/hero_truck_m.py: graded into the navy palette, wheels at 57.2vw, the driveway running on to 78.5vw), the
   copy starting just under the wheels on the darkened driveway so photo and copy read as one hero. A tailgate
   close-up beside the copy "doesn't feel trustworthy". The zoom is anchored to the top so it never pushes the roof
   rack out of frame. */
@media (max-width:760px){
  .hero{align-items:flex-start}
  .hero .hero-inner{padding-top:57vw}
  .hero h1{font-size:min(2.6rem,calc(10.4vw - 5px))}  /* "Keep your cool," fills the line and never wraps (320 up) */
  .phero .hero-sub{max-width:17rem}
  .hero .hero-bg img{object-position:50% 0;transform-origin:50% 0}
  .hero .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,0) 0,rgba(6,11,20,0) 46vw,rgba(6,11,20,.55) 56vw,rgba(6,11,20,.8) 66vw,rgba(6,11,20,.88) 80vw)}
  .hero .trust{max-width:none;width:100%;margin-top:1.7rem;padding:1rem .2rem;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(8,14,26,.72)}
}
@media (max-width:380px){.hero .trust{padding-inline:0}.hero .trust li,.hero .trust li:first-child,.hero .trust li:last-child{padding:0 .25rem}.hero .trust b{font-size:.82rem}}

/* NEW LOGO (Tommy, 10/22/26): the accent behind sections is now his flame ring + snowflake emblem (tools/backgrounds.py).
   Never mirrored: flipping it would alter his logo (the old swirl was flipped freely). It is a heavier shape than the
   swirl's thin blades, so it sits a little fainter; in the club section the tailgate photo already shows the emblem at
   >=1200px, so the big accent there steps right back. */
.swirl{transform:none!important}
@media (max-width:760px){.swirl{opacity:.22}.club .sw-club{opacity:.26}#book .sw-br{opacity:.26}}
@media (min-width:1200px){.club .sw-club{opacity:.1}}
/* footer: Tommy's horizontal lockup (as on the tailgate) */
.ftr-brand img{height:46px}
@media (max-width:380px){.ftr-brand img{height:40px}}
/* club photo (the new emblem on the tailgate) only where the strip beside the card can hold the whole emblem; narrower
   than that it was a sliver, so 1200-1499 drops it and the emblem accent behind the headline stays at full strength */
@media (min-width:1200px) and (max-width:1499px){.club .club-photo{display:none}.club.has-bg::after{content:none}.club .sw-club{opacity:.2}}
/* /book/ on phones (Jeffrey 10/24): its short hero ended the photo on a hard line straight into the booking section,
   with the section's corner swirl sitting on the seam. Fade the photo all the way into the page navy and drop that swirl here. */
@media (max-width:760px){
  .phero-book .hero-inner{padding-bottom:4.5rem!important}
  .phero-book .hero-bg::after{background:linear-gradient(180deg,rgba(6,11,20,.72) 0%,rgba(6,11,20,.72) 45%,rgba(6,11,20,.9) 72%,var(--ink) 100%)}
  .phero-book + .book-sec .sw-br{display:none}
  .phero-book + .book-sec{padding-top:1.25rem}
}