/* =========================================================
   THE HILLS LUX CLUB — Digital Media Hologram landing
   Gold-glass holographic dashboard over a dark vignette.
   Inspired by the "Digital Media Hologram" opener style.
   ========================================================= */

:root {
  --bg:      #0a0b0d;
  --bg-2:    #111418;
  --ink:     #eef1f4;
  --muted:   #9aa3ad;
  --faint:   #5d646d;

  --gold:    #c9a45c;
  --gold-2:  #e7cf94;
  --glass:   rgba(220,230,240,0.06);
  --glass-2: rgba(220,230,240,0.10);
  --edge:    rgba(220,232,245,0.22);
  --edge-hot:rgba(231,207,148,0.55);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
  --pad:  clamp(1.4rem, 5vw, 5rem);
  --maxw: 1500px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #000; }

/* Keyboard focus — elegant gold ring, mouse users unaffected */
:focus-visible {
  outline: 1px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 1px;
}
.field input:focus-visible,
.btn:focus-visible {
  outline-offset: 4px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 1px var(--bg), 0 0 22px -4px rgba(231,207,148,0.55);
}
.ital { font-family: var(--serif); font-style: italic; color: var(--gold-2); }

.section-label {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold);
}

/* ---------- ambient background layers ---------- */
.bg-figure {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 60% at 50% 42%, rgba(150,160,175,0.16), transparent 70%),
    radial-gradient(80% 80% at 50% 120%, rgba(201,164,92,0.10), transparent 60%);
  filter: blur(8px);
}
.bg-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 108% at 50% 35%, transparent 38%, rgba(0,0,0,0.34) 78%, rgba(0,0,0,0.78) 100%);
}
.bg-grid {
  position: fixed; inset: -10%; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(220,232,245,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,232,245,0.04) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(70% 65% at 50% 42%, #000, transparent 78%);
}
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.32;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
}
/* signature touch: the ambient gold light slowly breathes & drifts (desktop only) */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .bg-figure { animation: auroraDrift 26s ease-in-out infinite alternate; }
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, -1.5%, 0) scale(1.04); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.10); }
  100% { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.4rem var(--pad);
}
.brand { display: flex; flex-direction: column; gap: 0.25rem; justify-self: start; }
.brand__mark { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.32em; padding-left: 0.32em; }
.brand__tag { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.menu { display: flex; gap: clamp(1.2rem, 2.6vw, 2.6rem); justify-self: center; }
.menu a {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); position: relative; transition: color 0.3s var(--ease);
}
.menu a::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background: var(--gold); transition: width 0.4s var(--ease); }
.menu a:hover { color: var(--ink); }
.menu a:hover::after { width: 100%; }
.status { justify-self: end; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: #6fe39a; box-shadow: 0 0 10px #6fe39a; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

.mast-right { justify-self: end; display: flex; align-items: center; gap: 1.3rem; }
.member { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.member b { color: var(--gold-2); font-weight: 400; }
.member a { color: var(--muted); border-bottom: 1px solid transparent; transition: all 0.3s var(--ease); }
.member a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
@media (max-width: 880px) { .member { display: none; } }

/* =========================================================
   GATE / ENTRY
   ========================================================= */
body.is-gated { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 2rem var(--pad);
  background: radial-gradient(120% 90% at 50% 28%, rgba(12,14,17,0.92), rgba(4,5,6,0.985));
  transition: opacity 0.9s var(--ease), transform 1.1s var(--ease-io), filter 0.9s var(--ease);
  will-change: opacity, transform;
}
.gate.is-gone { opacity: 0; transform: scale(1.07); filter: blur(18px); pointer-events: none; }
.gate__inner { width: min(540px, 100%); text-align: center; animation: fadeUp 1s var(--ease) 0.1s both; }
.gate__boot { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.22em; color: var(--gold); opacity: 0.75; margin-bottom: 0.9rem; }
.gate__eyebrow { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); }
.gate__title { font-family: var(--serif); font-weight: 600; line-height: 0.92; letter-spacing: 0.16em; font-size: clamp(2.3rem, 7vw, 4.4rem); margin: 1.1rem 0 0; padding-left: 0.16em; }
.gate__title span { display: block; font-weight: 500; letter-spacing: 0.34em; font-size: 0.46em; color: var(--gold-2); margin-top: 0.5rem; padding-left: 0.34em; }
.gate__lede { color: var(--muted); margin: 1.1rem auto 0; max-width: 40ch; font-size: 0.96rem; }
.gate__form { margin-top: clamp(1.8rem, 5vh, 2.8rem); display: grid; gap: 1.25rem; text-align: left; border: 1px solid var(--edge); background: rgba(20,24,30,0.66); padding: clamp(1.4rem, 4vw, 2.3rem); box-shadow: 0 30px 90px rgba(0,0,0,0.5), inset 0 0 50px rgba(150,170,200,0.04); }
.gate__btn { margin-top: 0.4rem; }
.gate__error { color: #e98a8a; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; margin: -0.4rem 0 0; }
.gate__fine { color: var(--faint); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; text-align: center; }
/* date field keeps its label raised (native date inputs aren't "empty") */
.field--date label { top: 0; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); }
.gate input[type="date"] { color-scheme: dark; font-family: var(--mono); letter-spacing: 0.06em; }
.gate input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(2) hue-rotate(5deg); cursor: pointer; }

/* =========================================================
   HERO / STAGE
   ========================================================= */
.hero {
  position: relative; z-index: 5;
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7rem var(--pad) 3rem; text-align: center;
}
.hero__brand {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.35rem, 3.2vw, 2.3rem); letter-spacing: 0.3em; padding-left: 0.3em;
  color: var(--ink); margin-bottom: 0.85rem;
  opacity: 0; animation: fadeUp 1s var(--ease) 0.1s forwards;
}
.hero__eyebrow {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: clamp(1.5rem, 4vh, 3rem);
  opacity: 0; animation: fadeUp 1s var(--ease) 0.28s forwards;
}

/* perspective rig */
.stage {
  position: relative; width: 100%; max-width: 1380px;
  display: grid; grid-template-columns: minmax(190px, 0.78fr) 1.7fr minmax(150px, 0.64fr);
  align-items: center; gap: clamp(1rem, 3vw, 3rem);
  perspective: 1400px; outline: none;
  animation: rigFloat 10s ease-in-out infinite alternate;
}
@keyframes rigFloat {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -10px, 0); }
}

/* materialize-in (whole rig) */
.stage > * { opacity: 0; }
.is-ready .rail--left  { animation: railInL 1.1s var(--ease) 0.35s forwards; }
.is-ready .screen      { animation: screenIn 1.2s var(--ease-io) 0.15s forwards; }
@keyframes screenIn { from { opacity:0; transform: translateZ(-260px) scale(0.9); filter: blur(14px); } to { opacity:1; transform: translateZ(90px) scale(1); filter: blur(0);} }
@keyframes railInL  { from { opacity:0; transform: rotateY(52deg) translateX(-40px);} to { opacity:0.97; transform: rotateY(34deg) translateZ(-30px) translateX(0);} }

/* ---------- LEFT RAIL ---------- */
.rail--left {
  transform: rotateY(34deg) translateZ(-30px); transform-origin: right center;
  display: flex; flex-direction: column; gap: 0.5rem; text-align: left;
}
.rail__head, .rail__hint {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint);
  padding-left: 0.4rem;
}
.rail__hint { margin-top: 0.4rem; opacity: 0.7; }
.rail__list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.rail__item {
  display: grid; grid-template-columns: 38px 1fr; gap: 0.7rem; align-items: center;
  padding: 0.55rem 0.7rem; cursor: pointer; position: relative;
  border: 1px solid transparent; border-left: 2px solid rgba(220,232,245,0.12);
  background: linear-gradient(90deg, rgba(34,40,48,0.55), rgba(34,40,48,0.10));
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rail__item:hover { background: linear-gradient(90deg, rgba(220,232,245,0.10), transparent); border-left-color: var(--gold); }
.rail__thumb { width: 38px; height: 30px; object-fit: cover; filter: grayscale(0.4) brightness(0.85) contrast(1.05); border: 1px solid var(--edge); }
.rail__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail__name { font-family: var(--sans); font-weight: 400; font-size: 0.86rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__sub { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__item.is-active {
  background: linear-gradient(90deg, rgba(231,207,148,0.20), rgba(231,207,148,0.02));
  border-color: var(--edge-hot); border-left-color: var(--gold-2);
  box-shadow: 0 0 24px rgba(231,207,148,0.18);
}
.rail__item.is-active .rail__thumb { filter: none; }
.rail__item.is-active .rail__name { color: var(--gold-2); }

/* ---------- CENTER SCREEN ---------- */
.screen {
  position: relative; aspect-ratio: 16 / 10; transform: translateZ(90px);
  border: 1px solid var(--edge);
  background: #0c0e12;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 40px 120px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(150,170,200,0.06);
  overflow: hidden;
  will-change: transform; backface-visibility: hidden;
}
.screen__glow { position: absolute; inset: -2px; pointer-events: none; box-shadow: inset 0 0 40px rgba(231,207,148,0.10); }
.screen__media { position: absolute; inset: 0; overflow: hidden; }
.screen__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: brightness(0.9) contrast(1.06) saturate(1.05);
  transition: opacity 0.5s var(--ease), transform 6s var(--ease);
  transform: scale(1.06);
}
.screen.is-swapping .screen__media img { opacity: 0; }
/* Exotic Cars slide: warm the cyan hologram render to brand gold + center the car */
/* Holographic stage background — on every slide */
.holo-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
/* CARS ONLY: the transparent car cutout stands on the holographic platform, base dissolving into the glow.
   Every other service slide is a full-frame photo and uses the default full-bleed .screen__media img rule above. */
#screen[data-service="cars"] .screen__media img,
#screen[data-service="jets"] .screen__media img,
#screen[data-service="jetski"] .screen__media img {
  position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%);
  width: auto; height: auto; max-width: 70%; max-height: 58%; object-fit: contain; object-position: center bottom;
  filter: brightness(1.02) contrast(1.05) drop-shadow(0 14px 22px rgba(0,0,0,0.5));
  -webkit-mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 94%, transparent 100%);
}
/* vehicle slides: lighter bottom gradient so text stays readable without burying the platform glow */
#screen[data-service="cars"] .screen__media::after,
#screen[data-service="jets"] .screen__media::after,
#screen[data-service="jetski"] .screen__media::after {
  background:
    linear-gradient(to top, rgba(8,9,11,0.9) 0%, rgba(8,9,11,0.25) 26%, transparent 48%),
    repeating-linear-gradient(to bottom, rgba(180,200,230,0.04) 0 2px, transparent 2px 4px);
}
.screen__media::after { /* media tint + scan */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,9,11,0.92) 2%, rgba(8,9,11,0.15) 38%, transparent 60%),
    repeating-linear-gradient(to bottom, rgba(180,200,230,0.05) 0 2px, transparent 2px 4px);
}
.screen__sweep {
  position: absolute; top: 0; left: -30%; width: 30%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(231,207,148,0.18), transparent);
  opacity: 0;
}
.screen.is-swapping .screen__sweep { animation: sweep 0.7s var(--ease-io); }
@keyframes sweep { from { left:-30%; opacity:1;} to { left:110%; opacity:0;} }

/* corner ticks */
.screen__frame { position: absolute; inset: 10px; pointer-events: none; }
.tick { position: absolute; width: 16px; height: 16px; border: 1px solid var(--edge-hot); }
.tick--tl { top:0; left:0; border-right:0; border-bottom:0; }
.tick--tr { top:0; right:0; border-left:0; border-bottom:0; }
.tick--bl { bottom:0; left:0; border-right:0; border-top:0; }
.tick--br { bottom:0; right:0; border-left:0; border-top:0; }

.screen__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(0.9rem,2vw,1.6rem); pointer-events: none; }
.screen__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em; color: var(--muted); }
.screen__live { color: #e76d6d; letter-spacing: 0.18em; }
.screen__hud { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.16em; color: rgba(231,207,148,0.5); white-space: nowrap; overflow: hidden; }
@media (max-width: 560px) { .screen__hud { display: none; } }
.screen__info { margin-top: auto; text-align: left; }
.screen__caption { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-2); }
.screen__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; margin: 0.3rem 0 0.4rem; }
.screen__desc { font-size: clamp(0.85rem, 1.2vw, 1rem); color: var(--muted); max-width: 42ch; }
/* "See more options" → per-service detail page (shown on every slide) */
.screen__more {
  pointer-events: auto; align-self: flex-start; margin-top: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-2); border: 1px solid var(--edge-hot); padding: 0.55rem 1rem;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.screen__more:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.screen__more span { transition: transform 0.35s var(--ease); }
.screen__more:hover span { transform: translateX(3px); }
.screen__examples { display: flex; gap: 0.5rem; margin-top: 1rem; pointer-events: auto; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.screen__examples::-webkit-scrollbar { height: 5px; }
.screen__examples::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }
.screen__examples img {
  width: clamp(48px, 6vw, 78px); aspect-ratio: 4/3; object-fit: cover; cursor: pointer;
  border: 1px solid var(--edge); filter: grayscale(0.3) brightness(0.85);
  transition: filter 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.screen__examples img:hover { filter: none; border-color: var(--gold-2); transform: translateY(-3px); }

/* ---- Exotic Cars fleet picker ---- */
.screen__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.1rem; margin-top: 0.5rem; }
.screen__meta[hidden] { display: none; }   /* author rule must beat .screen__meta's display:flex */
.screen__meta .car-name { flex-basis: 100%; font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.95rem); line-height: 1; color: var(--gold-2); margin-bottom: 0.1rem; }
.screen__meta .spec { display: flex; gap: 0.35rem; align-items: baseline; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.screen__meta .spec b { font-family: var(--serif); font-weight: 600; font-size: 0.98rem; letter-spacing: 0; text-transform: none; color: var(--gold-2); }
.screen__meta .meta-actions { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.screen__meta .rate { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--edge-hot); padding: 0.32rem 0.7rem; white-space: nowrap; text-align: center; }
.screen__meta .see-more { pointer-events: auto; cursor: pointer; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--edge-hot); padding: 0.32rem 0.7rem; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.screen__meta .see-more:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.screen__meta .meta-soon { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--muted); }

.screen__examples .fleet-thumb { all: unset; flex: 0 0 auto; cursor: pointer; box-sizing: border-box; width: clamp(60px, 7vw, 92px); aspect-ratio: 4 / 3; border: 1px solid var(--edge); overflow: hidden; position: relative; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.screen__examples .fleet-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) brightness(0.82); transition: filter 0.3s var(--ease); }
.screen__examples .fleet-thumb:hover { transform: translateY(-3px); }
.screen__examples .fleet-thumb.is-active { border-color: var(--gold-2); box-shadow: 0 0 16px rgba(231,207,148,0.25); }
.screen__examples .fleet-thumb.is-active img { filter: none; }
.screen__examples .fleet-thumb span { position: absolute; bottom: 0; left: 0; right: 0; font-family: var(--mono); font-size: 0.44rem; letter-spacing: 0.06em; text-transform: uppercase; color: #1a160d; background: linear-gradient(transparent, rgba(231,207,148,0.9)); padding: 3px 2px; text-align: center; opacity: 0; transition: opacity 0.3s var(--ease); }
.screen__examples .fleet-thumb:hover span, .screen__examples .fleet-thumb.is-active span { opacity: 1; }
/* spec-only card (no photo yet) */
.screen__examples .fleet-thumb.is-card { display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; background: linear-gradient(180deg, rgba(34,40,48,0.6), rgba(34,40,48,0.18)); }
.screen__examples .fleet-thumb.is-card span { position: static; background: none; opacity: 1; color: var(--muted); font-size: 0.42rem; line-height: 1.25; letter-spacing: 0.04em; }
.screen__examples .fleet-thumb.is-card.is-active span { color: var(--gold-2); }

/* black-backdrop showcase when a car has no photo yet */
.screen.is-nophoto .screen__media img { display: none; }
.screen.is-nophoto .screen__media::before {
  content: "Awaiting photography"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(231,207,148,0.18);
}

/* ---------- RIGHT: rotating holographic wordmark ---------- */
.holo-name {
  align-self: stretch; min-height: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; position: relative;
  opacity: 1; /* exempt from the .stage > * { opacity:0 } entrance gate */
  pointer-events: none; /* decorative — never intercept clicks */
  overflow: hidden; /* keep the spin contained in its column */
}
.holo-name__viewport { perspective: 760px; perspective-origin: 50% 50%; }
.holo-name__spinner {
  transform-style: preserve-3d; text-align: center;
  animation: holoSpin 16s linear infinite;
  will-change: transform;
}
@keyframes holoSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.holo-word { position: relative; transform-style: preserve-3d; margin: 0.03em 0; }
.holo-word span {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2rem, 3vw, 3.1rem); letter-spacing: 0.06em; line-height: 1.04;
  white-space: nowrap; color: rgba(120,95,45,0.85);
}
.holo-sizer { display: block; visibility: hidden; }      /* sets box size only */
.holo-layer { position: absolute; top: 0; left: 0; right: 0; }
.holo-word span.holo-face {
  color: var(--gold-2);
  text-shadow: 0 0 10px rgba(231,207,148,0.6), 0 0 28px rgba(231,207,148,0.32);
}
/* faint light column behind the spinner */
.holo-name__viewport::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 50% 50%, rgba(231,207,148,0.10), transparent 70%);
  filter: blur(8px);
}
.holo-name__base {
  width: 70%; height: 16px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(231,207,148,0.5), transparent 70%);
  filter: blur(5px); opacity: 0.6;
  animation: holoPulse 3.2s ease-in-out infinite;
}
@keyframes holoPulse { 0%,100% { opacity: 0.4; transform: scaleX(0.9);} 50% { opacity: 0.7; transform: scaleX(1.05);} }

.hero__scrollcue { margin-top: clamp(1.5rem, 4vh, 3rem); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); opacity: 0; animation: fadeUp 1s var(--ease) 1.4s forwards; }

@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none;} }

/* =========================================================
   THE HOUSE / CONTACT / FOOTER  (dark)
   ========================================================= */
.house { position: relative; z-index: 5; max-width: var(--maxw); margin: 0 auto; padding: clamp(6rem,14vw,12rem) var(--pad); }
.house__line { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem,4.6vw,3.6rem); line-height: 1.16; max-width: 22ch; margin-top: 1.6rem; }
.house__line em { font-style: italic; color: var(--gold-2); }
.house__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); margin-top: clamp(2.5rem,6vw,5rem); max-width: 920px; margin-left: auto; }
.house__cols p { color: var(--muted); font-size: 1.02rem; }
@media (max-width: 720px) { .house__cols { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.how { position: relative; z-index: 5; max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,9vw,7rem) var(--pad); }
.how__head { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem,5vw,3.4rem); margin: 0.6rem 0 clamp(2rem,4vw,3.4rem); }
.how__head em { font-style: italic; color: var(--gold-2); }
.how__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2.6rem); }
.how__step { border-top: 1px solid var(--edge-hot); padding-top: 1.2rem; }
.how__no { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem,5vw,3.4rem); line-height: 1; color: var(--gold-2); text-shadow: 0 0 20px rgba(231,207,148,0.35); }
.how__step h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: 0.8rem 0 0.5rem; }
.how__step p { color: var(--muted); font-size: 0.98rem; max-width: 34ch; }
@media (max-width: 820px){ .how__steps { grid-template-columns: 1fr; } }

/* ---------- Anything, arranged ---------- */
.anything { position: relative; z-index: 5; max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,9vw,7rem) var(--pad); text-align: center; }
.anything__line { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem,6vw,4.2rem); line-height: 1.04; margin-top: 0.6rem; }
.anything__line em { font-style: italic; color: var(--gold-2); }
.anything__sub { color: var(--muted); max-width: 50ch; margin: 1rem auto 2rem; }
.anything__grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 860px; margin: 0 auto 2.2rem; }
.anything__grid li { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--edge); padding: 0.6rem 0.9rem; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.anything__grid li:hover { color: var(--gold-2); border-color: var(--edge-hot); box-shadow: 0 0 16px rgba(231,207,148,0.12); }
.anything__btn { display: inline-block; width: auto; padding: 1.05rem 2.2rem; }

/* ---------- The Black Book ---------- */
.bbook { position: relative; z-index: 5; max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem,5vw,4rem) var(--pad) clamp(4rem,9vw,7rem); }
.bbook__head { margin-bottom: clamp(1.6rem,3vw,2.6rem); }
.bbook__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem,5vw,3.4rem); margin-top: 0.5rem; }
.bbook__title em { font-style: italic; color: var(--gold-2); }
.bbook__note { color: var(--muted); margin-top: 0.6rem; max-width: 46ch; }
.bbook__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(0.9rem,1.8vw,1.4rem); }
.bbook__card { position: relative; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--edge); background-color: var(--bg-2); background-size: cover; background-position: center; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.bbook__card::before { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(6,7,9,0.95) 8%, rgba(6,7,9,0.45) 44%, rgba(6,7,9,0.12) 100%); }
.bbook__card:hover { transform: translateY(-5px); border-color: var(--gold-2); box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(231,207,148,0.15); }
.bbook__body { position: absolute; left:0; right:0; bottom:0; padding: clamp(1.2rem,2.4vw,1.8rem); }
.bbook__loc { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-2); }
.bbook__body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.9rem); margin: 0.3rem 0 0.4rem; }
.bbook__body p { color: var(--muted); font-size: 0.92rem; max-width: 40ch; margin-bottom: 1rem; }
.bbook__cta { all: unset; cursor: pointer; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--edge-hot); padding: 0.6rem 1rem; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); }
.bbook__cta:hover, .bbook__cta:focus-visible { background: var(--gold); color: #000; border-color: var(--gold); }
@media (max-width: 720px) { .bbook__grid { grid-template-columns: 1fr; } }

.contact { position: relative; z-index: 5; text-align: center; padding: clamp(5rem,12vw,10rem) var(--pad); border-top: 1px solid rgba(220,232,245,0.08); }
.contact__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem,7vw,5rem); line-height: 1.02; margin: 1.2rem 0; }
.contact__lede { color: var(--muted); max-width: 48ch; margin: 0 auto; }
.contact__form { max-width: 640px; margin: clamp(2.5rem,5vw,4rem) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; text-align: left; }
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(220,232,245,0.22); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 1rem; padding: 1.4rem 0 0.7rem; outline: none; transition: border-color 0.4s var(--ease); }
.field input:focus { border-color: var(--gold-2); }
.field label { position: absolute; left: 0; top: 1.4rem; font-size: 0.95rem; color: var(--faint); pointer-events: none; transition: all 0.35s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top: 0; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); }
.field__opt { opacity: 0.55; text-transform: none; letter-spacing: 0; font-style: italic; }
.btn { grid-column: 1/-1; margin-top: 0.6rem; background: linear-gradient(105deg, var(--gold) 0%, var(--gold-2) 48%, var(--gold) 100%); background-size: 200% 100%; background-position: 0% 0; color: #1a1206; border: 1px solid var(--gold-2); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1.1rem; cursor: pointer; transition: background-position 0.6s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); }
.btn:hover { background-position: 100% 0; color: #000; box-shadow: 0 0 30px -6px rgba(231,207,148,0.55); }
.contact__form .gate__error, .contact__status { grid-column: 1 / -1; }
.contact__status { color: var(--gold-2); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; margin: 0.2rem 0 0; }
@media (max-width: 560px) { .contact__form { grid-template-columns: 1fr; } }

.footer { position: relative; z-index: 5; padding: clamp(3rem,6vw,5rem) var(--pad); border-top: 1px solid rgba(220,232,245,0.08); color: var(--muted); }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; }
.footer__mark { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.26em; padding-left: 0.26em; display: block; color: var(--ink); }
.footer__line { font-size: 0.85rem; margin-top: 0.7rem; max-width: 30ch; }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.footer__link { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.footer__link:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
.footer__cta { all: unset; cursor: pointer; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--edge-hot); padding: 0.7rem 1.2rem; transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.footer__cta:hover, .footer__cta:focus-visible { background: var(--gold); color: #000; }
.footer__cities { font-size: 0.85rem; text-align: center; margin: clamp(2.5rem,5vw,4rem) 0 0; letter-spacing: 0.04em; }
.footer__legal { font-family: var(--mono); font-size: 0.6rem; opacity: 0.6; margin-top: 1rem; text-align: center; }
@media (max-width: 640px) { .footer__top { flex-direction: column; gap: 1.6rem; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  /* flatten the 3D rig into a single stacked column */
  .stage { grid-template-columns: 1fr; perspective: none; gap: 1.4rem; animation: none; max-width: 560px; }
  /* critical: let grid children shrink instead of forcing the screen/rail to their
     wide intrinsic width (which overflowed and got clipped on phones) */
  .stage > * { min-width: 0; max-width: 100%; opacity: 1 !important; }
  .rail--left { transform: none !important; animation: none !important; }
  .screen { transform: none !important; animation: none !important; }
  .holo-name { display: none; }
  /* rail becomes a horizontal, snap-scrolling strip of service chips */
  .rail--left { gap: 0.6rem; }
  .rail__list { flex-direction: row; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__item { min-width: 168px; scroll-snap-align: start; }
}
@media (max-width: 880px) { .menu { display: none; } }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  /* declutter the header: keep brand on one line, drop the status text */
  .masthead { padding: 1.05rem var(--pad); }
  .brand__mark { font-size: 1.05rem; letter-spacing: 0.2em; padding-left: 0.2em; }
  .brand__tag { font-size: 0.5rem; }
  .status { display: none; }
  /* let the hero grow with its content instead of vertically centering a tall rig */
  .hero { min-height: auto; justify-content: flex-start; padding: 5rem var(--pad) 3rem; }
  .hero__brand { font-size: clamp(1.2rem, 6vw, 1.7rem); }
  .stage { gap: 1rem; }
  /* taller screen so the title, copy, CTA and thumbnails all breathe */
  .screen { aspect-ratio: 3 / 4; }
  .screen__overlay { padding: 0.9rem; }
  .screen__title { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .screen__desc { font-size: 0.84rem; }
  .rail__head { padding-left: 0.2rem; }
  .rail__hint { display: none; }
  .hero__scrollcue { margin-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .stage > * { opacity: 1 !important; }
  .rail--left { transform: rotateY(34deg); } .rail--right { transform: rotateY(-34deg); }
  html { scroll-behavior: auto; }
}