/* 09 — REDLINE DETAIL CO. / auto detailing
   Garage black, hazard yellow, italic poster type. */

body.auto{
  --bg:#0a0a0a; --ink:#f4f0e6;
  --accent:#e9ff30; --accent-ink:#111;
  --line:rgba(244,240,230,.2);
  --soft:rgba(244,240,230,.62);
  --panel:#131313;
  --inv-bg:#e9ff30; --inv-ink:#111;
  --ft-bg:#050505; --ft-ink:#f4f0e6;
  --display:'Archivo Black',sans-serif;
  --nav-bg:#0a0a0a;
  --gutter:3vw;
  background:#0a0a0a;color:#f4f0e6;font-family:'Space Grotesk',sans-serif;
}

.auto .dh,.auto .cta h2,.auto .phero h1{text-transform:uppercase;font-style:italic;letter-spacing:-.06em}
.auto .sec-inv,.auto .cta{--line:rgba(17,17,17,.25);--soft:rgba(17,17,17,.7);--accent:#111;--accent-ink:#e9ff30}
.auto .site-ft{--line:rgba(244,240,230,.16);--soft:rgba(244,240,230,.55)}
.auto .btn-solid{background:#e9ff30;color:#111;border-color:#e9ff30}
.auto .sec-inv .btn-solid{background:#111;color:#e9ff30;border-color:#111}

/* header */
.auto .top{background:#e9ff30;color:#111;padding:9px 0;white-space:nowrap;overflow:hidden;font-weight:600;font-size:13px}
.auto .nav{padding:20px 3vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.auto .logo{font:28px 'Archivo Black';font-style:italic;letter-spacing:-.05em}

/* hero */
.auto .hero{min-height:780px;position:relative;padding:7vh 3vw;overflow:hidden;display:flex;align-items:center}
.auto .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.45) 55%,transparent 80%);z-index:0}
.auto .hero > img{position:absolute;inset:0}
.auto .hero-copy{position:relative;z-index:1;max-width:760px}
.auto .hero h1{font:clamp(52px,11vw,180px)/.84 'Archivo Black';font-style:italic;text-transform:uppercase;letter-spacing:-.08em;margin:34px 0;overflow-wrap:anywhere;max-width:100%}
.auto .hero h1 span{color:#e9ff30}
.auto .hero-copy p{max-width:480px;line-height:1.65;color:var(--soft);margin-bottom:34px;font-size:18px}

/* packages */
.auto .package{border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:16px;transition:.3s}
.auto .package:hover{border-color:#e9ff30}
.auto .package.featured{background:#e9ff30;color:#111;border-color:#e9ff30}
.auto .package.featured .muted{color:rgba(17,17,17,.7)}
.auto .package h3{font:33px 'Archivo Black';font-style:italic;letter-spacing:-.05em}
.auto .price{font-size:46px;font-weight:700;letter-spacing:-.04em}
.auto .package ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px;color:var(--soft)}
.auto .package.featured ul{color:rgba(17,17,17,.75)}
.auto .package li:before{content:'▸ ';color:#e9ff30}
.auto .package.featured li:before{color:#111}
.auto .badge{align-self:flex-start;background:#111;color:#e9ff30;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px}

/* results */
.auto .shots img{height:320px;cursor:zoom-in}

/* spec rows */
.auto .spec{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.auto .spec strong{color:#e9ff30;font-size:14px;text-transform:uppercase;letter-spacing:.1em}
.auto .spec p{color:var(--soft);line-height:1.7}

@media(max-width:820px){
  .auto .hero{min-height:auto;padding:8vh 4vw 10vh}
  .auto .hero h1{font-size:clamp(48px,14vw,96px);margin:24px 0}
  .auto .hero-copy p{font-size:16px}
  .auto .logo{font-size:clamp(20px,6vw,28px)}
  .auto .spec{grid-template-columns:1fr;gap:8px}
  .auto .package{padding:24px}
  .auto .price{font-size:clamp(32px,10vw,46px)}
}
@media(max-width:400px){
  .auto .hero h1{font-size:13.5vw}
}