/* ============================================================
   CINEMATIC THEME
   Dark, showroom-lit, luxury-studio look.
   Reference: the "3D website" agency reel — ENTER splash,
   spotlit stage, then a bright white services section for contrast.
   ============================================================ */
:root{
  --bg:      #050507;
  --bg-2:    #0b0b0f;
  --stage:   #08080b;
  --light:   #f4f4f5;   /* the bright services section */
  --text:    #ffffff;
  --dim:     rgba(255,255,255,.55);
  --dimmer:  rgba(255,255,255,.32);
  --hair:    rgba(255,255,255,.13);
  --accent:  #c9a24b;   /* Hillside gold — change this one line to rebrand */
  --accent-2:#e8cf95;   /* light gold, for gradients and rules */
  --gold-dim:rgba(201,162,75,.34);
  --wrap: 1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font:400 16px/1.7 Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x:hidden;
}
/* The logo and headings use a serif to match the printed brand. */
.brand,.display,.sec-head h2,.splash-ui h1,.tier h3,.amt{
  font-family:Cinzel, "Times New Roman", Georgia, serif;
}
body.locked{overflow:hidden}
/* No JS means no way to dismiss the splash — so don't show it at all. */
html:not(.js) #splash{display:none}
html:not(.js) body.locked{overflow:auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* Wide-tracked uppercase is what carries the "studio" feel. */
.kicker{
  font-size:.7rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--dimmer);
}
.display{
  font-weight:800;line-height:1.04;letter-spacing:-.03em;
  font-size:clamp(2.2rem,6.4vw,5rem);text-transform:uppercase;
}
.rule{width:54px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin:22px 0}
.center .rule{margin-inline:auto}
.center{text-align:center}

/* ============================================================
   1 — ENTER SPLASH
   ============================================================ */
#splash{
  position:fixed;inset:0;z-index:200;background:var(--stage);
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .9s ease, visibility .9s;
}
#splash.gone{opacity:0;visibility:hidden}

/* The showroom floor is anchored to the BOTTOM OF THE STAGE, not the
   viewport, so the cars always stand on it at any screen height. */
.stage::after{
  content:"";position:absolute;top:100%;left:-50vw;right:-50vw;height:70vh;z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 55%),
    linear-gradient(180deg, #101014, #050507);
  border-top:1px solid rgba(255,255,255,.11);
}

.stage{
  position:relative;z-index:2;width:100%;max-width:1120px;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end;
  margin-bottom:3vh;
}
.bay{position:relative;aspect-ratio:3/4;display:grid;place-items:end center}
/* the light cone falling from above */
.bay::before{
  content:"";position:absolute;top:-6%;left:50%;transform:translateX(-50%);
  width:150%;height:112%;
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.045) 46%, transparent 78%);
  clip-path:polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  filter:blur(7px);
  animation:flicker 6s ease-in-out infinite;
}
.bay:nth-child(2)::before{animation-delay:-1.6s}
.bay:nth-child(3)::before{animation-delay:-3.1s}
.bay:nth-child(4)::before{animation-delay:-4.4s}
@keyframes flicker{0%,100%{opacity:.85}50%{opacity:1}}

.bay .car{
  position:relative;z-index:2;width:100%;height:72%;border-radius:8px;
  overflow:hidden;background:#101014;border:1px solid rgba(255,255,255,.07);
}
.bay .car img{width:100%;height:100%;object-fit:cover;opacity:.9}
.bay .car.empty{
  display:grid;place-items:center;color:rgba(255,255,255,.18);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;text-align:center;padding:10px;
}
/* pool of light on the floor under each bay */
.bay .glow{
  position:absolute;bottom:-4%;left:50%;transform:translateX(-50%);
  width:118%;height:26%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.28), transparent 70%);
  filter:blur(11px);
}

.splash-ui{position:relative;z-index:3;text-align:center}
.splash-ui h1{
  font-size:clamp(1.9rem,5.2vw,3.4rem);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
}
.splash-ui h1 em{font-style:normal;color:var(--accent)}
.splash-ui .kicker{margin-top:12px}
#enter{
  margin-top:30px;background:none;border:1px solid rgba(255,255,255,.42);
  color:#fff;font:700 .82rem/1 Manrope,sans-serif;letter-spacing:.4em;
  text-transform:uppercase;padding:19px 52px;border-radius:2px;cursor:pointer;
  transition:.3s ease;position:relative;overflow:hidden;
}
#enter:hover{background:var(--accent);border-color:var(--accent);letter-spacing:.5em}
#skip{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  background:none;border:0;color:var(--dimmer);cursor:pointer;
  font:600 .66rem/1 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase;
}
#skip:hover{color:#fff}

/* ============================================================
   2 — HEADER
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
header.solid{background:rgba(5,5,7,.9);backdrop-filter:blur(16px);border-bottom-color:var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:1rem;color:var(--accent-2)}
.brand em{font-style:normal;color:var(--accent)}
.nav-links{display:flex;gap:38px}
.nav-links a{
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);transition:color .2s;
}
.nav-links a:hover{color:#fff}
.nav-cta{
  border:1px solid rgba(255,255,255,.35);padding:13px 26px;border-radius:2px;
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  transition:.25s ease;
}
.nav-cta:hover{background:var(--accent);border-color:var(--accent)}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}

/* ============================================================
   3 — HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;overflow:hidden;background:#000;
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-bg.empty{
  background:
    radial-gradient(900px 470px at 50% 32%, rgba(201,162,75,.13), transparent 66%),
    radial-gradient(620px 420px at 80% 74%, rgba(201,162,75,.20), transparent 70%),
    linear-gradient(180deg,#0a0c12,#000);
}
/* vignette — the single biggest contributor to the cinematic feel */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 26%, transparent 62%, #050507 99%);
}
.hero-inner{position:relative;z-index:2;padding:0 26px;max-width:960px}
.hero-inner .display{margin:20px 0 0}
.hero-sub{
  margin-top:26px;color:rgba(255,255,255,.72);font-size:1.02rem;max-width:56ch;
  margin-inline:auto;
}
.hero-tag{
  margin-top:30px;display:inline-block;border:1px solid var(--hair);
  padding:11px 26px;font-size:.64rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dim);
}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 38px;border-radius:2px;cursor:pointer;transition:.25s ease;
  font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.btn-solid{background:linear-gradient(120deg,#b8913f,var(--accent) 45%,var(--accent-2));color:#141005}
.btn-solid:hover{background:#fff;color:#000}
.btn-line:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.btn-line:hover{background:#fff;color:#000;border-color:#fff}
.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer);
}
.scroll-cue span{display:block;width:1px;height:44px;background:linear-gradient(var(--dimmer),transparent);margin:12px auto 0}

/* ============================================================
   4 — SECTIONS
   ============================================================ */
section{padding:120px 0;position:relative}
.sec-head{margin-bottom:64px}
.sec-head h2{font-weight:800;font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.02em;text-transform:uppercase}
.sec-head p{color:var(--dim);max-width:62ch;margin-top:16px}
.center .sec-head p{margin-inline:auto}

/* --- the bright services band (the reference's key contrast move) --- */
.light{background:var(--light);color:#0a0a0c}
.light .kicker{color:rgba(0,0,0,.42)}
.light .sec-head p{color:rgba(0,0,0,.58)}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.svc article{
  position:relative;aspect-ratio:3/4.3;border-radius:3px;overflow:hidden;
  background:#0e0e12;display:flex;align-items:flex-end;
}
.svc article img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;opacity:.82}
.svc article:hover img{transform:scale(1.07)}
.svc article::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.86));
}
.svc .label{
  position:relative;z-index:2;padding:26px 20px;color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.55;
}
.svc .label b{display:block;color:var(--accent);font-size:.6rem;letter-spacing:.24em;margin-bottom:8px}
.svc .empty-note{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:rgba(255,255,255,.2);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;padding:16px;
}

/* --- pricing --- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.tier{background:var(--bg-2);padding:46px 34px;display:flex;flex-direction:column;transition:background .3s}
.tier:hover{background:#101017}
.tier.hot{background:linear-gradient(180deg,rgba(201,162,75,.13),var(--bg-2));border:1px solid var(--gold-dim)}
.tier .tag{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;min-height:1em}
.tier h3{font-size:1.15rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.tier .amt{font-size:2.9rem;font-weight:800;letter-spacing:-.03em;margin:18px 0 2px}
.tier .amt small{font-size:.62rem;font-weight:600;letter-spacing:.2em;color:var(--dimmer);text-transform:uppercase}
.tier .blurb{color:var(--dim);font-size:.92rem;margin-top:10px}
.tier ul{list-style:none;margin:28px 0 34px;display:grid;gap:12px;border-top:1px solid var(--hair);padding-top:26px}
.tier li{font-size:.88rem;color:var(--dim);padding-left:20px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:1px;background:var(--accent)}
.tier .btn{margin-top:auto;width:100%}

/* --- gallery --- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.work figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0d0d11;margin:0;border:1px solid var(--hair)}
.work figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;opacity:.88}
.work figure:hover img{transform:scale(1.06);opacity:1}
.work .ph{display:grid;place-items:center;color:rgba(255,255,255,.16);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:14px}

/* --- reviews --- */
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.say{background:var(--bg-2);padding:40px 32px}
.say .st{color:var(--accent);letter-spacing:4px;font-size:.8rem}
.say p{margin-top:18px;color:rgba(255,255,255,.86);font-size:.98rem;line-height:1.75}
.say .by{margin-top:20px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer)}

/* --- area --- */
.zones{display:flex;flex-wrap:wrap;gap:0;justify-content:center;border-top:1px solid var(--hair)}
.zones span{
  padding:22px 34px;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);flex:1 1 auto;text-align:center;
}
.zones span:first-child{border-left:1px solid var(--hair)}

/* --- booking --- */
.book{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.lines{margin-top:38px;border-top:1px solid var(--hair)}
.line{display:block;padding:24px 0;border-bottom:1px solid var(--hair);transition:padding-left .3s}
.line:hover{padding-left:12px}
.line small{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer);margin-bottom:7px}
.line b{font-size:1.12rem;font-weight:700}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);margin-bottom:9px}
input,select,textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);
  color:#fff;padding:13px 0;font:inherit;font-size:.98rem;transition:border-color .25s;border-radius:0;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.22)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--accent)}
select{color:#fff}
select option{background:#0b0b0f;color:#fff}
textarea{resize:vertical;min-height:88px}
form .btn{margin-top:12px}
.fineprint{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);text-align:center}

/* --- footer --- */
footer{border-top:1px solid var(--hair);padding:60px 0 130px}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.foot .brand{margin-bottom:14px}
.foot p{font-size:.74rem;color:var(--dimmer);letter-spacing:.06em}
.foot nav{display:flex;gap:26px}
.foot nav a{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.foot nav a:hover{color:#fff}

/* --- mobile call bar --- */
.callbar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  flex:1;text-align:center;padding:19px 8px;background:#08080b;
  font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.callbar a.hot{background:var(--accent)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Reveals hide content, so they must only apply when JS can un-hide it.
   Without JS the page renders complete and static instead of blank. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .svc{grid-template-columns:repeat(2,1fr)}
  .tiers,.says{grid-template-columns:1fr}
  .book{grid-template-columns:1fr;gap:48px}
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;gap:0;position:absolute;top:78px;left:0;right:0;
    background:rgba(5,5,7,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair);padding:12px 0;
  }
  .nav-links.open a{padding:17px 26px;font-size:.74rem}
}
@media (max-width:680px){
  section{padding:78px 0}
  .work{grid-template-columns:1fr 1fr}
  .f2{grid-template-columns:1fr}
  .stage{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:4vh}
  .stage .bay:nth-child(n+3){display:none}
  .callbar{display:flex}
  footer{padding-bottom:130px}
  .zones span{flex:1 1 42%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- vector car artwork inside a bay ---------- */
.bay .car.art{
  background:none;border:0;display:grid;place-items:end center;height:auto;
}
.bay .car.art svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}

/* ---------- hero stat row ---------- */
.hero-stats{
  display:flex;gap:52px;justify-content:center;flex-wrap:wrap;
  margin-top:52px;padding-top:30px;border-top:1px solid var(--hair);
}
.hero-stats div{text-align:center}
.hero-stats b{
  display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1;
}
.hero-stats span{
  display:block;margin-top:9px;font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);
}
@media (max-width:680px){
  .hero-stats{gap:26px;margin-top:38px}
  .hero-stats b{font-size:1.4rem}
}