/* Octopus Car Detailing — landing page styles */

:root{
  --ink:#0b0b0d;
  --charcoal:#18160f;
  --charcoal-2:#221f16;
  --paper:#f7f3e9;
  --white:#ffffff;
  --gold:#c9982f;
  --gold-bright:#e7bb4c;
  --gold-dim:#8a6b23;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(11,11,13,.12);
  --muted-dark:#a8a292;
  --muted-light:#5f5a4d;
  --ok:#5a7d4f;
  --cut:14px;
  --maxw:1180px;
  --shadow:0 20px 50px rgba(0,0,0,.28);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Barlow',Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:800;letter-spacing:.01em;margin:0;text-transform:none;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.section{padding:64px 0;}
@media (min-width:860px){.section{padding:96px 0;}}
.section.on-dark{background:var(--ink);color:var(--white);}
.section.on-charcoal{background:var(--charcoal);color:var(--white);}
/* Benefits: animated glossy car-paint background (drifting sheen + sweeping shine streak) */
.benefits{position:relative;overflow:hidden;isolation:isolate;}
.benefits > .wrap{position:relative;z-index:2;}
.benefits::before{
  content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 42% at 28% 18%, rgba(231,187,76,.11), transparent 62%),
    radial-gradient(48% 44% at 80% 82%, rgba(120,160,205,.10), transparent 64%),
    linear-gradient(118deg, transparent 34%, rgba(255,255,255,.045) 47%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.045) 53%, transparent 66%);
  background-size:150% 150%,150% 150%,320% 320%;
  background-repeat:no-repeat;
  animation:benefitsSheen 8s ease-in-out infinite;
}
@keyframes benefitsSheen{
  0%{background-position:0% 0%,100% 100%,0% 50%;}
  50%{background-position:34% 26%,66% 74%,64% 50%;}
  100%{background-position:0% 0%,100% 100%,0% 50%;}
}
.benefits::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:20%;z-index:1;pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 42%,rgba(255,255,255,.17) 50%,rgba(255,255,255,.09) 58%,transparent);
  animation:benefitsGleam 3.8s ease-in-out infinite;
}
@keyframes benefitsGleam{
  0%,62%{left:-30%;opacity:0;}
  68%{opacity:1;}
  90%{opacity:1;}
  100%{left:130%;opacity:0;}
}
@media (prefers-reduced-motion:reduce){.benefits::before,.benefits::after{animation:none;}}
.eyebrow{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  padding:5px 14px 5px 16px;
  border:1px solid var(--gold-dim);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  margin-bottom:16px;
}
.h2{
  font-size:clamp(1.15rem,5vw,2.6rem);
  line-height:1.05;
  white-space:normal;
}
.section-head{margin-bottom:36px;text-align:center;}
@media (min-width:860px){.section-head{margin-bottom:48px;}}
.section-head .h2{margin-left:auto;margin-right:auto;}
.benefits-sub{font-style:italic;font-size:.98rem;color:var(--muted-dark);margin-top:10px;}

/* Buttons - angled, no rounded corners anywhere on this page */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:15px 28px 15px 24px;
  border:none;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold-bright);color:var(--ink);}
.btn-gold:hover{background:var(--gold);}
.btn-outline{background:transparent;color:var(--white);border:1px solid var(--line-dark);}
.btn-outline:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.btn-outline-dark{background:transparent;color:var(--ink);border:1px solid var(--line-light);}
.btn-outline-dark:hover{border-color:var(--gold-dim);color:var(--gold-dim);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6;pointer-events:none;}

.wa-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.92rem;color:inherit;
  border-bottom:1px solid var(--line-dark);padding-bottom:2px;
}
.wa-dot{width:8px;height:8px;background:var(--ok);flex:none;transform:rotate(45deg);}

/* ===== Header / sticky banner ===== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--ink);color:var(--white);
  border-bottom:1px solid var(--line-dark);
}
.banner-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 0;
}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand img{height:79px;width:auto;}
.banner-offer{
  display:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:.88rem;letter-spacing:.02em;color:var(--muted-dark);
  flex:1;text-align:center;
}
.banner-offer strong{color:var(--gold-bright);font-weight:700;}
.nav-links{display:none;gap:24px;font-size:.92rem;font-weight:500;color:var(--muted-dark);}
.nav-links a:hover{color:var(--white);}
.banner-actions{display:flex;align-items:center;gap:14px;}
.banner-actions .wa-link{display:none;}
@media (min-width:760px){
  .banner-offer{display:block;}
  .nav-links{display:flex;}
  .banner-actions .wa-link{display:inline-flex;}
}
.banner-actions .btn{padding:11px 20px 11px 16px;font-size:.86rem;}

/* mobile sticky bottom CTA - long narrow bar, house rule */
.mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:stretch;
  height:52px;
  background:var(--ink);
  border-top:1px solid var(--gold-dim);
  transform:translateY(100%);
  transition:transform .25s ease;
}
.mobile-cta-bar.is-visible{transform:translateY(0);}
.mobile-cta-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:.95rem;color:var(--ink);background:var(--gold-bright);
}
.mobile-cta-bar .wa-mini{
  flex:none;width:52px;display:flex;align-items:center;justify-content:center;
  background:var(--charcoal);color:var(--white);
}
@media (min-width:860px){.mobile-cta-bar{display:none;}}

/* ===== Hero ===== */
.hero{background:var(--ink);color:var(--white);padding:36px 0 56px;position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(120deg,rgba(201,152,47,.16),transparent 46%),
    repeating-linear-gradient(-45deg,transparent 0 26px,rgba(255,255,255,.02) 26px 27px);
  pointer-events:none;
}
.hero-grid{position:relative;display:grid;gap:34px;}
@media (min-width:960px){.hero-grid{grid-template-columns:1.15fr .85fr;align-items:start;gap:52px;}}
.hero-copy .eyebrow{background:rgba(201,152,47,.08);}
.hero h1{font-size:clamp(2.3rem,8.6vw,3.6rem);line-height:.98;margin:0 0 16px;}
.accent{color:var(--gold-bright);}
.hero-sub{font-size:clamp(1.02rem,2.6vw,1.18rem);color:var(--muted-dark);max-width:46ch;margin-bottom:8px;}
.hero-clarify{font-size:.88rem;color:var(--muted-dark);max-width:46ch;padding-top:10px;border-top:1px solid var(--line-dark);margin-top:18px;}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);margin-top:32px;border:1px solid var(--line-dark);}
@media (min-width:560px){.stat-row{grid-template-columns:repeat(3,1fr);}}
.stat{background:var(--ink);padding:16px 14px;}
.stat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.7rem;font-weight:800;color:var(--gold-bright);}
.stat span{font-size:.78rem;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.05em;}
/* hero car-detailing shine animation (fills the desktop left-column gap) */
.hero-car{display:none;}
@media (min-width:960px){.hero-car{display:block;width:100%;max-width:705px;margin:42px 0 2px;overflow:visible;}}
.hero-car .car-fill{fill:rgba(231,187,76,.05);}
.hero-car .car-line{fill:none;stroke:var(--gold-dim);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.hero-car .car-detail{fill:none;stroke:var(--gold-dim);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;}
.hero-car .car-ground{stroke:url(#groundGrad);stroke-width:2;stroke-linecap:round;}
.hero-car .car-hub{fill:var(--gold-dim);}
.hero-car .car-gleam{opacity:0;animation:carGleam 6.5s cubic-bezier(.5,0,.25,1) infinite;}
@keyframes carGleam{0%,15%{transform:translateX(0);opacity:0;}22%{opacity:.9;}48%{opacity:.9;}58%,100%{transform:translateX(520px);opacity:0;}}
.hero-car .spark{fill:var(--gold-bright);transform-box:fill-box;transform-origin:center;opacity:0;}
.hero-car .s1{animation:carSpark 6.5s ease-in-out 1s infinite;}
.hero-car .s2{animation:carSpark 6.5s ease-in-out 2.4s infinite;}
.hero-car .s3{animation:carSpark 6.5s ease-in-out 3.6s infinite;}
@keyframes carSpark{0%,100%{opacity:0;transform:scale(.3);}7%{opacity:1;transform:scale(1);}18%{opacity:0;transform:scale(.3);}}
@media (prefers-reduced-motion:reduce){.hero-car .car-gleam,.hero-car .spark{animation:none;opacity:0;}}

/* hero form card */
.form-card{
  background:var(--charcoal);
  border:1px solid var(--line-dark);
  padding:26px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.form-card h3{font-size:1.5rem;color:var(--white);margin-bottom:4px;}
.form-card .form-intro{font-size:.9rem;color:var(--muted-dark);margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-dark);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--line-dark);color:var(--white);
  padding:12px 12px;
}
.field textarea{resize:vertical;min-height:64px;}
.field input::placeholder,.field textarea::placeholder{color:#5b5648;}
.form-foot{font-size:.78rem;color:var(--muted-dark);text-align:center;margin-top:12px;}
.form-success{display:none;margin-top:14px;padding:12px 14px;border:1px solid var(--ok);background:rgba(90,125,79,.12);font-size:.88rem;color:#cfe0c8;}
.form-success.show{display:block;}

/* ===== Problem ===== */
.problem-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){.problem-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.problem-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}
.p-card{
  background:var(--white);border:1px solid var(--line-light);
  padding:22px 20px;
}
.p-card .mark{width:26px;height:4px;background:var(--gold);margin-bottom:14px;}
.p-card h4{font-size:1.18rem;margin-bottom:8px;color:var(--ink);}
.p-card p{font-size:.92rem;color:var(--muted-light);}

/* ===== Photo placeholder device ===== */
.photo-block{
  position:relative;min-height:200px;
  background:
    repeating-linear-gradient(45deg,#e9e2cf 0 10px,#dfd6bc 10px 20px);
  border:1px solid var(--line-light);
  display:flex;align-items:flex-end;
}
.photo-block.on-dark{
  background:repeating-linear-gradient(45deg,#211f18 0 10px,#28251c 10px 20px);
  border-color:var(--line-dark);
}
.photo-tag{
  background:var(--ink);color:var(--gold-bright);
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;padding:8px 12px;margin:12px;
}

/* ===== Compare (replaces Solution) ===== */
.compare-grid{display:grid;gap:22px;max-width:960px;margin-left:auto;margin-right:auto;}
/* Mobile only: collapse each card to its title, tap to expand (desktop side-by-side stays fully open) */
@media (max-width:819px){
  .compare-grid .ss-head{cursor:pointer;position:relative;padding-right:46px;}
  .compare-grid .ss-toggle{position:absolute;top:50%;right:18px;transform:translateY(-50%);width:14px;height:14px;pointer-events:none;}
  .compare-grid .ss-toggle::before,.compare-grid .ss-toggle::after{content:"";position:absolute;background:var(--gold-bright);}
  .compare-grid .ss-toggle::before{left:0;right:0;top:6px;height:2px;}
  .compare-grid .ss-toggle::after{top:0;bottom:0;left:6px;width:2px;transition:transform .2s ease;}
  .compare-grid .spec-sheet.open .ss-toggle::after{transform:scaleY(0);}
  .compare-grid .spec-body{max-height:0;overflow:hidden;transition:max-height .32s ease;}
  .compare-grid .spec-sheet.open .spec-body{max-height:1400px;}
  .compare-grid .spec-sheet:not(.highlight).open .spec-body{max-height:6000px;}
}
.compare-note{margin-top:22px;font-size:.92rem;color:var(--muted-dark);max-width:56ch;}
.compare-note b{color:var(--white);}

/* Shared spec-sheet card, used by Compare and Benefits */
.spec-sheet{border:1px solid var(--line-dark);background:var(--charcoal);}
.spec-sheet.highlight{border-color:var(--gold-dim);}
.spec-sheet .ss-head{background:var(--charcoal-2);padding:16px 18px;border-bottom:1px solid var(--line-dark);}
.spec-sheet.highlight .ss-head{background:linear-gradient(120deg,rgba(201,152,47,.22),var(--charcoal-2) 70%);}
.spec-sheet .ss-head .tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--gold-bright);letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;}
.spec-sheet .ss-head h4{font-size:1.5rem;margin-top:4px;color:var(--white);}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line-dark);font-size:.9rem;}
.spec-row:last-child{border-bottom:none;}
.spec-row .k{color:var(--muted-dark);flex:none;width:100%;}
.spec-row .v{color:var(--white);text-align:right;}
.spec-row .v.gold{color:var(--gold-bright);font-weight:700;}
.spec-note{padding:14px 18px;font-size:.78rem;color:var(--muted-dark);background:var(--charcoal-2);}

/* ===== Benefits (replaces Membership) ===== */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin:28px 0 34px;}
.benefit{background:var(--charcoal);padding:18px 16px;}
.benefit b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.08rem;color:var(--gold-bright);margin-bottom:4px;}
.benefit span{font-size:.85rem;color:var(--muted-dark);}
@media (max-width:560px){.benefit-grid{grid-template-columns:1fr;}}
/* membership credit services as dropdowns */
.benefit-drops{max-width:820px;margin:28px auto 34px;display:flex;flex-direction:column;gap:14px;}
.mdrop{background:var(--charcoal);border:1px solid var(--line-dark);}
.mdrop[open]{border-color:var(--gold-dim);}
.mdrop summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:var(--white);}
.mdrop summary::-webkit-details-marker{display:none;}
.mdrop-ind{position:relative;flex:none;width:16px;height:16px;}
.mdrop-ind::before,.mdrop-ind::after{content:"";position:absolute;background:var(--gold-bright);}
.mdrop-ind::before{left:0;top:7px;width:16px;height:2px;}
.mdrop-ind::after{top:0;left:7px;width:2px;height:16px;transition:transform .2s ease;}
.mdrop[open] .mdrop-ind::after{transform:scaleY(0);}
.mdrop-body{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;padding:0 20px 20px;}
.mdrop-col h5{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;}
.mdrop-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.mdrop-col li{position:relative;padding-left:16px;font-size:.9rem;color:var(--muted-dark);}
.mdrop-col li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--gold);}
@media (max-width:560px){.mdrop-body{grid-template-columns:1fr;}}

/* service category dropdowns (interior / exterior detailing), embedded in the membership card */
.spec-body > .svc-cat{border-width:0 0 1px;background:transparent;}
.spec-body > .svc-cat > summary{padding:15px 18px;font-size:1.08rem;}
.svc-cat-body{padding:2px 18px 16px;display:flex;flex-direction:column;gap:0;}
.svc-cat-intro{font-size:.86rem;color:var(--muted-dark);margin:0 0 4px;max-width:64ch;}
.svc{padding:14px 0 4px;border-top:1px solid var(--line-dark);}
.svc-cat-intro + .svc{border-top:none;padding-top:6px;}
.svc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.svc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;color:var(--white);letter-spacing:.01em;}
.svc-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--gold-bright);padding:3px 9px;}
.svc-note{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-dark);}
.jobscope{border:1px solid var(--line-dark);background:var(--charcoal-2);}
.jobscope summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);}
.jobscope summary::-webkit-details-marker{display:none;}
.js-ind{position:relative;flex:none;width:13px;height:13px;}
.js-ind::before,.js-ind::after{content:"";position:absolute;background:var(--gold-bright);}
.js-ind::before{left:0;top:5.5px;width:13px;height:2px;}
.js-ind::after{top:0;left:5.5px;width:2px;height:13px;transition:transform .2s ease;}
.jobscope[open] .js-ind::after{transform:scaleY(0);}
.js-list{list-style:none;margin:0;padding:2px 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;}
@media (max-width:560px){.js-list{grid-template-columns:1fr;}}
.js-list li{position:relative;padding-left:16px;font-size:.86rem;color:var(--muted-dark);}
.js-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--gold);}
.svc-downtime{margin-top:12px;font-family:'Barlow Condensed',sans-serif;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-dark);}

/* ===== Process / road graphic + stage cards ===== */
.road-wrap{margin:8px 0 30px;}
.road-svg{width:100%;height:auto;display:block;cursor:pointer;}
.road-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;fill:var(--muted-dark);text-transform:uppercase;}
.road-hint{font-size:.92rem;color:#ddd7c9;text-align:center;margin-top:10px;opacity:1;font-weight:500;letter-spacing:.01em;}
#problem .road-hint{color:#4c4736;}

.track{display:grid;gap:14px;}
@media (min-width:900px){.track{grid-template-columns:repeat(5,1fr);gap:0;}}
.stage{
  position:relative;padding:22px 18px;background:rgba(16,14,9,.85);cursor:pointer;
  border:1px solid var(--line-dark);border-top-width:3px;
  transition:border-color .2s ease, background .2s ease;
}
@media (min-width:900px){.stage{border-left-width:0;}
  .stage:first-child{border-left-width:1px;}}
.stage:hover,.stage.is-active{border-color:var(--gold-bright);background:rgba(10,9,6,.96);}
.stage-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:18px;}
.stage-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.1rem;color:var(--gold-bright);line-height:1;}
.stage-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dark);border:1px solid var(--line-dark);
  padding:5px 10px 5px 12px;white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.stage:hover .stage-chip,.stage.is-active .stage-chip{color:var(--gold-bright);border-color:var(--gold-dim);}
.stage h4{font-size:1.05rem;color:var(--white);text-transform:uppercase;letter-spacing:.01em;margin-bottom:2px;}
.stage-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;}
.stage:hover .stage-reveal,.stage.is-active .stage-reveal{max-height:110px;opacity:1;margin-top:12px;}
.stage-reveal p{font-size:.85rem;color:#cfc9ba;}
.stage-hint{display:block;margin-top:14px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);opacity:.65;}
.stage:hover .stage-hint,.stage.is-active .stage-hint{display:none;}

/* ===== Results / before-after slider ===== */
.ba-wrap{display:grid;gap:26px;}
@media (min-width:860px){.ba-wrap{grid-template-columns:1fr 1fr;}}
.ba-slider{
  position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-light);
  touch-action:pan-y;
}
.ba-layer{position:absolute;inset:0;}
.ba-img{position:absolute;inset:0;display:block;}
.ba-after{background:repeating-linear-gradient(45deg,#eef0e6 0 12px,#e2e6d6 12px 24px);}
.ba-before{background:repeating-linear-gradient(45deg,#3a3226 0 12px,#2c2619 12px 24px);}
.ba-label{position:absolute;top:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;padding:6px 10px;}
.ba-label.after{left:12px;background:var(--white);color:var(--ink);}
.ba-label.before{right:12px;background:var(--ink);color:var(--gold-bright);}
.ba-handle{
  position:absolute;top:0;bottom:0;width:2px;background:var(--gold-bright);pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:26px;height:26px;background:var(--gold-bright);border:2px solid var(--ink);
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.ba-caption{margin-top:10px;font-size:.85rem;color:var(--muted-light);}
.ba-caption b{color:var(--ink);}

/* ===== Reviews ===== */
.review-grid{display:grid;gap:16px;}
@media (min-width:760px){.review-grid{grid-template-columns:repeat(3,1fr);}}
.review-card{background:var(--charcoal);border:1px solid var(--line-dark);padding:22px 20px;display:flex;flex-direction:column;gap:14px;}
.review-card .stars{color:var(--gold-bright);letter-spacing:2px;font-size:.9rem;}
.review-card p{font-size:.94rem;color:var(--muted-dark);flex:1;}
.reviewer{display:flex;align-items:center;gap:10px;}
.reviewer .badge{
  width:38px;height:38px;flex:none;background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Barlow Condensed',sans-serif;
  clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);
}
.reviewer .who b{display:block;font-size:.92rem;color:var(--white);}
.reviewer .who span{font-size:.78rem;color:var(--muted-dark);}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:40px;}
.metric{background:var(--ink);padding:20px 14px;text-align:center;}
.metric .num{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:800;color:var(--gold-bright);}
.metric .lbl{font-size:.78rem;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.04em;}

/* ===== FAQ - squeegee-reveal windshield ===== */
.faq{position:relative;isolation:isolate;overflow:hidden;}
.faq::before{content:"";position:absolute;inset:-460px;z-index:-1;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.6) 2px, rgba(104,170,200,.42) 9px, transparent 11px),
    radial-gradient(circle at 38% 64%, rgba(255,255,255,.55) 2px, rgba(104,170,200,.38) 11px, transparent 13px),
    radial-gradient(circle at 64% 18%, rgba(255,255,255,.55) 3px, rgba(104,170,200,.42) 13px, transparent 15px),
    radial-gradient(circle at 82% 52%, rgba(255,255,255,.5) 2px, rgba(104,170,200,.34) 9px, transparent 11px),
    radial-gradient(circle at 24% 86%, rgba(255,255,255,.55) 2px, rgba(104,170,200,.38) 11px, transparent 13px),
    radial-gradient(circle at 90% 84%, rgba(255,255,255,.5) 3px, rgba(104,170,200,.34) 12px, transparent 14px);
  background-size:420px 420px;
  animation:faqSpray 1.8s linear infinite;}
@keyframes faqSpray{to{transform:translate3d(420px,420px,0);}}
.faq::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(130% 55% at -15% 108%, rgba(104,170,200,.45), transparent 62%),
    radial-gradient(120% 50% at 115% -8%, rgba(104,170,200,.38), transparent 60%),
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  background-size:100% 100%,100% 100%,300% 100%;
  animation:faqSurge 1.7s ease-in-out infinite alternate, faqSweep 2.4s linear infinite;}
@keyframes faqSurge{from{transform:translateX(-34px) scale(1.03);}to{transform:translateX(34px) scale(1.07);}}
@keyframes faqSweep{from{background-position:0 0,0 0,-150% 0;}to{background-position:0 0,0 0,250% 0;}}
@media (prefers-reduced-motion:reduce){.faq::before,.faq::after{animation:none;}}
.faq-screen{max-width:760px;margin:0 auto 30px;}
.faq-windshield{
  position:relative;
  background:linear-gradient(#211d14,#141109);
  padding:22px 22px 24px;
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);
  box-shadow:var(--shadow);
}
.faq-mirror{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:74px;height:20px;z-index:6;background:linear-gradient(#3a3428,#17140d);
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);box-shadow:0 5px 12px rgba(0,0,0,.4);
}
.faq-mirror::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:7px;height:11px;background:#17140d;}
.faq-mirror::after{content:"";position:absolute;inset:3px 5px;background:linear-gradient(120deg,rgba(231,187,76,.30),rgba(255,255,255,.05));}
.faq-glass{
  position:relative;overflow:hidden;min-height:210px;
  background:linear-gradient(165deg,#eef2f4,#ffffff 55%,#f4f6f4);
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
}
.faq-tint{position:absolute;top:0;left:0;right:0;height:34px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(20,28,40,.24),transparent);}
.faq-answer{position:relative;z-index:1;padding:42px 40px 34px;}
.faq-answer-tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:10px;}
.faq-answer-text{font-size:1.02rem;line-height:1.65;color:var(--ink);max-width:none;}
.faq-fog{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(135deg,rgba(214,232,240,.97),rgba(255,255,255,.97));
  clip-path:inset(0 0 0 0%);transition:clip-path 1s cubic-bezier(.45,.02,.2,1);
}
.faq-suds{position:absolute;inset:0;opacity:.7;background-image:
  radial-gradient(circle at 12% 28%,rgba(255,255,255,.95) 9px,transparent 10px),
  radial-gradient(circle at 30% 72%,rgba(255,255,255,.9) 15px,transparent 16px),
  radial-gradient(circle at 54% 34%,rgba(255,255,255,.85) 11px,transparent 12px),
  radial-gradient(circle at 74% 64%,rgba(255,255,255,.92) 17px,transparent 18px),
  radial-gradient(circle at 90% 22%,rgba(255,255,255,.85) 10px,transparent 11px),
  radial-gradient(circle at 44% 90%,rgba(255,255,255,.8) 13px,transparent 14px);}
/* clearly-drawn squeegee: gold handle + dark rubber blade */
.faq-squeegee{
  position:absolute;top:0;bottom:0;left:0%;z-index:5;width:0;transform:translateX(-50%);
  transition:left 1s cubic-bezier(.45,.02,.2,1),opacity .3s ease .95s;opacity:1;pointer-events:none;
}
.sq-blade{position:absolute;top:4px;bottom:4px;left:50%;transform:translateX(-50%);width:14px;
  background:linear-gradient(90deg,#5c5c5c,#0a0a0a 50%,#5c5c5c);box-shadow:8px 0 22px rgba(0,0,0,.28);}
.sq-blade::after{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:5px;background:var(--gold-bright);}
.sq-neck{position:absolute;top:50%;left:50%;width:18px;height:14px;background:#2a2a2a;transform:translate(-60%,-50%);}
.sq-handle{position:absolute;top:50%;left:50%;width:64px;height:16px;background:var(--gold-bright);
  transform:translate(-100%,-50%);box-shadow:0 3px 10px rgba(0,0,0,.25);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.sq-handle::after{content:"";position:absolute;left:-32px;top:-6px;width:36px;height:28px;background:#141109;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%);}
.faq-screen.revealed .faq-fog{clip-path:inset(0 0 0 100%);}
.faq-screen.revealed .faq-squeegee{left:100%;opacity:0;}
.faq-screen.resetting .faq-fog,.faq-screen.resetting .faq-squeegee{transition:none !important;}
.faq-screen.resetting .faq-squeegee{opacity:1;}
/* question buttons */
.faq-qlist{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:640px){.faq-qlist{grid-template-columns:1fr 1fr;}}
.faq-qbtn{
  display:flex;align-items:center;gap:12px;text-align:left;background:var(--white);
  border:1px solid var(--line-light);padding:16px 18px;color:var(--ink);
  transition:border-color .15s ease,transform .15s ease,background .15s ease,color .15s ease;
}
.faq-qbtn:hover{transform:translateY(-2px);border-color:var(--gold-dim);}
.faq-qbtn.is-active{background:var(--ink);color:var(--white);border-color:var(--gold-dim);}
.faq-qtag{flex:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dim);border:1px solid var(--line-light);
  padding:4px 8px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
.faq-qbtn.is-active .faq-qtag{color:var(--gold-bright);border-color:var(--line-dark);}
.faq-qtext{flex:1;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.2;}
.faq-qmark{flex:none;width:14px;height:14px;position:relative;}
.faq-qmark::before,.faq-qmark::after{content:"";position:absolute;background:var(--gold-dim);}
.faq-qmark::before{left:6px;top:0;bottom:0;width:2px;}
.faq-qmark::after{top:6px;left:0;right:0;height:2px;}
.faq-qbtn.is-active .faq-qmark::before,.faq-qbtn.is-active .faq-qmark::after{background:var(--gold-bright);}
.faq-qbtn.is-active .faq-qmark::before{opacity:0;}
.faq-qans{display:none;}
@media (prefers-reduced-motion: reduce){.faq-fog,.faq-squeegee{transition:none;}}

/* ===== Last call ===== */
.final{background:var(--ink);color:var(--white);}
.final-grid{display:grid;gap:34px;}
@media (min-width:960px){.final-grid{grid-template-columns:1.1fr .9fr;align-items:stretch;}}
@media (min-width:960px){.final-grid .final-media{align-self:center;}}
.final-media{display:flex;flex-direction:column;gap:20px;}
.final-hook-copy{text-align:left;}
.final-hook-copy .eyebrow{background:rgba(201,152,47,.08);}
.final-hook{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.02;color:var(--white);margin:8px 0 8px;}
.final-hook-sub{font-size:.98rem;line-height:1.5;color:var(--muted-dark);max-width:none;}
.final-copy{text-align:center;}

/* ===== Footer ===== */
.footer{background:var(--charcoal);color:var(--muted-dark);padding:48px 0 24px;}
.footer-grid{display:grid;gap:28px;}
@media (min-width:760px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr;}}
.footer img{height:74px;margin-bottom:12px;}
.footer h5{font-family:'Barlow Condensed',sans-serif;color:var(--white);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.footer p, .footer a{font-size:.9rem;line-height:1.7;}
.footer a{border-bottom:1px solid transparent;}
.footer a:hover{border-color:var(--gold-dim);color:var(--white);}
.footer-bottom{border-top:1px solid var(--line-dark);margin-top:32px;padding-top:18px;font-size:.78rem;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;}
.social-row{display:flex;gap:10px;margin-top:14px;}
.social-row a{width:32px;height:32px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--muted-dark);}
.social-row a:hover{border-color:var(--gold-dim);color:var(--gold-bright);}

/* ===== Compare flip card ===== */
.flip-card{position:relative;max-width:520px;margin:0 auto;perspective:1600px;}
.flip-inner{position:relative;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;}
.flip-front{position:relative;z-index:2;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.flip-back{position:absolute;top:0;left:0;right:0;bottom:0;transform:rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.flip-back .spec-sheet{height:100%;}
.flip-card .spec-sheet{cursor:pointer;position:relative;overflow:hidden;}
.flip-card .spec-sheet::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 50%,transparent);
  transform:skewX(-18deg);pointer-events:none;transition:left .7s ease;z-index:3;}
.flip-card:hover .spec-sheet::after{left:130%;}
.flip-tab{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:6px;background:var(--gold-bright);color:var(--ink);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 13px 9px 12px;border:none;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,calc(100% - 6px) 100%,0 100%);box-shadow:0 4px 12px rgba(0,0,0,.35);}
.flip-tab:hover{background:var(--gold);}
.flip-arrow{font-weight:800;transition:transform .3s ease;}
.flip-card.flipped .flip-arrow{transform:rotate(180deg);}
@media (max-width:560px){.flip-tab{font-size:.66rem;padding:8px 10px;}}

/* ===== Shiny, tilt-on-hover testimonial cards ===== */
.review-card{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}
.review-card > *{position:relative;z-index:1;}
.review-card::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13) 50%,transparent);
  transform:skewX(-18deg);pointer-events:none;transition:left .7s ease;z-index:2;}
.review-card:hover::after{left:130%;}
.review-card:hover{transform:perspective(800px) rotateX(3deg) rotateY(-3.5deg) translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.42);}

/* Tighten the gap between the flip card and the next segment */
#compare{padding-bottom:52px;}
#benefits{padding-top:52px;}

/* ===== Problem: dirty car + soap-bubble problems ===== */
.problem-scene{position:relative;max-width:940px;min-height:600px;margin:0 auto;}
.bubble-col{display:contents;}
.scene-car{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;display:flex;justify-content:center;z-index:1;}
.scene-car svg{width:100%;max-width:300px;height:auto;}
/* bubbles arranged in a ring that surrounds the car */
.b-tl{top:19px;left:212px;} .b-tr{top:19px;left:556px;}
.b-ml{top:214px;left:39px;} .b-mr{top:214px;left:729px;}
.b-bl{top:409px;left:212px;} .b-br{top:409px;left:556px;}
@media (max-width:820px){.b-tl,.b-tr,.b-ml,.b-mr,.b-bl,.b-br{top:auto;left:auto;}}
.bubble{
  position:absolute;width:172px;height:172px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:24px;cursor:pointer;border:1px solid rgba(255,255,255,.75);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.92),rgba(210,232,242,.5) 44%,rgba(201,152,47,.12) 74%,rgba(255,255,255,.28));
  box-shadow:0 12px 30px rgba(11,11,13,.14),inset 0 -8px 22px rgba(120,150,170,.18),inset 6px 8px 20px rgba(255,255,255,.7);
  transition:width .34s cubic-bezier(.2,.7,.2,1),height .34s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,transform .2s ease;
}
.bubble::before{content:"";position:absolute;top:16%;left:22%;width:24%;height:18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),transparent 70%);pointer-events:none;}
.bubble-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.12rem;line-height:1.08;color:var(--ink);}
.bubble-desc{display:none;font-size:.86rem;line-height:1.44;color:#2b271d;font-weight:500;margin-top:9px;max-width:20ch;}
.bubble:hover{transform:translateY(-4px);}
.bubble.is-open{width:252px;height:252px;z-index:5;
  box-shadow:0 18px 44px rgba(11,11,13,.22),inset 0 -8px 22px rgba(120,150,170,.2),inset 6px 8px 22px rgba(255,255,255,.75),0 0 0 3px rgba(201,152,47,.3);}
.bubble.is-open .bubble-title{font-size:1.22rem;}
.bubble.is-open .bubble-desc{display:block;}
@media (max-width:820px){
  .problem-scene{position:static;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}
  .scene-car{position:static;transform:none;order:-1;flex-basis:100%;width:auto;}
  .scene-car svg{max-width:240px;}
  .bubble-col{display:contents;}
  .bubble{position:relative;}
  .b-tl,.b-tr,.b-ml,.b-mr,.b-bl,.b-br{top:auto;left:auto;right:auto;bottom:auto;}
}
@media (max-width:520px){
  .bubble{width:144px;height:144px;padding:16px;}
  .bubble .bubble-title{font-size:.86rem;}
  .bubble.is-open{width:210px;height:210px;}
}

/* Desktop-neutral hooks for mobile-only components (hidden / transparent on desktop) */
.stat-marquee{display:contents;}
.stat-dup{display:none;}
.step-timeline{display:none;}
.review-dots{display:none;}
@keyframes usp-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ================= MOBILE OPTIMISATIONS (max-width:760px) ================= */
@media (max-width:760px){
  /* 1. Hero USP row -> infinite marquee */
  .stat-marquee{display:block;overflow:hidden;margin-top:32px;border:1px solid var(--line-dark);}
  .stat-row{display:flex;flex-wrap:nowrap;width:max-content;margin:0;border:none;background:none;gap:0;animation:usp-marquee 16s linear infinite;}
  .stat-row .stat{flex:0 0 auto;width:46vw;max-width:210px;border-right:1px solid var(--line-dark);}
  .stat-dup{display:block;}
  /* keep the hero + its marquee within the phone width (marquee track must not blow out the column) */
  .hero-grid{grid-template-columns:minmax(0,1fr);}
  .hero-copy,.form-card{min-width:0;}
  .stat-marquee{max-width:100%;}

  /* 2. How It Works -> car/road timeline stays (mobile friendly) + tappable strip + one card at a time */
  .step-timeline{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 16px;scrollbar-width:none;}
  .step-timeline::-webkit-scrollbar{display:none;}
  .step-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:transparent;color:var(--muted-dark);border:1px solid var(--line-dark);border-top-width:3px;padding:9px 15px;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
  .step-chip .sc-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.15rem;line-height:1;color:var(--gold-bright);}
  .step-chip .sc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
  .step-chip.is-active{border-color:var(--gold-bright);background:rgba(201,152,47,.08);color:var(--white);}
  .track{display:block;}
  .track .stage{display:none;border-left-width:1px;}
  .track .stage.is-active{display:block;}
  .track .stage .stage-reveal{max-height:none;opacity:1;margin-top:12px;}
  .track .stage .stage-hint{display:none;}

  /* 3. Testimonials -> swipe/tap carousel with diamond dots */
  #reviews .review-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;scrollbar-width:none;margin:0 -20px;padding:4px 20px 2px;}
  #reviews .review-grid::-webkit-scrollbar{display:none;}
  #reviews .review-card{flex:0 0 86%;scroll-snap-align:center;}
  #reviews .review-card:hover{transform:none;}
  .review-dots{display:flex;justify-content:center;gap:10px;margin-top:18px;}
  .rev-dot{width:9px;height:9px;padding:0;background:var(--line-dark);border:1px solid var(--gold-dim);cursor:pointer;transform:rotate(45deg);}
  .rev-dot.is-active{background:var(--gold-bright);border-color:var(--gold-bright);}
  .rev-arrow{display:flex;align-items:center;justify-content:center;width:38px;height:34px;padding:0;background:transparent;border:1px solid var(--gold-dim);color:var(--gold-bright);font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;line-height:1;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
  .rev-arrow:hover{background:rgba(201,152,47,.12);}
  .review-dots .rev-prev{margin-right:4px;}
  .review-dots .rev-next{margin-left:4px;}

  /* 4. Last Call -> remove the photo placeholder, keep the form */
  .final .final-copy.photo-block{display:none;}
}

/* ===== CTA bands between sections ===== */
.cta-band{background:var(--gold-bright);}
.cta-band-row{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:20px 20px;flex-wrap:wrap;}
.cta-line{margin:0;flex:1 1 auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(1.05rem,2.6vw,1.55rem);line-height:1.08;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);}
.cta-band-btn{flex:none;background:var(--ink);color:var(--gold-bright);}
.cta-band-btn:hover{background:var(--charcoal);color:var(--gold-bright);}
@media (max-width:560px){.cta-band-btn{width:100%;}}

/* ──────────────── */

/* ===== classy pass: stars, classy problem car, photo windshield, depth, reveals ===== */
.stat-star{display:none;}
@media (min-width:861px){
  .stat-row{position:relative;}
  .stat-star{display:block;position:absolute;background:var(--gold-bright);pointer-events:none;z-index:2;
    clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
    filter:drop-shadow(0 0 5px rgba(231,187,76,.65));opacity:0;animation:starTwinkle 3.8s ease-in-out infinite;}
  .ss1{width:10px;height:10px;top:-18px;left:5%;}
  .ss2{width:7px;height:7px;top:-24px;left:37%;background:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.7));animation-duration:4.6s;animation-delay:1.3s;}
  .ss3{width:12px;height:12px;top:-15px;right:10%;animation-duration:3.2s;animation-delay:.7s;}
  .ss4{width:8px;height:8px;bottom:-20px;left:20%;animation-duration:5.1s;animation-delay:2.2s;}
  .ss5{width:11px;height:11px;bottom:-26px;right:28%;background:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.7));animation-duration:3.5s;animation-delay:2.9s;}
  .ss6{width:9px;height:9px;top:30%;right:-28px;animation-duration:5.4s;animation-delay:.4s;}
  .ss7{width:8px;height:8px;top:44%;left:-26px;background:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.7));animation-duration:4.2s;animation-delay:1.8s;}
}
@keyframes starTwinkle{0%,100%{opacity:0;transform:scale(.45);}12%{opacity:1;transform:scale(1);}24%{opacity:.15;transform:scale(.6);}38%{opacity:.9;transform:scale(.95);}55%{opacity:0;transform:scale(.5);}}
/* classy problem car (desktop only; mobile keeps original cartoon) */
.scene-car .car-classy{display:none;}
@media (min-width:821px){
  .scene-car .car-cartoon{display:none;}
  .scene-car{width:520px;}
  .scene-car .car-classy{display:block;width:100%;max-width:520px;height:auto;position:relative;z-index:1;}
  .scene-car::before{content:"";position:absolute;left:50%;top:50%;width:390px;height:390px;transform:translate(-50%,-54%);
    border:1px dashed rgba(138,107,35,.4);border-radius:50%;
    background:radial-gradient(circle,rgba(201,152,47,.12),rgba(201,152,47,.04) 45%,transparent 68%);
    animation:sceneRingSpin 80s linear infinite;}
  .scene-car::after{content:"";position:absolute;left:-90px;right:-90px;top:71%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(138,107,35,.45),transparent);}
}
@keyframes sceneRingSpin{to{transform:translate(-50%,-54%) rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.scene-car::before{animation:none;}}
.car-classy .pc-body{fill:rgba(23,18,12,.05);stroke:#6b5a33;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;}
.car-classy .pc-line{fill:none;stroke:#6b5a33;stroke-width:1.8;}
.car-classy .pc-detail{fill:none;stroke:#6b5a33;stroke-width:1.1;opacity:.55;stroke-linecap:round;}
.car-classy .pc-grime{fill:none;stroke:#57523f;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 7;opacity:.5;}
.car-classy .pc-mote{fill:#8a6b23;opacity:0;animation:moteDrift 6s ease-in-out infinite;}
.car-classy .m2{animation-delay:1.6s;animation-duration:7s;}
.car-classy .m3{animation-delay:3s;animation-duration:5.4s;}
.car-classy .m4{animation-delay:4.2s;animation-duration:6.6s;}
@keyframes moteDrift{0%{transform:translateY(-10px);opacity:0;}25%{opacity:.55;}60%{opacity:.35;}100%{transform:translateY(22px);opacity:0;}}
/* FAQ: real windshield photo on desktop (mobile keeps stylised version) */
@media (min-width:860px){
  .faq-screen{max-width:none;}
  .faq-windshield{padding:0;clip-path:none;background:#141109 url('/wp-content/uploads/2026/08/octopus-windshield-faq.jpg') top/100% auto no-repeat;aspect-ratio:1600/660;}
  .faq-mirror{display:none;}
  .faq-glass{position:absolute;left:0;right:0;top:6%;bottom:3%;min-height:0;background:transparent;clip-path:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .faq-tint{display:none;}
  .faq-answer{padding:9% 8% 24px;text-align:center;max-width:75ch;}
  .faq-answer-tag{font-size:.82rem;color:#6b5a1e;}
  .faq-answer-text{font-size:1.16rem;line-height:1.7;color:#12110d;text-shadow:0 1px 2px rgba(255,255,255,.55);}
  .faq-fog{background:linear-gradient(135deg,rgba(210,228,238,.9),rgba(250,252,253,.9));}
  .faq-qlist{max-width:none;gap:14px;}
  .faq-qbtn{padding:22px 26px;gap:16px;}
  .faq-qtext{font-size:1.24rem;}
  .faq-qtag{font-size:.72rem;padding:5px 11px;}
}
/* final photo depth */
.final-photo-frame{position:relative;box-shadow:0 34px 70px -22px rgba(0,0,0,.65),0 10px 26px rgba(0,0,0,.4);transition:transform .35s ease,box-shadow .35s ease;}
.final-photo-frame::before{content:"";position:absolute;top:16px;left:-16px;width:100%;height:100%;border:1px solid var(--gold-dim);opacity:.5;pointer-events:none;z-index:-1;}
.final-photo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.38),inset 0 -50px 60px -30px rgba(0,0,0,.5);
  background:linear-gradient(rgba(255,255,255,.08),transparent 30%);}
.final-photo-frame:hover{transform:translateY(-6px);box-shadow:0 44px 84px -24px rgba(0,0,0,.72),0 14px 30px rgba(0,0,0,.45);}
.final-photo-glare{position:absolute;top:0;left:0;right:0;height:34%;pointer-events:none;background:linear-gradient(rgba(255,255,255,.09),transparent);}
/* scroll reveals + hover polish */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.rv.in-view{opacity:1;transform:none;}
@media (hover:hover){
  .review-card,.compare-grid .spec-sheet{transition:transform .28s ease,box-shadow .28s ease;}
  .review-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(0,0,0,.35);}
  .compare-grid .spec-sheet:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.3);}
}
.btn-gold{position:relative;overflow:hidden;}
.btn-gold::before{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);}
.btn-gold:hover::before{animation:btnShine .75s ease;}
@keyframes btnShine{to{left:130%;}}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .stat-star,.pc-mote{animation:none !important;}
  .btn-gold:hover::before{animation:none;}
}

/* ──────────────── */

.hero { position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/08/hero-1785742788586.webp') center/cover no-repeat; opacity: 0.7; }
.problem { position: relative; isolation: isolate; }
.problem::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/08/problem-1785742797864-2.webp') center/cover no-repeat; opacity: 0.7; }
.process { position: relative; isolation: isolate; }
.process::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/08/process-1785742837113.webp') center/cover no-repeat; opacity: 0.7; }
.results { position: relative; isolation: isolate; }
.results::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/08/results-1785742826831.webp') center/cover no-repeat; opacity: 0.4; }
.reviews { position: relative; isolation: isolate; }
.reviews::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: url('/wp-content/uploads/2026/08/reviews-1785742907141.webp') center/cover no-repeat; opacity: 0.4; }

.svc-block{padding:18px 18px 4px;border-top:1px solid var(--line-dark);}
.svc-block:first-child{border-top:none;}
.svc-block-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;color:var(--white);margin:0 0 6px;}
.svc-table-wrap{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch;}
.svc-table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:420px;}
.svc-table th,.svc-table td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--line-dark);white-space:nowrap;}
.svc-table td:first-child,.svc-table th.svc-th-feat{text-align:left;white-space:normal;color:var(--muted-dark);font-weight:500;min-width:200px;}
.svc-table thead th{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--white);background:var(--charcoal-2);border-bottom:1px solid var(--gold-dim);position:relative;}
.svc-table .svc-badge,.svc-table .svc-note{display:block;margin-top:4px;font-size:.6rem;}
.svc-table td.c{color:var(--muted-dark);font-weight:600;}
.svc-table tr td.c:has(+ td.c){} /* no-op fallback */
.svc-table tbody tr td.c{color:var(--muted-dark);}
.svc-table tbody tr td.c:not(:empty){}
.svc-table td.c{}
.svc-table tbody td.c{}
.svc-table td.c{font-size:.95rem;}
.svc-table tbody tr:nth-child(odd){background:rgba(255,255,255,.015);}
.svc-table tbody tr td.c{color:var(--muted-dark);}
.svc-table tbody tr td.c:first-of-type{}
.svc-table td.c{}
/* checkmark colour */
.svc-table td.c{color:var(--gold-bright);}
.svc-table tbody tr td:not(.c):not(:first-child){}
.svc-downtime-row td{background:var(--charcoal-2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark);border-bottom:none;}
.js-list-open{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;}
@media (max-width:560px){.js-list-open{grid-template-columns:1fr;}}
.pest-standalone{padding-bottom:14px;}
.svc-table-wrap{overflow-x:auto;margin-top:6px;-webkit-overflow-scrolling:touch;}
.svc-table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:420px;}
.svc-table th,.svc-table td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--line-dark);white-space:nowrap;}
.svc-table td:first-child,.svc-table th.svc-th-feat{text-align:left;white-space:normal;color:var(--muted-dark);font-weight:500;min-width:200px;}
.svc-table thead th{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--white);background:var(--charcoal-2);border-bottom:1px solid var(--gold-dim);}
.svc-table .svc-badge,.svc-table .svc-note{display:block;margin-top:4px;font-size:.6rem;}
.svc-table td.c{color:var(--gold-bright);font-size:.95rem;}
.svc-table tbody tr:nth-child(odd){background:rgba(255,255,255,.015);}
.svc-downtime-row td{background:var(--charcoal-2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark);border-bottom:none;}
.js-list-open{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;}
.js-list-open li{position:relative;padding-left:16px;font-size:.86rem;color:var(--muted-dark);}
.js-list-open li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--gold);}
@media (max-width:560px){.js-list-open{grid-template-columns:1fr;}}
.pest-standalone{padding-bottom:6px;}

.svc-with-img{display:flex;gap:14px;align-items:flex-start;}
.svc-thumb{flex:none;width:72px;height:72px;object-fit:cover;border:1px solid var(--line-dark);}
.svc-content{flex:1;min-width:0;}
@media (min-width:480px){
  .svc-thumb{width:88px;height:88px;}
}

/* two-column Interior/Exterior layout, no click needed to see either category */
.spec-body{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media (min-width:860px){
  .spec-body{grid-template-columns:1fr 1fr;column-gap:28px;}
  .spec-body > .spec-row,
  .spec-body > .spec-note{grid-column:1 / -1;}
}
.svc-cat{border-top:1px solid var(--line-dark);}
@media (min-width:860px){
  .svc-cat{border-top:none;border-left:1px solid var(--line-dark);}
  .svc-cat:first-child{border-left:none;}
}
.svc-cat-head{padding:15px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.08rem;color:var(--white);}