/* ============================================================
   AUDIO MOTORSPORTS — Design System
   Dark / product-forward LA shop — locked tokens Aug 13 2026
   ============================================================ */

:root{
  --bg:            #0A0A0A;
  --bg-alt:        #111111;
  --surface:       #141414;
  --surface-2:     #1A1A1A;
  --border:        rgba(255,255,255,0.10);
  --text:          #F5F5F5;
  --text-dim:      #A3A3A3;
  --text-faint:    #737373;
  --muted:         #A3A3A3;

  --accent:        #C6A15B;
  --accent-rgb:    198, 161, 91;
  --accent-soft:   rgba(var(--accent-rgb), .14);
  --accent-2:      #D4B36E;
  --cta:           #C6A15B;
  --cta-hover:     #D4B36E;
  --cta-text:      #0A0A0A;
  --chrome:        #C5CAD0;
  --hairline:      rgba(197, 202, 208, 0.28);
  --cta-rgb:       198, 161, 91;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 8px;

  --shadow-glow: 0 0 0 1px var(--hairline);

  --container: 1160px;
  --font-head: 'Outfit', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  text-transform:none;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{ font-size:clamp(2.75rem,5vw,3.25rem); }
h2{ font-size:clamp(1.75rem,3vw,2rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--text-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; }
.section-tight{ padding:48px 0; }
.section-alt{ background:var(--bg-alt); }
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.section-head{ max-width:680px; margin:0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.text-dim{ color:var(--text-dim); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:none;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-cta{
  background:var(--cta);
  color:var(--cta-text);
}
.btn-cta:hover{ background:var(--cta-hover); }
.btn-outline{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-call{
  background:var(--cta);
  color:var(--cta-text);
}
.btn-call:hover{ background:var(--cta-hover); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:10px 20px; font-size:.8rem; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  font-size:.82rem;
  color:var(--text-faint);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:8px;
  padding-bottom:8px;
  flex-wrap:wrap;
  gap:8px;
}
.topbar a{ color:var(--text-dim); }
.topbar a:hover{ color:var(--accent); }
.topbar-left{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-left span, .topbar-left a{ display:inline-flex; align-items:center; gap:6px; }
.topbar-social{ display:flex; gap:14px; }
.topbar-social a{ color:var(--text-faint); font-size:.95rem; }
.topbar-social a:hover{ color:var(--accent); }

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head);
  font-size:1.15rem;
  letter-spacing:-0.01em;
  text-transform:none;
  color:var(--text);
}
.logo small{
  display:block;
  font-family:var(--font-body);
  font-size:.6rem;
  letter-spacing:.12em;
  color:var(--text-faint);
  font-weight:400;
  text-transform:uppercase;
}
.logo-mark{
  width:72px; height:72px;
  min-width:72px; min-height:72px;
  max-width:72px; max-height:72px;
  flex:none;
  border-radius:50%;
  object-fit:contain;
  aspect-ratio:1 / 1;
}

/* Header AMS coin — Ahmad, Aug 2026. Preview only.
   Coin a notch under quarter-size. Small star glides right → left, then rests. */
.site-header .logo-mark,
.ams-logo-shine,
.ams-logo-shine img{
  width:58px;
  height:58px;
  min-width:58px;
  min-height:58px;
  max-width:58px;
  max-height:58px;
}
.ams-logo-shine{
  position:relative;
  display:inline-block;
  overflow:hidden;
  border-radius:50%;
  line-height:0;
  flex:none;
}
.ams-logo-shine img{
  display:block;
  border-radius:50%;
}
.ams-logo-shine::after{
  content:"";
  position:absolute;
  top:30%;
  left:118%;
  width:9px;
  height:9px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 16%, rgba(255,220,140,0.5) 28%, transparent 58%),
    linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)) center / 1.5px 100% no-repeat,
    linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)) center / 100% 1.5px no-repeat;
  filter:drop-shadow(0 0 3px rgba(255,220,140,0.45));
  animation:amsShine 8s ease-in-out infinite;
  pointer-events:none;
  opacity:0;
}
@keyframes amsShine{
  0%  { left:118%; opacity:0; }
  4%  { opacity:.95; }
  18% { left:-16%; opacity:.8; }
  22% { left:-20%; opacity:0; }
  100%{ left:-20%; opacity:0; }
}

nav.main-nav{ display:flex; align-items:center; gap:2px; }
nav.main-nav > ul{ display:flex; align-items:center; gap:4px; position:relative; }
nav.main-nav a.nav-link{
  padding:10px 14px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em;
  border-radius:8px;
  color:var(--text-dim);
}
nav.main-nav a.nav-link:hover,
nav.main-nav li.active a.nav-link{ color:var(--text); background:var(--surface); }
.has-dropdown{ position:relative; }
.has-dropdown.has-mega{ position:static; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:240px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px;
  box-shadow:var(--shadow-glow);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .18s ease;
  z-index:120;
}
.dropdown.mega{
  left:50%;
  right:auto;
  width:min(980px, calc(100% - 48px));
  transform:translateX(-50%) translateY(8px);
  display:grid;
  grid-template-columns:1.15fr .85fr 1.15fr;
  gap:8px 28px;
  padding:22px 24px 20px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.has-dropdown.has-mega:hover .dropdown.mega,
.has-dropdown.has-mega:focus-within .dropdown.mega{ transform:translateX(-50%) translateY(0); }
.dropdown a{ display:block; padding:9px 12px; border-radius:6px; font-size:.86rem; color:var(--text-dim); }
.dropdown a:hover{ background:var(--surface-2); color:var(--text); }
.mega-col{ min-width:0; }
.mega-col-title{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--accent);
  padding:4px 12px 10px;
}
.dropdown.mega a{ padding:7px 12px; font-size:.84rem; }
.check-list{
  margin:18px 0 28px;
  padding:0;
  list-style:none;
}
.check-list li{
  position:relative;
  padding:8px 0 8px 22px;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.check-list li:before{
  content:"";
  position:absolute;
  left:0; top:16px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent);
}
.yt-tile--wide{ aspect-ratio:16/9; }
.yt-tile--wide img{ object-position:center center; }
.header-cta{ display:flex; align-items:center; gap:12px; }
.header-call{
  display:flex; flex-direction:column; text-align:right; font-size:.78rem; color:var(--text-faint);
}
.header-call strong{ color:var(--text); font-size:1rem; font-family:var(--font-head); letter-spacing:.03em; }
.nav-toggle{ display:none; }
.tagline{
  font-family:var(--font-head);
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:-0.01em;
  text-transform:none;
  color:var(--accent);
  margin:0 0 16px;
}
.warranty-callout{
  margin-top:22px;
  padding:12px 16px;
  border-left:3px solid var(--accent);
  color:var(--text-dim);
  font-size:.92rem;
}
.placeholder-flag{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  font-style:normal;
  margin-bottom:8px;
}
.list-check{ display:grid; gap:14px; margin:20px 0 24px; }
.list-check li{ padding-left:22px; position:relative; color:var(--text-dim); }
.list-check li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
}
.stats-bar{
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  padding:28px 0;
}
.stats-bar-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center;
}
.stats-bar-inner strong{
  display:block;
  font-family:var(--font-head);
  font-size:1.5rem;
  color:var(--accent);
}
.stats-bar-inner span{ font-size:.8rem; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; }
.hero-photo{ position:relative; }
.hero-photo-bg{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-photo-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  opacity:.28; filter:saturate(.7);
}
.hero-photo .container{ position:relative; z-index:1; }

/* ---------- 3D layered heroes — people sit ON the page, not in a box ---------- */
.hero-3d{
  position:relative;
  overflow:hidden;
  background-color:var(--bg);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center right;
  image-rendering:auto;
  min-height:100svh;
}
.hero-3d::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.22) 52%, transparent 72%);
}
@media (max-width: 1120px){
  .hero-3d::before{
    background:linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.28) 70%, transparent 100%);
  }
}
.hero-3d-inner{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  padding:18px 0 0;
}
.hero-3d-copy{
  position:relative;
  z-index:4;
  padding:6px 0 12px;
}
.hero-3d-figure{
  position:relative;
  z-index:2;
  margin:8px -28px -48px;
  pointer-events:none;
}
.hero-3d-figure img{
  display:block;
  width:100%;
  height:78vw;
  max-height:520px;
  object-fit:cover;
  object-position:center 8%;
  filter:drop-shadow(-28px 24px 48px rgba(0,0,0,.8));
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.hero-3d--home .hero-3d-figure img,
.hero-3d--girl-right .hero-3d-figure img{
  transform:none;
  object-position:center 6%;
}
.hero-3d--zack .hero-3d-figure img,
.hero-3d--nick .hero-3d-figure img,
.hero-3d--richard .hero-3d-figure img{
  transform:none;
  object-position:center 6%;
}

/* Five crops of the figure photo. Home heroes now pair these with --bay, which
   hides the figure and uses the site's own shop photo as a background, so on
   home only the background-position below still applies. The figure itself is
   live on the contact and payment-plan heroes. */
.hero-3d--girl-left .hero-3d-figure img{
  object-position:38% 0%;
  filter:drop-shadow(28px 24px 48px rgba(0,0,0,.8)) saturate(.88) hue-rotate(12deg);
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0%, #000 24%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image:
    linear-gradient(270deg, transparent 0%, #000 24%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.hero-3d--girl-low .hero-3d-figure img{
  object-position:center 34%;
  filter:drop-shadow(24px 28px 44px rgba(0,0,0,.85)) contrast(1.12) saturate(.9);
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0%, #000 24%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(270deg, transparent 0%, #000 24%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.hero-3d--girl-tight .hero-3d-figure img{
  object-position:72% 0%;
  transform:scale(1.16);
  transform-origin:left top;
  filter:drop-shadow(32px 18px 40px rgba(0,0,0,.8)) saturate(1.08) contrast(1.06);
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0%, #000 22%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image:
    linear-gradient(270deg, transparent 0%, #000 22%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.hero-3d--girl-wide .hero-3d-figure img{
  object-position:18% 22%;
  filter:drop-shadow(24px 28px 48px rgba(0,0,0,.8)) sepia(.18) saturate(1.12);
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0%, #000 20%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image:
    linear-gradient(270deg, transparent 0%, #000 20%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}

.hero-3d--home,
.hero-3d--girl-right{
  background-image:url("../img/hero/hub-hero-bay.jpg");
  background-position:48% 42%;
}
/* Contact is the night lot — pylon, the cars in the bay lot. --bay hides a
   figure and sets its own background, so the photo has to win on the pair. */
.hero-3d--hub-contact,
.hero-3d--hub-contact.hero-3d--bay{
  background-image:url("../img/contact/ams-lot-night.jpg");
  background-position:38% 52%;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:100svh;
}
.hero-3d--hub-contact .hero-3d-copy h1{
  font-size:clamp(1.35rem, 3.4vw, 2rem);
  font-weight:600;
  line-height:1.2;
  margin:0 0 12px;
}
/* Payment Plan: night lot banner first. Short lives in a band under the photo. */
.hero-3d--payment,
.hero-3d--payment.hero-3d--bay{
  background-image:url("../img/contact/ams-lot-night.jpg");
  background-position:38% 52%;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:100svh;
}
body:not(.page-home) .hero-3d--payment,
body:not(.page-home) .hero-3d--payment:has(.page-short-slot--hero){
  min-height:100svh;
}

/* Hub service heroes. Each one opens on its own specialty — the same shop photos
   the matching spoke home page leads with — because the shared bay shot made four
   different pages open identically, and on the stereo page it was the storefront
   sign, which read as the old site. The accent stays hub gold; only the photo is
   borrowed. Pair with --bay for the scrim and the figure suppression — doubled
   deliberately, because --bay is defined below and sets its own background, so a
   single class here would lose to it. */
.hero-3d--svc-stereo.hero-3d--bay{
  background-image:url("../img/hero/svc-stereo-hero.jpg");
  background-position:78% 30%;
}
.hero-3d--svc-tint.hero-3d--bay{
  background-image:url("../img/hero/svc-tint-hero.jpg");
  background-position:64% 34%;
}
.hero-3d--svc-alarm.hero-3d--bay{
  background-image:url("../img/hero/svc-alarm-hero.jpg");
  background-position:60% 32%;
}
.hero-3d--svc-bagger.hero-3d--bay{
  background-image:url("../img/hero/svc-bagger-hero.jpg");
  background-position:56% 38%;
}

/* Option A: bay photo only, no model cutout */
.hero-3d--bay{
  background-image:url("../img/hero/hub-hero-bay.jpg");
  background-position:42% 46%;
  background-size:cover;
}
/* About is the shop photo at dusk. The Saturday Short sits at the bottom. */
.hero-3d--hub-about{
  background-image:url("../img/about/ams-shop-dusk.jpg");
  background-position:50% 58%;
  min-height:100svh;
}
/* The install photo is a tight close-up — a hand and a drill fill most of it — so
   it needs holding down harder than the contact wall did, or it competes with him
   instead of sitting behind him. */
.hero-3d--hub-about::before{
  background:linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.82) 26%, rgba(10,10,10,.56) 46%, rgba(10,10,10,.48) 62%, rgba(10,10,10,.62) 100%);
}
@media (min-width: 1121px){
  /* The stock figure sits at right:-10% and 64% wide, which is right for a photo
     with room to spare at its edges. Zack's crop is tight on him, so that pushed
     his torso off the viewport and cut him in half. Narrower and pulled inboard. */
  .hero-3d--hub-about .hero-3d-figure{
    right:-2%;
    width:50%;
  }
}
@media (max-width: 1120px){
  .hero-3d--hub-about::before{
    background:linear-gradient(180deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.62) 42%, rgba(10,10,10,.32) 72%, rgba(10,10,10,.52) 100%);
  }
  /* Stacked under the copy his frame butts into the photo, so fade the top edge
     as well. The crop leaves room above his head, so the fade lands on the room. */
  .hero-3d--hub-about .hero-3d-figure img{
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 18%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 18%, #000 100%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
  }
}
.hero-3d--bay::before{
  background:linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 36%, rgba(10,10,10,.28) 62%, rgba(10,10,10,.12) 100%);
}
@media (max-width: 1120px){
  .hero-3d--bay::before{
    background:linear-gradient(180deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.28) 100%);
  }
}
/* Hub home: Ferrari F430 interior at the AMS shop. Wheel + Pioneer
   CarPlay + the shop sign in the first screen. Tall cover — do not
   reuse the PR 61 16:9 lot math (min-height: max(62vw) / 56.25vw,
   background-position: 28% 48%). That chops this frame into sky or dash.
   Type sits on the dark lower dash / wheel. */
body.page-home .hero-3d--home.hero-3d--bay{
  background-image:url("../img/hero/hub-hero-bg.jpg");
  background-position:48% 42%;
  background-size:cover;
  background-repeat:no-repeat;
  /* Near-square phone crop. A 100svh cover would slice the wheel or
     the CarPlay off the sides; size the banner to the frame instead. */
  min-height:min(100svh, 118vw);
}
body.page-home .hero-3d--home.hero-3d--bay::before{
  background:linear-gradient(180deg, rgba(10,10,10,.12) 0%, rgba(10,10,10,.18) 36%, rgba(10,10,10,.70) 72%, rgba(10,10,10,.92) 100%);
}
body.page-home .hero-3d--home.hero-3d--bay .hero-3d-inner{
  min-height:min(100svh, 118vw);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px 0 96px;
}
body.page-home .hero-3d--home.hero-3d--bay .hero-3d-copy{
  padding:0;
  max-width:36rem;
}
@media (min-width: 1121px){
  body.page-home .hero-3d--home.hero-3d--bay{
    background-image:url("../img/hero/hub-hero-desktop.jpg");
    background-position:50% 46%;
    min-height:100svh;
  }
  body.page-home .hero-3d--home.hero-3d--bay::before{
    background:linear-gradient(180deg, rgba(10,10,10,.08) 0%, rgba(10,10,10,.14) 40%, rgba(10,10,10,.66) 74%, rgba(10,10,10,.90) 100%);
  }
  body.page-home .hero-3d--home.hero-3d--bay .hero-3d-inner{
    min-height:92vh;
    padding:32px 0 80px;
  }
}
.hero-3d--bay .hero-3d-figure{ display:none; }
.hero-3d--bay .hero-3d-copy{
  max-width:36rem;
  padding:48px 0 64px;
}
.hero-3d--bay .hero-3d-copy h1{
  margin-bottom:16px;
}
.hero-3d--bay .hero-3d-copy .lead{
  max-width:32rem;
  margin-bottom:28px;
}
.hero-brand{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
  margin:0 0 10px;
  font-size:clamp(2.25rem, 7vw, 3.5rem);
  line-height:1.08;
  text-transform:none;
}
.page-home .hero-3d-copy h1{
  font-size:clamp(1.35rem, 3.4vw, 2rem);
  font-weight:600;
  line-height:1.2;
  margin:0 0 12px;
}
.page-home .hero-3d--bay .hero-3d-copy{
  padding:32px 0 88px;
}
@media (max-width: 1120px){
  .page-home .hero-3d{ min-height:100svh; }
  body.page-home .hero-3d--home.hero-3d--bay{ min-height:min(100svh, 118vw); }
  .page-home .hero-3d-copy{ padding-top:28px; padding-bottom:104px; }
  body.page-home .hero-3d--home.hero-3d--bay .hero-3d-copy{ padding:0; }
  .page-home .hero-actions{ margin-top:20px; }
}

.split-3d{
  position:relative;
  overflow:hidden;
}
.split-3d .container{
  position:relative;
  z-index:2;
}
.figure-3d{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:transparent;
}
.figure-3d img{
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:cover;
  object-position:center 10%;
  filter:contrast(1.05) saturate(.95) drop-shadow(-20px 24px 40px rgba(0,0,0,.7));
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 74%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0%, #000 74%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  mask-composite: intersect;
}
.figure-3d::after{ display:none; }

.page-photo{
  position:relative;
  overflow:visible;
  background:transparent;
  border:0;
}
.page-photo img{
  width:100%;
  height:auto;
  min-height:0;
  object-fit:cover;
  object-position:center 12%;
  filter:contrast(1.05) saturate(.95) drop-shadow(-16px 20px 32px rgba(0,0,0,.65));
}

/* Job photos sit on the site black. Shop/commerce keeps its own white canvas. */
.shop-drop-proof{
  background:var(--bg);
}
.shop-drop-proof__photo{
  margin:0;
}
.shop-drop-proof__photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px 14px;
}
.team-card{
  background:transparent;
  border:0;
  overflow:visible;
  transform:translateY(0);
  transition:transform .2s ease;
}
.team-card:nth-child(even){ margin-top:28px; }
.team-card:hover{ transform:translateY(-10px); }
.team-photo{
  position:relative;
  aspect-ratio:3/4;
  overflow:visible;
  background:transparent;
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 8%;
  filter:contrast(1.06) saturate(.95) drop-shadow(-18px 22px 36px rgba(0,0,0,.7));
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 68%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0%, #000 68%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.team-photo-pending{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#141414,#0A0A0A);
}
.team-photo-pending span{
  font-family:var(--font-head);
  font-size:4rem;
  color:var(--accent);
  letter-spacing:.08em;
}
.team-meta{
  position:relative;
  z-index:2;
  margin:-36px 8px 0;
  padding:16px 14px 18px;
  background:linear-gradient(180deg, rgba(14,14,14,.92), #0E0E0E);
  border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:8px;
  box-shadow:var(--shadow-glow);
}
.team-meta h3{
  margin:0 0 4px;
  font-size:1.05rem;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.team-meta .team-role{
  margin:0 0 10px;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
}
.team-meta .team-bio{
  margin:0;
  font-size:.82rem;
  line-height:1.5;
  color:var(--text-dim);
}
.team-lineup{
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:16px 20px;
  align-items:end;
}
.team-lineup-col{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.team-card--center{
  transform:scale(1.08);
  transform-origin:bottom center;
}
.team-card--featured{
  max-width:420px;
  margin:0 auto;
}
.nick-nap{
  max-width:280px;
}
.nick-nap .team-meta{ margin-top:-28px; }
.yt-gallery--jobs{ grid-template-columns:repeat(2,1fr); }

.yt-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.yt-tile{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#050505;
}
.yt-tile img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 15%;
  transition:transform .35s ease;
}
.yt-tile:hover img{ transform:scale(1.04); }
.yt-tile-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:28px 12px 12px;
  background:linear-gradient(transparent, rgba(10,10,10,.92));
  font-family:var(--font-head);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  color:#fff;
}
.yt-tile-label small{
  display:block;
  font-family:var(--font-body);
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--accent);
  margin-top:4px;
  text-transform:none;
}
.video-embed{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--border);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Phone-first Short: 9:16 fills the 390px column. Empty URL hides all of it. */
.page-short-band{ padding:24px 0 0; }
.page-short-band[hidden],
.page-short-slot[hidden]{ display:none !important; }
.page-short{ width:100%; max-width:390px; }
.page-short-title{
  font-family:var(--font-head);
  font-size:1.5rem;
  font-weight:600;
  line-height:1.25;
  margin:0 0 12px;
  text-transform:none;
}
.page-short-aside{ display:flex; flex-direction:column; gap:12px; }
.page-short-frame{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  border-radius:8px;
  border:1px solid var(--hairline);
  overflow:hidden;
  background:#000;
  line-height:0;
}
.page-short-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  border:0;
  display:block;
  pointer-events:auto;
}
.page-short-caption{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
}
.fan-shorts{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:24px;
}
.fan-shorts .page-short{ max-width:390px; }
@media (min-width: 720px){
  .fan-shorts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px; }
}
.fan-swag{
  max-width:640px;
  margin:32px 0 0;
}
.fan-swag p{
  margin:0;
  padding:16px 0;
  border-top:1px solid var(--hairline);
  color:var(--text);
  font-size:1.125rem;
  line-height:1.6;
}
.fan-swag p:last-of-type{ border-bottom:1px solid var(--hairline); }
.fan-same{ margin-top:32px; }
.fan-close{
  max-width:640px;
  margin:0 auto;
}
.fan-close p{ color:var(--muted); }
.fan-name .section-head{ margin-bottom:0; }
.hero-3d-figure.page-short-slot,
.hero-3d-figure .page-short{ pointer-events:auto; }
.hero-3d-figure.page-short-slot{ margin:0; padding:0 24px 16px; }
.hero-3d-figure .page-short{ width:100%; max-width:none; }
/* Crew photos are gone — do not keep a full-viewport hole for them. */
body:not(.page-home) .hero-3d:has(.page-short-slot--hero){ min-height:0; }
.hero-3d:has(.page-short-slot--hero) .hero-3d-copy{ padding-bottom:16px; }
.hero-3d:has(.page-short-slot--hero[hidden]) .hero-3d-inner{ padding-bottom:32px; }
/* Home banner stays a full photo. Shorts sit later on the page. */
.page-home .hero-3d,
.page-home .hero-3d:has(+ .page-short-band:not([hidden])){
  min-height:100svh;
}
body.page-home .hero-3d--home.hero-3d--bay,
body.page-home .hero-3d--home.hero-3d--bay:has(+ .page-short-band:not([hidden])){
  min-height:min(100svh, 118vw);
}
@media (min-width: 1121px){
  body.page-home .hero-3d--home.hero-3d--bay,
  body.page-home .hero-3d--home.hero-3d--bay:has(+ .page-short-band:not([hidden])){
    min-height:100svh;
  }
}
@media (min-width: 1121px){
  .page-short-band{ padding:32px 0 0; }
  .page-short-title{ font-size:1.25rem; }
  .hero-3d .hero-3d-figure.page-short-slot{
    position:absolute;
    right:4%;
    top:50%;
    bottom:auto;
    left:auto;
    transform:translateY(-50%);
    width:min(280px, 28vw);
    height:auto;
    margin:0;
    padding:0;
    order:0;
    pointer-events:auto;
  }
  .hero-3d:has(.page-short-slot--hero[hidden]) .hero-3d-inner{
    min-height:0;
    padding-bottom:48px;
  }
}

/* Official Kicker packshots — mobile-first 2-up, white canvas, not a thumb. */
.product-shot-band{ padding:24px 0 0; }
.product-shot-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.product-shot{ margin:0; }
.product-shot img{
  width:100%;
  height:auto;
  display:block;
  background:#fff;
  border-radius:8px;
  border:1px solid var(--hairline);
}
.product-shot h2{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:600;
  line-height:1.25;
  margin:12px 0 4px;
}
.product-shot p{ margin:0; color:var(--muted); font-size:0.9rem; line-height:1.45; }
@media (min-width: 761px){
  .product-shot-list{ gap:24px; }
  .product-shot h2{ font-size:1.5rem; }
  .product-shot p{ font-size:1rem; line-height:1.5; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:110px 0 100px;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(47,143,255,.16), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(255,68,51,.10), transparent 60%),
    linear-gradient(180deg,#0a0c10,#0d1016 60%,var(--bg-alt));
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--text-dim);
}
.badge svg{ width:14px; height:14px; color:var(--accent); }
.hero h1{ margin-bottom:20px; }
.hero h1 span{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:1.08rem; max-width:520px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-head); font-size:1.7rem; color:var(--text); }
.hero-stats div span{ font-size:.78rem; color:var(--text-faint); letter-spacing:.03em; }

.hero-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:var(--shadow-glow);
}
.hero-panel h3{ margin-bottom:4px; }
.hero-panel p{ font-size:.88rem; margin-bottom:20px; }

/* ---------- Forms ---------- */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--bg-alt);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:.92rem;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-note{ font-size:.76rem; color:var(--text-faint); margin-top:10px; }
.form-success, .form-error{
  padding:14px 16px; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:16px;
}
.form-success{ background:rgba(0,217,192,.1); border:1px solid rgba(0,217,192,.35); color:#7ff0e0; }
.form-error{ background:rgba(255,68,51,.1); border:1px solid rgba(255,68,51,.35); color:#ffb3ab; }

/* ---------- Cards / Grids ---------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.about-shop-photo,
.contact-lot-photo{ margin:0; }
.about-shop-photo img,
.contact-lot-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid var(--border);
}
.contact-lot-photo figcaption{
  margin-top:8px;
  font-size:0.8125rem;
  color:var(--muted);
}
.contact-blocks{ margin-top:40px; }
.contact-blocks h2{
  font-size:1.25rem;
  line-height:1.3;
  margin:0 0 12px;
}
.contact-blocks p{ margin:0 0 10px; }
.contact-blocks p:last-child{ margin-bottom:0; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(var(--accent-rgb),.45); }
.card .icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
  margin-bottom:18px;
}
.card .icon svg{ width:26px; height:26px; }
.card a.card-link{ color:var(--accent); font-size:.85rem; font-weight:600; letter-spacing:.03em; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }

.service-card{ position:relative; overflow:hidden; }
/* Line-art marks on the homepage cards. Hairline weight and held under full
   accent so they read as detailing and the heading still leads. */
.service-icon{
  display:block;
  width:88px; height:56px;
  margin-bottom:16px;
  color:var(--accent);
  opacity:.8;
  stroke-width:1.25;
}
.service-card a.spoke-link{
  display:block;
  margin-top:8px;
  color:var(--text-faint);
  font-size:.78rem;
  letter-spacing:.02em;
}
.service-card a.spoke-link:hover{ color:var(--accent); }
@media (max-width:640px){
  .service-icon{ width:72px; height:48px; margin-bottom:8px; }
}
.service-card .tag{
  position:absolute; top:20px; right:20px;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(var(--accent-rgb),.4); padding:4px 10px; border-radius:999px;
}
.service-card-photo{
  display:flex;
  flex-direction:column;
  padding:0;
  color:inherit;
}
.service-card-photo .card-media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#050505;
}
.service-card-photo .card-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 18%;
}
.service-card-photo .card-body{ padding:22px 22px 26px; }

/* Home / shop service tiles — 16:9 crop, HTML label under the photo, 2-up on phone. */
.services-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.service-card-tile{
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  min-width:0;
}
.service-card-tile .card-media{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#141414;
}
.service-card-tile .card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.service-media--stereo img{ object-position:78% 30%; }
.service-media--tint img{ object-position:64% 55%; }
.service-media--alarm img{ object-position:60% 32%; }
.service-media--bagger img{ object-position:56% 38%; }
.service-card-tile h3{
  margin:0;
  padding:10px 12px 12px;
  font-size:1rem;
  line-height:1.25;
}
@media (min-width: 761px){
  .services-grid{ gap:16px; }
  .service-card-tile h3{ font-size:1.15rem; padding:12px 14px 14px; }
}
@media (min-width: 1121px){
  .services-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
}

.special-card{ padding:0; overflow:hidden; }
.special-card-media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#050505;
}
.special-card-media img{
  width:100%; height:100%;
  object-fit:cover;
}
.special-card-body{ padding:22px 22px 26px; }
.special-price{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.35rem;
  margin:8px 0 6px;
}
.special-price-now{ color:var(--text); }
.special-price-was{
  color:var(--muted);
  font-size:1rem;
  font-weight:500;
  margin-left:8px;
}
.special-note{
  font-size:.85rem;
  color:var(--muted);
  margin:0 0 10px;
}

/* ---------- Brand / logo strip ---------- */
.brand-strip{ display:flex; flex-wrap:wrap; gap:14px; }
.brand-chip{
  padding:12px 20px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); font-family:var(--font-body); letter-spacing:.03em; font-size:.85rem; color:var(--text-dim);
  transition:all .15s ease;
}
.brand-chip:hover{ color:var(--text); border-color:var(--accent); background:var(--surface-2); }

/* ---------- Testimonials ---------- */
.testimonial{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px;
}
.stars{ color:#C6A15B; letter-spacing:2px; margin-bottom:12px; font-size:1rem; }
.source-chip{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:.72rem;
  font-style:normal;
  margin-bottom:10px;
}
.testimonial p{
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  font-style:normal;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.testimonial .who{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:.85rem; color:var(--text-faint); }
.testimonial .who strong{ color:var(--text-dim); font-style:normal; }

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--surface);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:70px 0;
  text-align:center;
}
.cta-band h2{ margin-bottom:10px; }
.cta-band .actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:26px; }

.makes-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.makes-grid a{
  display:block;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:var(--font-body);
  letter-spacing:.01em;
  text-transform:none;
  font-size:.85rem;
  color:var(--text-dim);
}
.makes-grid a:hover{ color:var(--accent); border-color:rgba(var(--accent-rgb),.45); }
@media (min-width: 760px){
  .makes-grid{ grid-template-columns:repeat(5,1fr); }
}

.crew-bleed{
  position:relative;
  padding:8px 0 0;
  overflow:hidden;
  background:#0A0A0A;
}
.crew-bleed-track{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding:0 8px;
}
.crew-bleed figure{
  flex:1 1 0;
  margin:0 -18px;
  position:relative;
  z-index:1;
  min-width:0;
}
.crew-bleed figure:nth-child(even){ transform:translateY(22px); z-index:2; }
.crew-bleed figure:nth-child(3){ z-index:3; transform:translateY(-8px) scale(1.06); }
.crew-bleed img{
  display:block;
  width:100%;
  height:42vw;
  max-height:340px;
  object-fit:cover;
  object-position:center 8%;
  filter:drop-shadow(-16px 18px 28px rgba(0,0,0,.7));
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.crew-bleed figcaption{
  position:relative;
  z-index:2;
  margin-top:-18px;
  text-align:center;
  font-family:var(--font-head);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--accent);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding:60px 0 46px;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.breadcrumbs{ font-size:.8rem; color:var(--text-faint); margin-bottom:14px; }
.breadcrumbs a:hover{ color:var(--accent); }
.page-hero p.lead{ max-width:640px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--bg); border-top:1px solid var(--hairline); padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.footer-grid h4{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid a{ color:var(--text-faint); font-size:.88rem; }
.footer-grid a:hover{ color:var(--accent); }
.footer-about p{ font-size:.88rem; }
.footer-social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.footer-social a{
  padding:8px 12px; border:1px solid var(--border); border-radius:999px;
  font-size:.75rem; color:var(--text-dim);
}
.footer-social a:hover{ color:var(--accent); border-color:var(--accent); }
.footer-bottom{
  border-top:1px solid var(--border);
  padding:20px 0 26px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.78rem; color:var(--text-faint);
}
.footer-bottom a{ color:var(--text-faint); }
.footer-bottom a:hover{ color:var(--accent); }

/* ---------- Sticky CTA bar — every page, mobile-first ---------- */
.mobile-cta-bar{
  display:flex;
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--bg);
  border-top:1px solid var(--hairline);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-cta-bar a{ flex:1; justify-content:center; }
body{ padding-bottom:72px; }

/* ---------- Utility ---------- */
.divider{ height:1px; background:var(--border); margin:56px 0; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0 }

/* ---------- Responsive ---------- */
@media (max-width: 1240px){
  nav.main-nav a.nav-link{ padding:8px 7px; font-size:.78rem; }
  .header-cta{ gap:8px; }
  .header-cta .btn-sm{ padding:8px 12px; }
}

/* Touch targets. Measured at 375px: .btn-sm rendered 38px tall, the Menu toggle 34px
   and the "Details" / "See the specials" card links 22–26px. 44px is the floor a
   thumb can hit reliably (Apple HIG, WCAG 2.5.5), and these are the Call, Text and
   Reserve buttons — the ones the whole site exists to get pressed. Height only; the
   type scale and the padding-driven look are unchanged. Pointer-coarse rather than a
   width query so it applies to a phone and not to a narrow desktop window. */
@media (pointer: coarse){
  .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-sm{ min-height:44px; }
  .nav-toggle{ min-height:44px; }
  /* Text links that act as buttons. min-height rather than padding: padding alone
     left them at 38-42px depending on the line-height they inherited, which is the
     kind of two-pixel miss that passes a glance and fails a thumb. Not scoped to
     .card — the shop's product cards are .product-card, which is not also .card, so
     196 "Details" links on /shop/ were missed by the narrower selector. */
  a.card-link{ min-height:44px; }
  /* Breadcrumbs and the network links sat at 16-20px. Both are real navigation. */
  .breadcrumbs a, .spoke-link{ display:inline-block; padding:10px 0; min-height:44px; }
  /* Our own chat widget: close was 32px, send 40px. */
  .ams-chat-close, .ams-chat-send{ min-height:44px; min-width:44px; }
  /* Footer social row measured 37px. Instagram and the Google listing are where the
     proof lives, so they are worth a clean tap. */
  .footer-social a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
  /* The topbar phone and Text us sit at 21px. They are duplicated in the header CTA
     and the sticky mobile bar, so this is a convenience row, not the primary path —
     but it is still the first phone number on the page. */
  .topbar a{ display:inline-block; padding:6px 0; min-height:34px; }
}
@media (max-width: 1120px){
  nav.main-nav{ display:none; }
  nav.main-nav.open{
    display:block;
    position:absolute; left:0; right:0; top:100%;
    background:rgba(10,10,10,.97);
    border-bottom:1px solid var(--border);
    padding:12px 24px 24px;
  }
  nav.main-nav.open > ul{ flex-direction:column; align-items:stretch; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; }
  .dropdown.mega{
    width:100%;
    grid-template-columns:1fr;
    padding:8px 0 4px;
    transform:none;
  }
  .has-dropdown.has-mega:hover .dropdown.mega,
  .has-dropdown.has-mega:focus-within .dropdown.mega{ transform:none; }
  .mega-col{ padding-bottom:10px; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 980px){
  .mobile-cta-bar{ gap:6px; }
  .mobile-cta-bar .btn-sm{ padding:10px 8px; font-size:.75rem; }
  .hero-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  nav.main-nav{ display:none; }
  nav.main-nav.open{
    display:block;
    position:absolute; left:0; right:0; top:100%;
    background:rgba(10,10,10,.97);
    border-bottom:1px solid var(--border);
    padding:12px 24px 24px;
  }
  nav.main-nav.open > ul{ flex-direction:column; align-items:stretch; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; }
  .dropdown.mega{
    width:100%;
    grid-template-columns:1fr;
    padding:8px 0 4px;
    transform:none;
  }
  .has-dropdown.has-mega:hover .dropdown.mega,
  .has-dropdown.has-mega:focus-within .dropdown.mega{ transform:none; }
  .mega-col{ padding-bottom:10px; }
  .header-call{ display:none; }
  .nav-toggle{ display:flex; }
  .stats-bar-inner{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* The open mobile menu could not be scrolled, so its bottom was simply unreachable.
   It is position:absolute inside a position:sticky header with no height limit, so at
   390x844 the panel ran 787-1000px tall and scrolling the page moved the header and
   panel together instead of revealing the rest. Contact was off-screen on four of the
   five sites — the one link a customer opens the menu to find. Beats lost five,
   including three still gone at 430x932.

   Bounding the panel to the viewport and letting it scroll itself fixes it. The 294px
   is measured, not guessed: at the top of the page the utility bar and header stack
   224px above the panel, and the sticky Call/Text bar takes 62px below it, so that is
   the space actually available in the worst case. Sizing it for the scrolled case
   instead left the panel 44px past the fold whenever the page was at the top, which is
   exactly where a visitor opens the menu. dvh rather than vh, or mobile browser chrome
   eats the last item back. overscroll-behavior keeps the swipe inside the panel instead
   of handing off to the page and pulling the header out from under it. Declared after
   both the 1120px and 980px blocks, which each carry their own copy of this rule, so
   one declaration covers both breakpoints. */
@media (max-width: 1120px){
  nav.main-nav.open{
    max-height:calc(100dvh - 294px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}
@supports not (height: 100dvh){
  @media (max-width: 1120px){
    nav.main-nav.open{ max-height:calc(100vh - 294px); }
  }
}

@media (min-width: 1121px){
  .mobile-cta-bar{ display:none; }
  body{ padding-bottom:0; }
  .hero-3d-inner{
    min-height:92vh;
    display:block;
    padding:72px 0 120px;
  }
  .hero-3d-copy{
    max-width:34rem;
    padding:24px 0 80px;
  }
  .hero-3d-figure{
    position:absolute;
    right:-10%;
    top:0;
    bottom:-8%;
    width:64%;
    margin:0;
    z-index:2;
  }
  .hero-3d-figure img{
    height:100%;
    max-height:none;
  }
  .hero-3d--home .hero-3d-figure img,
  .hero-3d--girl-right .hero-3d-figure img{ object-position:center 6%; }
  .hero-3d--zack .hero-3d-figure img,
  .hero-3d--richard .hero-3d-figure img{ object-position:center 4%; }
  .hero-3d--girl-left .hero-3d-figure{
    right:auto;
    left:-14%;
    width:58%;
  }
  .hero-3d--girl-left .hero-3d-copy{
    max-width:32rem;
  }
  .hero-3d--girl-low .hero-3d-figure{
    right:auto;
    left:-12%;
    top:18%;
    bottom:-10%;
    width:52%;
  }
  .hero-3d--girl-tight .hero-3d-figure{
    right:auto;
    left:-8%;
    top:-6%;
    width:48%;
  }
  .hero-3d--girl-wide .hero-3d-figure{
    right:auto;
    left:-10%;
    top:10%;
    width:52%;
  }
  .hero-3d--girl-wide .hero-3d-copy{
    max-width:32rem;
  }
  .hero-3d .hero-panel{ max-width:420px; }
  .team-grid{ grid-template-columns:repeat(4,1fr); gap:28px 18px; }
  .team-card:nth-child(even){ margin-top:48px; }
  .yt-gallery{ grid-template-columns:repeat(5,1fr); }
  .yt-gallery--jobs{ grid-template-columns:repeat(5,1fr); }
  .crew-bleed img{ height:28vw; max-height:420px; }
}
@media (max-width: 760px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; }
  .services-grid.grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .topbar .container{ justify-content:center; text-align:center; }
  .hero{ padding:80px 0 70px; }
  .section{ padding:52px 0; }
  .topbar-social{ display:none; }
  .hero-3d-figure img{ height:72vw; max-height:420px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .team-lineup{ grid-template-columns:1fr; }
  .team-card--center{ transform:none; }
  .yt-gallery--jobs{ grid-template-columns:1fr 1fr; }
}

/* ---------- Mobile hero lock ----------
   One composition in the first viewport. The sticky bar carries Call, Text us
   and Quote on every page already, so a home hero repeating those three spends
   ~190px of the first screen to offer the same choice twice. Hide only the
   duplicates: a hero button that goes somewhere else, like the tint process or
   the pod builder, still earns its place. */
@media (max-width: 1120px){
  body.page-home .hero-3d .hero-actions > a[href^="tel:"],
  body.page-home .hero-3d .hero-actions > a[href^="sms:"],
  body.page-home .hero-3d .hero-actions > a[href="/contact/"]{ display:none; }
  /* Ferrari banner is sized to the near-square frame, not a leftover 100svh
     hole under the header. Keep the copy on the dark dash / wheel. */
  body.page-home .hero-3d--home.hero-3d--bay .hero-3d-inner{
    min-height:0;
    padding:20px 0 72px;
  }
  /* The chat launcher is fixed in a 44px corner above the sticky bar, and the
     hero's last line ran underneath it. */
  body.page-home .hero-3d .hero-3d-copy .lead{ padding-right:60px; }
}

/* ---------- Mobile hero lock — service and inner pages ----------
   The block above only reaches home heroes, so every service page still opened
   with the same three buttons the sticky bar was already carrying: ~190px of
   the first screen spent offering one choice twice, with the chat launcher
   landing on the third button. The sticky bar is on every URL, so the argument
   is the same one page type down. Only the three duplicates go — a hero button
   that leads somewhere else, like Build Your Own, Watch jobs or Visit LA Car
   Beats, is often the reason the visitor is in that hero and stays put. */
@media (max-width: 1120px){
  .page-hero .hero-actions > a[href^="tel:"],
  .page-hero .hero-actions > a[href^="sms:"],
  .page-hero .hero-actions > a[href="/contact/"],
  body:not(.page-home) .hero-3d .hero-actions > a[href^="tel:"],
  body:not(.page-home) .hero-3d .hero-actions > a[href^="sms:"],
  body:not(.page-home) .hero-3d .hero-actions > a[href="/contact/"]{ display:none; }
  /* A 44px headline beside an 18px wordmark reads as the page shouting over the
     shop's name. Where the hero carries a brand line, home's answer applies:
     the brand is the big type and the headline sits under it. Flat .page-hero
     headings keep their size — they have no brand line to sit under, and
     dropping them puts the H1 below the H2 of the next section.

     :has() is load-bearing, not decoration. Without it this matched every
     .hero-3d hero, brand line or not, and 14 pages had no brand line — every
     About, every Payment Plan, and four of the five Contacts. On a phone their
     H1 came out at 22px under nothing at all, which is smaller than the 28px H2
     of the very next section, so the page had no visual headline and the reading
     order inverted. Exactly the defect the last sentence above warns about, just
     arriving through .hero-3d instead of .page-hero. */
  body:not(.page-home) .hero-3d .hero-3d-copy:has(.hero-brand) h1{
    font-size:clamp(1.35rem, 3.4vw, 2rem);
    line-height:1.2;
  }
  /* Same defect the home hero had: the photo hero sizes itself to a whole
     screen but starts below the topbar and header, so ~195px of it always hangs
     under the fold and the first real section never shows. Size it to what is
     actually left. */
  body:not(.page-home) .hero-3d{
    min-height:max(58svh, calc(100svh - 300px));
  }
  /* The chat launcher is fixed in a 44px corner above the sticky bar. */
  body:not(.page-home) .hero-3d .hero-3d-copy .lead{ padding-right:60px; }
}
@media (max-width: 560px){
  /* The wordmark and its eyebrow wrapped onto three lines beside a 72px badge.
     The H1 one line below says the same thing. */
  .site-header .logo span{ white-space:nowrap; }
  .site-header .logo small{ display:none; }
  .site-header .logo{ gap:8px; font-size:1rem; }
  .site-header .container{ padding-left:16px; padding-right:16px; }
  .site-header .nav-wrap{ padding:10px 0; }
  .site-header .header-cta{ gap:6px; }
  .site-header .header-cta .btn-sm{ padding:8px 12px; }
  /* A one-line wordmark plus three buttons runs past a 390px screen and clips
     Menu. The sticky bar carries Quote all the way down the page, so the
     header keeps Call and Menu. */
  .site-header .header-cta > a[href="/contact/"]{ display:none; }
}

/* Body copy sizes for a phone. The locked design system puts body at 1rem/1.6, and
   these three are body copy by any reading — a person's bio, the reason to buy a
   product, the paragraph about the shop — but they ship at 13-14px, which is under the
   16px floor for text a customer actually has to read on a phone. 196 product
   descriptions and 190 stock lines on /shop/ alone, and it is the most transactional
   page on the hub.

   Phones only, so the desktop grid keeps its density and nothing about the desktop
   layout moves. Eyebrows, badges, NAP lines, role labels and the footer legal line stay
   small on purpose — the design system says tracked uppercase labels are meant to be
   small, and they are labels, not prose. */
@media (max-width: 760px){
  .team-meta .team-bio{ font-size:1rem; line-height:1.55; }
  .footer-about{ font-size:.95rem; }
}

/* Form controls must be 16px on a touch device or iOS Safari zooms the page in the
   moment the customer taps the field. .92rem is 14.7px, so every field on every quote
   and contact form did it: tap Full Name, the viewport jumps and rescales, the rest of
   the form is now off-screen, and the customer has to pinch back out to carry on. It
   does not block a submit, which is why it survived — it just makes the lead form feel
   broken on the device most of this traffic arrives on.

   Scoped to coarse pointers, like the tap-target block above, so the compact desktop
   form is untouched. Width would be the wrong test: an iPad is 768px or wider and zooms
   exactly the same way. */
@media (pointer: coarse){
  .field input,
  .field select,
  .field textarea,
  .ams-modal input,
  .ams-modal select,
  .ams-modal textarea{ font-size: 1rem; }
}


/* Shop-drop heroes — page-specific so a shared --svc-* class cannot swap four pages. */
.hero-3d--drop-pioneer.hero-3d--bay{
  background-image:url("../img/shop-drop-2026-08-20/stereo-pioneer-girl.jpg");
  background-position:72% 18%;
}
.hero-3d--drop-bentley-open.hero-3d--bay{
  background-image:url("../img/shop-drop-2026-08-20/tint-bentley-open.jpg");
  background-position:50% 42%;
}
.hero-3d--drop-viper.hero-3d--bay{
  background-image:url("../img/shop-drop-2026-08-20/alarm-viper-app.jpg");
  background-position:50% 22%;
}
.hero-3d--drop-harley-cullinan.hero-3d--bay{
  background-image:url("../img/shop-drop-2026-08-20/moto-harley-cullinan.jpg");
  background-position:48% 46%;
}