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

:root{
  --bg:            #0B1014;
  --bg-alt:        #0E1418;
  --surface:       #12161A;
  --surface-2:     #181E24;
  --border:        rgba(255,255,255,0.10);
  --text:          #F5F5F5;
  --text-dim:      #A3A3A3;
  --text-faint:    #737373;
  --muted:         #A3A3A3;

  --accent:        #8AA8BC;
  --accent-rgb:    138, 168, 188;
  --accent-soft:   rgba(var(--accent-rgb), .14);
  --accent-2:      #9BB8C8;
  --cta:           #8AA8BC;
  --cta-hover:     #9BB8C8;
  --cta-text:      #0A0A0A;
  --chrome:        #C5CAD0;
  --hairline:      rgba(197, 202, 208, 0.28);
  --cta-rgb:       138, 168, 188;

  --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-outline:hover{ border-color:var(--accent); color:var(--accent); }
.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:.28em;
  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 — the owner, 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;
  contain:paint;
  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;
  z-index:120;
}
.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); }
.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; }

.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform: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); }
.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--nick .hero-3d-figure img,
.hero-3d--richard .hero-3d-figure img{
  transform:none;
  object-position:center 6%;
}

/* Same latin-model.png, five different crops so each landing looks different */
.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--girl-left,
.hero-3d--girl-right{
  background-image:url("../img/hero/tint-hero-bg.jpg");
  /* Sits low on purpose: higher and the pole sign's E-Z CREDIT and
     neighbouring-tenant panels crop into the top of the hero. */
  background-position:90% 74%;
}
.hero-3d--tint-contact,
.hero-3d--tint-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;
}
/* 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;
}
/* About is the shop photo at dusk. The Saturday Short sits at the bottom. */
.hero-3d--tint-about{
  background-image:url("../img/about/ams-shop-dusk.jpg");
  background-position:50% 58%;
  min-height:100svh;
}
.hero-3d--tint-about::before{
  background:linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.80) 28%, rgba(10,10,10,.42) 48%, rgba(10,10,10,.22) 62%, rgba(10,10,10,.40) 100%);
}
@media (max-width: 1120px){
  .hero-3d--tint-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%);
  }
}
.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%);
  }
}
.hero-3d--bay .hero-3d-figure{ display:none; }
.hero-3d--bay .hero-3d-copy{ max-width:36rem; padding:48px 0 64px; }
.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; }
  .page-home .hero-3d--contain{ min-height:0; }
  .page-home .hero-3d-copy{ padding-top:28px; padding-bottom:104px; }
  .page-home .hero-3d--contain .hero-3d-copy{ padding-top:12px; padding-bottom:20px; }
  .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; }
.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-meta h3{ margin:0 0 4px; font-size:1.05rem; }
.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-meta h3{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.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-gallery--jobs{
  gap:18px;
}
.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--wide{ aspect-ratio:16/9; }
.yt-tile--wide img{ object-position:center center; }
.team-card--featured{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  max-width:560px;
  margin:0 auto 40px;
}
.team-card--featured .team-meta{
  margin-top:-28px;
}
.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;
  width:100%; max-width:none;
  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;
}
.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;
}
@media (min-width: 1121px){
  .page-short-band{ padding:32px 0 0; }
  .page-short-title{ font-size:1.25rem; }
  .page-short-band .page-short{
    max-width:none;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(240px,42%);
    gap:32px 48px;
    align-items:center;
  }
  .page-short-band .page-short-aside{ min-width:240px; }
  .page-short-band .page-short-title{
    margin:0;
    font-size:2rem;
    position:relative;
    z-index:1;
    pointer-events:auto;
  }
  .hero-3d .hero-3d-figure.page-short-slot{
    position:relative;
    right:auto;
    top:auto;
    bottom:auto;
    left:auto;
    transform:none;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    order:0;
    pointer-events:auto;
  }
  .hero-3d:has(.page-short-slot--hero) .hero-3d-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,42%);
    gap:40px 48px;
    align-items:center;
    min-height:0;
    padding:72px 0 48px;
  }
  .hero-3d:has(.page-short-slot--hero) .hero-3d-copy{
    max-width:none;
    padding:24px 0;
  }
  .hero-3d:has(.page-short-slot--hero[hidden]) .hero-3d-inner{
    min-height:0;
    padding-bottom:48px;
    display:block;
  }
}

/* ---------- 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:8px;
  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; }
.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; }

/* ---------- 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); }

/* Khloud tap targets — padding/min-height only, no font-size change.
   Unscoped so a 390px DevTools / Playwright pass (pointer:fine) still hits 44px. */
.btn-call.btn-sm {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-toggle.btn-sm {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-header a[href^="tel:"],
.site-header a[href^="sms:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a[href*="instagram"],
.site-footer a[href*="google"],
.site-footer a[href*="youtube"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.breadcrumb a,
.breadcrumbs a {
  display: inline-block;
  padding-block: 14px;
}

/* ---------- Sticky CTA bar — every page, mobile-first ---------- */
.mobile-cta-bar{
  display:flex;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  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; }
/* 72px clears the CTA bar; 86px clears the 74px chat launcher + 12px gap. */
body{ padding-bottom:calc(72px + 86px); }

/* ---------- 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; }
}
@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); }
}
@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--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); }
  .yt-gallery--jobs{ grid-template-columns:repeat(4,1fr); }
  .team-card--featured{
    grid-template-columns:280px 1fr;
    align-items:end;
    max-width:none;
    margin:0 0 56px;
  }
  .team-card--featured .team-photo{ max-width:280px; }
  .crew-bleed img{ height:28vw; max-height:420px; }
}
@media (max-width: 760px){
  .grid-3, .grid-4, .grid-2{ grid-template-columns: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; }
}

.hero-3d--alex .hero-3d-figure img,
.hero-3d--albert .hero-3d-figure img{
  transform:none;
  object-position:center 6%;
}
@media (min-width: 1121px){
  .hero-3d--alex .hero-3d-figure img,
  .hero-3d--albert .hero-3d-figure img{ object-position:center 4%; }
}

.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;
}

/* ---------- 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 hand-cut
   process, 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; }
  /* 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:110px; }
}

/* ---------- 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:110px; }
}
@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. */
  .site-header .header-cta > a[href="/contact/"]{ display:none; }
}

/* 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; }
}

/* Same 44px floor as the coarse-pointer block, tied to the phone layout
   breakpoint. A 390×844 desktop-DevTools / Playwright pass is pointer:fine,
   so Call (38px) and Menu (33px) missed the block above. Height only. */
@media (max-width: 1120px){
  .btn.btn-call.btn-sm,
  .nav-toggle{
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
  .topbar a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-top:8px;
    padding-bottom:8px;
  }
  .breadcrumbs a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-top:10px;
    padding-bottom:10px;
    box-sizing:border-box;
  }
  .footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    min-width:44px;
    box-sizing:border-box;
  }
}

/* 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); }
  }
}

/* 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; }
}


.hero-3d--drop-gwagon-out.hero-3d--bay{
  background-image:url("../img/shop-drop-2026-08-20/tint-gwagon-outdoor.jpg");
  background-position:42% 52%;
}

/* Home hero is a stacked banner: full-width Cullinan, then tight copy, then the Short.
   Do not inherit overlay-hero min-height / 100vh / absolute-fill. */
.hero-banner{
  position:relative;
  min-height:0;
  height:auto;
  padding:0;
  background:#000;
  overflow:visible;
}
.hero-banner-photo{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  background:#000;
  line-height:0;
}
.hero-banner-photo picture{
  display:block;
  width:100%;
  line-height:0;
}
.hero-banner-photo img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center top;
  background:#000;
}
/* Tint home Cullinan screenshot has a 74px black pad on the 707px file.
   Box follows the photo (1117×633), not the pad. Same storefront file. */
body.page-home .hero-banner,
body.page-home .hero-banner-photo{
  min-height:0;
  height:auto;
  background:transparent;
}
body.page-home .hero-banner-photo{
  overflow:hidden;
}
body.page-home .hero-banner-photo img{
  width:100%;
  height:auto;
  aspect-ratio:1117 / 633;
  object-fit:cover;
  object-position:center bottom;
  background:transparent;
}
.hero-banner-copy{
  position:relative;
  z-index:1;
  max-width:36rem;
  padding:20px 0 16px;
}
.hero-banner-copy h1{
  font-size:clamp(1.35rem, 3.4vw, 2rem);
  font-weight:600;
  line-height:1.15;
  max-width:18ch;
  margin:0 0 10px;
}
.hero-banner-copy .lead{
  max-width:38ch;
  margin:0;
}
.hero-banner-copy .hero-actions{
  margin-top:16px;
}
@media (min-width: 720px){
  .hero-banner-copy{ padding:24px 0 20px; }
}

/* Indoor unused Cullinan only — it is square, so 1:1 contain is correct. */
.service-card-photo .card-media--square{
  aspect-ratio:1;
  height:auto;
  background:#000;
}
.service-card-photo .card-media--square img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* Landscape / portrait singles: box follows the image. No invented square. */
.service-card-photo .card-media--fit{
  aspect-ratio:auto;
  height:auto;
  background:#000;
}
.service-card-photo .card-media--fit img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Before / after: two whole photos side by side. Pair hugs the landscape shots. */
.card-ba{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  padding:0;
  aspect-ratio:auto;
  background:#000;
}
.card-ba-shot{
  position:relative;
  margin:0;
  min-width:0;
  aspect-ratio:auto;
  background:#000;
  overflow:hidden;
}
.card-ba-shot img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.card-ba-shot figcaption{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:1;
  margin:0;
  padding:3px 8px;
  font-family:var(--font-body);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.62);
}
@media (max-width: 760px){
  .card-ba{ gap:2px; }
}