/* ============================================================
   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;
  --gold:          #C6A15B;
  --chrome:        #C5CAD0;
  --hairline:      rgba(197, 202, 208, 0.28);
  --cta-rgb:       198, 161, 91;

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

  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --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);
  box-shadow:0 10px 30px rgba(var(--cta-rgb), .35);
}
.btn-cta:hover{ background:var(--cta-hover); box-shadow:0 14px 36px rgba(var(--cta-rgb), .5); }
.btn-outline{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-call{
  background:#2ea44f;
  color:#06140a;
  box-shadow:0 8px 22px rgba(46,164,79,.28);
}
.btn-call:hover{ box-shadow:0 12px 28px rgba(46,164,79,.4); }
.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:42px; height:42px; flex:none; }

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);
  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(--gold);
  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(--gold);
}
.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(--gold);
  margin:0 0 16px;
}
.warranty-callout{
  margin-top:22px;
  padding:12px 16px;
  border-left:3px solid var(--gold);
  color:var(--text-dim);
  font-size:.92rem;
}
.placeholder-flag{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
  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(--gold);
}
.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(--gold);
}
.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--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--home,
.hero-3d--girl-right{
  background-image:url("../img/hero/hub-hero-bg.jpg");
  background-position:48% 42%;
}

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

.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(--gold);
  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:0 16px 32px rgba(0,0,0,.45);
}
.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(--gold);
}
.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(--gold);
  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; }

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

.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); box-shadow:var(--shadow); }
.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; }
.service-card .tag{
  position:absolute; top:20px; right:20px;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); 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; }

.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(--gold); 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(--gold);
}

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