/* ============================================================
   REAL MEDIA — video and photo backgrounds.
   Loaded last so it overrides the old vector-art rules.
   ============================================================ */

/* ---------- background video / photo ---------- */
.bgv,.bgi,.bgv-fallback{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.bgv{z-index:1}
.bgi{z-index:1;opacity:.62}
/* the still frame only shows when the video is not being used */
.bgv-fallback{z-index:0;opacity:.62}

/* On phones, don't burn mobile data on a background video —
   show the poster still instead. Opt in with video_on_mobile: true. */
@media (max-width:820px){
  [data-desktop-video] .bgv{display:none}
  [data-desktop-video] .bgv-fallback{z-index:1;opacity:.62}
}
/* Same for anyone who asked for less motion. */
@media (prefers-reduced-motion:reduce){
  .bgv{display:none}
  .bgv-fallback{z-index:1;opacity:.62}
}

/* ============================================================
   THE SPLASH — real footage, or a lit studio when empty
   ============================================================ */
.splash-media{position:absolute;inset:0;overflow:hidden;z-index:0}
.splash-media .bgv,.splash-media .bgv-fallback,.splash-media .bgi{
  opacity:.55;transform:scale(1.04);
  animation:splashPush 14s ease-out both;
}
@keyframes splashPush{from{transform:scale(1.12)}to{transform:scale(1.02)}}

/* With nothing loaded, paint a dark studio: floor, falloff, vignette.
   No cars, no illustration — just light. */
.splash-media.bare{
  background:
    radial-gradient(120% 70% at 50% 0%,   rgba(201,162,75,.10), transparent 62%),
    radial-gradient(90% 55% at 50% 108%,  rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg,#08080b 0%,#0b0b10 46%,#050507 100%);
}
.splash-media.bare::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:26%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

/* darkening veil so the type always reads over footage */
.splash-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 20%, rgba(0,0,0,.62) 78%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.30) 40%, rgba(0,0,0,.86));
}

/* three slow overhead light shafts — ambience, not illustration */
.beams{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.beams i{
  position:absolute;top:-30%;width:26%;height:150%;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, transparent 76%);
  filter:blur(26px);transform-origin:top center;
  animation:beamBreathe 9s ease-in-out infinite alternate;
}
.beams i:nth-child(1){left:6%;  transform:rotate(9deg)}
.beams i:nth-child(2){left:39%; transform:rotate(-3deg); animation-delay:-3s}
.beams i:nth-child(3){left:71%; transform:rotate(-11deg);animation-delay:-6s}
@keyframes beamBreathe{from{opacity:.5}to{opacity:.95}}

/* ---------- splash type ---------- */
#splash{display:grid;place-items:center;padding:40px 20px;overflow-y:auto}
.splash-ui{
  position:relative;z-index:6;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
/* SKIP now sits in the flow under ENTER. It used to be absolutely
   positioned, which made it land on top of the button on short screens. */
#skip{
  position:static;transform:none;margin-top:20px;
  background:none;border:0;color:var(--dimmer);cursor:pointer;
  font:600 .64rem/1 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 12px;
}
#skip:hover{color:#fff}

/* ============================================================
   THE HERO — same treatment
   ============================================================ */
.hero-bg .bgv,.hero-bg .bgv-fallback,.hero-bg .bgi{opacity:.30}
.hero-bg{animation:none}                    /* the drift belongs to the video now */
.hero-bg .bgv{animation:heroDrift 30s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.03)}to{transform:scale(1.10)}}

/* ============================================================
   PHOTO PLACEHOLDERS — honest, and clearly not artwork
   ============================================================ */
.svc article .empty-note,
.work .ph,
.star-shots div,
.gal .ph{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 12px, transparent 12px 24px),
    #0c0c11;
}

/* ============================================================
   RETIRE THE VECTOR SHOWROOM
   Kept as dead rules would only invite drift, so the elements
   themselves are gone from the markup. These guards stop any
   stale copy of the old CSS from re-introducing cartoon art.
   ============================================================ */
.stage,.bay,.bay .car,.bay .glow,.bay .beam{display:none!important}


/* ============================================================
   HEADER / FOOTER LOGO MARK
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .roundel{width:34px;height:34px;margin:0;flex:none}
.foot .brand{display:flex}
.foot .brand .roundel{width:40px;height:40px}
@media (max-width:680px){
  .brand .roundel{width:28px;height:28px}
  .brand{gap:9px;font-size:.86rem;letter-spacing:.18em}
}

/* ============================================================
   HERO LEGIBILITY
   A bright showroom photo washes the headline out. Darken the
   plate the type sits on rather than dimming the type.
   ============================================================ */
.hero::after{
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.30) 0%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,.80), rgba(0,0,0,.42) 30%, rgba(0,0,0,.55) 66%, #050507 99%);
}
.hero-inner .display{text-shadow:0 2px 40px rgba(0,0,0,.55)}
.hero-sub{color:rgba(255,255,255,.85)}


/* ============================================================
   HEADER READABILITY
   The header is transparent at the top of the page and only goes
   solid once JS adds .solid on scroll. If JS never runs, it would
   stay transparent over the bright services band — light grey nav
   on near-white. Guard it the same way the reveals are guarded.
   ============================================================ */
html:not(.js) #hdr{
  background:rgba(5,5,7,.92);
  border-bottom-color:var(--hair);
}
/* A faint scrim under the header keeps the links legible during the
   moment between scrolling and .solid being applied. */
#hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}