:root{--blue:#1688ff;--blue2:#006fe8;--ink:#03070a;--panel:#081018;--line:#172532;--text:#f4f7fb;--muted:#aeb9c5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020507;color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}
.nav{height:88px;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:34px;padding:10px 4vw;background:rgba(2,6,9,.94);backdrop-filter:blur(14px);border-bottom:1px solid #101820}.brand img{width:190px;height:66px;object-fit:cover;object-position:center}.nav nav{display:flex;gap:30px;margin:auto}.nav nav a{font-size:14px;font-weight:700;color:#dfe7ef}.nav nav a:hover{color:var(--blue)}.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--blue2));padding:16px 24px;border-radius:5px;font-weight:900;font-size:13px;letter-spacing:.2px;box-shadow:0 8px 30px rgba(0,119,255,.18)}.btn.small{padding:14px 24px}.btn.ghost{background:transparent;border:1px solid #8090a0;box-shadow:none}.btn.full{width:100%}.menu{display:none;background:none;border:0;color:#fff;font-size:26px}
.hero{min-height:650px;position:relative;overflow:hidden;display:flex;align-items:center;padding:80px 4vw;background:radial-gradient(circle at 75% 42%,#0e3656 0,#071521 28%,#020507 65%)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 55%),repeating-linear-gradient(115deg,transparent 0 45px,rgba(255,255,255,.012) 46px 47px)}
.hero-copy{position:relative;z-index:3;max-width:760px}.eyebrow{color:#75bdff;letter-spacing:6px;font-size:12px;font-weight:800;margin-bottom:18px}.hero h1,.section h2,.canada h2{font-size:64px;line-height:.96;margin:0 0 22px;font-weight:950;letter-spacing:-2px}.hero h1 span,h2 span{color:var(--blue)}.hero p{font-size:19px;line-height:1.55;max-width:650px;color:#d5dde6}.actions{display:flex;gap:14px;margin-top:28px}.hero-points{display:flex;gap:54px;margin-top:48px}.hero-points div{display:flex;gap:12px;align-items:center}.hero-points b{font-size:30px;color:var(--blue)}.hero-points span{font-size:12px;font-weight:800;line-height:1.35}.tire-art{position:absolute;right:-100px;width:620px;height:620px;border-radius:50%;border:65px solid #070b0f;box-shadow:inset 0 0 40px #1b2731,0 0 90px rgba(0,100,255,.16);z-index:2}.ring{position:absolute;border-radius:50%;inset:30px;border:4px solid #111d27}.r2{inset:55px;border-color:#0a77dc}.r3{inset:82px;border-width:14px;border-color:#05080b}
.section{padding:72px 4vw}.split{display:grid;grid-template-columns:1fr 1.2fr;gap:55px;align-items:center}.section h2,.canada h2{font-size:42px;line-height:1.03}.section p{color:var(--muted);line-height:1.6}.text-link{display:inline-block;margin-top:16px;color:#55adff;font-weight:900}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.steps article{text-align:center}.steps b{font-size:13px;color:#44a7ff}.steps p{font-size:12px}.tire-step{height:170px;border-radius:16px;background:radial-gradient(circle,#06365f 0,#06111b 45%,#020507 70%);border:22px solid #161d23;box-shadow:inset 0 0 0 5px #020507;display:flex;align-items:flex-end;justify-content:center;color:#fff;font-size:32px}.tire-step.sealed{box-shadow:inset 0 0 30px #078cff}.tire-step.done{align-items:center;color:#1d99ff;font-size:58px}
.benefits{margin:0 4vw 65px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:repeat(6,1fr);background:linear-gradient(180deg,#081018,#050a0e);overflow:hidden}.benefits div{padding:34px 24px;text-align:center;border-right:1px solid #14202a}.benefits div:last-child{border:0}.benefits i{font-style:normal;color:var(--blue);font-size:36px;display:block;margin-bottom:14px}.benefits b{font-size:12px}.benefits p{font-size:12px;color:#98a6b4;line-height:1.45}
.pricing{background:linear-gradient(#020507,#05090d)}.lead{margin-top:-10px}.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}.price-card,.value{position:relative;border:1px solid #22303c;border-radius:12px;padding:22px;text-align:center;background:linear-gradient(180deg,#091119,#04080c);overflow:hidden}.price-card.featured{border-color:#137ee2;box-shadow:0 0 30px rgba(0,119,255,.11)}.popular{position:absolute;top:12px;right:-32px;transform:rotate(40deg);background:var(--blue);padding:5px 36px;font-size:9px;font-weight:900}.vehicle{height:160px;margin:-4px -4px 16px;background-size:cover;background-position:center;border-radius:9px;filter:saturate(.65) contrast(1.08)}
.vehicle.car{background-image:linear-gradient(0deg,rgba(3,7,10,.45),rgba(3,7,10,.04)),url("https://www.classicdriver.com/sites/default/files/users/62057/cars_images/62057-958052-car-20230227_131028-20230222_brabus_800-26.jpg")}
.vehicle.suv{background-image:linear-gradient(0deg,rgba(3,7,10,.45),rgba(3,7,10,.04)),url("https://images.turo.com/media/vehicle/images/53_wBzCFToacxKsIBpklKg.jpg")}
.vehicle.truck{background-image:linear-gradient(0deg,rgba(3,7,10,.45),rgba(3,7,10,.04)),url("https://audiocityusa.com/shop/images/D/fuel-wheels-fc873-charger-gloss-silver-with-machined-face-5-lug-off-road-rims-audiocityusa-03-c9e547d7de.jpg")}
.price-card h3{font-size:14px;margin:8px 0}.price{font-size:50px;font-weight:950}.price-card small{color:#c7d0d9}.price-card hr{border:0;border-top:3px solid var(--blue);width:50px;margin:18px auto}.price-card p{font-size:12px}.value{text-align:left;padding:30px}.value h3{font-size:18px}.value p{font-size:13px;color:#d7e0e8;margin:18px 0}.value p::first-letter{color:var(--blue)}
.canada{min-height:340px;padding:58px 4vw;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:50px;background:radial-gradient(circle at 75% 40%,#12344e 0,#07131d 32%,#020507 75%);border-top:1px solid #152430;border-bottom:1px solid #152430}.canada p{max-width:650px;color:#c3ced8;line-height:1.6}.canada-points{display:grid;gap:26px}.canada-points b{color:#e8f1f8;font-size:13px}.canada-points b::first-letter{color:var(--blue)}
.cta{padding:36px 4vw;display:grid;grid-template-columns:210px 1fr auto;gap:35px;align-items:center}.cta img{width:210px;height:85px;object-fit:cover}.cta h2{margin:0 0 6px;font-size:24px}.cta p{margin:0;color:#9eabb6}footer{border-top:1px solid #121c24;padding:22px 4vw;color:#6f7c87;font-size:11px;display:flex;justify-content:space-between}
@media(max-width:1100px){.benefits{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.nav nav{display:none}.nav .btn.small{display:none}.menu{display:block;margin-left:auto}.hero{min-height:610px}.tire-art{opacity:.25;right:-320px}.hero h1{font-size:52px}.split{grid-template-columns:1fr}.benefits{grid-template-columns:repeat(2,1fr)}.benefits div{border-bottom:1px solid #14202a}.price-grid{grid-template-columns:repeat(2,1fr)}.cta{grid-template-columns:1fr;text-align:center}.cta img{margin:auto}.cta .actions{justify-content:center}}
@media(max-width:620px){.nav{height:74px}.brand img{width:150px;height:54px}.hero{padding-top:58px;min-height:650px}.hero h1{font-size:40px}.hero p{font-size:16px}.actions{flex-direction:column;align-items:stretch}.hero-points{gap:20px;flex-wrap:wrap}.section h2,.canada h2{font-size:34px}.steps{grid-template-columns:1fr}.benefits{grid-template-columns:1fr;margin-left:18px;margin-right:18px}.price-grid{grid-template-columns:1fr}.canada{grid-template-columns:1fr}.vehicle{height:210px}.eyebrow{letter-spacing:4px}}


/* ===== V5: closer to approved visual preview ===== */
.hero{
  min-height:650px;
  background:#020507;
}
.hero:after{
  z-index:1;
  background:linear-gradient(90deg,#020507 0%,rgba(2,5,7,.93) 35%,rgba(2,5,7,.35) 66%,rgba(2,5,7,.08) 100%);
}
.hero-copy{z-index:4}
.hero-photo{
  position:absolute;
  inset:0 0 0 38%;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(2,5,7,.7),rgba(2,5,7,.05) 50%),
    linear-gradient(0deg,rgba(2,5,7,.2),rgba(2,5,7,.05)),
    url("https://images.unsplash.com/photo-1551830820-330a71b99659?auto=format&fit=crop&w=1800&q=88");
  background-size:cover;
  background-position:center;
  filter:saturate(.75) contrast(1.1) brightness(.72);
}
.tire-art,.ring{display:none!important}

.steps{gap:18px}
.tire-step{
  height:190px;
  position:relative;
  overflow:hidden;
  border:1px solid #273541;
  border-radius:12px;
  box-shadow:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background-color:#071019;
  background-size:cover;
  background-position:center;
}
.tire-step:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,.02) 60%);
}
.tire-one,.tire-two,.tire-three{
  background-image:
    radial-gradient(circle at 52% 64%,rgba(0,132,255,.35),transparent 34%),
    url("https://images.unsplash.com/photo-1578844251758-2f71da64c96f?auto=format&fit=crop&w=900&q=88");
}
.tire-two{box-shadow:inset 0 0 34px rgba(0,132,255,.45)}
.puncture-pin,.check{position:relative;z-index:2;color:#fff;font-size:44px;line-height:1;margin-bottom:10px;text-shadow:0 0 12px #0b8dff}
.check{color:#1688ff;font-size:58px;margin:auto}
.steps article b{display:block;margin-top:12px}

@media(max-width:980px){
  .hero-photo{left:28%;opacity:.58}
}
@media(max-width:620px){
  .hero-photo{left:12%;opacity:.42;background-position:62% center}
}

/* V6 matched three-panel process artwork */
.tire-step{background:#071019!important;border:1px solid #1688ff!important;position:relative}
.tire-step:before{content:"";position:absolute;width:112px;height:150px;border:18px solid #1a222a;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 4px #05090c,0 0 24px rgba(22,136,255,.18)}
.tire-step:after{content:"";position:absolute;width:68px;height:106px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 70%,rgba(22,136,255,.72),#06111b 58%,#030609 59%);box-shadow:inset 0 -18px 22px rgba(22,136,255,.3)}
.tire-two:after{background:radial-gradient(circle at 50% 70%,#1688ff 0 13%,rgba(22,136,255,.75) 14% 32%,#06111b 56%,#030609 57%);box-shadow:0 0 26px rgba(22,136,255,.5)}
.tire-three:before{display:none}.tire-three:after{display:none}
.tire-three{background:
 linear-gradient(0deg,rgba(3,7,10,.25),rgba(3,7,10,.05)),
 url("https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=900&q=88") center/cover!important}
.puncture-pin{position:absolute!important;z-index:4!important;bottom:5px!important;left:50%!important;transform:translateX(-50%)!important;font-size:58px!important;color:#f2f5f7!important;text-shadow:0 0 10px #1688ff!important}
.check{display:none!important}
.steps article{display:flex;flex-direction:column}.steps article .tire-step{width:100%}

/* V7 FIXED editor */
body{padding-bottom:54px}
.editbar{position:fixed;z-index:99999;bottom:0;left:0;right:0;min-height:54px;background:#087cf0;color:#fff;display:flex;align-items:center;gap:10px;padding:8px 18px;font:700 12px Arial,sans-serif;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.editbar button{background:#07131d;color:#fff;border:1px solid rgba(255,255,255,.55);padding:9px 13px;border-radius:5px;font-weight:800;cursor:pointer}
.editbar button:hover{background:#10293d}
body.editing h1,body.editing h2,body.editing h3,body.editing p,body.editing .eyebrow,body.editing .price,body.editing small,body.editing .benefits b,body.editing .benefits p,body.editing .hero-points span,body.editing .canada-points b{outline:1px dashed #1688ff;outline-offset:3px;cursor:text}
body.editing .hero-photo,body.editing .tire-step,body.editing .vehicle,body.editing .user-replaceable{outline:2px dashed #29a1ff!important;cursor:pointer!important}
body.editing .hero-photo:hover,body.editing .tire-step:hover,body.editing .vehicle:hover{filter:brightness(.78)}
@media(max-width:720px){.editbar{overflow-x:auto;white-space:nowrap}.editbar #editNote{display:none}}

/* ===== V8 image replacement reliability ===== */
.hero-photo{
 background-image:
 linear-gradient(90deg,rgba(2,5,7,.74),rgba(2,5,7,.06) 58%),
 url("https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?auto=format&fit=crop&w=1800&q=88")!important;
 background-size:cover!important;
 background-position:center 58%!important;
 filter:saturate(.65) contrast(1.12) brightness(.68)!important;
}
.replaceable-bg.user-image{
 background-image:var(--user-image)!important;
 background-size:cover!important;
 background-position:center!important;
 filter:none!important;
}
body.editing .replaceable-bg{outline:3px dashed #2da5ff!important;outline-offset:-3px;cursor:pointer!important}
body.editing .replaceable-bg:hover:before{
 content:"CLICK TO REPLACE PHOTO";
 position:absolute;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);
 background:rgba(0,0,0,.82);color:#fff;border:1px solid #1688ff;border-radius:6px;
 padding:10px 14px;font:800 11px Arial;white-space:nowrap;pointer-events:none
}
.replaceable-bg{position:relative}
.image-toast{position:fixed;z-index:100000;right:18px;bottom:70px;background:#07131d;color:#fff;border:1px solid #1688ff;padding:12px 16px;border-radius:7px;font:700 12px Arial;display:none}

/* ===== V9 fixes ===== */

/* Preferred hero composition: premium SUV / wheel close-up, no intended badge focus */
.hero-photo{
  background-image:
    linear-gradient(90deg,rgba(2,5,7,.78) 0%,rgba(2,5,7,.42) 28%,rgba(2,5,7,.08) 65%),
    url("https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?auto=format&fit=crop&w=2000&q=90")!important;
  background-size:cover!important;
  background-position:60% center!important;
}

/* IMPORTANT: kill the inherited fake round/tire artwork when a selected photo is present */
.tire-step.user-image:before,
.tire-step.user-image:after,
.replaceable-bg.user-image:before,
.replaceable-bg.user-image:after{
  display:none!important;
  content:none!important;
}

/* Also remove the fake ring from the default process cards. V9 uses the photo itself. */
.tire-step:before{display:none!important;content:none!important}
.tire-step:after{display:none!important;content:none!important}

/* Keep labels/nail marker above the actual image */
.puncture-pin{z-index:5!important}

/* Image editor popover */
.pt-image-actions{
  position:fixed;z-index:100001;display:none;gap:7px;
  background:#06111a;border:1px solid #1688ff;border-radius:8px;
  padding:8px;box-shadow:0 12px 35px rgba(0,0,0,.55)
}
.pt-image-actions button{
  color:#fff;background:#102334;border:1px solid #31506a;border-radius:5px;
  padding:8px 11px;font:800 11px Arial;cursor:pointer
}
.pt-image-actions .remove{background:#3a1218}

/* ===== V10 ===== */
.hero-photo{
  background-image:
    linear-gradient(90deg,rgba(2,5,7,.30),rgba(2,5,7,.02)),
    url("assets/preferred-hero-reference.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  filter:none!important;
  opacity:1!important;
  display:block!important;
}
body.editing .replaceable-bg{
  outline:3px dashed #2da5ff!important;
  outline-offset:-3px;
  cursor:pointer!important;
}
body.editing .replaceable-bg:hover{filter:brightness(.86)!important}
body.editing .replaceable-bg:hover:before{
  content:"CLICK TO CHOOSE A NEW PHOTO"!important;
  display:block!important;
  position:absolute!important;
  z-index:100!important;
  left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:auto!important;height:auto!important;border:0!important;border-radius:6px!important;
  background:rgba(0,0,0,.82)!important;color:#fff!important;
  padding:10px 14px!important;font:800 11px Arial!important;white-space:nowrap!important;
  pointer-events:none!important;box-shadow:none!important;
}
.replaceable-bg.user-image:after{display:none!important;content:none!important}

/* ===== V11 FINAL VISUAL FIXES ===== */

/* Remove the stray vertical/round artwork permanently from image panels. */
.hero-photo::before,.hero-photo::after,
.replaceable-bg::before,.replaceable-bg::after,
.tire-step::before,.tire-step::after,
.tire-one::before,.tire-one::after,
.tire-two::before,.tire-two::after,
.tire-three::before,.tire-three::after,
.user-image::before,.user-image::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  box-shadow:none!important;
}

/* Hero: use the preferred attached car/tire visual by default. */
.hero-photo{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  background-image:
    linear-gradient(90deg,rgba(2,5,7,.32) 0%,rgba(2,5,7,.08) 50%,rgba(2,5,7,.02) 100%),
    url("assets/v11-preferred-hero.jpg")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}
.hero-copy{position:relative!important;z-index:3!important}
.hero::after{
  z-index:1!important;
  background:linear-gradient(90deg,rgba(2,5,7,.84) 0%,rgba(2,5,7,.52) 38%,rgba(2,5,7,.08) 70%,rgba(2,5,7,.02) 100%)!important;
  pointer-events:none!important;
}

/* User-selected photos always win. */
.replaceable-bg.user-image{
  background-image:var(--user-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}

/* Editing outline only. No pseudo-element overlay that can create a line. */
body.editing .replaceable-bg{
  outline:3px dashed #2da5ff!important;
  outline-offset:-3px!important;
  cursor:pointer!important;
}
body.editing .replaceable-bg:hover{filter:brightness(.88)!important}

/* ===== V12 =====
   New clean generated hero. No Share/download/menu icons.
   Remove all inherited decorative lines from editable image areas.
*/
.hero-photo{
 background-image:url("assets/v12-hero.png")!important;
 background-size:cover!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
 opacity:1!important;
 filter:none!important;
}
.hero-photo::before,.hero-photo::after,
.tire-step::before,.tire-step::after,
.replaceable-bg::before,.replaceable-bg::after,
.user-image::before,.user-image::after,
.puncture-pin,.puncture-pin::before,.puncture-pin::after{
 content:none!important;
 display:none!important;
 border:0!important;
 width:0!important;
 height:0!important;
 box-shadow:none!important;
 background:none!important;
}

/* No artificial vertical nail/line sitting on top of user-selected images. */
.tire-step,.replaceable-bg{background-clip:border-box!important}

/* A selected user image always fully replaces the default visual. */
.replaceable-bg.user-image{
 background-image:var(--user-image)!important;
 background-size:cover!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
}


/* ===== V13 TOP HERO FIX ===== */
.hero{
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  overflow:hidden!important;
  background:#02070c!important;
}
.hero-photo{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  background-image:url("assets/v13-top-hero.png")!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}
.hero::before,.hero::after{
  content:none!important;
  display:none!important;
}
.hero .hero-copy,
.hero .hero-points{
  display:none!important;
}

/* The generated hero already contains its own clean header/navigation.
   Hide the duplicate live site header only across this opening composition. */
header.site-header{
  display:none!important;
}

/* Preserve image editing: in Edit Page mode the hero remains clickable. */
body.editing .hero-photo{
  outline:3px dashed #2da5ff!important;
  outline-offset:-3px!important;
  cursor:pointer!important;
}
body.editing .hero-photo:hover{
  filter:brightness(.92)!important;
}

/* If the user replaces the hero, their selected image takes priority. */
.hero-photo.user-image{
  background-image:var(--user-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Responsive top image */
@media (max-width:900px){
  .hero{aspect-ratio:16 / 10!important;}
  .hero-photo{background-position:center!important;}
}
@media (max-width:600px){
  .hero{aspect-ratio:4 / 3!important;}
}

/* ===== V14: functional live hero ===== */

/* Restore ONE real navigation row. */
header.nav{
  display:flex!important;
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
}
header.site-header{display:none!important}

/* Hero now uses only the clean car/tire crop. No baked-in duplicate navigation,
   text, or fake buttons. All visible words/buttons below are real HTML. */
.hero{
  position:relative!important;
  min-height:700px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 76% 42%,rgba(14,73,125,.24),transparent 38%),
    linear-gradient(90deg,#03080d 0%,#06101a 48%,#03080d 100%)!important;
}
.hero-photo{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  width:58%!important;
  height:100%!important;
  z-index:1!important;
  display:block!important;
  background-image:
    linear-gradient(90deg,#06101a 0%,rgba(6,16,26,.25) 22%,rgba(0,0,0,0) 48%),
    url("assets/v14-car-hero.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}
.hero::before,.hero::after,.hero-overlay{display:none!important;content:none!important}
.hero .hero-copy{
  display:block!important;
  position:relative!important;
  z-index:5!important;
  width:min(620px,48%)!important;
  padding:100px 0 75px clamp(34px,6vw,95px)!important;
}
.hero .hero-points{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(100px,1fr))!important;
  gap:22px!important;
  margin-top:54px!important;
  width:min(880px,90vw)!important;
}
.hero .actions{display:flex!important;gap:16px!important;margin-top:28px!important}
.hero .actions a{pointer-events:auto!important;position:relative!important;z-index:20!important}

/* User-selected hero images still work. */
.hero-photo.user-image{
  width:58%!important;
  background-image:var(--user-image)!important;
  background-size:cover!important;
  background-position:center!important;
}

/* Edit mode should not block real links unless the user is editing. */
body:not(.editing) .hero-photo{pointer-events:none!important}

@media(max-width:900px){
  .hero{min-height:760px!important}
  .hero-photo{width:100%!important;opacity:.42!important}
  .hero .hero-copy{width:auto!important;padding:85px 28px 60px!important}
  .hero .hero-points{grid-template-columns:repeat(2,1fr)!important}
}


/* =========================================================
   V15 FINAL HERO CLEANUP
   ========================================================= */

/* One and only one functional header/navigation. */
header.nav{
  display:flex!important;
  min-height:92px!important;
  padding:12px clamp(24px,5vw,72px)!important;
  background:rgba(5,9,14,.97)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
}

/* Larger ProTech logo in upper-left. */
header.nav .brand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
}
header.nav .brand img{
  width:190px!important;
  max-width:22vw!important;
  height:auto!important;
  display:block!important;
  object-fit:contain!important;
}

/* Clean hero. The background image contains ONLY the car/tire photography. */
.hero{
  position:relative!important;
  min-height:690px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 45%,rgba(10,85,160,.20),transparent 38%),
    linear-gradient(90deg,#02070c 0%,#06111c 52%,#02070c 100%)!important;
}

.hero-photo{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  width:59%!important;
  height:100%!important;
  z-index:1!important;
  display:block!important;
  background-image:
    linear-gradient(90deg,#06111c 0%,rgba(6,17,28,.34) 18%,rgba(0,0,0,0) 46%),
    url("assets/v15-car-hero.png")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  visibility:visible!important;
}

/* No old overlays or generated strips can appear. */
.hero::before,
.hero::after,
.hero-overlay{
  display:none!important;
  content:none!important;
}

/* Live, editable hero wording/buttons. */
.hero .hero-copy{
  display:block!important;
  position:relative!important;
  z-index:5!important;
  width:min(650px,49%)!important;
  padding:100px 0 68px clamp(34px,6vw,95px)!important;
}
.hero .actions{
  display:flex!important;
  gap:16px!important;
  margin-top:28px!important;
}
.hero .actions a{
  pointer-events:auto!important;
  position:relative!important;
  z-index:20!important;
}

/* Make the four feature labels larger and easier to read. */
.hero .hero-points{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(120px,1fr))!important;
  gap:28px!important;
  margin-top:52px!important;
  width:min(900px,92vw)!important;
  align-items:center!important;
}
.hero .hero-points > div{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.hero .hero-points b{
  font-size:30px!important;
  line-height:1!important;
  color:#168cff!important;
  flex:0 0 auto!important;
}
.hero .hero-points span{
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}

/* Keep custom image replacement functionality. */
.hero-photo.user-image{
  width:59%!important;
  background-image:var(--user-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
body:not(.editing) .hero-photo{
  pointer-events:none!important;
}

/* Mobile/tablet */
@media(max-width:900px){
  header.nav .brand img{
    width:155px!important;
    max-width:38vw!important;
  }
  .hero{
    min-height:760px!important;
  }
  .hero-photo{
    width:100%!important;
    opacity:.42!important;
  }
  .hero .hero-copy{
    width:auto!important;
    padding:82px 28px 55px!important;
  }
  .hero .hero-points{
    grid-template-columns:repeat(2,minmax(140px,1fr))!important;
    gap:20px!important;
  }
}

/* ===== V17 LOGO HEADER FIX ===== */
header.nav{overflow:hidden!important;}
header.nav .brand{height:68px!important;overflow:hidden!important;background:transparent!important;}
header.nav .brand img{
  width:205px!important;
  height:68px!important;
  max-width:24vw!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
@media(max-width:900px){header.nav .brand{height:58px!important}header.nav .brand img{width:165px!important;height:58px!important;max-width:40vw!important}}

/* ===== V18 HERO FEATURE ICONS =====
   Larger, clean icon treatment matching the approved hero reference. */
.hero .hero-points{gap:0!important;width:min(1040px,94vw)!important;margin-top:48px!important}
.hero .hero-points>div{min-height:76px!important;padding:0 28px!important;border-right:1px solid rgba(180,205,225,.28)!important;gap:18px!important}
.hero .hero-points>div:first-child{padding-left:0!important}
.hero .hero-points>div:last-child{border-right:0!important}
.hero .hero-points b{display:block!important;width:54px!important;min-width:54px!important;text-align:center!important;font-size:0!important;color:#168cff!important;line-height:1!important}
.hero .hero-points b::before{display:block!important;font-size:50px!important;line-height:1!important;font-weight:700!important;color:#168cff!important}
.hero .hero-points>div:nth-child(1) b::before{content:"♢";font-size:58px!important;font-weight:900!important}
.hero .hero-points>div:nth-child(2) b::before{content:"▱";font-size:58px!important;transform:rotate(-90deg);transform-origin:center}
.hero .hero-points>div:nth-child(3) b::before{content:"≋";font-size:62px!important;font-weight:900!important}
.hero .hero-points>div:nth-child(4) b::before{content:"❄";font-size:54px!important}
.hero .hero-points span{font-size:17px!important;line-height:1.2!important;font-weight:850!important;color:#fff!important}
@media(max-width:900px){.hero .hero-points{gap:0!important}.hero .hero-points>div{padding:12px 16px!important;border-right:0!important;border-bottom:1px solid rgba(180,205,225,.2)!important}.hero .hero-points b{width:46px!important;min-width:46px!important}.hero .hero-points span{font-size:15px!important}}

/* ===== V19 CLEAN OPENING — exact single-layer approved composition ===== */
/* The opening is one clean approved image. This permanently eliminates duplicate/overlapping
   headings, buttons, feature labels and navigation from older live layers. */
header.nav{display:none!important}
.hero{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#02070c!important;
}
.hero .hero-overlay,.hero .hero-copy{display:none!important}
.hero-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  display:block!important;
  background-image:url("assets/v19-approved-opening.png")!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
}
.hero-photo.user-image{
  inset:0!important;width:100%!important;height:100%!important;
  background-image:var(--user-image)!important;
  background-size:cover!important;background-position:center!important;
}
/* Functional invisible click areas positioned over the visible navigation/buttons in the image. */
.v19-hotspots{position:absolute!important;inset:0!important;z-index:20!important;pointer-events:none!important}
.v19-hotspots a{position:absolute!important;display:block!important;pointer-events:auto!important;background:transparent!important;border:0!important;text-indent:-9999px!important;overflow:hidden!important}
.v19-home{left:28.3%;top:2.6%;width:5.5%;height:7%}
.v19-how{left:34.8%;top:2.6%;width:8.4%;height:7%}
.v19-benefits{left:44.2%;top:2.6%;width:6.6%;height:7%}
.v19-pricing{left:51.6%;top:2.6%;width:5.8%;height:7%}
.v19-canada{left:58%;top:2.6%;width:10.8%;height:7%}
.v19-contact{left:69.4%;top:2.6%;width:6.8%;height:7%}
.v19-booktop{left:83.1%;top:1.8%;width:13.2%;height:8.2%}
.v19-bookhero{left:4.3%;top:66.8%;width:19.2%;height:7.4%}
.v19-pricinghero{left:24.2%;top:66.8%;width:14.3%;height:7.4%}
body.editing .hero-photo{pointer-events:auto!important;outline:3px dashed #2da5ff!important;outline-offset:-3px!important;cursor:pointer!important}
body.editing .v19-hotspots{display:none!important}
@media(max-width:700px){.hero{aspect-ratio:16/9!important}.editbar{font-size:11px!important}}

/* ===== V20 EXACT OPENING =====
   Opening uses the user's approved reference as one single layer.
   The separate HTML header/copy/feature row are hidden on the opening only,
   preventing any duplicated wording, buttons or icons. */
.nav{display:none!important}
.hero{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1290/730!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#020b13!important;
}
.hero .hero-overlay,.hero .hero-copy{display:none!important}
.hero-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url("assets/v21-opening-highres.jpg")!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  z-index:1!important;
}
.hero-photo.user-image{background-size:cover!important;background-position:center!important}
.v20-hotspots{position:absolute!important;inset:0!important;z-index:20!important;pointer-events:none!important}
.v20-hotspots a{position:absolute!important;display:block!important;pointer-events:auto!important;background:transparent!important;border:0!important;text-indent:-9999px!important;overflow:hidden!important}
.v20-home{left:27.2%;top:1.3%;width:5.6%;height:9%}
.v20-how{left:33.2%;top:1.3%;width:9.2%;height:9%}
.v20-benefits{left:42.6%;top:1.3%;width:7.2%;height:9%}
.v20-pricing{left:49.9%;top:1.3%;width:6.5%;height:9%}
.v20-canada{left:56.7%;top:1.3%;width:11.6%;height:9%}
.v20-contact{left:68.3%;top:1.3%;width:7.6%;height:9%}
.v20-booktop{left:82.6%;top:1%;width:14.2%;height:9.5%}
.v20-bookhero{left:4.1%;top:66.7%;width:19.4%;height:8.3%}
.v20-pricinghero{left:24.0%;top:66.7%;width:13.4%;height:8.3%}
body.editing .hero-photo{pointer-events:auto!important;outline:3px dashed #2da5ff!important;outline-offset:-3px!important;cursor:pointer!important}
body.editing .v20-hotspots{display:none!important}
@media(max-width:700px){.hero{aspect-ratio:1290/730!important}.editbar{font-size:11px!important}}

#contact .actions .btn{min-width:210px;text-align:center;line-height:1.15}
#contact .actions .btn small{display:block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none}

/* ===== V23 FINAL LIVE ===== */
.editbar,#photoInput{display:none!important;}
.tire-one:before,.tire-one:after,.tire-two:before,.tire-two:after,.tire-three:before,.tire-three:after{display:none!important;content:none!important;}
.tire-step{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}

/* ===== V25 FINAL HOW-IT-WORKS IMAGE FIX ===== */
.steps .tire-step{
  padding:0!important;
  overflow:hidden!important;
  background:#071019!important;
  display:block!important;
}
.steps .tire-step img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
}
.steps .tire-step::before,.steps .tire-step::after{display:none!important;content:none!important;}