:root{
  --void:#07080A; --panel:#0D0F13; --raise:#131720; --line:#1D222A;
  --bone:#F1EEE8; --mute:#7B828C; --brass:#B79B62; --red:#B4241C;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Barlow',system-ui,sans-serif;
  --util:'Barlow Condensed',system-ui,sans-serif;
  --wrap:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--void);color:var(--bone);
  font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}

.eyebrow{font-family:var(--util);text-transform:uppercase;letter-spacing:.26em;
  font-size:.76rem;font-weight:600;color:var(--brass);margin:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.02;margin:0}
h1{font-size:clamp(3rem,7.6vw,6rem)}
h2{font-size:clamp(2.3rem,5vw,4rem)}
h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.1;margin:0}
.lede{color:var(--mute);max-width:54ch;font-size:1.06rem}
.num{font-family:var(--util);font-weight:600;letter-spacing:.16em;font-size:.8rem;color:var(--brass)}

.btn{display:inline-block;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.16em;font-weight:600;font-size:.92rem;padding:16px 32px;
  transition:background .25s,border-color .25s,color .25s;border:0;cursor:pointer}
.btn--solid{background:var(--red);color:#fff}
.btn--solid:hover{background:#c92a21}
.btn--line{border:1px solid rgba(241,238,232,.28);color:var(--bone)}
.btn--line:hover{border-color:var(--brass);color:var(--brass)}

header{position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.stuck{background:rgba(7,8,10,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:34px;height:82px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand .badge{width:52px;height:52px;flex:none;display:grid;place-items:center}
.brand .badge img{width:100%;height:100%;object-fit:contain;display:block}
.brand .name{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-weight:600;font-size:.9rem;line-height:1.35}
.brand .name small{display:block;color:var(--mute);font-size:.7rem;letter-spacing:.24em}
.links{display:flex;gap:32px;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.18em;font-size:.82rem;font-weight:600;color:var(--mute)}
.links a:hover{color:var(--bone)}
.book{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.82rem;font-weight:600;border:1px solid rgba(241,238,232,.28);padding:11px 22px}
.book:hover{border-color:var(--brass);color:var(--brass)}
@media(max-width:960px){.links{display:none}.bar{height:70px}}

.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.hero-img{position:absolute;inset:0;
  /* Drop photos/hero.jpg in place. Gradient below is the fallback if it's missing. */
  background:
    url('/photos/hero.jpg') center/cover no-repeat,
    radial-gradient(80% 55% at 72% 26%, rgba(180,205,255,.20), transparent 62%),
    linear-gradient(96deg, transparent 34%, rgba(255,255,255,.13) 47%, transparent 56%),
    radial-gradient(120% 90% at 20% 100%, #1A1F29 0%, #0A0C10 55%, #06070A 100%);
  animation:driftIn 1.6s cubic-bezier(.2,.7,.3,1) both}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, var(--void) 4%, rgba(7,8,10,.72) 40%, rgba(7,8,10,.25) 78%)}
@keyframes driftIn{from{transform:scale(1.08);opacity:0}to{transform:scale(1);opacity:1}}
.hero .wrap{position:relative;z-index:2;padding-bottom:92px}
.hero-top{display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hero h1{margin:0 0 26px}
.hero h1 .l2{display:block;color:var(--mute)}
.hero-sub{font-family:var(--util);text-transform:uppercase;letter-spacing:.24em;
  font-size:.9rem;font-weight:600;color:var(--brass);margin:0 0 22px}
.hero .lede{margin:0 0 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.28em;
  font-size:.66rem;color:var(--mute)}
@media(max-width:700px){.hero .wrap{padding-bottom:70px}.scroll{display:none}}

section{padding:120px 0}
.head{max-width:60ch;margin-bottom:64px}
.head h2{margin:16px 0 20px}

.band{background:var(--panel);border-block:1px solid var(--line);padding:96px 0}
.band h2{max-width:20ch}
.band .three{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px}
.band .three div{border-top:1px solid var(--line);padding-top:20px}
.band .three h3{font-size:1.25rem;margin:10px 0 8px}
.band .three p{color:var(--mute);font-size:.98rem;margin:0}
@media(max-width:860px){.band .three{grid-template-columns:1fr}}

.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}

.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.meta div{border-top:1px solid var(--line);padding-top:14px}
.meta span{display:block;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--mute);margin-bottom:5px}
.meta b{font-weight:500;font-size:.98rem}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:34px}}

.svc-index{border-top:1px solid var(--line);margin-bottom:70px}
.svc-row{display:grid;grid-template-columns:60px 1fr auto auto;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .3s,color .3s}
.svc-row:hover{padding-left:14px}
.svc-row:hover .svc-name{color:var(--brass)}
.svc-name{font-family:var(--serif);font-size:1.7rem;transition:color .3s}
.svc-best{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.76rem;color:var(--mute);text-align:right}
.svc-price{font-family:var(--util);letter-spacing:.1em;font-size:1rem;
  color:var(--bone);white-space:nowrap;font-weight:600}
.svc-row.soon{opacity:.55;pointer-events:none}
.svc-row.soon .svc-price{color:var(--brass)}
@media(max-width:820px){
  .svc-row{grid-template-columns:44px 1fr;gap:8px 16px}
  .svc-best{grid-column:2;text-align:left}
  .svc-price{grid-column:2;color:var(--brass)}
}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:var(--panel);border:1px solid var(--line);padding:0 0 32px;
  display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;
  background-repeat:no-repeat;border-bottom:1px solid var(--line);
  background-image:linear-gradient(150deg,#161B23,#0A0C11)}
.card:nth-child(1) .thumb{background-image:url('/photos/exterior.jpg'),linear-gradient(150deg,#161B23,#0A0C11)}
.card:nth-child(2) .thumb{background-image:url('/photos/interior.jpg'),linear-gradient(150deg,#161B23,#0A0C11)}
.card:nth-child(3) .thumb{background-image:url('/photos/full-detail.jpg'),linear-gradient(150deg,#161B23,#0A0C11)}
.card:nth-child(4) .thumb{background-image:url('/photos/emergency.jpg'),linear-gradient(150deg,#161B23,#0A0C11)}
.card:nth-child(5) .thumb{background-image:url('/photos/monthly-plan.jpg'),linear-gradient(150deg,#161B23,#0A0C11)}
.card:nth-child(6) .thumb{background-image:url('/photos/headlights.jpg'),linear-gradient(150deg,#161B23,#0A0C11)}
.card .in{padding:28px 30px 0;display:flex;flex-direction:column;flex:1}
.card h3{margin:12px 0 12px}
.card p{color:var(--mute);font-size:.97rem;margin:0 0 22px}
.card ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.card li{padding:8px 0;border-top:1px solid var(--line);font-size:.94rem;color:#C4C9D0}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

.soon-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.soon-card{border:1px dashed var(--line);padding:32px 30px;background:transparent}
.soon-card h3{margin:12px 0 10px;color:var(--mute)}
.soon-card p{color:var(--mute);font-size:.95rem;margin:0}
@media(max-width:700px){.soon-grid{grid-template-columns:1fr}}

.reveal-sec{background:var(--panel);border-block:1px solid var(--line)}
.rev-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.reveal{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);
  user-select:none;touch-action:pan-y}
.pane{position:absolute;inset:0;background-size:cover;background-position:center}
/* REAL PHOTOS: set background-image on .pane--b and .pane--a */
.pane--b{background-color:#272C33}
.pane--a{background-color:#0A0D12;clip-path:inset(0 0 0 var(--split,50%))}
.chip{position:absolute;bottom:18px;z-index:3;font-family:var(--util);
  text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;padding:6px 13px;
  border:1px solid rgba(241,238,232,.3);background:rgba(7,8,10,.6)}
.chip--b{left:18px;color:var(--mute)}
.chip--a{right:18px;color:var(--brass);border-color:var(--brass)}
.grip{position:absolute;top:0;bottom:0;left:var(--split,50%);width:1px;
  background:var(--bone);z-index:4;cursor:ew-resize;border:0;padding:0}
.grip::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--bone);
  background:rgba(7,8,10,.55);backdrop-filter:blur(3px)}
.grip:focus-visible{outline:none}
.grip:focus-visible::after{border-color:var(--brass);box-shadow:0 0 0 4px rgba(183,155,98,.3)}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr;gap:36px}}

.work{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile figure{margin:0;aspect-ratio:4/5;border:1px solid var(--line);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#0C0F14;background-image:linear-gradient(155deg,#141922,#080A0E)}
.tile:nth-child(1) figure{background-image:url('/photos/work-1.jpg'),linear-gradient(155deg,#141922,#080A0E)}
.tile:nth-child(2) figure{background-image:url('/photos/work-2.jpg'),linear-gradient(155deg,#141922,#080A0E)}
.tile:nth-child(3) figure{background-image:url('/photos/wheel.jpg'),linear-gradient(155deg,#141922,#080A0E)}
.tile figcaption{display:flex;gap:12px;padding-top:14px;font-family:var(--util);
  text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--mute)}
.tile figcaption i{font-style:normal;color:var(--brass)}
@media(max-width:820px){.work{grid-template-columns:1fr 1fr}}

.quote{background:var(--panel);border-block:1px solid var(--line)}
.qgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.field{margin-bottom:18px}
label{display:block;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;font-weight:600;color:var(--mute);margin-bottom:8px}
input,select,textarea{width:100%;background:var(--void);border:1px solid var(--line);
  color:var(--bone);padding:14px;font-family:var(--body);font-size:1rem;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:-2px;
  border-color:var(--brass)}
textarea{min-height:110px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hint{font-size:.87rem;color:var(--mute);margin:8px 0 0}
button.send{width:100%;background:var(--red);color:#fff;padding:18px;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;font-size:1rem}
button.send:hover{background:#c92a21}
.hp{position:absolute;left:-9999px}
@media(max-width:900px){.qgrid{grid-template-columns:1fr;gap:38px}.two{grid-template-columns:1fr}}

.closer{position:relative;padding:150px 0;text-align:center;overflow:hidden;
  border-top:1px solid var(--line)}
.closer::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 40%, rgba(183,155,98,.12), transparent 70%)}
.closer .wrap{position:relative;z-index:2}
.closer h2{margin:18px auto 34px;max-width:16ch}

footer{border-top:1px solid var(--line);padding:70px 0 40px;color:var(--mute);font-size:.95rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:52px}
footer h4{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-size:.74rem;color:var(--bone);margin:0 0 16px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:5px 0}
footer a:hover{color:var(--brass)}
.legal{border-top:1px solid var(--line);padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

.rise{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rise.on{opacity:1;transform:none}

/* ---------- offer band: 4 across ---------- */
.band .three{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.band .three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.band .three{grid-template-columns:1fr}}
.offer h3{color:var(--brass)}

/* ---------- reviews page ---------- */
.page-head{padding:190px 0 90px;border-bottom:1px solid var(--line);
  background:radial-gradient(70% 90% at 50% 0%, rgba(183,155,98,.10), transparent 70%)}
.page-head h1{margin:16px 0 22px;font-size:clamp(2.6rem,6vw,4.6rem)}
.empty{border:1px dashed var(--line);padding:64px 40px;text-align:center;
  background:var(--panel)}
.empty h2{margin:0 0 18px;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.empty .lede{margin:0 auto 32px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard{border:1px solid var(--line);background:var(--panel);padding:32px 30px}
.rcard .s{color:var(--brass);letter-spacing:.14em;font-size:1rem}
.rcard blockquote{margin:16px 0 22px;font-family:var(--serif);font-size:1.3rem;
  line-height:1.35;color:var(--bone)}
.rcard cite{font-style:normal;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.16em;font-size:.74rem;color:var(--mute)}
@media(max-width:900px){.rgrid{grid-template-columns:1fr}}
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px}
.howto div{padding:28px 26px;border-left:1px solid var(--line)}
.howto div:last-child{border-right:1px solid var(--line)}
.howto h3{font-size:1.2rem;margin:8px 0 10px}
.howto p{color:var(--mute);font-size:.96rem;margin:0}
@media(max-width:820px){.howto{grid-template-columns:1fr}
  .howto div{border:1px solid var(--line);border-bottom:0}
  .howto div:last-child{border-bottom:1px solid var(--line)}}

/* ---------- most popular badge ---------- */
.svc-name .tag{display:inline-block;background:var(--brass);color:var(--void);
  font-family:var(--util);font-size:.62rem;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase;padding:3px 9px;margin-left:12px;vertical-align:middle;
  position:relative;top:-3px}
.card{position:relative}
.card--top{border-color:var(--brass)}
.card .flag{position:absolute;top:0;right:0;z-index:2;background:var(--brass);
  color:var(--void);font-family:var(--util);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 13px}
@media(max-width:820px){.svc-name .tag{display:block;margin:8px 0 0;top:0;
  width:max-content}}

/* ---------- footer logo sizing ---------- */
footer .brand .badge{width:46px;height:46px}
@media(max-width:600px){.brand .badge{width:42px;height:42px}}

/* ---------- package add-ons ---------- */
.addon-head{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;font-weight:700;color:var(--brass);margin:0 0 8px;
  padding-top:18px;border-top:1px solid var(--line)}
.card ul.addons-list{margin:0 0 24px;flex:none}
.card ul.addons-list li{display:flex;justify-content:space-between;gap:12px;
  border-top:0;padding:5px 0;color:var(--mute);font-size:.92rem}
.card ul.addons-list li span{color:var(--brass);font-family:var(--util);
  font-weight:700;letter-spacing:.06em;white-space:nowrap}

.addon-ask{color:var(--mute);font-size:.86rem;line-height:1.45;margin:0 0 22px;
  font-style:italic}

.ask-line{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;
  font-size:.86rem;font-weight:600;color:var(--brass);margin:18px 0 0}

/* ---------- legal / document pages ---------- */
.legal-body{padding:80px 0 120px}
.doc{max-width:760px}
.doc h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);
  margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--line);
  letter-spacing:-.01em}
.doc > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.92rem;font-weight:700;color:var(--brass);margin:32px 0 12px}
.doc p{color:#C2C7CE;margin:0 0 18px;line-height:1.75}
.doc p strong,.doc li strong{color:var(--bone);font-weight:600}
.doc ul,.doc ol{margin:0 0 20px;padding-left:22px;color:#C2C7CE}
.doc li{margin-bottom:9px;line-height:1.7}
.doc ul ul,.doc ol ol{margin:9px 0 0}
.doc hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.doc a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--bone)}
.doc table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:.96rem}
.doc th{text-align:left;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.14em;font-size:.76rem;font-weight:700;color:var(--brass);
  padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.doc td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);
  color:#C2C7CE;vertical-align:top}
.doc td:last-child,.doc th:last-child{padding-right:0}
.legal-links{display:flex;flex-wrap:wrap;gap:20px}
.legal-links a{color:var(--mute)}
.legal-links a:hover{color:var(--brass)}
@media(max-width:600px){
  .legal-body{padding:56px 0 80px}
  .doc table,.doc thead,.doc tbody,.doc tr,.doc th,.doc td{display:block;width:100%}
  .doc thead{display:none}
  .doc tr{border-bottom:1px solid var(--line);padding:12px 0}
  .doc td{border:0;padding:4px 0}
  .doc td:first-child{color:var(--bone);font-weight:600}
}

/* ---------- solid header CTA ---------- */
.book--solid{background:var(--red);color:#fff;border-color:var(--red)}
.book--solid:hover{background:#c92a21;border-color:#c92a21;color:#fff}

/* ---------- mobile hero: portrait crop, car pushed clear of the text ---------- */
@media(max-width:760px){
  .hero-img{
    background:
      url('/photos/hero-mobile.jpg') center center/cover no-repeat,
      radial-gradient(120% 90% at 20% 100%, #1A1F29 0%, #0A0C10 55%, #06070A 100%);
  }
  .hero-img::after{
    background:linear-gradient(to top, var(--void) 20%, rgba(7,8,10,.78) 44%, rgba(7,8,10,.10) 76%);
  }
  .hero{min-height:100svh}
  .hero .wrap{padding-bottom:52px}
  .hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  .cta-row .btn{flex:1 1 100%;text-align:center}
}

/* ---------- square reveal sizing ---------- */
.rev-grid{grid-template-columns:1fr 1fr}
.reveal{max-width:520px}
@media(max-width:900px){.reveal{max-width:none}}

/* ---------- per-slider imagery ---------- */
.reveal--wheels .pane--b{background-image:url('/photos/before.jpg')}
.reveal--wheels .pane--a{background-image:url('/photos/after.jpg')}
.reveal--camaro .pane--b{background-image:url('/photos/camaro-exterior.jpg')}
.reveal--camaro .pane--a{background-image:url('/photos/camaro-interior.jpg')}
.pane{background-size:cover;background-position:center;background-repeat:no-repeat}

/* featured block: square slider sits in the left column */
.feature .reveal{width:100%;max-width:none;aspect-ratio:1/1}
@media(max-width:900px){.feature .reveal{aspect-ratio:1/1}}

/* ---------- reviews grid: centre small counts ---------- */
.rgrid{justify-content:center}
.rgrid:has(.rcard:only-child){grid-template-columns:minmax(0,560px)}
.rgrid:has(.rcard:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,420px))}
@media(max-width:900px){
  .rgrid:has(.rcard:only-child),
  .rgrid:has(.rcard:nth-child(2):last-child){grid-template-columns:1fr}
}