:root{--bg:#050505;--panel:#0b0b0c;--text:#f5f5f5;--muted:#aaa;--red:#ef1018;--line:#29292c;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(var(--max),92%);margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(4,4,4,.92);backdrop-filter:blur(12px);border-bottom:1px solid #171717}
.nav{height:78px;display:flex;align-items:center;gap:28px}.logo{width:175px}.navlinks{margin-left:auto;display:flex;gap:26px;align-items:center;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.navlinks a:hover,.active{color:var(--red)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border:1px solid #555;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;transition:.2s}.btn:hover{border-color:#fff}.btn.red{background:var(--red);border-color:var(--red)}
.hero{min-height:660px;display:grid;align-items:center;background-color:#030303;background-image:linear-gradient(90deg,#030303 0%,rgba(3,3,3,.95) 34%,rgba(3,3,3,.10) 70%),url('assets/hero-car.jpg');background-repeat:no-repeat;background-position:center,right center;background-size:100% 100%,contain}
.eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:13px}.dot{color:var(--red)}h1,h2,h3{margin:.25em 0;line-height:1.02;text-transform:uppercase}h1{font-size:clamp(46px,7vw,86px);max-width:750px}h2{font-size:clamp(30px,4vw,52px)}h3{font-size:21px}.lead{color:#c9c9c9;max-width:600px;font-size:18px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.service-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-strip article{padding:34px;border-right:1px solid var(--line)}.service-strip article:last-child{border-right:0}.service-strip p,.muted{color:var(--muted)}
.quality{display:grid;grid-template-columns:1fr 1.3fr;min-height:430px}.wheel{background-color:#050505;background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.25)),url('assets/wheel.jpg');background-repeat:no-repeat;background-position:center,center;background-size:100% 100%,contain;filter:saturate(.72) brightness(.72) contrast(1.08)}
.quality-copy{padding:60px;display:flex;flex-direction:column;justify-content:center}.redtext{color:var(--red)}.ticks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.tick{border-left:2px solid var(--red);padding-left:12px;font-size:13px}
.section{padding:72px 0;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px}.section-head p{max-width:650px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:var(--panel);border:1px solid var(--line);overflow:hidden}.card img{width:100%;height:260px;object-fit:contain;background:#050505}.card-body{padding:22px}.price{color:var(--red);font-weight:900;font-size:22px}.card p{color:#bbb}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.tab{background:#111;border:1px solid #333;color:white;padding:12px 16px;cursor:pointer;font-weight:800}.tab.on{background:var(--red);border-color:var(--red)}
.package-detail{display:none;border:1px solid #333;background:#090909;padding:26px}.package-detail.on{display:grid;grid-template-columns:1fr 1fr;gap:28px}.package-detail img{max-height:650px;object-fit:contain;margin:auto}.package-copy ul{padding-left:20px;color:#ccc}.package-copy li{margin:8px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:#090909}.split .copy{padding:50px}.split .media{min-height:470px;background-color:#050505;background-size:contain;background-repeat:no-repeat;background-position:center}.feature-list{columns:2;padding-left:20px}.feature-list li{margin:10px 0;color:#ccc}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.placeholder{aspect-ratio:4/3;border:1px dashed #555;display:grid;place-items:center;text-align:center;color:#888;background:#080808}.placeholder b{color:#ddd;display:block}
.cta{padding:70px 0;background-color:#050505;background-image:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.35)),url('assets/video-09.jpg');background-repeat:no-repeat;background-position:center,center;background-size:100% 100%,contain;border-top:1px solid var(--line)}
footer{padding:32px 0;border-top:1px solid var(--line);color:#999}.foot{display:flex;justify-content:space-between;align-items:center;gap:30px}.foot img{width:170px}
.page-hero{padding:110px 0 70px;background-color:#050505;background-image:linear-gradient(90deg,#050505,rgba(5,5,5,.45)),url('assets/video-03.jpg');background-repeat:no-repeat;background-position:center,center;background-size:100% 100%,contain;border-bottom:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px}.contact-box{border:1px solid var(--line);padding:30px;background:#090909}.field{display:block;width:100%;margin:12px 0;padding:14px;background:#050505;border:1px solid #333;color:#fff}
.note{font-size:12px;color:#777}.mobile{display:none}
@media(max-width:800px){.navlinks{display:none}.mobile{display:block;margin-left:auto}.hero{min-height:570px;background-position:65% center}.service-strip,.cards,.quality,.split,.contact-grid{grid-template-columns:1fr}.service-strip article{border-right:0;border-bottom:1px solid var(--line)}.wheel{min-height:350px}.quality-copy,.split .copy{padding:35px 5%}.ticks{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.package-detail.on{grid-template-columns:1fr}.feature-list{columns:1}.foot{align-items:flex-start;flex-direction:column}}

/* Preserve full source images rather than aggressive cropping */
.package-detail img{width:100%;height:auto;max-height:none;object-fit:contain;background:#050505}
.logo{object-fit:contain;background:transparent}
@media(max-width:800px){
  .hero{background-position:center,right center;background-size:100% 100%,contain}
  .page-hero,.cta{background-size:100% 100%,contain}
}

.detail-hub-hero,.detail-page-hero{padding:105px 0 75px;border-bottom:1px solid var(--line);background:#050505}
.detail-page-hero{min-height:520px;display:flex;align-items:center;background-repeat:no-repeat;background-position:right center;background-size:auto 100%;position:relative}
.detail-page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.96) 44%,rgba(5,5,5,.35) 75%,rgba(5,5,5,.2) 100%)}
.detail-page-hero .wrap{position:relative;z-index:1}
.detail-page-hero.basic{background-image:url('assets/basic-detail.png')}
.detail-page-hero.signature{background-image:url('assets/signature-detail.png')}
.detail-page-hero.paint{background-image:url('assets/paint-correction.jpg')}
.detail-price{font-size:22px;letter-spacing:.06em;margin:18px 0}.detail-price strong{font-size:46px;color:var(--red)}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.package-tile{display:flex;flex-direction:column;background:#090909;border:1px solid #29292c;transition:.2s;overflow:hidden}
.package-tile:hover{transform:translateY(-4px);border-color:#555}.package-tile img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#050505}.package-tile>div{padding:24px}.package-tile p{color:#aaa}.package-tile b{color:var(--red)}
.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.detail-accordion,.poster-reference{border:1px solid #303034;background:#090909}
.detail-accordion summary,.poster-reference summary{cursor:pointer;padding:20px 22px;font-size:21px;font-weight:900;text-transform:uppercase}
.detail-accordion summary{border-left:3px solid var(--red)}.detail-accordion ul{padding:0 35px 25px 48px;color:#ccc}.detail-accordion li{margin:9px 0}
.surcharge{margin:20px 0 45px;padding:18px 22px;border:1px solid #333;border-left:3px solid var(--red);background:#0a0a0a;font-size:18px}.surcharge strong{color:#fff}.surcharge span{color:var(--red);padding:0 10px}
.section-title{margin-top:42px}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.upgrade{padding:22px;background:#090909;border:1px solid #2a2a2e}.upgrade b,.protection-grid b{display:block;color:var(--red);font-size:28px;margin:10px 0}.upgrade p,.protection-grid p{color:#aaa}
.poster-reference{margin-top:38px}.poster-reference img{width:min(100%,1100px);height:auto;margin:0 auto;padding:15px;object-fit:contain}
.correction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.correction-card{background:#090909;border:1px solid #2e2e32;padding:25px}.correction-card>span{color:var(--red);text-transform:uppercase;font-weight:900;letter-spacing:.12em}.correction-card ul{padding-left:20px;color:#ccc}.correction-card li{margin:8px 0}
.protection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.protection-grid article{background:#0a0a0a;border:1px solid #2e2e32;padding:24px}
.service-new{background-color:#050505;background-image:linear-gradient(90deg,#050505,rgba(5,5,5,.48)),url('assets/servicing.jpg');background-size:100% 100%,contain;background-repeat:no-repeat;background-position:center,center}
.cta{background-color:#050505!important;background-image:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.35)),url('assets/cta.jpg')!important;background-repeat:no-repeat!important;background-position:center,center!important;background-size:100% 100%,contain!important}
@media(max-width:800px){
 .package-grid,.detail-columns,.upgrade-grid,.correction-grid,.protection-grid{grid-template-columns:1fr}
 .detail-page-hero{min-height:560px;background-size:contain;background-position:center bottom;padding-bottom:210px}
 .detail-page-hero:before{background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.96) 52%,rgba(5,5,5,.42) 82%,rgba(5,5,5,.22) 100%)}
 .detail-price strong{font-size:38px}
}

.top-socials{display:flex;align-items:center;gap:10px}
.top-socials a,.footer-socials a{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:#f5f5f5;border:1px solid #343438;border-radius:50%;transition:.2s}
.top-socials a:hover,.footer-socials a:hover{color:var(--red);border-color:var(--red)}
.top-socials svg,.footer-socials svg{width:16px;height:16px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:40px}
.footer-brand img{width:180px}
.footer-socials{display:flex;gap:10px;margin-top:14px}
.footer-phone{margin-top:10px;color:#d0d0d0;font-size:14px}
.footer-address{text-align:center;display:flex;flex-direction:column;gap:4px;color:#aaa;font-size:14px}
.footer-address strong{color:#fff;letter-spacing:.12em;font-size:12px;margin-bottom:4px}
.footer-tagline{text-align:right;display:flex;flex-direction:column;gap:10px}
.footer-tagline strong{color:#fff;font-size:16px;line-height:1.35;text-transform:uppercase}
.footer-tagline>span{color:#999;font-size:13px}
.detailing-media{min-height:470px}
@media(max-width:800px){
  .top-socials{margin-left:auto}
  .footer-grid{grid-template-columns:1fr;text-align:left;gap:25px}
  .footer-address{text-align:left}
  .footer-tagline{text-align:left}
}


/* === REVISION 3: desktop photo fitting + full header logo === */

/* Give the full Drivon logo enough physical space so the large D is never clipped. */
.nav{
  min-height:108px;
  height:auto;
}
.nav > a:first-child{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  overflow:visible;
}
.nav .logo{
  display:block;
  width:auto !important;
  height:92px !important;
  max-width:160px;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
}

/* Footer logo also shows the complete artwork. */
.footer-brand img{
  display:block;
  width:auto !important;
  height:118px !important;
  max-width:190px;
  object-fit:contain !important;
  background:transparent !important;
}

/*
  Service/about photo panels:
  keep the entire 16:9 source frame visible on desktop.
  The box now follows the photo ratio rather than forcing a tall crop/letterbox.
*/
.split{
  align-items:center;
}
.split .media,
.detailing-media{
  width:100%;
  min-height:0 !important;
  aspect-ratio:16 / 9;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:#050505 !important;
}

/* Prevent inline styles from making desktop photo panels unnecessarily tall. */
@media (min-width:801px){
  .split .media,
  .detailing-media{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }

  /* Hero/background photos use the whole source frame rather than an arbitrary crop. */
  .service-new,
  .page-hero,
  .cta{
    background-size:100% 100%, contain !important;
    background-position:center, center !important;
    background-repeat:no-repeat !important;
  }
}

/* Keep the mobile header compact without cropping the artwork. */
@media(max-width:800px){
  .nav{
    min-height:82px;
  }
  .nav .logo{
    height:68px !important;
    max-width:118px;
  }
  .footer-brand img{
    height:100px !important;
    max-width:165px;
  }
}

/* === REVISION 4: requested footer arrangement + poster-as-page package pages === */

.footer-grid{
  display:grid !important;
  grid-template-columns:minmax(280px,1.2fr) minmax(220px,.9fr) minmax(260px,1fr) !important;
  align-items:center !important;
  gap:42px !important;
}

.footer-left-cluster{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.footer-logo{
  display:block;
  width:auto !important;
  height:112px !important;
  max-width:170px;
  object-fit:contain !important;
  flex:0 0 auto;
}

.footer-contact-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
}

.footer-socials{
  display:flex;
  gap:10px;
  margin:0 !important;
}

.footer-phone{
  margin:0 !important;
  white-space:nowrap;
  color:#d0d0d0;
  font-size:14px;
}

.footer-address{
  text-align:center !important;
}

.footer-tagline{
  text-align:right !important;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px !important;
}

.footer-services{
  color:#bcbcbc;
  font-size:13px;
  letter-spacing:.03em;
}

.footer-tagline strong{
  margin:0;
}

/* Full-poster package pages */
.poster-page{
  background:#050505;
}

.poster-page-main{
  background:#050505;
}

.poster-page-toolbar{
  padding-top:22px;
  padding-bottom:14px;
}

.poster-back{
  display:inline-block;
  color:#ddd;
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
}

.poster-back:hover{
  color:var(--red);
}

.poster-full-page{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#050505;
  padding:0 18px 42px;
}

.poster-full-page img{
  display:block;
  width:min(100%, 1180px);
  height:auto;
  max-width:100%;
  object-fit:contain;
  background:#050505;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .footer-left-cluster{
    justify-content:flex-start;
  }

  .footer-address{
    text-align:left !important;
  }

  .footer-tagline{
    align-items:flex-start !important;
    text-align:left !important;
  }
}

@media(max-width:560px){
  .footer-left-cluster{
    gap:12px;
  }

  .footer-logo{
    height:92px !important;
    max-width:138px;
  }

  .poster-full-page{
    padding-left:8px;
    padding-right:8px;
  }
}

/* === REVISION 5: DESKTOP IMAGES FILL THEIR BOXES EDGE-TO-EDGE === */
@media (min-width:801px){

  /* Homepage hero */
  .hero{
    background-size:100% 100%, cover !important;
    background-position:center, center !important;
    background-repeat:no-repeat !important;
  }

  /* Homepage wheel / quality image */
  .wheel{
    background-size:100% 100%, cover !important;
    background-position:center, center !important;
    background-repeat:no-repeat !important;
  }

  /* Services, About and other split image panels */
  .split .media,
  .detailing-media{
    width:100% !important;
    height:100% !important;
    min-height:470px !important;
    aspect-ratio:auto !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  /* Main page hero photography */
  .page-hero,
  .service-new{
    background-size:100% 100%, cover !important;
    background-position:center, center !important;
    background-repeat:no-repeat !important;
  }

  /* Bottom CTA photography */
  .cta{
    background-size:100% 100%, cover !important;
    background-position:center, center !important;
    background-repeat:no-repeat !important;
  }

  /* Any normal content-card photos should fill their card */
  .card img{
    width:100% !important;
    height:260px !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  /* Detailing package selector cards fill their preview area */
  .package-tile img{
    width:100% !important;
    height:330px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:center top !important;
  }

  /*
    IMPORTANT:
    The actual three package pages stay FULL POSTER and uncropped.
    Their poster is the page content, so preserve every part of it.
  */
  .poster-full-page img{
    width:min(100%,1180px) !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
  }

  /* Never crop either Drivon logo */
  .nav .logo,
  .footer-logo,
  .footer-brand img{
    object-fit:contain !important;
  }
}

/* === REVISION 6: native detailing package pages + realistic package thumbnails === */

.package-tile img{
  width:100% !important;
  height:300px !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block;
}

.package-native-hero{
  min-height:620px;
  position:relative;
  display:flex;
  align-items:center;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  border-bottom:1px solid #242428;
}
.basic-native-hero{background-image:url('assets/thumb-basic.jpg')}
.signature-native-hero{background-image:url('assets/thumb-signature.jpg')}
.paint-native-hero{background-image:url('assets/thumb-paint.jpg')}

.package-native-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,2,3,.98) 0%,rgba(2,2,3,.90) 38%,rgba(2,2,3,.44) 68%,rgba(2,2,3,.25) 100%),
    linear-gradient(0deg,rgba(0,0,0,.58),transparent 55%);
}

.package-native-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:72px;
  padding-bottom:72px;
}

.package-native-hero h1{
  max-width:760px;
  margin:8px 0 8px;
}

.package-native-hero .lead{
  max-width:690px;
}

.package-back{
  display:inline-block;
  margin-bottom:42px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#c5c5c5;
}
.package-back:hover{color:var(--red)}

.native-price{
  margin:16px 0 20px;
  font-size:21px;
  font-weight:800;
  letter-spacing:.08em;
}
.native-price strong{
  color:var(--red);
  font-size:50px;
  line-height:1;
}

.package-native-content{
  background:
    linear-gradient(180deg,#070708 0%,#040405 100%);
}

.native-intro-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}
.native-intro-row h2{margin-bottom:0}

.native-surcharge{
  border-left:3px solid var(--red);
  background:#0b0b0d;
  border-top:1px solid #242428;
  border-right:1px solid #242428;
  border-bottom:1px solid #242428;
  padding:16px 18px;
  color:#bdbdbd;
  min-width:245px;
}
.native-surcharge strong{color:#fff}

.native-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.native-panel{
  border:1px solid #2a2a2e;
  background:linear-gradient(180deg,#0d0d0f 0%,#080809 100%);
  padding:25px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.native-panel-title{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:15px;
  margin-bottom:14px;
  border-bottom:1px solid #2e2e32;
}
.native-panel-title span{
  color:var(--red);
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
}
.native-panel-title h3{
  margin:0;
  font-size:25px;
  text-transform:uppercase;
}

.native-list{
  list-style:none;
  padding:0;
  margin:0;
}
.native-list li{
  position:relative;
  padding:8px 0 8px 19px;
  color:#d0d0d0;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.native-list li:last-child{border-bottom:0}
.native-list li:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  position:absolute;
  left:0;
  top:16px;
}
.native-list strong{color:#fff}

.native-highlight{
  margin-top:18px;
  padding:15px 17px;
  border-left:3px solid var(--red);
  background:#111114;
  color:#d6d6d6;
}
.native-highlight.wide{margin-top:22px}

.native-section-head{
  margin:58px 0 22px;
}
.native-section-head h2{margin-bottom:0}

.native-upgrades{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.native-upgrades.five{
  grid-template-columns:repeat(5,1fr);
}
.native-upgrades article,
.protection-native-grid article{
  border:1px solid #2c2c30;
  background:linear-gradient(180deg,#0d0d0f,#080809);
  padding:22px;
}
.native-upgrades h3,
.protection-native-grid h3{
  margin:0;
  min-height:54px;
}
.native-upgrades p,
.protection-native-grid p,
.correction-native-card p{
  color:#aeadb3;
}
.native-upgrades small,
.protection-native-grid small,
.correction-native-card small{
  display:block;
  margin-top:14px;
  color:#8d8d92;
  font-style:italic;
  line-height:1.45;
}

.upgrade-price{
  margin:12px 0;
  font-size:30px;
  line-height:1;
  font-weight:900;
  color:var(--red);
}

.native-note{
  margin-top:30px;
  color:#77777c;
  font-size:13px;
  text-align:center;
  font-style:italic;
}

.native-wide-copy{
  max-width:900px;
  color:#bdbdc2;
  margin-bottom:25px;
}

.correction-native-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.correction-native-card{
  border:1px solid #2e2e32;
  background:linear-gradient(180deg,#0e0e10,#080809);
  padding:26px;
  position:relative;
}
.correction-native-card.featured{
  border-color:#5a191c;
  box-shadow:inset 0 0 0 1px rgba(255,0,0,.12);
}
.correction-native-card h3{
  font-size:25px;
  margin:12px 0 0;
}

.stage-pill{
  display:inline-flex;
  padding:7px 10px;
  border:1px solid #4a1618;
  background:rgba(200,0,8,.10);
  color:#ff3439;
  text-transform:uppercase;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
}

.protection-native-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

@media(max-width:1050px){
  .native-upgrades.five{grid-template-columns:repeat(3,1fr)}
  .native-upgrades{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:800px){
  .package-native-hero{
    min-height:650px;
    background-position:center;
  }
  .package-native-shade{
    background:linear-gradient(180deg,rgba(2,2,3,.88) 0%,rgba(2,2,3,.72) 45%,rgba(2,2,3,.94) 100%);
  }
  .package-native-hero-inner{
    padding-top:55px;
    padding-bottom:55px;
  }
  .package-back{margin-bottom:26px}
  .native-price strong{font-size:42px}
  .native-intro-row{
    display:block;
  }
  .native-surcharge{
    margin-top:18px;
    min-width:0;
  }
  .native-two-col,
  .correction-native-grid,
  .protection-native-grid,
  .native-upgrades,
  .native-upgrades.five{
    grid-template-columns:1fr;
  }
  .native-upgrades h3,
  .protection-native-grid h3{
    min-height:0;
  }
  .package-tile img{
    height:auto !important;
    aspect-ratio:16/9;
  }
}

/* === REVISION 7: detailing package pages reverted to full-poster layout === */
.poster-full-page{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#050505;
  padding:0 18px 42px;
}
.poster-full-page img{
  display:block !important;
  width:min(100%,1180px) !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center top !important;
}

/* === REVISION 8: working mobile nav + richer homepage service strip + mobile wheel zoom === */

/* Homepage three-service section: keep the same content, improve the visual treatment. */
.service-strip{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 15%, rgba(200,0,8,.10), transparent 28%),
    linear-gradient(180deg,#0a0a0c 0%,#050506 100%);
}
.service-strip:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%),
    linear-gradient(225deg,rgba(255,255,255,.018) 25%,transparent 25%);
  background-size:18px 18px;
}
.service-strip article{
  position:relative;
  z-index:1;
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:42px 38px 38px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.service-strip article:before{
  content:"";
  position:absolute;
  left:38px;
  top:30px;
  width:38px;
  height:3px;
  background:var(--red);
  box-shadow:0 0 18px rgba(210,0,10,.30);
}
.service-strip article:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(210,0,10,.08),transparent 45%);
  opacity:0;
  transition:opacity .25s ease;
}
.service-strip article:hover{
  transform:translateY(-4px);
  background:linear-gradient(180deg,#101013,#09090b);
  box-shadow:0 16px 45px rgba(0,0,0,.28);
}
.service-strip article:hover:after{opacity:1}
.service-strip h3{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.service-strip p{
  max-width:420px;
  margin:0 0 18px;
  line-height:1.65;
}
.service-strip article>a{
  width:max-content;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  border-bottom:1px solid #3a3a3f;
  padding-bottom:5px;
}
.service-strip article>a:hover{
  color:var(--red);
  border-color:var(--red);
}

/* Mobile navigation becomes a proper dropdown panel. */
.mobile{
  appearance:none;
  border:1px solid #45454a;
  background:#0b0b0d;
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  padding:11px 14px;
  cursor:pointer;
}
.mobile:hover{border-color:var(--red)}

@media(max-width:800px){
  header{
    position:relative;
    z-index:1000;
  }
  .nav{
    position:relative;
  }
  .navlinks.mobile-open{
    display:flex !important;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:999;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:10px 5% 18px;
    background:rgba(5,5,6,.98);
    border-top:1px solid #26262a;
    border-bottom:1px solid #343438;
    box-shadow:0 22px 45px rgba(0,0,0,.52);
  }
  .navlinks.mobile-open > a:not(.btn){
    display:block;
    padding:14px 2px;
    border-bottom:1px solid #1e1e21;
  }
  .navlinks.mobile-open .top-socials{
    margin:14px 0 4px;
  }
  .navlinks.mobile-open .btn{
    margin-top:12px;
    width:100%;
  }

  /* Mobile homepage services: cards rather than plain rows. */
  .service-strip{
    padding:16px;
    gap:12px;
    border:0;
  }
  .service-strip article{
    min-height:205px;
    border:1px solid #27272b !important;
    border-radius:4px;
    padding:38px 24px 24px;
    background:
      radial-gradient(circle at 92% 8%,rgba(200,0,8,.14),transparent 28%),
      linear-gradient(160deg,#111114,#080809);
  }
  .service-strip article:before{
    left:24px;
    top:24px;
  }
  .service-strip h3{
    font-size:24px;
  }

  /* Desktop wheel stays untouched; mobile deliberately zooms to eliminate black side bars. */
  .wheel{
    min-height:360px !important;
    background-size:100% 100%, cover !important;
    background-position:center, center center !important;
  }
}


/* === REVISION 9: reliable mobile menu + richer homepage services + mobile wheel crop === */

/* Homepage services use real Drivon imagery instead of a plain background. */
.service-strip article{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:260px;
  padding:42px 38px 36px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.service-strip article:nth-child(1){background-image:url('assets/detailing-service.jpg');}
.service-strip article:nth-child(2){background-image:url('assets/servicing.jpg');}
.service-strip article:nth-child(3){background-image:url('assets/styling.jpg');}
.service-strip article::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(3,3,4,.38) 0%,rgba(3,3,4,.72) 45%,rgba(3,3,4,.97) 100%),
    linear-gradient(90deg,rgba(197,0,8,.16),transparent 50%);
  opacity:1;
}
.service-strip article::before{
  content:"";
  position:absolute;
  left:38px;
  top:30px;
  width:42px;
  height:3px;
  background:var(--red);
  z-index:1;
  box-shadow:0 0 18px rgba(210,0,10,.35);
}
.service-strip article h3,
.service-strip article p,
.service-strip article>a{position:relative;z-index:2;}
.service-strip article h3{font-size:29px;text-shadow:0 2px 14px rgba(0,0,0,.65);}
.service-strip article p{color:#d2d2d5;max-width:390px;text-shadow:0 2px 12px rgba(0,0,0,.7);}
.service-strip article>a{
  margin-top:auto;
  display:inline-flex;
  width:max-content;
  padding:10px 0 5px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.34);
}
.service-strip article:hover{transform:none;box-shadow:none;}
.service-strip article:hover::after{
  background:
    linear-gradient(180deg,rgba(3,3,4,.28) 0%,rgba(3,3,4,.64) 42%,rgba(3,3,4,.94) 100%),
    linear-gradient(90deg,rgba(197,0,8,.24),transparent 55%);
}

@media(max-width:800px){
  /* Header / menu */
  header{position:relative;z-index:5000;}
  .nav{position:relative;}
  .mobile{display:block !important;margin-left:auto;position:relative;z-index:5002;}
  .navlinks{display:none !important;}
  .navlinks.mobile-open{
    display:flex !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    z-index:5001 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    margin:0 !important;
    padding:10px 18px 20px !important;
    background:#070708 !important;
    border-top:1px solid #252528;
    border-bottom:1px solid #343438;
    box-shadow:0 24px 45px rgba(0,0,0,.68);
  }
  .navlinks.mobile-open>a:not(.btn){
    display:block;
    padding:14px 2px;
    border-bottom:1px solid #202023;
  }
  .navlinks.mobile-open .top-socials{display:flex;margin:14px 0 2px;}
  .navlinks.mobile-open .btn{display:flex;width:100%;margin-top:12px;}

  /* Home services become visual image cards on mobile too. */
  .service-strip{padding:14px;gap:12px;background:#050506;}
  .service-strip article{
    min-height:245px;
    border:1px solid #2c2c31 !important;
    border-radius:5px;
    padding:42px 24px 25px;
    background-size:cover !important;
    background-position:center !important;
  }
  .service-strip article::before{left:24px;top:25px;}
  .service-strip article h3{font-size:25px;}

  /* Only mobile: crop/zoom the wheel image so there are no black side bars. */
  .wheel{
    min-height:390px !important;
    background-image:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.22)),url('assets/wheel.jpg') !important;
    background-size:cover,cover !important;
    background-position:center,58% center !important;
    background-repeat:no-repeat,no-repeat !important;
  }
}


/* === REVISION 12: approved Detailing Packages selector redesign === */
.package-showcase-section{
  padding:62px 0 72px;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%,rgba(239,16,24,.05),transparent 34%),
    #050505;
}
.package-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.package-showcase-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  background:linear-gradient(180deg,#0b0b0c,#080808);
  border:1px solid #26262a;
  border-radius:3px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.package-showcase-card:hover{
  transform:translateY(-5px);
  border-color:#49494f;
  box-shadow:0 18px 45px rgba(0,0,0,.36);
}
.package-showcase-photo{
  width:100%;
  aspect-ratio:1.95/1;
  object-fit:cover;
  object-position:center;
  background:#070707;
}

.package-showcase-photo.package-06-photo{
  aspect-ratio:1751/898;
  object-fit:cover;
  object-position:center center;
  display:block;
}
@media(max-width:900px){
  .package-showcase-photo.package-06-photo{aspect-ratio:1751/898;}
}
.package-showcase-body{
  padding:20px 24px 24px;
  display:flex;
  flex:1;
  flex-direction:column;
}
.package-number{
  display:block;
  margin-bottom:7px;
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.package-showcase-body h2{
  margin:0 0 11px;
  font-size:24px;
  line-height:1.08;
}
.package-showcase-body>p{
  min-height:72px;
  margin:0;
  color:#c1c1c1;
}
.package-meta{
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:14px;
  margin-top:17px;
  padding-top:16px;
  border-top:1px solid #242428;
}
.package-meta-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.package-meta-icon{
  width:31px;
  height:31px;
  flex:0 0 31px;
  display:grid;
  place-items:center;
  border:1px solid #5b5b60;
  border-radius:50%;
  color:#fff;
  font-size:15px;
  font-weight:800;
}
.package-meta-copy small{
  display:block;
  color:#8d8d92;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.package-meta-copy strong{
  display:block;
  margin-top:2px;
  color:#e8e8e8;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.package-showcase-button{
  margin-top:20px;
  width:100%;
  border-color:var(--red);
  background:transparent;
}
.package-showcase-button:hover{
  background:var(--red);
  border-color:var(--red);
}
@media(max-width:900px){
  .package-showcase-grid{grid-template-columns:1fr}
  .package-showcase-card{max-width:720px;margin:0 auto;width:100%}
  .package-showcase-photo{aspect-ratio:16/8.3}
  .package-showcase-body>p{min-height:0}
}
@media(max-width:520px){
  .package-showcase-section{padding:38px 0 48px}
  .package-showcase-body{padding:18px}
  .package-showcase-body h2{font-size:22px}
  .package-meta{grid-template-columns:1fr;gap:12px}
}


/* === REVISION 20: responsive Detailing Packages road hero === */

/* Card alignment retained from the approved package design. */
.package-showcase-body > p{
  min-height:72px;
  display:flex;
  align-items:flex-start;
}
.package-meta{margin-top:auto;}

/* DESKTOP
   The desktop asset uses the full original road composition.
   The section follows the same aspect ratio, so the image is not stretched. */
body.packages-page .detail-hub-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
  min-height:345px;
  height:clamp(345px,22.46vw,432px);
  padding:clamp(58px,4.2vw,82px) 0 clamp(46px,3.4vw,66px);
  border-bottom:1px solid var(--line);
  background-color:#050505;
  background-image:
    linear-gradient(90deg,
      rgba(3,3,3,.91) 0%,
      rgba(3,3,3,.81) 31%,
      rgba(3,3,3,.50) 53%,
      rgba(3,3,3,.16) 78%,
      rgba(3,3,3,.08) 100%),
    url("assets/detailing-packages-road-desktop-r20.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
body.packages-page .detail-hub-hero::before,
body.packages-page .detail-hub-hero::after{
  content:none !important;
}

body.packages-page .detail-hub-hero .wrap,
body.packages-page .detail-hub-copy{
  position:relative;
  z-index:2;
}
.detail-hub-copy{width:min(650px,54%);}
.detail-premium-label{
  margin-bottom:14px;
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.detail-display-title{
  margin:0 0 17px;
  line-height:.82;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.detail-display-title .solid-title,
.detail-display-title .outline-title{display:block;}
.detail-display-title .solid-title{
  color:#f2f2f2;
  font-size:clamp(46px,5.2vw,78px);
  font-weight:950;
}
.detail-display-title .outline-title{
  margin-top:8px;
  color:transparent;
  font-size:clamp(46px,5.2vw,78px);
  font-weight:950;
  -webkit-text-stroke:1.4px rgba(235,235,235,.9);
}
body.packages-page .detail-hub-hero .lead{
  max-width:610px;
  margin:0;
  color:#e4e4e4;
  font-size:17px;
  line-height:1.52;
  text-shadow:0 2px 16px rgba(0,0,0,.88);
}
.detail-benefits{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:24px;
}
.detail-benefit{
  display:flex;
  align-items:center;
  gap:10px;
  color:#e5e5e5;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.benefit-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#fff;
  font-size:22px;
  line-height:1;
}
.benefit-separator{
  width:1px;
  height:29px;
  background:var(--red);
  opacity:.95;
}

/* TABLET
   Keep the desktop image natural while allowing extra vertical room for text. */
@media(max-width:900px) and (min-width:621px){
  .package-showcase-body > p{min-height:0;}
  .package-meta{margin-top:17px;}
  body.packages-page .detail-hub-hero{
    height:390px;
    padding:58px 0 48px;
    background-size:auto 100%;
    background-position:60% center;
  }
  .detail-hub-copy{width:min(700px,76%);}
}

/* MOBILE
   A separate road crop is used instead of forcing the wide desktop image
   into a portrait space. This prevents stretching and keeps the road clear. */
@media(max-width:620px){
  .package-showcase-body > p{min-height:0;}
  .package-meta{margin-top:17px;}
  body.packages-page .detail-hub-hero{
    height:auto;
    min-height:440px;
    padding:52px 0 46px;
    background-image:
      linear-gradient(180deg,
        rgba(3,3,3,.87) 0%,
        rgba(3,3,3,.72) 52%,
        rgba(3,3,3,.57) 100%),
      url("assets/detailing-packages-road-mobile-r20.jpg");
    background-size:cover;
    background-position:center center;
  }
  .detail-hub-copy{width:100%;}
  .detail-display-title .solid-title,
  .detail-display-title .outline-title{font-size:46px;}
  .detail-benefits{
    gap:13px;
    flex-wrap:wrap;
  }
  .detail-benefit{
    font-size:11px;
    letter-spacing:.08em;
  }
  .benefit-separator{height:24px;}
}


/* ============================================================
   REVISION 21
   - New servicing image (desktop + mobile crops)
   - Services page images sit BEHIND the text
   - Homepage Driven By Quality uses wheel as a faded background
   ============================================================ */

/* Homepage service card: use the new servicing photo. */
.service-strip article:nth-child(2){
  background-image:url('assets/servicing-desktop-r21.jpg') !important;
}

/* ---------------- SERVICES PAGE: IMAGE BEHIND TEXT ---------------- */
.services-page .service-feature{
  position:relative;
  margin:0;
  padding:0;
  min-height:560px;
  display:flex;
  align-items:center;
  border-top:1px solid #17171a;
  border-bottom:1px solid #17171a;
  background-color:#050505;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.services-page .service-feature::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.97) 0%,
      rgba(5,5,5,.91) 30%,
      rgba(5,5,5,.70) 52%,
      rgba(5,5,5,.30) 76%,
      rgba(5,5,5,.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.26));
}
.services-page .service-feature-styling::before{
  background:
    linear-gradient(270deg,
      rgba(5,5,5,.97) 0%,
      rgba(5,5,5,.91) 30%,
      rgba(5,5,5,.70) 52%,
      rgba(5,5,5,.30) 76%,
      rgba(5,5,5,.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.26));
}
.services-page .service-feature-detailing{
  background-image:url('assets/detailing-service-desktop-r21.jpg');
  background-position:center 48%;
}
.services-page .service-feature-servicing{
  background-image:url('assets/servicing-desktop-r21.jpg');
  background-position:center center;
}
.services-page .service-feature-styling{
  background-image:url('assets/styling-desktop-r21.jpg');
  background-position:center 52%;
}
.services-page .service-feature-inner{
  position:relative;
  z-index:1;
  width:min(1180px,90%);
  min-height:560px;
  display:flex;
  align-items:center;
}
.services-page .service-feature .copy{
  width:min(650px,58%);
  padding:58px 0;
}
.services-page .service-feature-styling .copy{
  margin-left:auto;
}
.services-page .service-feature h2{
  margin-top:7px;
  text-shadow:0 3px 20px rgba(0,0,0,.92);
}
.services-page .service-feature p,
.services-page .service-feature li{
  color:#ddd;
  text-shadow:0 2px 14px rgba(0,0,0,.92);
}
.services-page .service-feature .note{
  color:#bdbdc2;
}
.services-page .service-feature .feature-list{
  margin-top:19px;
}

/* ------------- HOMEPAGE: DRIVEN BY QUALITY WHEEL BACKDROP -------- */
.home-page .quality-r21{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  min-height:520px;
  background-color:#050505;
  background-image:url('assets/quality-wheel-desktop-r21.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  border-top:1px solid #17171a;
  border-bottom:1px solid #17171a;
  overflow:hidden;
}
.home-page .quality-r21::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,5,5,.02) 0%,
    rgba(5,5,5,.10) 34%,
    rgba(5,5,5,.72) 58%,
    rgba(5,5,5,.96) 78%,
    rgba(5,5,5,1) 100%);
}
.home-page .quality-r21 .quality-copy{
  position:relative;
  z-index:2;
  width:min(720px,55%);
  padding:64px 6% 64px 48px;
  margin-left:auto;
}
.home-page .quality-r21 h2,
.home-page .quality-r21 .lead,
.home-page .quality-r21 .tick{
  text-shadow:0 2px 16px rgba(0,0,0,.88);
}

/* ----------------------------- MOBILE ----------------------------- */
@media(max-width:800px){
  .service-strip article:nth-child(2){
    background-image:url('assets/servicing-mobile-r21.jpg') !important;
    background-position:center 60% !important;
  }

  .services-page .service-feature{
    min-height:680px;
    align-items:flex-end;
    background-size:cover;
    background-position:center;
  }
  .services-page .service-feature::before,
  .services-page .service-feature-styling::before{
    background:
      linear-gradient(180deg,
        rgba(5,5,5,.16) 0%,
        rgba(5,5,5,.34) 30%,
        rgba(5,5,5,.78) 58%,
        rgba(5,5,5,.97) 82%,
        rgba(5,5,5,1) 100%);
  }
  .services-page .service-feature-detailing{
    background-image:url('assets/detailing-service-mobile-r21.jpg');
    background-position:center 42%;
  }
  .services-page .service-feature-servicing{
    background-image:url('assets/servicing-mobile-r21.jpg');
    background-position:center 48%;
  }
  .services-page .service-feature-styling{
    background-image:url('assets/styling-mobile-r21.jpg');
    background-position:center 44%;
  }
  .services-page .service-feature-inner{
    width:90%;
    min-height:680px;
    align-items:flex-end;
  }
  .services-page .service-feature .copy,
  .services-page .service-feature-styling .copy{
    width:100%;
    margin:0;
    padding:320px 0 42px;
  }

  .home-page .quality-r21{
    min-height:760px;
    align-items:flex-end;
    justify-content:flex-start;
    background-image:url('assets/quality-wheel-mobile-r21.jpg');
    background-size:cover;
    background-position:center top;
  }
  .home-page .quality-r21::after{
    background:linear-gradient(180deg,
      rgba(5,5,5,.02) 0%,
      rgba(5,5,5,.12) 34%,
      rgba(5,5,5,.62) 57%,
      rgba(5,5,5,.94) 74%,
      rgba(5,5,5,1) 100%);
  }
  .home-page .quality-r21 .quality-copy{
    width:100%;
    padding:410px 6% 52px;
    margin:0;
  }
}

/* Very small phones: preserve the subject and keep text clear. */
@media(max-width:520px){
  .services-page .service-feature{
    min-height:720px;
  }
  .services-page .service-feature .copy,
  .services-page .service-feature-styling .copy{
    padding-top:350px;
  }
  .home-page .quality-r21{
    min-height:790px;
  }
  .home-page .quality-r21 .quality-copy{
    padding-top:430px;
  }
}


/* ============================================================
   REVISION 22
   - Services page now mirrors the exact Detailing Packages page layout
   - Better servicing crop showing the whole bonnet for desktop and mobile
   - Homepage Driven By Quality rebuilt so the wheel sits behind the text
   ============================================================ */

/* HOME PAGE: new servicing card background crop */
.service-strip article:nth-child(2){
  background-image:url('assets/service-servicing-desktop-r22.jpg') !important;
  background-position:center center !important;
  background-size:cover !important;
}
@media(max-width:800px){
  .service-strip article:nth-child(2){
    background-image:url('assets/service-servicing-mobile-r22.jpg') !important;
    background-position:center center !important;
  }
}

/* SERVICES PAGE: use the same exact card layout as Detailing Packages */
.services-page .services-hub-hero{
  position:relative;
  min-height:360px;
  padding:95px 0 72px;
  border-bottom:1px solid var(--line);
  background-color:#050505;
  background-image:linear-gradient(90deg,rgba(3,3,3,.92) 0%,rgba(3,3,3,.78) 34%,rgba(3,3,3,.45) 62%,rgba(3,3,3,.18) 100%), url('assets/hero-car.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.services-page .services-hub-hero .detail-hub-copy{width:min(680px,56%);}
.services-page .services-hub-hero .lead{max-width:620px;text-shadow:0 2px 16px rgba(0,0,0,.9);}
.services-page .package-showcase-card picture{display:block;line-height:0;}
.services-page .package-showcase-body>p{min-height:96px;display:block;}
.services-page .package-meta{grid-template-columns:1fr 1fr;}
.services-page .service-showcase-section{padding-top:48px;}

/* HOME PAGE: wheel behind text, not a separate panel */
.home-page .quality-r22{
  position:relative;
  overflow:hidden;
  background-color:#050505;
  background-image:url('assets/quality-wheel-desktop-r22.jpg');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:cover;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.home-page .quality-r22-inner{
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.home-page .quality-r22-copy{
  width:min(650px,47%);
  margin-left:auto;
  padding:40px 0 40px 30px;
  position:relative;
  z-index:1;
}
.home-page .quality-r22-copy h2,
.home-page .quality-r22-copy .lead,
.home-page .quality-r22-copy .tick{ text-shadow:0 2px 16px rgba(0,0,0,.9); }
.home-page .quality-r22 .ticks{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px;}

@media(max-width:900px){
  .services-page .services-hub-hero{
    min-height:340px;
    padding:82px 0 62px;
    background-position:62% center;
  }
  .services-page .services-hub-hero .detail-hub-copy{width:min(760px,72%);}
}
@media(max-width:800px){
  .services-page .services-hub-hero{
    min-height:420px;
    padding:76px 0 50px;
    background-position:64% center;
  }
  .services-page .services-hub-hero .detail-hub-copy{width:100%;}
  .services-page .detail-display-title .solid-title,
  .services-page .detail-display-title .outline-title{font-size:46px;}
  .services-page .package-showcase-body>p{min-height:0;}

  .home-page .quality-r22{
    background-image:url('assets/quality-wheel-mobile-r22.jpg');
    background-position:center top;
    background-size:cover;
  }
  .home-page .quality-r22-inner{
    min-height:820px;
    align-items:flex-end;
    justify-content:flex-start;
  }
  .home-page .quality-r22-copy{
    width:100%;
    margin:0;
    padding:430px 0 52px;
  }
  .home-page .quality-r22 .ticks{grid-template-columns:1fr;}
}


/* ============================================================
   REVISION 23
   - Homepage Driven By Quality: approved racetrack background
   - Separate desktop/mobile racetrack assets
   - Services hero now uses the exact Detailing Packages road background
   ============================================================ */

/* HOMEPAGE: racetrack behind the existing Driven By Quality content */
.home-page .quality-r22{
  background-color:#050505 !important;
  background-image:
    linear-gradient(90deg,
      rgba(4,4,4,.08) 0%,
      rgba(4,4,4,.10) 42%,
      rgba(4,4,4,.18) 63%,
      rgba(4,4,4,.28) 100%),
    url('assets/quality-racetrack-desktop-r23.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
.home-page .quality-r22-inner{
  min-height:610px !important;
}
.home-page .quality-r22-copy{
  width:min(700px,52%) !important;
  margin-right:auto !important;
  margin-left:0 !important;
  padding:58px 0 !important;
}
.home-page .quality-r22-copy h2,
.home-page .quality-r22-copy .lead,
.home-page .quality-r22-copy .tick{
  text-shadow:0 3px 18px rgba(0,0,0,.96) !important;
}

/* SERVICES PAGE HEADER:
   use exactly the same road background assets as the Detailing Packages hero. */
.services-page .services-hub-hero{
  background-color:#050505 !important;
  background-image:
    linear-gradient(90deg,
      rgba(3,3,3,.91) 0%,
      rgba(3,3,3,.81) 31%,
      rgba(3,3,3,.50) 53%,
      rgba(3,3,3,.16) 78%,
      rgba(3,3,3,.08) 100%),
    url('assets/detailing-packages-road-desktop-r20.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
.services-page .services-hub-hero::before,
.services-page .services-hub-hero::after{
  content:none !important;
}

@media(max-width:900px) and (min-width:621px){
  .services-page .services-hub-hero{
    background-size:auto 100% !important;
    background-position:60% center !important;
  }
}

@media(max-width:800px){
  .home-page .quality-r22{
    background-image:
      linear-gradient(180deg,
        rgba(4,4,4,.10) 0%,
        rgba(4,4,4,.30) 44%,
        rgba(4,4,4,.78) 70%,
        rgba(4,4,4,.98) 100%),
      url('assets/quality-racetrack-mobile-r23.jpg') !important;
    background-position:center top !important;
    background-size:cover !important;
  }
  .home-page .quality-r22-inner{
    min-height:820px !important;
    align-items:flex-end !important;
  }
  .home-page .quality-r22-copy{
    width:100% !important;
    margin:0 !important;
    padding:430px 0 52px !important;
  }
}

@media(max-width:620px){
  .services-page .services-hub-hero{
    min-height:440px !important;
    background-image:
      linear-gradient(180deg,
        rgba(3,3,3,.87) 0%,
        rgba(3,3,3,.72) 52%,
        rgba(3,3,3,.57) 100%),
      url('assets/detailing-packages-road-mobile-r20.jpg') !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}


/* ============================================================
   REVISION 24
   Homepage service thumbnails: improved desktop framing.
   Mobile servicing thumbnail: dedicated crop showing full bonnet.
   ============================================================ */

/* Desktop only: slightly taller cards + controlled mild zoom.
   This avoids the aggressive 'cover' crop while still filling each panel. */
@media(min-width:801px){
  .home-page .service-strip article{
    min-height:310px !important;
    background-repeat:no-repeat !important;
    background-color:#050505 !important;
    background-size:auto 112% !important;
  }

  .home-page .service-strip article:nth-child(1){
    background-image:url('assets/home-detailing-desktop-r24.jpg') !important;
    background-position:43% 48% !important;
  }

  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-desktop-r24.jpg') !important;
    background-position:50% 51% !important;
  }

  .home-page .service-strip article:nth-child(3){
    background-image:url('assets/home-styling-desktop-r24.jpg') !important;
    background-position:50% 50% !important;
  }
}

/* Mobile: keep the existing Detailing/Styling behaviour.
   Only servicing gets a dedicated crop so the full bonnet remains visible. */
@media(max-width:800px){
  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-mobile-r24.jpg') !important;
    background-size:cover !important;
    background-position:center 47% !important;
  }
}


/* ============================================================
   REVISION 25
   - New body styling image used across the site
   - Home page service cards fixed to fill correctly on desktop
   - Servicing image moved upward on desktop/mobile across page uses
   - Racetrack section cleaned so no text shows in the background
   - Sharper mobile racetrack crop
   ============================================================ */

/* HOME PAGE SERVICE CARDS */
@media(min-width:801px){
  .home-page .service-strip article{
    min-height:285px !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-color:#050505 !important;
  }

  .home-page .service-strip article:nth-child(1){
    background-image:url('assets/home-detailing-card-r25.jpg') !important;
    background-position:center 50% !important;
  }

  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-card-r25.jpg') !important;
    background-position:center 35% !important;
  }

  .home-page .service-strip article:nth-child(3){
    background-image:url('assets/home-styling-card-r25.jpg') !important;
    background-position:center 48% !important;
  }
}

/* Mobile servicing thumbnail: move the image up so the bonnet is visible. */
@media(max-width:800px){
  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-mobile-r25.jpg') !important;
    background-size:cover !important;
    background-position:center 32% !important;
  }
}

/* SERVICES PAGE CARDS */
.services-page .service-card-servicing .package-showcase-photo{
  content:url('assets/service-servicing-desktop-r25.jpg');
  object-position:center 34% !important;
}
.services-page .service-card-styling .package-showcase-photo{
  content:url('assets/service-styling-desktop-r25.jpg');
  object-position:center 48% !important;
}
.services-page .service-card-servicing picture source{
  srcset:url('assets/service-servicing-mobile-r25.jpg');
}
.services-page .service-card-styling picture source{
  srcset:url('assets/service-styling-mobile-r25.jpg');
}

/* Because source tags cannot be restyled reliably via CSS alone, replace mobile behavior
   by swapping the img source visually inside the card on small screens. */
@media(max-width:800px){
  .services-page .service-card-servicing .package-showcase-photo{
    content:url('assets/service-servicing-mobile-r25.jpg');
    object-position:center 32% !important;
  }
  .services-page .service-card-styling .package-showcase-photo{
    content:url('assets/service-styling-mobile-r25.jpg');
    object-position:center 48% !important;
  }
}

/* HOMEPAGE RACETRACK SECTION */
.home-page .quality-r22{
  background-color:#050505 !important;
  background-image:url('assets/quality-racetrack-desktop-r25.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
.home-page .quality-r22-inner{
  min-height:620px !important;
}
.home-page .quality-r22-copy{
  width:min(700px,52%) !important;
  margin-right:auto !important;
  margin-left:0 !important;
  padding:62px 0 !important;
}
.home-page .quality-r22-copy h2,
.home-page .quality-r22-copy .lead,
.home-page .quality-r22-copy .tick{
  text-shadow:0 3px 18px rgba(0,0,0,.96) !important;
}

@media(max-width:800px){
  .home-page .quality-r22{
    background-image:url('assets/quality-racetrack-mobile-r25.jpg') !important;
    background-position:center top !important;
    background-size:cover !important;
  }
  .home-page .quality-r22-inner{
    min-height:810px !important;
    align-items:flex-end !important;
  }
  .home-page .quality-r22-copy{
    width:100% !important;
    margin:0 !important;
    padding:440px 0 52px !important;
  }
}

/* Extra safety: any legacy direct styling background uses the new body styling image */
.service-strip article:nth-child(3){
  background-image:url('assets/home-styling-card-r25.jpg') !important;
}


/* ============================================================
   REVISION 28 — BUILT DIRECTLY FROM REVISION 25
   1) New clean night racetrack for homepage quality section
   2) New transparent footer logo + requested footer layout
   3) Gallery/About/Contact hero layout matches Detailing Packages
   ============================================================ */

/* ---------- HOME: NEW NIGHT RACETRACK ---------- */
.home-page .quality-r22{
  background-color:#050505 !important;
  background-image:url('assets/quality-racetrack-night-desktop-r28.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
.home-page .quality-r22-inner{
  min-height:650px !important;
}
.home-page .quality-r22-copy{
  width:min(700px,52%) !important;
  margin-left:0 !important;
  margin-right:auto !important;
  padding:64px 0 !important;
}
.home-page .quality-r22-copy h2,
.home-page .quality-r22-copy .lead,
.home-page .quality-r22-copy .tick{
  text-shadow:0 3px 18px rgba(0,0,0,.96) !important;
}

@media(max-width:800px){
  .home-page .quality-r22{
    background-image:url('assets/quality-racetrack-night-mobile-r28.jpg') !important;
    background-position:center top !important;
    background-size:cover !important;
  }
  .home-page .quality-r22-inner{
    min-height:830px !important;
    align-items:flex-end !important;
  }
  .home-page .quality-r22-copy{
    width:100% !important;
    margin:0 !important;
    padding:455px 0 52px !important;
  }
}

/* ---------- SHARED ROAD HERO: GALLERY / ABOUT / CONTACT ---------- */
.road-hub-page .shared-road-hub{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
  min-height:345px;
  height:clamp(345px,22.46vw,432px);
  padding:clamp(58px,4.2vw,82px) 0 clamp(46px,3.4vw,66px);
  border-bottom:1px solid var(--line);
  background-color:#050505;
  background-image:
    linear-gradient(90deg,
      rgba(3,3,3,.91) 0%,
      rgba(3,3,3,.81) 31%,
      rgba(3,3,3,.50) 53%,
      rgba(3,3,3,.16) 78%,
      rgba(3,3,3,.08) 100%),
    url('assets/detailing-packages-road-desktop-r20.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.road-hub-page .shared-road-hub::before,
.road-hub-page .shared-road-hub::after{
  content:none !important;
}
.road-hub-page .shared-road-hub .wrap,
.road-hub-page .shared-road-hub .detail-hub-copy{
  position:relative;
  z-index:2;
}
.road-hub-page .shared-road-hub .lead{
  max-width:610px;
  margin:0;
  color:#e4e4e4;
  font-size:17px;
  line-height:1.52;
  text-shadow:0 2px 16px rgba(0,0,0,.88);
}

@media(max-width:900px) and (min-width:621px){
  .road-hub-page .shared-road-hub{
    height:390px;
    padding:58px 0 48px;
    background-size:auto 100%;
    background-position:60% center;
  }
  .road-hub-page .shared-road-hub .detail-hub-copy{
    width:min(700px,76%);
  }
}

@media(max-width:620px){
  .road-hub-page .shared-road-hub{
    height:auto;
    min-height:440px;
    padding:52px 0 46px;
    background-image:
      linear-gradient(180deg,
        rgba(3,3,3,.87) 0%,
        rgba(3,3,3,.72) 52%,
        rgba(3,3,3,.57) 100%),
      url('assets/detailing-packages-road-mobile-r20.jpg');
    background-size:cover;
    background-position:center center;
  }
  .road-hub-page .shared-road-hub .detail-hub-copy{
    width:100%;
  }
}

/* ---------- FOOTER: NEW LOGO + DESKTOP STACK UNDER LOGO ---------- */
.footer-grid{
  grid-template-columns:minmax(280px,1fr) minmax(180px,.8fr) minmax(340px,1.15fr) !important;
  align-items:center !important;
  gap:36px !important;
}

.footer-left-cluster{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:10px !important;
}

.footer-logo{
  display:block !important;
  width:260px !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

.footer-contact-stack{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
}

.footer-socials{
  margin:0 !important;
}

.footer-phone{
  margin:0 !important;
  white-space:nowrap;
}

.footer-tagline strong{
  white-space:nowrap;
}

/* ---------- MOBILE FOOTER: LEFT / MIDDLE / RIGHT ON SAME ROW ---------- */
@media(max-width:700px){
  footer .footer-grid{
    width:96% !important;
    max-width:none !important;
    grid-template-columns:minmax(92px,.9fr) minmax(82px,.75fr) minmax(132px,1.35fr) !important;
    gap:6px !important;
    align-items:start !important;
    text-align:left !important;
  }

  .footer-left-cluster{
    align-items:flex-start !important;
    min-width:0 !important;
    gap:7px !important;
  }

  .footer-logo{
    width:118px !important;
    height:auto !important;
    max-width:100% !important;
  }

  .footer-contact-stack{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
  }

  .footer-socials{
    gap:6px !important;
  }

  .footer-socials a{
    width:24px !important;
    height:24px !important;
  }

  .footer-socials svg{
    width:13px !important;
    height:13px !important;
  }

  .footer-phone{
    font-size:10px !important;
  }

  .footer-address{
    text-align:center !important;
    align-items:center !important;
    font-size:9px !important;
    line-height:1.25 !important;
    gap:2px !important;
    min-width:0 !important;
  }

  .footer-address strong{
    font-size:8px !important;
    margin-bottom:2px !important;
  }

  .footer-tagline{
    text-align:right !important;
    align-items:flex-end !important;
    gap:4px !important;
    min-width:0 !important;
  }

  .footer-services{
    font-size:8px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
  }

  .footer-tagline strong{
    font-size:7.5px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
  }
}

@media(max-width:390px){
  footer .footer-grid{
    grid-template-columns:minmax(84px,.86fr) minmax(72px,.68fr) minmax(122px,1.32fr) !important;
    gap:4px !important;
  }
  .footer-logo{width:105px !important;}
  .footer-phone{font-size:9px !important;}
  .footer-address{font-size:8px !important;}
  .footer-services{font-size:7.2px !important;}
  .footer-tagline strong{font-size:6.9px !important;}
}


/* ============================================================
   REVISION 29
   1) Home page detailing thumbnail changed to uploaded cockpit image
      with watermark removed by clean crop.
   2) Services page Professional Detailing image updated for desktop/mobile.
   3) Footer tagline split across two lines again for cleaner spacing.
   ============================================================ */

/* HOME PAGE: detailing thumbnail */
@media(min-width:801px){
  .home-page .service-strip article:nth-child(1){
    background-image:url('assets/home-detailing-card-r29.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}
@media(max-width:800px){
  .home-page .service-strip article:nth-child(1){
    background-image:url('assets/home-detailing-mobile-r29.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}

/* SERVICES PAGE: Professional Detailing card */
.services-page .service-card-detailing .package-showcase-photo{
  content:url('assets/service-detailing-desktop-r29.jpg');
  object-position:center center !important;
}
@media(max-width:800px){
  .services-page .service-card-detailing .package-showcase-photo{
    content:url('assets/service-detailing-mobile-r29.jpg');
    object-position:center center !important;
  }
}

/* FOOTER TAGLINE: restore two-line lockup with better spacing */
.footer-tagline{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:8px !important;
}
.footer-tagline-lines{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:4px !important;
}
.footer-line{
  display:block !important;
  white-space:nowrap !important;
}
@media(max-width:700px){
  .footer-tagline{
    gap:5px !important;
  }
  .footer-tagline-lines{
    gap:2px !important;
    align-items:flex-end !important;
  }
  .footer-line{
    line-height:1.18 !important;
  }
}


/* ============================================================
   REVISION 30
   - New homepage hero image (desktop/mobile)
   - New servicing image on homepage + services page
   - About/contact mobile label placement
   - Mobile footer spacing refinements
   ============================================================ */

/* 1) HOMEPAGE HERO */
.home-page .hero{
  background-color:#030303 !important;
  background-image:url('assets/home-hero-desktop-r30.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
@media(max-width:800px){
  .home-page .hero{
    min-height:650px !important;
    background-image:
      linear-gradient(180deg,rgba(2,2,2,.58) 0%,rgba(2,2,2,.34) 44%,rgba(2,2,2,.44) 100%),
      url('assets/home-hero-mobile-r30.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}

/* 2) HOMEPAGE SERVICING THUMBNAIL */
@media(min-width:801px){
  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-desktop-r30.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}
@media(max-width:800px){
  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-mobile-r30.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}

/* 3) SERVICES PAGE — SERVICING & MECHANICAL */
.services-page .service-card-servicing .package-showcase-photo{
  content:url('assets/service-servicing-desktop-r30.jpg') !important;
  object-position:center center !important;
  object-fit:cover !important;
}
@media(max-width:800px){
  .services-page .service-card-servicing .package-showcase-photo{
    content:url('assets/service-servicing-mobile-r30.jpg') !important;
    object-position:center center !important;
  }
}

/* 4 & 5) ABOUT / CONTACT — MOBILE ONLY:
   move the small label under the three icon row. */
@media(max-width:620px){
  .about-page .shared-road-hub .detail-hub-copy,
  .contact-page .shared-road-hub .detail-hub-copy{
    display:flex !important;
    flex-direction:column !important;
  }

  .about-page .shared-road-hub .detail-display-title,
  .contact-page .shared-road-hub .detail-display-title{
    order:1;
  }

  .about-page .shared-road-hub .lead,
  .contact-page .shared-road-hub .lead{
    order:2;
  }

  .about-page .shared-road-hub .detail-benefits,
  .contact-page .shared-road-hub .detail-benefits{
    order:3;
    margin-top:22px !important;
  }

  .about-page .shared-road-hub .detail-premium-label,
  .contact-page .shared-road-hub .detail-premium-label{
    order:4;
    margin:14px 0 0 !important;
    line-height:1.35 !important;
  }

  .about-page .shared-road-hub .detail-premium-label{
    font-size:8px !important;
    letter-spacing:.18em !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  .contact-page .shared-road-hub .detail-premium-label{
    font-size:9px !important;
    letter-spacing:.16em !important;
    max-width:100% !important;
    white-space:normal !important;
  }
}

/* 6) MOBILE FOOTER — centre address, shift right text left slightly */
@media(max-width:700px){
  footer .footer-grid{
    width:96% !important;
    grid-template-columns:31% 31% 38% !important;
    column-gap:0 !important;
    align-items:start !important;
  }

  footer .footer-address{
    justify-self:center !important;
    align-self:start !important;
    width:100% !important;
    text-align:center !important;
    align-items:center !important;
    padding:0 4px !important;
  }

  footer .footer-tagline{
    justify-self:start !important;
    align-items:flex-start !important;
    text-align:left !important;
    transform:translateX(-7px);
    padding-left:0 !important;
  }

  footer .footer-tagline-lines{
    align-items:flex-start !important;
  }

  footer .footer-services{
    text-align:left !important;
  }
}

@media(max-width:390px){
  footer .footer-grid{
    grid-template-columns:31% 31% 38% !important;
  }

  footer .footer-tagline{
    transform:translateX(-5px);
  }
}


/* ============================================================
   REVISION 31
   - Homepage hero changed to carbon-fibre front-quarter image
   - Homepage & services servicing imagery updated
   - About/contact mobile header label refinements
   - Mobile footer alignment refined
   ============================================================ */

/* Homepage hero image */
.home-page .hero{
  background-color:#040404 !important;
  background-image:url('assets/home-hero-desktop-r31.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
@media(max-width:800px){
  .home-page .hero{
    min-height:660px !important;
    background-image:url('assets/home-hero-mobile-r31.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}

/* Homepage servicing tile */
@media(min-width:801px){
  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-desktop-r31.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}
@media(max-width:800px){
  .home-page .service-strip article:nth-child(2){
    background-image:url('assets/home-servicing-mobile-r31.jpg') !important;
    background-position:center center !important;
    background-size:cover !important;
  }
}

/* Services page servicing image */
.services-page .service-card-servicing .package-showcase-photo{
  content:url('assets/service-servicing-desktop-r31.jpg') !important;
  object-position:center center !important;
  object-fit:cover !important;
}
@media(max-width:800px){
  .services-page .service-card-servicing .package-showcase-photo{
    content:url('assets/service-servicing-mobile-r31.jpg') !important;
    object-position:center center !important;
  }
}

/* About & Contact mobile: label neatly below icon row */
@media(max-width:620px){
  .about-page .shared-road-hub .detail-hub-copy,
  .contact-page .shared-road-hub .detail-hub-copy{
    display:flex !important;
    flex-direction:column !important;
  }
  .about-page .shared-road-hub .detail-display-title,
  .contact-page .shared-road-hub .detail-display-title{ order:1; }
  .about-page .shared-road-hub .lead,
  .contact-page .shared-road-hub .lead{ order:2; }
  .about-page .shared-road-hub .detail-benefits,
  .contact-page .shared-road-hub .detail-benefits{
    order:3;
    margin-top:20px !important;
  }
  .about-page .shared-road-hub .detail-premium-label,
  .contact-page .shared-road-hub .detail-premium-label{
    order:4;
    margin:14px 0 0 !important;
    max-width:100% !important;
    white-space:normal !important;
    line-height:1.35 !important;
  }
  .about-page .shared-road-hub .detail-premium-label{
    font-size:7px !important;
    letter-spacing:.14em !important;
  }
  .contact-page .shared-road-hub .detail-premium-label{
    font-size:8.3px !important;
    letter-spacing:.16em !important;
  }
}

/* Mobile footer: address centered, right text nudged slightly left */
@media(max-width:700px){
  footer .footer-grid{
    width:96% !important;
    grid-template-columns:32% 36% 32% !important;
    column-gap:0 !important;
    align-items:start !important;
  }
  footer .footer-left-cluster{
    justify-self:start !important;
    width:100% !important;
  }
  footer .footer-address{
    justify-self:center !important;
    width:100% !important;
    text-align:center !important;
    align-items:center !important;
    padding:0 8px !important;
  }
  footer .footer-tagline{
    justify-self:end !important;
    width:100% !important;
    text-align:right !important;
    align-items:flex-end !important;
    transform:translateX(-10px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  footer .footer-tagline-lines{
    align-items:flex-end !important;
  }
  footer .footer-services{
    text-align:right !important;
  }
}
@media(max-width:390px){
  footer .footer-grid{ grid-template-columns:32% 36% 32% !important; }
  footer .footer-tagline{ transform:translateX(-8px) !important; }
}


/* ============================================================
   REVISION 33
   Restore homepage hero/header to the Revision 25 version
   using the original hero-car image and left-to-right dark blend
   for both desktop and mobile.
   ============================================================ */

/* Homepage hero restored from Revision 25 */
.home-page .hero{
  min-height:660px !important;
  background-color:#030303 !important;
  background-image:linear-gradient(90deg,#030303 0%,rgba(3,3,3,.95) 34%,rgba(3,3,3,.10) 70%),url('assets/hero-car.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center, center !important;
  background-size:100% 100%, cover !important;
}

@media(max-width:800px){
  .home-page .hero{
    min-height:570px !important;
    background-color:#030303 !important;
    background-image:linear-gradient(90deg,#030303 0%,rgba(3,3,3,.95) 34%,rgba(3,3,3,.10) 70%),url('assets/hero-car.jpg') !important;
    background-repeat:no-repeat !important;
    background-position:center, 65% center !important;
    background-size:100% 100%, cover !important;
  }
}


/* ============================================================
   REVISION 34
   1) Homepage desktop hero uses the new attached image
   2) Homepage Driven By Quality racetrack replaced with a clean
      unbranded night-sky racetrack for desktop and mobile
   3) Homepage mobile Driven By Quality section tightened to reduce
      the excess image-to-text gap
   4) About page Built Around Quality image replaced
   ============================================================ */

/* 1) HOMEPAGE HERO — desktop only */
.home-page .hero{
  background-color:#030303 !important;
  background-image:url('assets/home-hero-desktop-r34.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}

/* keep the current mobile hero treatment from the restored revision 25 layout */
@media(max-width:800px){
  .home-page .hero{
    min-height:570px !important;
    background-color:#030303 !important;
    background-image:linear-gradient(90deg,#030303 0%,rgba(3,3,3,.95) 34%,rgba(3,3,3,.10) 70%),url('assets/hero-car.jpg') !important;
    background-repeat:no-repeat !important;
    background-position:center, 65% center !important;
    background-size:100% 100%, cover !important;
  }
}

/* 2) HOMEPAGE DRIVEN BY QUALITY — clean unbranded night racetrack */
.home-page .quality-r22{
  background-color:#050505 !important;
  background-image:url('assets/quality-racetrack-night-desktop-r34.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
.home-page .quality-r22-inner{
  min-height:650px !important;
}
.home-page .quality-r22-copy{
  width:min(700px,52%) !important;
  margin-left:0 !important;
  margin-right:auto !important;
  padding:64px 0 !important;
}
@media(max-width:800px){
  .home-page .quality-r22{
    background-image:url('assets/quality-racetrack-night-mobile-r34.png') !important;
    background-position:center top !important;
    background-size:cover !important;
  }
  .home-page .quality-r22-inner{
    min-height:660px !important;
    align-items:flex-end !important;
  }
  .home-page .quality-r22-copy{
    width:100% !important;
    margin:0 !important;
    padding:320px 0 42px !important;
  }
  .home-page .quality-r22 .ticks{
    gap:14px !important;
  }
}

/* 3) ABOUT PAGE: Built Around Quality image */
.about-page .split .media{
  min-height:470px !important;
  background-image:url('assets/about-quality-r34.jpg') !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#050505 !important;
}
@media(max-width:800px){
  .about-page .split .media{
    min-height:360px !important;
    background-position:center center !important;
  }
}


/* ============================================================
   REVISION 36
   - Desktop homepage hero uses the newly generated wide car mockup
   - Mobile Driven By Quality copy moved to ~22% down from top
   - About Built Around Quality uses dashboard mockup behind the text
   ============================================================ */

/* 1) HOME PAGE HERO — DESKTOP ONLY */
@media(min-width:801px){
  .home-page .hero{
    min-height:660px !important;
    background-color:#030303 !important;
    background-image:
      linear-gradient(90deg,
        rgba(3,3,3,.72) 0%,
        rgba(3,3,3,.56) 26%,
        rgba(3,3,3,.18) 52%,
        rgba(3,3,3,.02) 72%),
      url('assets/home-hero-wide-mockup-r36.png') !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:100% 100%, cover !important;
  }
}

/* Keep mobile homepage hero exactly as it was before this change */
@media(max-width:800px){
  .home-page .hero{
    min-height:570px !important;
    background-color:#030303 !important;
    background-image:
      linear-gradient(90deg,#030303 0%,rgba(3,3,3,.95) 34%,rgba(3,3,3,.10) 70%),
      url('assets/hero-car.jpg') !important;
    background-repeat:no-repeat !important;
    background-position:center,65% center !important;
    background-size:100% 100%,cover !important;
  }
}

/* 3) MOBILE ONLY — move Driven By Quality copy to roughly 22% from top */
@media(max-width:800px){
  .home-page .quality-r22-inner{
    min-height:660px !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  .home-page .quality-r22-copy{
    width:100% !important;
    margin:0 !important;
    padding:145px 0 34px !important;
  }
}

/* 4) ABOUT PAGE — Built Around Quality image BEHIND the text */
.about-page main .section .split{
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  min-height:500px !important;
  border:1px solid var(--line) !important;
  background-color:#050505 !important;
  background-image:
    linear-gradient(90deg,
      rgba(3,3,3,.95) 0%,
      rgba(3,3,3,.88) 34%,
      rgba(3,3,3,.64) 55%,
      rgba(3,3,3,.22) 78%,
      rgba(3,3,3,.08) 100%),
    url('assets/about-quality-dashboard-r36.png') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}

.about-page main .section .split .copy{
  position:relative !important;
  z-index:2 !important;
  width:min(650px,58%) !important;
  padding:58px 54px !important;
}

.about-page main .section .split .copy p{
  text-shadow:0 2px 16px rgba(0,0,0,.92) !important;
}

.about-page main .section .split .media{
  display:none !important;
}

@media(max-width:800px){
  .about-page main .section .split{
    min-height:540px !important;
    background-image:
      linear-gradient(180deg,
        rgba(3,3,3,.93) 0%,
        rgba(3,3,3,.86) 28%,
        rgba(3,3,3,.68) 55%,
        rgba(3,3,3,.42) 100%),
      url('assets/about-quality-dashboard-r36.png') !important;
    background-position:68% center !important;
    background-size:cover !important;
  }

  .about-page main .section .split .copy{
    width:100% !important;
    padding:40px 6% !important;
  }
}


/* ============================================================
   REVISION 39 — BUILT DIRECTLY FROM REVISION 36
   1) Gallery intro copy updated in HTML
   2) Homepage mobile Driven By Quality text moved 25% further upward
   3) Contact Drivon info box uses supplied steering-wheel image behind text
   ============================================================ */

/* 2) HOME PAGE MOBILE ONLY — move quality copy 25% further upward.
   Revision 36 used 145px top padding; 109px is 25% less. */
@media(max-width:800px){
  .home-page .quality-r22-inner{
    min-height:660px !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  .home-page .quality-r22-copy{
    width:100% !important;
    margin:0 !important;
    padding:109px 0 34px !important;
  }
}

/* 3) CONTACT PAGE — attached image behind only the Contact Drivon text box */
.contact-page .contact-info-image{
  position:relative !important;
  overflow:hidden !important;
  min-height:390px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  background-color:#050505 !important;
  background-image:
    linear-gradient(90deg,
      rgba(3,3,3,.94) 0%,
      rgba(3,3,3,.84) 38%,
      rgba(3,3,3,.58) 68%,
      rgba(3,3,3,.34) 100%),
    url('assets/contact-info-bg-desktop-r39.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100%, cover !important;
}

.contact-page .contact-info-image h2,
.contact-page .contact-info-image p{
  position:relative !important;
  z-index:1 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.95) !important;
}

.contact-page .contact-info-image .note{
  color:#d1d1d1 !important;
}

@media(max-width:800px){
  .contact-page .contact-info-image{
    min-height:330px !important;
    padding:34px 26px !important;
    background-image:
      linear-gradient(180deg,
        rgba(3,3,3,.90) 0%,
        rgba(3,3,3,.78) 48%,
        rgba(3,3,3,.62) 100%),
      url('assets/contact-info-bg-mobile-r39.jpg') !important;
    background-position:center center !important;
    background-size:100% 100%, cover !important;
  }
}


/* ============================================================
   REVISION 40 — BUILT FROM REVISION 39
   Homepage mobile Driven By Quality copy moved another 13% upward from revision 40
   ============================================================ */
@media(max-width:800px){
  .home-page .quality-r22-copy{
    padding:85px 0 34px !important;
  }
}


/* ============================================================
   REVISION 42 — CONTACT FORM EMAIL DELIVERY
   - Server-side SMTP form handling through Hostinger Email
   - Success/error message styling
   ============================================================ */
.contact-form-status{
  display:none;
  margin:0 0 18px;
  padding:13px 15px;
  border:1px solid #3a3a3e;
  background:#0a0a0b;
  color:#eee;
  font-size:14px;
  line-height:1.45;
}
.contact-form-status.is-success{
  display:block;
  border-left:3px solid #28a745;
}
.contact-form-status.is-error{
  display:block;
  border-left:3px solid var(--red);
}
.contact-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ============================================================
   CONTACT + ABOUT MOBILE HERO HEIGHT REFINEMENT
   - Remove oversized empty space below the final label
   - Keep a small deliberate gap under the label
   - Desktop/tablet unchanged
   ============================================================ */
@media(max-width:620px){
  .contact-page .shared-road-hub,
  .about-page .shared-road-hub{
    min-height:0 !important;
    height:auto !important;
    padding:38px 0 18px !important;
  }

  .contact-page .shared-road-hub .detail-premium-label,
  .about-page .shared-road-hub .detail-premium-label{
    margin-bottom:0 !important;
  }
}


/* ============================================================
   REVISION 47
   - Mobile about/contact header panels made 15-20% larger
   ============================================================ */
@media(max-width:620px){
  .contact-page .shared-road-hub,
  .about-page .shared-road-hub{
    min-height:0 !important;
    height:auto !important;
    padding:46px 0 24px !important;
  }

  .contact-page .shared-road-hub .detail-premium-label,
  .about-page .shared-road-hub .detail-premium-label{
    margin-bottom:0 !important;
  }
}

/* ============================================================
   REVISION 48
   - DESKTOP ONLY: match all non-home page hero/header heights to Services
   - Mobile remains unchanged
   ============================================================ */
@media (min-width:901px){
  body.packages-page .detail-hub-hero,
  .road-hub-page .shared-road-hub{
    min-height:360px !important;
    height:auto !important;
    padding:95px 0 72px !important;
  }
}

@media (min-width:801px) and (max-width:900px){
  body.packages-page .detail-hub-hero,
  .road-hub-page .shared-road-hub{
    min-height:340px !important;
    height:auto !important;
    padding:82px 0 62px !important;
  }
}


/* ============================================================
   REVISION 51 — UI REFINEMENTS BUILT FROM V50
   - Desktop homepage service cards made taller
   - Mobile footer contact cluster nudged lower
   - Mobile menu button uses red outline
   - Desktop header CTA + social circles use red outlines
   - Favicon files/references intentionally unchanged
   ============================================================ */

/* 1) DESKTOP ONLY — make the three homepage service cards taller. */
@media(min-width:801px){
  .home-page .service-strip article{
    min-height:350px !important;
  }
}

/* 2) MOBILE ONLY — move TikTok / Instagram / phone slightly lower in footer. */
@media(max-width:700px){
  .footer-contact-stack{
    margin-top:7px !important;
  }
}

/* 4) MOBILE ONLY — red outline for MENU button. */
@media(max-width:800px){
  .mobile{
    border-color:rgba(224,27,35,.92) !important;
  }
}

/* 5) DESKTOP ONLY — red outline for header CTA and social circles. */
@media(min-width:801px){
  header .navlinks > .btn{
    border-color:rgba(224,27,35,.88) !important;
  }
  header .top-socials a{
    border-color:rgba(224,27,35,.78) !important;
  }
}


/* ============================================================
   REVISION 52 — BUILT DIRECTLY FROM V51
   - Mobile dropdown Get in touch button: red outline
   - Desktop header social circles: white outline restored
   - Mobile Services + Detailing Packages heroes: neutral dark overlay only
   - Desktop homepage service cards: substantially taller
   - Contact Us card: red tint removed
   - Favicon files and favicon references intentionally unchanged
   ============================================================ */

/* 1) MOBILE ONLY — red outline on Get in touch inside opened menu. */
@media(max-width:800px){
  header .navlinks.mobile-open > .btn{
    border-color:rgba(224,27,35,.95) !important;
  }
}

/* 2) DESKTOP ONLY — restore white circles around TikTok / Instagram. */
@media(min-width:801px){
  header .top-socials a{
    border-color:#fff !important;
  }
}

/* 3) MOBILE ONLY — remove any red tint/glow from Services and Packages hero areas. */
@media(max-width:620px){
  body.packages-page .detail-hub-hero,
  body.services-page .services-hub-hero{
    background-image:
      linear-gradient(180deg,
        rgba(3,3,3,.88) 0%,
        rgba(3,3,3,.74) 52%,
        rgba(3,3,3,.60) 100%),
      url('assets/detailing-packages-road-mobile-r20.jpg') !important;
    box-shadow:none !important;
    border-bottom-color:#202024 !important;
  }
  body.packages-page .detail-hub-hero::before,
  body.packages-page .detail-hub-hero::after,
  body.services-page .services-hub-hero::before,
  body.services-page .services-hub-hero::after{
    content:none !important;
    background:none !important;
    box-shadow:none !important;
  }
}

/* 4) DESKTOP ONLY — make homepage Detailing / Servicing / Styling much taller. */
@media(min-width:801px){
  .home-page .service-strip article{
    min-height:470px !important;
  }
}

/* ============================================================
   REVISION 53 — BUILT DIRECTLY FROM V52
   - Mobile Services: remove red tint behind Professional Detailing card
   - Mobile Packages: remove red tint behind Basic Detailing card
   - Mobile homepage service cards made substantially taller
   - Favicon files/references intentionally unchanged
   ============================================================ */

/* 1 + 2) MOBILE ONLY — neutral dark background behind the first card areas.
   Removes the red radial tint from the shared showcase section while leaving
   the cards themselves, imagery, content and spacing unchanged. */
@media(max-width:800px){
  body.services-page .package-showcase-section,
  body.packages-page .package-showcase-section{
    background:#050505 !important;
    background-image:none !important;
  }
}

/* 3) MOBILE ONLY — make Homepage Detailing / Servicing / Styling cards taller. */
@media(max-width:800px){
  .home-page .service-strip article{
    min-height:340px !important;
  }
}