/* ============================================================
   VELOTURI · Reserve Allocation — pre-launch landing
   One page, no scroll. Forged-carbon technical luxury.
   ============================================================ */

:root{
  --carbon:        #0c0d0f;
  --carbon-2:      #131417;
  --carbon-3:      #1b1d21;
  --bone:          #f2eee6;
  --bone-2:        #f7f4ed;
  --bone-3:        #e7e1d4;
  --ink:           #15161a;
  --ink-mute:      #6c6960;
  --ink-faint:     #a39d8f;
  --hair-l:        rgba(20,18,14,.16);
  --hair-l-soft:   rgba(20,18,14,.08);
  --silver:        #b9bbbd;
  --amber:         #c0842b;
  --amber-soft:    #cf9a3f;
  --milk:          #edebe3;
  --milk-mute:     #8f9094;
  --milk-faint:    #5a5c60;
  --stage:         #060607;

  --hair-d:        rgba(255,255,255,.14);
  --hair-d-soft:   rgba(255,255,255,.07);

  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --tech: 'Saira', 'Archivo', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

@property --mx{ syntax:'<number>'; initial-value:0.5; inherits:true; }
@property --my{ syntax:'<number>'; initial-value:0.5; inherits:true; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--stage);
  color:var(--milk);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
}
input,textarea,.done__v{ user-select:text; -webkit-user-select:text; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  position:fixed; inset:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* immersive backdrop — the spotlit frame */
.bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--stage);
}
.bg__img{
  position:absolute; inset:-2%;
  width:104%; height:104%;
  object-fit:cover;
  object-position:58% 34%;
  opacity:0;
  transform:scale(1.12);
  filter:blur(16px) brightness(.6);
  transition:opacity 1.6s var(--ease), transform 2.4s var(--ease),
             filter 1.8s var(--ease);
}
.is-ready .bg__img{
  opacity:1; transform:scale(1);
  filter:blur(0) brightness(1);
}
/* cinematic vignette + floor */
.bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,6,7,.84) 0%, rgba(6,6,7,.34) 32%, transparent 58%),
    radial-gradient(120% 90% at 54% 26%, transparent 34%, rgba(6,6,7,.5) 70%, rgba(6,6,7,.92) 100%),
    linear-gradient(180deg, rgba(6,6,7,.42) 0%, transparent 24%, transparent 44%, rgba(6,6,7,.88) 90%, var(--stage) 100%);
}
/* darkening veil that deepens when the form is open */
.veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(140% 120% at 50% 42%, rgba(6,6,7,.1), rgba(6,6,7,.78) 90%);
  opacity:0; transition:opacity .9s var(--ease);
}

/* bone-white wash — the dossier reveal on confirmation */
.bone{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  background:linear-gradient(150deg, var(--bone-2), var(--bone) 62%);
  opacity:0; transform:scale(1.015);
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
.bone::after{
  content:''; position:absolute; inset:0; opacity:.7;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(20,18,14,.06), transparent 55%);
}
.is-done .bone{ opacity:1; transform:none; }
.is-done .bg__img{ filter:brightness(.5) saturate(.9); }
.is-reserve .veil, .is-done .veil{ opacity:1; }
.is-reserve .bg__img, .is-done .bg__img{
  transform:scale(1.07) translateY(-3%);
  filter:brightness(.52) saturate(.9);
}

/* faint scan line travelling once on load */
.scan{
  position:absolute; left:0; right:0; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(237,235,227,.45), transparent);
  opacity:0; pointer-events:none;
}
.is-ready .scan{ animation:scan 2.2s var(--ease) .2s 1 forwards; }
@keyframes scan{
  0%{ opacity:0; transform:translateY(0); }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ opacity:0; transform:translateY(100vh); }
}

/* ============================================================
   TOP BAR
   ============================================================ */
.bar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(20px,3.2vh,34px) clamp(22px,4vw,54px) 0;
}
.bar__mark{
  opacity:0; transform:translateY(-10px);
  transition:opacity 1s var(--ease) .15s, transform 1s var(--ease) .15s;
}
.is-ready .bar__mark{ opacity:1; transform:none; }
.bar__mark img{ width:clamp(118px,11vw,150px); opacity:.94; }
.bar__meta{
  font-family:var(--tech); font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--milk-mute);
  text-align:right; line-height:1.7; white-space:nowrap;
  text-shadow:0 1px 10px rgba(6,6,7,.7);
  opacity:0; transform:translateY(-10px);
  transition:opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s;
}
.is-ready .bar__meta{ opacity:1; transform:none; }
.bar__meta b{ color:var(--milk); font-weight:500; }

/* ============================================================
   HERO COPY
   ============================================================ */
.hero{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  text-align:left;
  padding:0 clamp(22px,5vw,78px) clamp(40px,8vh,86px);
  min-height:0; width:100%;
  transition:opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease);
}
.is-reserve .hero, .is-done .hero{
  opacity:0; transform:translateY(-16px);
  filter:blur(5px); pointer-events:none;
}

.hero__ey{
  font-family:var(--tech); font-size:clamp(10px,1.05vw,12px); letter-spacing:.4em;
  text-transform:uppercase; color:var(--milk-mute);
  display:flex; align-items:center; gap:15px;
  margin-bottom:clamp(18px,2.6vh,26px);
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
}
.is-ready .hero__ey{ opacity:1; transform:none; }
.hero__ey i{ width:38px; height:1px; background:var(--hair-d); display:inline-block; }

.hero__h1{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(42px,6.6vw,94px); line-height:.93;
  letter-spacing:-.036em; color:var(--milk);
  text-wrap:balance;
}
.hero__h1 .ln{ display:block; overflow:hidden; }
.hero__h1 .ln > span{
  display:block; transform:translateY(110%);
  transition:transform 1.05s var(--ease);
}
.is-ready .hero__h1 .ln:nth-child(1) > span{ transition-delay:.55s; }
.is-ready .hero__h1 .ln:nth-child(2) > span{ transition-delay:.66s; }
.is-ready .hero__h1 .ln > span{ transform:none; }
.hero__h1 em{ font-style:normal; color:var(--milk); }

.hero__sub{
  max-width:44ch; margin:clamp(18px,2.8vh,28px) 0 0;
  font-size:clamp(14px,1.4vw,16px); line-height:1.72; color:var(--milk-mute);
  text-wrap:pretty;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease) .8s, transform .9s var(--ease) .8s;
}
.is-ready .hero__sub{ opacity:1; transform:none; }

/* CTA */
.hero__cta{
  margin-top:clamp(26px,3.8vh,40px);
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease) .98s, transform .9s var(--ease) .98s;
}
.is-ready .hero__cta{ opacity:1; transform:none; }

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:18px;
  padding:18px 30px;
  font-family:var(--tech); font-weight:600;
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--carbon);
  background:var(--bone);
  border:1px solid var(--bone);
  border-radius:2px;
  transition:background .35s var(--ease), box-shadow .45s var(--ease), transform .25s var(--ease);
}
.btn:active{ transform:scale(.985); }
.btn__arw{ display:block; flex:none; transition:transform .3s var(--ease); }
@media (hover:hover){
  .btn:hover{ background:#fff; box-shadow:0 22px 56px -26px rgba(0,0,0,.95); }
  .btn:hover .btn__arw{ transform:translateX(5px); }
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(192,132,43,.55); }
  70%{ box-shadow:0 0 0 7px rgba(192,132,43,0); }
  100%{ box-shadow:0 0 0 0 rgba(192,132,43,0); }
}

.hero__note{
  margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--milk-faint);
  opacity:0;
  transition:opacity .9s var(--ease) 1.15s;
}
.is-ready .hero__note{ opacity:1; }

/* ============================================================
   STATUS FOOTER
   ============================================================ */
.status{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 clamp(22px,4vw,54px) clamp(18px,3vh,30px);
  opacity:0; transform:translateY(10px);
  transition:opacity 1s var(--ease) 1.3s, transform 1s var(--ease) 1.3s;
}
.is-ready .status{ opacity:1; transform:none; }
.is-reserve .status, .is-done .status{
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.status__l, .status__r{
  font-family:var(--tech); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--milk-faint);
  display:flex; align-items:center; gap:14px;
}
.status__r{ text-align:right; }
.status__sep{ width:1px; height:11px; background:var(--hair-d); }
.status__num{ font-family:var(--mono); color:var(--amber-soft); letter-spacing:.08em; }
.status__mid{ display:flex; align-items:center; gap:13px; }
.status__bar{
  width:clamp(80px,14vw,170px); height:2px; border-radius:2px;
  background:rgba(255,255,255,.1); overflow:hidden; position:relative;
}
.status__bar i{
  position:absolute; inset:0; right:auto; width:0;
  background:linear-gradient(90deg,var(--amber),var(--amber-soft));
  transition:width 1.6s var(--ease) 1.5s;
}
.is-ready .status__bar i{ width:var(--fill,84%); }

/* ============================================================
   THE HOLOGRAPHIC SEAL  (lifted from brand-assets)
   ============================================================ */
.seal{
  --rx:0deg; --ry:0deg; --ang:0deg;
  position:relative; width:var(--seal,200px); aspect-ratio:1; border-radius:50%;
  transform:perspective(700px) rotateX(var(--ry)) rotateY(var(--rx));
  transition:transform .25s var(--ease);
  isolation:isolate; will-change:transform; cursor:crosshair;
}
.seal::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.20) inset, 0 0 0 4px rgba(0,0,0,.35),
             0 10px 24px -10px rgba(0,0,0,.8);
  z-index:6;
}
.seal__holo{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #1a1c20, #0a0a0c 78%); }
.seal__l{ position:absolute; inset:-25%; border-radius:50%; }
.seal__spectral{
  background:conic-gradient(from calc(var(--ang) - 40deg) at 50% 50%,
    #6a3df0,#3d7ff0,#1ac7b8,#7ad15a,#e8c23a,#e07a2a,#e0457a,#a23df0,#6a3df0);
  filter:saturate(.78) brightness(.9) blur(1px);
  mix-blend-mode:screen; opacity:.55;
  transform:rotate(calc((var(--mx) - .5) * 60deg));
  animation:spin 26s linear infinite;
}
.seal__grating{
  background:repeating-linear-gradient( calc(var(--ang) + 116deg),
    hsl(8 85% 62% / .55) 0px, hsl(46 90% 62% / .55) 3px,
    hsl(120 70% 60% / .55) 6px, hsl(186 80% 60% / .55) 9px,
    hsl(232 85% 64% / .55) 12px, hsl(286 75% 64% / .55) 15px,
    hsl(8 85% 62% / .55) 18px);
  background-size:240% 240%;
  background-position:calc(var(--mx)*100%) calc(var(--my)*100%);
  mix-blend-mode:color-dodge; opacity:.42;
  animation:drift 9s ease-in-out infinite alternate;
}
.seal__guilloche{ inset:0;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.10) 0 0.5px, transparent 0.5px 4.5px);
  mix-blend-mode:overlay; opacity:.7; }
.seal__spokes{ inset:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.07) 0deg 0.5deg, transparent 0.5deg 3deg);
  mix-blend-mode:soft-light; opacity:.6; }
.seal__glare{ inset:0;
  background:radial-gradient(34% 34% at calc(var(--mx)*100%) calc(var(--my)*100%),
    rgba(255,255,255,.55), rgba(255,255,255,.10) 38%, transparent 62%);
  mix-blend-mode:screen; opacity:.8; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes drift{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

.seal__svg{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.seal__ring{ fill:none; stroke:rgba(233,235,238,.78); }
.seal__ringthin{ fill:none; stroke:rgba(233,235,238,.5); }
.seal__micro{ fill:rgba(236,238,241,.82); font-family:'Saira',sans-serif; font-weight:600; letter-spacing:.32em; }
.seal__center-l{ fill:rgba(236,238,241,.9); font-family:'Saira',sans-serif; font-weight:600; letter-spacing:.18em; }
.seal__center-amb{ fill:var(--amber-soft); font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:.04em; }
.seal__seat{ fill:rgba(8,8,10,.34); }
.seal__wm{ fill:rgba(236,238,241,.95); }

.status__seal{ --seal:42px; }

/* ============================================================
   RESERVE PANEL  (form)
   ============================================================ */
.panel{
  position:absolute; z-index:8; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(580px,92vw);
  max-height:88vh;
  display:flex; flex-direction:column;
  pointer-events:none;
}
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, rgba(20,21,24,.78), rgba(9,10,12,.86));
  border:1px solid var(--hair-d);
  border-radius:8px;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  padding:clamp(26px,3.4vw,40px);
  opacity:0; transform:translateY(34px) scale(.97);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
  overflow-y:auto;
}
.is-reserve .panel, .is-done .panel{ pointer-events:auto; }
.is-reserve .card{ opacity:1; transform:none; transition-delay:.18s; }
.card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(237,235,227,.38), transparent);
}

.card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  margin-bottom:clamp(16px,2.4vh,26px); }
.card__ey{ font-family:var(--tech); font-size:10px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--milk-mute); margin-bottom:12px;
  display:flex; align-items:center; gap:10px; }
.card__ey i{ width:4px; height:4px; border-radius:50%; background:var(--milk-faint); }
.card__h2{ font-family:var(--sans); font-weight:800; font-size:clamp(24px,3vw,32px);
  letter-spacing:-.025em; line-height:1.02; color:var(--milk); }
.card__close{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--hair-d); color:var(--milk-mute);
  display:grid; place-items:center; font-size:16px; line-height:1;
  transition:border-color .3s, color .3s, transform .3s;
}
.card__close:active{ transform:scale(.9); }
@media (hover:hover){
  .card__close:hover{ border-color:var(--amber-soft); color:var(--milk); transform:rotate(90deg); }
}
.card__grip{ display:none; }

/* fields */
.form{ display:grid; gap:clamp(13px,1.9vh,18px); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ position:relative; display:flex; flex-direction:column; gap:8px; }
.field__lab{
  font-family:var(--tech); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--milk-mute); display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.field__lab .opt{ color:var(--milk-faint); letter-spacing:.14em; font-size:9px; }
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,.025);
  border:1px solid var(--hair-d-soft); border-radius:4px;
  padding:13px 14px; font-size:14.5px; letter-spacing:.01em;
  color:var(--milk); transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ resize:none; min-height:64px; line-height:1.5; font-size:14px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--milk-faint); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:rgba(237,235,227,.55); background:rgba(255,255,255,.045);
  box-shadow:0 0 0 1px rgba(237,235,227,.16);
}
.field.invalid input{ border-color:#a4543b; box-shadow:0 0 0 1px rgba(164,84,59,.3); }

/* custom select (car make) */
.sel{ position:relative; }
.sel__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.025); border:1px solid var(--hair-d-soft); border-radius:4px;
  padding:13px 14px; font-size:14.5px; color:var(--milk-faint); text-align:left;
  transition:border-color .3s, background .3s;
}
.sel__btn.has-val{ color:var(--milk); }
.sel__btn .lbl{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sel.open .sel__btn{ border-color:rgba(237,235,227,.55); background:rgba(255,255,255,.045); }
.sel__chev{ flex:none; transition:transform .3s var(--ease); color:var(--milk-mute); }
.sel.open .sel__chev{ transform:rotate(180deg); }
.sel__menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background:rgba(16,17,20,.97); border:1px solid var(--hair-d);
  border-radius:5px; box-shadow:0 30px 60px -28px rgba(0,0,0,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  max-height:230px; overflow-y:auto; padding:5px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.sel.open .sel__menu{ opacity:1; transform:none; pointer-events:auto; }
.sel__opt{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:3px;
  font-size:13.5px; color:var(--milk-mute); letter-spacing:.01em;
  transition:background .2s, color .2s;
}
.sel__opt:hover, .sel__opt.active{ background:rgba(255,255,255,.06); color:var(--milk); }

/* submit */
.form__foot{ display:flex; align-items:center; gap:18px; margin-top:clamp(6px,1vh,10px); }
.submit{
  position:relative; overflow:hidden; flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:17px 24px;
  font-family:var(--tech); font-weight:600; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--carbon); background:linear-gradient(180deg,var(--bone-2),var(--bone));
  border-radius:3px;
  transition:transform .25s var(--ease), box-shadow .4s var(--ease), opacity .3s;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.submit:active{ transform:translateY(1px); }
@media (hover:hover){
  .submit:hover{ box-shadow:0 26px 60px -26px rgba(0,0,0,.95); }
  .submit:hover .btn__arw{ transform:translateX(5px); }
}
.submit[disabled]{ opacity:.5; cursor:default; }
.submit .lbl{ display:inline-flex; align-items:center; gap:12px; }
.submit__dot{ width:6px; height:6px; border-radius:50%; background:var(--amber); }
.form__priv{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--milk-faint);
  line-height:1.5; max-width:15ch; }

/* honeypot — hidden from humans, catches bots */
.hp-field{
  position:absolute !important; left:-9999px !important; top:auto;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

/* submit loading + error states */
.submit.is-loading{ pointer-events:none; opacity:.72; }
.submit.is-loading .lbl{ opacity:.85; }
.submit__spin{
  width:14px; height:14px; flex:none; border-radius:50%;
  border:1.5px solid rgba(12,13,15,.3); border-top-color:var(--carbon);
  animation:spin360 .7s linear infinite; display:none;
}
.submit.is-loading .submit__spin{ display:block; }
.submit.is-loading .btn__arw{ display:none; }
@keyframes spin360{ to{ transform:rotate(360deg); } }
.form__err{
  display:none; font-family:var(--tech); font-size:11px; letter-spacing:.06em;
  color:#d08566; line-height:1.5; padding:2px 0;
}
.form__err.show{ display:block; }

/* ============================================================
   DONE / CONFIRMATION
   ============================================================ */
.done{
  position:absolute; z-index:9; left:0; top:0; width:100%; height:100%;
  padding:0 clamp(22px,5vw,78px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left; pointer-events:none;
}
.done__inner{
  opacity:0; transform:translateY(26px) scale(.97);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  display:flex; flex-direction:column; align-items:flex-start; max-width:600px;
}
.is-done .done__inner{ opacity:1; transform:none; transition-delay:.55s; }
.done__mark{ width:clamp(132px,13vw,168px); margin-bottom:clamp(26px,4vh,40px);
  filter:invert(1); opacity:.86; }
.done__ey{ font-family:var(--tech); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:16px; white-space:nowrap;
  display:flex; align-items:center; gap:13px; }
.done__ey i{ width:30px; height:1px; background:var(--hair-l); display:inline-block; }
.done__h2{ font-family:var(--sans); font-weight:600; font-size:clamp(32px,4.6vw,52px);
  letter-spacing:-.036em; line-height:.98; color:var(--ink); }
.done__sub{ margin-top:18px; max-width:44ch; font-size:14.5px; line-height:1.7; color:var(--ink-mute); }
.done__card{
  margin-top:clamp(24px,3.6vh,34px);
  display:flex; align-items:stretch; gap:0;
  border:1px solid var(--hair-l); border-radius:5px; overflow:hidden;
  background:rgba(255,255,255,.28);
}
.done__cell{ padding:16px 22px; text-align:left; }
.done__cell + .done__cell{ border-left:1px solid var(--hair-l); }
.done__k{ font-family:var(--tech); font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:7px; }
.done__v{ font-family:var(--mono); font-size:17px; letter-spacing:.05em; color:var(--ink); white-space:nowrap; }
.done__v.amb{ color:var(--ink); }

/* ============================================================
   LIVE RESERVATION TOAST  (social proof / FOMO)
   ============================================================ */
.toast{
  position:fixed; z-index:30;
  right:clamp(18px,3vw,42px); bottom:clamp(18px,4vh,42px);
  display:flex; align-items:center; gap:14px;
  padding:12px 20px 12px 12px;
  background:linear-gradient(160deg, rgba(21,22,25,.8), rgba(10,11,13,.9));
  border:1px solid var(--hair-d);
  border-radius:7px;
  box-shadow:0 34px 70px -32px rgba(0,0,0,.95);
  backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  opacity:0; transform:translateY(18px) scale(.98); pointer-events:none;
  transition:opacity .65s var(--ease), transform .65s var(--ease);
  max-width:min(330px,82vw);
}
.toast.show{ opacity:1; transform:none; }
.toast__mono{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--hair-d); background:rgba(255,255,255,.03);
  font-family:var(--tech); font-weight:600; font-size:12.5px; letter-spacing:.05em;
  color:var(--milk);
}
.toast__tx{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.toast__name{ font-family:var(--sans); font-weight:400; font-size:13.5px;
  color:var(--milk-mute); white-space:nowrap; }
.toast__name b{ font-weight:600; color:var(--milk); }
.toast__meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  color:var(--milk-faint); display:flex; align-items:center; gap:9px; white-space:nowrap; }
.toast__live{ width:5px; height:5px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(192,132,43,.55); animation:pulse 2.4s ease-out infinite; flex:none; }

/* ============================================================
   RESPONSIVE — mobile / app feel
   ============================================================ */
@media (max-width:560px){
  /* top bar — clear the notch, declutter */
  .bar{ padding:calc(env(safe-area-inset-top) + 18px) 22px 0; }
  .bar__meta{ display:none; }
  .bar__mark img{ width:126px; }

  /* hero — bottom-anchored, full-width primary action */
  .hero{ padding:0 22px calc(env(safe-area-inset-bottom) + 26px); }
  .hero__h1{ font-size:clamp(46px,13.5vw,64px); line-height:.94; }
  .hero__ey{ gap:12px; margin-bottom:18px; }
  .hero__ey i{ width:28px; }
  .hero__sub{ font-size:14.5px; max-width:36ch; margin-top:18px; }
  .hero__cta{ width:100%; margin-top:26px; }
  .btn{ width:100%; justify-content:center; padding:19px 22px; font-size:13px; gap:14px; }
  .hero__note{ text-align:center; width:100%; margin-top:16px; }

  /* form → native bottom sheet */
  .panel{ position:absolute; inset:0; width:100%; max-height:none;
    transform:none; display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-end; }
  .card{
    width:100%; border-radius:24px 24px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    padding:12px 20px calc(env(safe-area-inset-bottom) + 20px);
    max-height:90dvh; overflow-y:auto;
    transform:translateY(101%); opacity:1;
    transition:transform .52s var(--ease);
    box-shadow:0 -30px 90px -24px rgba(0,0,0,.92);
  }
  .is-reserve .card{ transform:translateY(0); transition-delay:0s; }
  .card__grip{ display:block; width:38px; height:4px; border-radius:4px;
    background:var(--hair-d); margin:2px auto 16px; flex:none; }
  .card__head{ margin-bottom:18px; }
  .card__close{ width:42px; height:42px; }

  /* inputs at 16px so iOS does not zoom on focus */
  .field input, .field textarea, .sel__btn{ font-size:16px; }
  .field input, .sel__btn{ padding:14px 14px; }
  .row2{ grid-template-columns:1fr; }
  .form{ gap:15px; }
  .form__foot{ flex-direction:column; align-items:stretch; gap:14px; margin-top:4px; }
  .form__priv{ max-width:none; text-align:center; order:2; }
  .submit{ padding:18px 24px; font-size:13px; }

  /* confirmation — receipt-style stacked rows */
  .done{ padding:0 22px; }
  .done__inner{ width:100%; }
  .done__mark{ width:140px; margin-bottom:26px; }
  .done__h2{ font-size:clamp(34px,10vw,46px); }
  .done__sub{ font-size:14.5px; }
  .done__card{ flex-direction:column; align-items:stretch; width:100%; }
  .done__cell{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding:14px 16px; }
  .done__cell + .done__cell{ border-left:none; border-top:1px solid var(--hair-l); }
  .done__k{ margin-bottom:0; }
  .done__v{ font-size:15px; }

  /* toast → top notification banner, below the bar */
  .toast{
    top:calc(env(safe-area-inset-top) + 56px); bottom:auto;
    left:14px; right:14px; max-width:none;
    transform:translateY(-20px) scale(.98);
  }
  .toast.show{ transform:none; }
}
@media (max-width:560px) and (max-height:680px){
  .hero__sub{ display:none; }
}
@media (min-width:561px) and (max-height:680px){
  .hero{ justify-content:center; }
  .hero__sub{ display:none; }
  .card{ padding:20px 24px; }
  .field textarea{ min-height:50px; }
  .form{ gap:12px; }
  .card__head{ margin-bottom:14px; }
}

@media (prefers-reduced-motion: reduce){
  .bg__img, .bar__mark, .bar__meta, .hero__ey, .hero__sub, .hero__cta,
  .hero__note, .status, .hero__h1 .ln > span, .status__bar i, .card,
  .done__inner{ transition-duration:.01ms !important; transform:none !important; }
  .seal__spectral, .seal__grating{ animation:none; }
  .scan{ display:none; }
  .toast{ transition-duration:.2s !important; }
}