/*
Theme Name: ChargePros
Theme URI: https://chargepros.com
Author: Ad Blitz
Description: Custom dark funnel theme for ChargePros - EV charger installation. Premium, conversion-focused, built to host GoHighLevel calendar, form, and payment embeds. Composed entirely from the design-system component classes (see DESIGN.md).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: chargepros
*/

:root{
  /* LIGHT base theme - content sections. Dark zones (.theme-dark) redefine these locally. */
  --danger:#DC3535;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F6FB; --line:rgba(15,32,57,0.12);
  --text:#0B1524; --text-muted:#42526B; --text-dim:#64748E;
  --blue:#1A82FC; --blue-bright:#1A82FC; --blue-dk:#0C63D6; --gold:#B45309;
  --blue-glow:rgba(26,130,252,0.30); --surface-embed:#FFFFFF;
  /* Amber = the conversion accent (offers, CTAs, savings, urgency). Blue = trust. */
  --amber:#F59E0B; --amber-dk:#D97706; --amber-bright:#FBBF24; --amber-ink:#3a1d00;
  --amber-soft:rgba(245,158,11,0.12); --shadow-amber:0 14px 34px rgba(245,158,11,0.36);
  --grad-amber:linear-gradient(120deg,#F59E0B,#FBBF24);
  --fs-mega:clamp(44px,7vw,84px); --tight:-0.03em; --fs-stat:clamp(34px,4.5vw,56px);
  --fs-display:clamp(38px,5.4vw,60px); --fs-h1:clamp(32px,4.6vw,46px); --fs-h2:clamp(27px,4vw,38px);
  --fs-h3:21px; --fs-lg:19px; --fs-base:17px; --fs-sm:15px; --fs-xs:13px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --shadow:0 14px 40px rgba(15,32,57,0.10); --shadow-glow:0 14px 34px var(--blue-glow);
  --shadow-lg:0 30px 80px rgba(11,21,36,0.16);
  --ease:cubic-bezier(0.22,1,0.36,1); --dur:0.6s;
}
/* DARK zones: hero, footer, sticky mini bar. Same tokens, dark values - components inherit. */
.theme-dark,.hero,.site-footer,.est-mini{
  --bg:#070D18; --surface:#0F1A2C; --surface-2:#13203A; --line:rgba(255,255,255,0.10);
  --text:#F4F8FF; --text-muted:#9FB0C7; --text-dim:#7C8BA3;
  --blue-bright:#4D9FFF; --gold:#F5A623; --amber:#FBBF24; --amber-bright:#FCD34D;
  --shadow:0 18px 50px rgba(0,0,0,0.45);
}
/* The lead card is a LIGHT island inside the dark hero (North Hill style). */
.lead-card{
  --surface:#FFFFFF; --surface-2:#F2F6FB; --line:rgba(15,32,57,0.12);
  --text:#0E1A2B; --text-muted:#42526B; --text-dim:#64748E; --blue-bright:#1A82FC;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text-muted);
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue-bright);text-decoration:none}
h1,h2,h3{color:var(--text);font-weight:900;letter-spacing:var(--tight);line-height:1.08}

/* layout */
.wrap{max-width:1232px;margin:0 auto;padding:0 24px}
.section{padding:var(--s6) 0}
.section--tight{padding:var(--s5) 0}
.section--alt{background:var(--surface-2)}
/* First section on a page sits under the sticky header - give it extra top breathing room
   so the eyebrow/headline never feels cramped against the bar. */
.site-main > .section:first-child,.site-main > .section--tight:first-child{padding-top:calc(var(--s6) + var(--s3))}
.sec-head{text-align:center;max-width:680px;margin:0 auto var(--s3)}
.sec-head h1,.sec-head h2{font-size:var(--fs-h2);margin:var(--s2) 0 var(--s1)}
.sec-sub{font-size:var(--fs-base);color:var(--text-muted);max-width:560px;margin-left:auto;margin-right:auto}
.grid{display:grid;gap:var(--s3)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* text + marks */
.eyebrow{font-size:var(--fs-xs);font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue-bright);
  display:block;text-align:center}
.lede{font-size:var(--fs-lg);color:var(--text);line-height:1.55}
.badge{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:0.06em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--blue-bright)}
.badge--gold{background:var(--gold);color:#1A1206}

/* actions */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad-amber);color:var(--amber-ink);
  font-weight:900;font-size:var(--fs-base);padding:16px 32px;border-radius:var(--r-sm);border:none;cursor:pointer;
  box-shadow:var(--shadow-amber);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(245,158,11,0.44);color:var(--amber-ink)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--sm{padding:10px 20px;font-size:var(--fs-sm)}
.btn--block{display:flex;width:100%}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.card--pad{padding:var(--s4)}
.card--feature{border-color:rgba(26,130,252,0.55);box-shadow:var(--shadow-glow)}
.icon-box{width:44px;height:44px;border-radius:12px;background:rgba(26,130,252,0.14);color:var(--blue-bright);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.stat{text-align:center}
.stat .stat-n{font-size:26px;font-weight:900;color:var(--text);letter-spacing:-0.02em}
.stat .stat-l{font-size:var(--fs-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px}
.amt{font-size:30px;font-weight:900;color:var(--blue-bright);letter-spacing:-0.02em}

/* hero */
.hero{background:radial-gradient(1200px 600px at 50% -10%,rgba(26,130,252,0.18),transparent 60%),linear-gradient(180deg,#0B1322 0%,var(--bg) 100%);
  padding:var(--s6) 0;text-align:center;border-bottom:1px solid var(--line)}
.hero h1{font-size:var(--fs-display);font-weight:800;line-height:1.08;letter-spacing:-0.02em;margin:var(--s3) 0 var(--s2);max-width:840px}
.hero h1 span{color:var(--amber-bright);background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lede{max-width:660px;margin:0 auto var(--s4);color:var(--text-muted)}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trustbar{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}

/* steps */
.step-num{width:46px;height:46px;border-radius:13px;background:rgba(26,130,252,0.14);color:var(--blue-bright);
  font-size:21px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2)}
.card h3{font-size:var(--fs-h3);margin-bottom:var(--s1)}
.card p{font-size:var(--fs-sm);color:var(--text-muted)}

/* embed */
.embed-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;min-height:760px}
.embed-card iframe{width:100%;min-height:760px;border:none;border-radius:0;display:block}

/* callout */
.callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center;text-align:center}
.callout--blue{background:linear-gradient(135deg,rgba(26,130,252,0.18),rgba(12,99,214,0.10));border-color:rgba(26,130,252,0.4)}
.callout .callout-big{font-size:var(--fs-h2);font-weight:900;color:var(--text)}
.callout .callout-big span{color:var(--blue-bright)}
.callout p{font-size:var(--fs-base);color:var(--text-muted);max-width:560px}

/* feature tiles */
.feature h3{font-size:var(--fs-h3);margin:var(--s2) 0 6px}
.feature p{font-size:var(--fs-sm);color:var(--text-muted)}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 24px;margin-bottom:14px}
.faq summary{font-size:var(--fs-base);font-weight:700;color:var(--text);padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:26px;color:var(--blue-bright);font-weight:400}
.faq details[open] summary::after{content:'\2013'}
.faq details p{padding:0 0 18px;font-size:var(--fs-sm);color:var(--text-muted)}

/* cta band */
.cta-band{background:linear-gradient(135deg,var(--blue),var(--blue-dk));border-radius:var(--r-lg);text-align:center;padding:var(--s5) var(--s3);box-shadow:var(--shadow-glow)}
.cta-band h2{color:#fff;font-size:var(--fs-h2);margin-bottom:var(--s1)}
.cta-band p{color:rgba(255,255,255,0.92);font-size:var(--fs-lg);max-width:560px;margin:0 auto var(--s3)}
.cta-band .btn{background:#fff;color:var(--blue-dk);box-shadow:0 14px 34px rgba(0,0,0,0.2)}
.cta-band .btn:hover{background:#fff;color:var(--blue-dk)}

/* form fields (intake/confirm pages) */
.field{margin-bottom:var(--s3);text-align:left}
.field label{display:block;font-weight:700;color:var(--text);margin-bottom:var(--s1);font-size:var(--fs-base)}
.field .hint{font-size:var(--fs-sm);color:var(--text-dim);margin-bottom:var(--s1)}
.field input[type=file]{padding:10px;border-style:dashed;color:var(--text-dim);font-size:var(--fs-sm)}
.field input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:var(--r-pill);padding:9px 16px;background:rgba(26,130,252,0.14);color:var(--blue-bright);font-weight:700;font-family:inherit;font-size:var(--fs-sm);cursor:pointer}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-base);font-family:inherit;color:var(--text);background:var(--surface-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,130,252,0.25)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.photo-example{display:flex;gap:var(--s2);align-items:center;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-sm);padding:var(--s2);margin-top:var(--s1)}
.photo-example .ph{width:96px;height:72px;border-radius:var(--r-sm);background:rgba(26,130,252,0.12);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.photo-example .pt{font-size:var(--fs-sm);color:var(--text-muted)}
/* Post-estimate photo intake */
.wrap--narrow{max-width:760px}
.intake-stack{display:grid;gap:var(--s3);max-width:760px;margin:0 auto}
.photo-block h3{margin-bottom:4px}
.photo-ref{display:flex;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s3)}
.ref-shot{position:relative;width:132px;flex-shrink:0;border-radius:var(--r-sm);overflow:hidden;border:2px solid rgba(30,142,62,0.5)}
.ref-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ref-mark{position:absolute;top:8px;left:8px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-pill);color:#fff;font-size:15px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.ref-mark--good{background:#1E8E3E}
.ref-label{position:absolute;left:0;right:0;bottom:0;padding:5px 9px;font-size:11.5px;font-weight:700;color:#fff}
.ref-label--good{background:rgba(30,142,62,0.92)}
.ref-copy{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55}
.ref-copy b{color:var(--text)}
.file-drop{display:flex;align-items:center;gap:var(--s2);padding:14px 16px;border-radius:var(--r-sm);border:1px dashed var(--line);background:var(--surface-2);cursor:pointer;font-size:var(--fs-sm);color:var(--text-muted);flex-wrap:wrap;max-width:100%}
.file-drop input{flex:1 1 auto;min-width:0;max-width:100%}
@media(max-width:680px){.photo-ref{flex-direction:column;align-items:flex-start}.ref-shot{width:100%;max-width:220px}.intake-banner{padding:var(--s3)}}
/* Thank-you page */
.ty-head{text-align:center;max-width:560px;margin:0 auto var(--s4)}
.ty-check{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:var(--r-pill);background:rgba(30,142,62,0.12);margin:0 auto var(--s3)}
.ty-check span{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-pill);background:#1E8E3E;color:#fff;font-size:24px;font-weight:900}
.ty-step{display:flex;gap:var(--s2);align-items:flex-start;text-align:left}
.ty-num{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);background:rgba(26,130,252,0.10);color:var(--blue-dk);font-weight:900;font-size:18px}
.ty-step h3{margin-bottom:4px}
.result{max-width:720px;margin:var(--s3) auto 0;border-radius:var(--r-lg);border:1px solid rgba(26,130,252,0.5);
  background:linear-gradient(135deg,rgba(26,130,252,0.16),rgba(12,99,214,0.08));padding:var(--s4);text-align:center;display:none}
.result.show{display:block}
.result .rec-badge{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue-bright);background:var(--surface-2);padding:5px 14px;border-radius:var(--r-pill);margin-bottom:var(--s2)}
.result .rtier{font-size:var(--fs-h3);color:var(--text);font-weight:800}
.result .rprice{font-size:48px;font-weight:900;color:var(--text);letter-spacing:-0.03em;margin:6px 0}
.result .rprice .strike{font-size:22px;color:var(--text-dim);text-decoration:line-through;margin-left:10px;font-weight:700}
.result .rnote{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s3)}
/* pay / tiers */
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:680px){.pay-grid{grid-template-columns:1fr}}
.tier-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);text-align:center}
.tier-card.is-rec{border-color:rgba(26,130,252,0.55);box-shadow:var(--shadow-glow)}
.tier-card .tn{font-size:var(--fs-xs);font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--blue-bright)}
.tier-card .tp{font-size:38px;font-weight:900;color:var(--text);letter-spacing:-0.03em;margin:8px 0 2px}
.tier-card .td{font-size:var(--fs-sm);color:var(--text-muted);min-height:42px;margin-bottom:var(--s2)}
.tier-card .tier-list{list-style:none;text-align:left;margin:0 0 var(--s2);padding:0}
.tier-card .tier-list li{position:relative;padding:5px 0 5px 24px;font-size:var(--fs-sm);color:var(--text-muted);border-bottom:1px solid var(--line)}
.tier-card .tier-list li:last-child{border-bottom:0}
.tier-card .tier-list li::before{content:'\2713';position:absolute;left:0;color:var(--blue-bright);font-weight:800}
.tier-card .tm{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s2)}
.tier-card .tm b{color:var(--blue-bright)}
.tier-card .badge{margin-bottom:var(--s1)}
.pay-options{display:flex;flex-direction:column;gap:var(--s2);max-width:520px;margin:var(--s3) auto 0}
.pay-option{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3);text-align:left}
.pay-option .po-label{font-weight:700;color:var(--text);font-size:var(--fs-base)}
.pay-option .po-sub{font-size:var(--fs-sm);color:var(--text-muted)}
/* selectable variant (estimator payment choice) */
.pay-options--select{max-width:none;margin:var(--s2) 0 var(--s3);gap:var(--s1)}
.pay-options--select .pay-option{cursor:pointer;background:var(--surface-2);padding:10px 14px;transition:border-color .15s,background .15s}
.pay-options--select .pay-option:hover{border-color:rgba(26,130,252,0.4)}
.pay-options--select .pay-option.is-on{border-color:var(--blue);background:rgba(26,130,252,0.10);box-shadow:0 0 0 3px rgba(26,130,252,0.16)}
.pay-options--select .pay-option.is-on .po-label::after{content:' \2713';color:var(--blue-bright)}
.pay-options--select .pay-option:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
.pay-options--select .po-label{font-size:var(--fs-sm)}
.pay-options--select .po-sub{font-size:var(--fs-xs)}
.note-band{max-width:720px;margin:var(--s3) auto 0;text-align:center;font-size:var(--fs-xs);color:var(--text-dim);line-height:1.6}
.checklist{list-style:none;max-width:640px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
.checklist li{position:relative;padding-left:28px;color:var(--text-muted);font-size:var(--fs-base)}
.checklist li b{color:var(--text)}
.checklist li::before{content:'\2713';position:absolute;left:0;color:var(--blue-bright);font-weight:800}
@media(max-width:680px){.checklist{grid-template-columns:1fr}}
/* image card (product visuals) */
.img-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,border-color .2s}
.img-card .img-wrap{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.img-card img{width:100%;height:100%;object-fit:cover;display:block}
.img-card .cap{padding:var(--s2) var(--s3) var(--s3)}
.img-card .cap h3{font-size:var(--fs-h3);margin-bottom:6px}
.img-card .cap p{font-size:var(--fs-sm);color:var(--text-muted)}
/* partner strip */
.partners{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:center}
.partners .pl{font-size:var(--fs-lg);font-weight:800;color:var(--text-muted);letter-spacing:-0.01em;opacity:.85}
/* reviews */
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);text-align:left}
.review-card .stars{color:var(--gold);font-size:var(--fs-base);letter-spacing:2px}
.review-card .rq{font-size:var(--fs-base);color:var(--text);line-height:1.55;margin:var(--s1) 0 var(--s2)}
.review-card .rn{font-size:var(--fs-sm);color:var(--text-dim);font-weight:700}
.review-widget{max-width:1232px;margin:0 auto}
.review-widget iframe{width:100%;min-width:100%;border:0;display:block}
.review-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:var(--s3)}
.review-head .big{font-size:34px;font-weight:900;color:var(--text)}
.review-head .stars{color:var(--gold);font-size:22px;letter-spacing:3px}
/* coverage */
.coverage{text-align:center;font-size:var(--fs-lg);color:var(--text-muted);line-height:2;max-width:820px;margin:0 auto}
.coverage b{color:var(--text)}
/* logo image in chrome */
.brand img{height:34px;width:auto;display:block}
.site-footer .foot-logo{height:30px;width:auto;margin:0 0 var(--s2);display:block;opacity:.9}
.site-footer div{margin-top:4px}
.site-footer .copy{margin-top:10px;color:var(--text-dim)}
.img-card:hover{transform:translateY(-3px);border-color:rgba(26,130,252,0.4)}
@media(max-width:560px){
  .section{padding:var(--s4) 0}
  .hero{padding:var(--s5) 0}
  .trustbar{gap:var(--s3) var(--s4);margin-top:var(--s4)}
  .form-card,.card--pad{padding:var(--s3)}
}

/* site chrome */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,15,26,0.92);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(255,255,255,0.08)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:22px;font-weight:900;letter-spacing:-0.04em;color:#EAF1FB}
.brand .logo b{color:var(--blue-bright)}
.site-nav{display:flex;align-items:center;gap:18px}
.site-nav .phone{font-weight:800;color:#EAF1FB;font-size:16px}
@media(max-width:680px){.site-nav .phone{display:none}}
.site-footer{background:#0A0F1A;border-top:1px solid var(--line);color:var(--text-dim);text-align:left;padding:var(--s5) 0 var(--s3);font-size:var(--fs-sm)}
.site-footer b{color:var(--text)}
.site-footer a{color:var(--text-muted)}
.site-footer a:hover{color:var(--blue-bright)}
.site-footer .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:var(--s4)}
.site-footer .foot-blurb{color:var(--text-muted);max-width:300px;line-height:1.6}
.site-footer h4{color:var(--text);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--s2)}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:8px}
.site-footer .foot-bottom{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;color:var(--text-dim)}
@media(max-width:880px){.site-footer .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer{text-align:center}.site-footer .foot-grid{grid-template-columns:1fr;gap:var(--s3)}.site-footer .foot-logo{margin:0 auto var(--s2)}.site-footer .foot-blurb{max-width:none;margin:0 auto}.site-footer .foot-bottom{justify-content:center;text-align:center}}

@media(max-width:880px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .section{padding:var(--s5) 0}
}

/* ============================================================
   MOTION + INTERACTION (design-system, see DESIGN.md > Motion)
   All animation is token-based and respects reduced-motion.
   ============================================================ */
/* scroll reveal (applied + staggered by app.js) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* hero entrance + living glow */
.hero{position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 320px at 50% -40px,var(--blue-glow),transparent 70%);animation:cpGlow 7s ease-in-out infinite}
.hero .eyebrow{animation:cpUp .7s ease both .05s}
.hero h1{animation:cpUp .7s ease both .15s}
.hero .lede{animation:cpUp .7s ease both .28s}
.hero .cta-row{animation:cpUp .7s ease both .4s}
.hero .trustbar{animation:cpUp .7s ease both .52s}
@keyframes cpGlow{0%,100%{opacity:.32;transform:translateY(0)}50%{opacity:.6;transform:translateY(10px)}}
@keyframes cpUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* buttons: press feedback + one-time pulse */
.btn:active{transform:translateY(0) scale(.98)}
@keyframes cpPulse{0%,100%{box-shadow:var(--shadow-glow)}50%{box-shadow:0 0 0 9px rgba(26,130,252,.16),var(--shadow-glow)}}
.btn.pulse{animation:cpPulse 1.25s ease 1}
/* image cards: zoom on hover */
.img-card img{transition:transform .55s ease}
.img-card:hover img{transform:scale(1.06)}
/* faq: rotating + into x */
.faq summary::after{transition:transform .25s ease}
.faq details[open] summary::after{content:'+';transform:rotate(45deg)}
/* sticky header shrink + shadow */
.site-header{transition:background .25s,box-shadow .25s}
.site-header .bar{transition:height .25s}
.site-header.scrolled{background:rgba(10,15,26,0.85);backdrop-filter:saturate(160%) blur(12px);border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.site-header.scrolled .bar{height:56px}
/* top scroll-progress bar (width set by app.js) */
.cp-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
/* calendar embed skeleton shimmer */
.embed-card{position:relative}
.embed-skeleton{position:absolute;inset:0;border-radius:0;
  background:linear-gradient(100deg,var(--surface-2) 30%,#1d2c47 50%,var(--surface-2) 70%);background-size:200% 100%;animation:cpShimmer 1.4s infinite linear}
.embed-card.loaded .embed-skeleton{display:none}
@keyframes cpShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* section divider hairline */
.hr-glow{height:1px;border:0;max-width:1232px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(26,130,252,.5),transparent)}
/* floating mobile book button */
.float-book{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none;justify-content:center}
.float-book .btn{width:100%;box-shadow:0 12px 30px rgba(0,0,0,.5),var(--shadow-glow)}
@media(max-width:680px){.float-book.show{display:flex}}
/* accessibility: honor reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   PREMIUM PASS - cinematic video hero, depth, dividers
   ============================================================ */
.hero--video{display:flex;flex-direction:column;justify-content:center;min-height:92vh;position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,15,26,0.72) 0%,rgba(10,15,26,0.58) 42%,rgba(10,15,26,0.86) 78%,var(--bg) 100%)}
.hero--video .wrap{position:relative;z-index:2}
.hero--video::after{z-index:1}
/* split hero: headline left, opt-in lead card right (landing) */
.hero--split{text-align:left}
.hero--split .eyebrow{text-align:left}
/* much heavier scrim than the centered hero: the video reads as texture, not content,
   so the headline and the form card hold the contrast */
.hero--split .hero-scrim{background:
  linear-gradient(100deg,rgba(10,15,26,0.97) 0%,rgba(10,15,26,0.92) 46%,rgba(10,15,26,0.78) 100%),
  linear-gradient(180deg,rgba(10,15,26,0.35) 0%,transparent 30%,transparent 65%,var(--bg) 100%)}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--s5);align-items:center}
.hero--split h1{font-size:clamp(36px,4.4vw,56px);margin:var(--s2) 0 18px;max-width:none}
.hero--split .lede{margin:0 0 var(--s3);max-width:500px;font-size:var(--fs-base)}
.hero--split .checklist{grid-template-columns:1fr;max-width:480px;margin:0 0 var(--s3);gap:10px}
.hero--split .checklist li{font-size:var(--fs-sm);line-height:1.45}
.hero-meta{font-size:var(--fs-xs);color:var(--text-dim);letter-spacing:0.02em}
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0;overflow:hidden;box-shadow:0 30px 70px rgba(4,10,22,0.45)}
.lead-card .lc-body{padding:var(--s4) var(--s4) var(--s3)}
.lead-card .lc-offer-chip{display:inline-block;background:var(--grad-amber);color:var(--amber-ink);font-size:var(--fs-xs);font-weight:900;letter-spacing:0.02em;padding:7px 14px;border-radius:var(--r-pill);box-shadow:var(--shadow-amber);margin-bottom:var(--s2)}
.lead-card .lc-title{font-size:24px;font-weight:900;color:var(--text);letter-spacing:-0.02em;line-height:1.15;margin-bottom:var(--s3)}
.lead-card .lc-title span{color:var(--amber-dk)}
.lead-card .field{margin-bottom:var(--s2)}
.lead-card .field label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-dim);margin-bottom:6px}
.lead-card .field input,.lead-card .field select{padding:12px 14px}
.lead-card .lc-fine{font-size:var(--fs-xs);color:var(--text-dim);margin-top:var(--s2);text-align:center}
/* multi-select service pills inside the lead card */
.check-pills{display:flex;flex-wrap:wrap;gap:8px}
.check-pills .pill{cursor:pointer}
.check-pills .pill input{position:absolute;opacity:0;pointer-events:none}
.check-pills .pill span{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);background:var(--surface);transition:border-color .15s,background .15s,color .15s}
.check-pills .pill:hover span{border-color:rgba(26,130,252,0.45)}
.check-pills .pill input:checked + span{background:rgba(26,130,252,0.14);border-color:var(--blue);color:var(--text)}
.check-pills .pill input:checked + span::after{content:' \2713';color:var(--blue-bright)}
.check-pills .pill input:focus-visible + span{outline:2px solid var(--blue-bright);outline-offset:2px}
.check-pills.pills-error .pill span{border-color:rgba(245,166,35,0.7)}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s4)}
  .hero--split .hero-scrim{background:linear-gradient(180deg,rgba(10,15,26,0.96) 0%,rgba(10,15,26,0.9) 60%,var(--bg) 100%)}
}
/* surface depth on cards (subtle top sheen + grounded shadow) */
.card,.img-card,.tier-card,.review-card,.step,.callout{
  box-shadow:0 8px 26px rgba(15,32,57,0.07)}
.card:hover{border-color:rgba(26,130,252,0.32);transform:translateY(-2px);transition:transform .2s,border-color .2s}
/* section divider hairline used between major sections */
.hr-glow{height:1px;border:0;max-width:1232px;margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(26,130,252,0.45),transparent)}
@media(max-width:880px){.hero--video{min-height:84vh}}
/* Mobile: let the hero size to its content so there's no tall empty gap below the form. */
@media(max-width:560px){.hero--video{min-height:0;padding:var(--s5) 0}}

/* ============================================================
   TAP-TO-QUOTE ESTIMATOR (see DESIGN.md > Estimator)
   ============================================================ */
.est-factor{margin-bottom:var(--s4)}
.est-factor .q{font-size:var(--fs-h3);font-weight:800;color:var(--text);margin-bottom:var(--s2)}
.est-factor .hint{font-size:var(--fs-sm);color:var(--text-dim);margin:calc(-1 * var(--s1)) 0 var(--s2)}
.opt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s2)}
.opt-row--2{grid-template-columns:repeat(2,1fr)}
.opt-row--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){.opt-row--2,.opt-row--3{grid-template-columns:1fr}}
.opt{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;color:var(--text-muted)}
.opt:hover{border-color:rgba(26,130,252,0.4);transform:translateY(-1px)}
.opt .opt-t{font-weight:700;color:var(--text);font-size:var(--fs-base)}
.opt .opt-d{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45}
.opt .opt-p{font-size:var(--fs-sm);color:var(--blue-bright);font-weight:700}
.opt .badge{position:absolute;top:-11px;right:12px}
.opt:has(> .badge){padding-top:24px}
.opt.is-on{border-color:var(--blue);background:rgba(26,130,252,0.10);box-shadow:0 0 0 3px rgba(26,130,252,0.16)}
.opt.is-on .opt-t::after{content:' \2713';color:var(--blue-bright)}
.opt:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
/* live estimate summary */
.est-summary{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow)}
.est-summary h3{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.est-lines{list-style:none;margin:0 0 var(--s2)}
.est-line{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-muted);padding:7px 0;border-bottom:1px solid var(--line)}
.est-line b{color:var(--text);font-weight:600}
.est-line .lp{color:var(--blue-bright);font-weight:700;white-space:nowrap}
.est-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s2);padding:14px 16px;border-radius:var(--r);background:var(--amber-soft);border:1px solid rgba(245,158,11,0.25)}
.est-total .tl{font-size:var(--fs-sm);font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:0.04em}
.est-total .tv{font-size:34px;font-weight:900;color:var(--amber-dk);letter-spacing:var(--tight)}
.est-finance{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s1)}
.est-finance b{color:var(--blue-bright)}
.est-finance .fine{color:var(--text-dim);font-size:var(--fs-xs)}
.est-reward{background:rgba(245,166,35,0.08);border:1px solid rgba(245,166,35,0.5);border-radius:var(--r-sm);padding:10px 14px;margin:var(--s2) 0 var(--s3);font-size:var(--fs-sm);color:var(--text)}
.est-reward b{color:var(--gold)}
.estimator{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s4);align-items:start}
@media(max-width:880px){.estimator{grid-template-columns:1fr;padding-bottom:88px}.est-summary{position:static}}
/* mobile sticky mini-total: keeps the live price visible while factors are tapped */
.est-mini{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none;align-items:center;justify-content:space-between;gap:var(--s2);
  background:var(--surface);border:1px solid rgba(26,130,252,0.5);border-radius:var(--r);padding:12px 16px;box-shadow:0 12px 30px rgba(0,0,0,.5),var(--shadow-glow)}
.est-mini .emt{font-size:var(--fs-lg);font-weight:900;color:var(--text)}
.est-mini .emf{font-size:var(--fs-xs);color:var(--text-muted)}
.est-mini .emf b{color:var(--blue-bright)}
@media(max-width:880px){.est-mini.show{display:flex}}
.est-summary .btn{margin-top:12px}
.est-summary .field{margin-bottom:var(--s2);text-align:left}

/* Thank-you merged intake form - banner, required marker, next-steps head, status */
.intake-banner{background:var(--grad-amber);padding:var(--s3) var(--s4);border:0}
.intake-banner__kicker{font-size:var(--fs-xs);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber-ink)}
.intake-banner__title{color:var(--amber-ink);font-size:var(--fs-lg);font-weight:800;margin-top:2px}
.req{color:var(--danger)}
.ty-next-head{text-align:center;font-size:var(--fs-lg);font-weight:800;color:var(--text);margin:var(--s5) 0 var(--s3)}
.intake-status{max-width:560px;margin:var(--s3) auto 0;text-align:center;font-size:var(--fs-base);font-weight:600;color:var(--blue-dk);line-height:1.6}