:root{
  --ink:#08080A; --ink-2:#0E0E10;
  --plat:#C9CDD3; --plat-lt:#F4F6F8; --plat-dp:#8A8F98;
  --plat-grad:linear-gradient(120deg,#8A8F98 0%,#C9CDD3 28%,#F4F6F8 52%,#C9CDD3 74%,#8A8F98 100%);
  --txt:#EDEEF0; --txt-mut:#9A9CA2; --txt-dim:#6B6D72;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease-lux:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,3.4vw,52px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--plat);outline-offset:3px;border-radius:4px}

/* ---------- THE ROOM ---------- */
.stage{position:fixed;inset:0;overflow:hidden;background:#08080A}
/* base plate: the dark room the masked photos dissolve into */
.stage::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 104%, #1a1b1f 0%, #0d0e10 42%, #08080A 78%),
    radial-gradient(60% 46% at 68% 30%, rgba(190,200,215,.07) 0%, transparent 70%);
}
.cars{position:absolute;inset:0}
.car{
  position:absolute;inset:0;margin:0;
  will-change:transform,opacity,filter;
  transform-origin:50% 56%;
  transition:transform 1.15s var(--ease-lux), opacity .85s var(--ease-lux), filter .85s var(--ease-lux),
             -webkit-mask-size .85s var(--ease-lux), mask-size .85s var(--ease-lux);
  /* farthest-side makes the gradient ellipse touch the box edges exactly, so the
     layer is fully transparent right at its own rectangle. A percentage ellipse got
     this wrong at tall viewports and drew a hard vertical seam through the hall.
     mask-size is animatable, which is how the front car un-masks without popping. */
  -webkit-mask-image:radial-gradient(farthest-side ellipse at 50% 52%, #000 58%, rgba(0,0,0,.72) 82%, transparent 100%);
  mask-image:radial-gradient(farthest-side ellipse at 50% 52%, #000 58%, rgba(0,0,0,.72) 82%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
/* The front car covers the viewport, so it needs no mask at all. Blowing the mask
   box up past the element is how you say that in a property that can animate. */
.car.front{-webkit-mask-size:210% 210%;mask-size:210% 210%}
.car img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}

/* ---------- ENVIRONMENT OVERLAYS ---------- */
.env{position:absolute;inset:0;pointer-events:none}
/* light throw running back toward the vanishing point, ties the depth layers together */
.env-hall{
  background:
    linear-gradient(103deg, transparent 46%, rgba(215,225,240,.05) 58%, transparent 70%),
    radial-gradient(38% 20% at 71% 33%, rgba(200,212,230,.10) 0%, transparent 72%);
  mix-blend-mode:screen;
}
/* floor sheen under the front car */
.env-floor{
  background:radial-gradient(46% 17% at 44% 92%, rgba(190,202,220,.13) 0%, transparent 72%);
  mix-blend-mode:screen;
}
/* depth haze, lifts the far end of the hall slightly */
.env-haze{background:linear-gradient(to top, transparent 48%, rgba(120,132,150,.05) 78%, transparent 100%)}
/* the cinematic vignette and the copy legibility scrims.
   Deliberately light on the right: that is where the hall recedes, and a heavy
   vignette there crushes the queued cars into the dark. */
.env-vig{
  background:
    radial-gradient(128% 104% at 42% 52%, transparent 62%, rgba(4,4,6,.42) 90%, rgba(4,4,6,.72) 100%),
    linear-gradient(to right, rgba(5,5,7,.62) 0%, rgba(5,5,7,.22) 13%, transparent 26%),
    linear-gradient(to bottom, rgba(6,6,8,.66) 0%, transparent 20%, transparent 40%, rgba(6,6,8,.46) 66%, rgba(5,5,7,.84) 86%, rgba(4,4,6,.96) 100%);
}
/* film grain, keeps the flat gradients from banding on big screens */
.env-grain{
  opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ---------- THE WORDMARK ---------- */
.wordwrap{
  position:fixed;left:0;right:0;bottom:clamp(112px,19.5vh,210px);
  display:flex;justify-content:center;pointer-events:none;z-index:24;
  padding:0 var(--pad);
}
.word{
  margin:0;font-family:var(--display);font-weight:800;font-stretch:125%;
  /* JS overwrites this with a fitted size so a nine letter name and a two letter
     name both fill the frame without either overflowing. The clamp is the fallback
     if scripting never runs. */
  font-size:clamp(3.1rem,11.4vw,11rem);line-height:.86;letter-spacing:-.018em;
  text-transform:uppercase;white-space:nowrap;
  color:#fff;
  text-shadow:0 0 70px rgba(0,0,0,.5), 0 2px 26px rgba(0,0,0,.42);
  transition:transform .62s var(--ease-lux), opacity .4s ease, filter .4s ease;
}
.word.out{opacity:0;filter:blur(18px);transform:translate3d(-6%,0,0) scaleX(1.05)}
.word.pre{opacity:0;filter:blur(18px);transform:translate3d(6%,0,0) scaleX(1.05);transition:none}

/* ---------- HEADER ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:calc(var(--safe-t) + clamp(14px,2.2vw,26px)) calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l));
}
.hd .logo img{height:clamp(32px,3.4vw,46px);width:auto}
.hd nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
/* Padded to a 44px tap target. The text box on its own is 18px, which SRA fails. */
.hd nav a:not(.call){
  display:inline-flex;align-items:center;min-height:44px;
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--txt-mut);
  transition:color .25s ease;
}
.hd nav a:not(.call):hover{color:var(--plat-lt)}
.hd .call{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:10px 17px;border:1px solid rgba(201,205,211,.28);border-radius:999px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(14,14,16,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .25s ease,background .25s ease;
}
.hd .call:hover{border-color:rgba(201,205,211,.58);background:rgba(28,28,32,.6)}
.hd .call svg{width:14px;height:14px;flex:none}

/* ---------- MODEL RAIL ---------- */
.rail{
  position:fixed;left:calc(var(--pad) + var(--safe-l));top:44%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:2px;
}
/* Its own soft base. Half the fleet is white and fills the left of frame, and the
   page wide scrim alone is not enough to keep the list readable on those. */
.rail::before{
  content:"";position:absolute;left:-46px;right:-62px;top:-36px;bottom:-36px;z-index:-1;
  background:radial-gradient(ellipse 68% 62% at 32% 50%, rgba(4,4,6,.9) 0%, rgba(4,4,6,.66) 44%, rgba(4,4,6,.26) 70%, transparent 86%);
  pointer-events:none;
}
.rail button{
  display:flex;align-items:center;gap:10px;
  padding:5px 0;text-align:left;
  font-family:var(--display);font-weight:600;font-stretch:125%;
  font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;
  color:#83858B;text-shadow:0 1px 16px rgba(0,0,0,.98),0 0 34px rgba(0,0,0,.7);
  transition:color .3s ease,transform .45s var(--ease-lux);
}
.rail button i{
  width:4px;height:4px;border-radius:50%;background:currentColor;flex:none;
  opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .45s var(--ease-lux);
}
.rail button:hover{color:var(--plat)}
.rail button[aria-current="true"]{color:#fff;transform:translateX(3px)}
.rail button[aria-current="true"] i{opacity:1;transform:scale(1)}

/* ---------- TOP SPEED CARD ---------- */
/* Top right, not centre right. The middle of the right hand side is where the hall
   recedes, and a glass card parked there sits straight on top of the queued cars. */
.stat{
  position:fixed;right:calc(var(--pad) + var(--safe-r));
  top:calc(var(--safe-t) + clamp(84px,11vh,124px));
  z-index:40;width:clamp(140px,13vw,172px);
  padding:18px 20px 16px;border-radius:22px;
  border:1px solid rgba(201,205,211,.17);
  background:linear-gradient(160deg, rgba(28,29,33,.62), rgba(12,12,14,.5));
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
.stat .lab{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-dim)}
.stat .num{
  display:block;margin:10px 0 2px;
  font-family:var(--display);font-weight:700;font-stretch:125%;
  font-size:clamp(2.4rem,3.6vw,3.3rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#fff;
}
.stat .unit{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--plat-dp);display:block}
.stat .mph{font-size:9.5px;letter-spacing:.18em;color:var(--txt-dim);display:block;margin-top:3px;font-style:normal}

/* ---------- BOTTOM BAR ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;
  padding:0 calc(var(--pad) + var(--safe-r)) calc(var(--safe-b) + clamp(18px,2.6vw,34px)) calc(var(--pad) + var(--safe-l));
  pointer-events:none;
}
.bar > *{pointer-events:auto;position:relative;z-index:1}
/* A local base under the bar. The polished floor in these photos runs bright right
   where the bottom copy sits, and the page wide scrim alone does not carry it. */
.bar::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:190px;z-index:0;
  background:linear-gradient(to top, rgba(4,4,6,.92) 0%, rgba(5,5,7,.68) 42%, transparent 100%);
  pointer-events:none;
}
.city{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#8C8E94;display:flex;align-items:center;gap:8px;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.city::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--plat-dp)}
.spec{
  text-align:center;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#B9BCC2;text-shadow:0 1px 14px rgba(0,0,0,.9);
  transition:opacity .35s ease;max-width:min(92vw,640px);
}
.spec.out{opacity:0}
.spec b{color:var(--plat-lt);font-weight:500}
.reserve{
  justify-self:end;
  display:inline-flex;align-items:center;gap:13px;
  padding:14px 22px;border-radius:999px;
  border:1px solid rgba(201,205,211,.3);
  background:rgba(14,14,16,.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .3s ease,background .3s ease,transform .3s var(--ease-lux);
}
.reserve:hover{border-color:rgba(244,246,248,.7);background:rgba(32,33,37,.66);transform:translateY(-1px)}
.reserve em{font-style:normal;color:var(--plat-lt);letter-spacing:.1em}
.reserve svg{width:15px;height:10px;flex:none}

/* counter sits with the city, right under it */
.count{font-family:var(--display);font-weight:600;font-stretch:125%;font-size:10px;letter-spacing:.2em;color:#7C7E84;margin-top:7px;font-variant-numeric:tabular-nums;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.count b{color:var(--plat-lt);font-weight:600}

/* ---------- PROGRESS DOTS (phone) ---------- */
.dots{display:none;position:fixed;left:0;right:0;bottom:calc(var(--safe-b) + 78px);z-index:40;justify-content:center;gap:7px}
.dots span{width:5px;height:5px;border-radius:50%;background:rgba(201,205,211,.26);transition:background .3s ease,width .35s var(--ease-lux)}
.dots span.on{background:var(--plat-lt);width:16px;border-radius:3px}

/* ---------- HINT ---------- */
/* Lives in the bottom left stack. Anywhere nearer the middle and the wordmark,
   which runs almost the full width, lands straight on top of it. */
.hint{
  margin:9px 0 0;max-width:17ch;line-height:1.6;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#6E7075;
  text-shadow:0 1px 12px rgba(0,0,0,.9);
  transition:opacity .5s ease;
}
.hint.gone{opacity:0;pointer-events:none}

/* ---------- BOOKING LAYER ---------- */
.bk{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 20px);
  background:rgba(4,4,6,.68);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
}
.bk.open{opacity:1;visibility:visible}
.bkpanel{
  width:min(920px,100%);max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:1.12fr .88fr;
  border-radius:26px;border:1px solid rgba(201,205,211,.17);
  background:linear-gradient(150deg, rgba(26,27,31,.94), rgba(11,11,13,.96));
  box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(16px) scale(.985);transition:transform .5s var(--ease-lux);
}
.bk.open .bkpanel{transform:none}
.bkcal{padding:clamp(22px,2.6vw,32px);border-right:1px solid rgba(201,205,211,.1)}
.bkside{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column}
.bklab{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-dim)}
.bkhd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 18px}
.bkmonth{font-family:var(--display);font-weight:600;font-stretch:125%;font-size:1.15rem;letter-spacing:.01em}
.bknav{display:flex;gap:7px}
.bknav button{
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(201,205,211,.22);
  display:grid;place-items:center;color:var(--txt-mut);transition:border-color .25s,color .25s;
}
.bknav button:hover{border-color:rgba(201,205,211,.55);color:#fff}
.bknav svg{width:11px;height:11px}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
/* No gap: any gap cuts hairlines through the selected range pill. */
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
.dow span{text-align:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);padding-bottom:8px}
.grid button{
  position:relative;aspect-ratio:1;display:grid;place-items:center;
  font-size:12.5px;color:var(--txt-mut);border-radius:999px;
  font-variant-numeric:tabular-nums;transition:color .2s ease,background .2s ease;
}
.grid button:disabled{color:#2E2F33;cursor:default}
.grid button:not(:disabled):hover{color:#fff;background:rgba(201,205,211,.1)}
.grid button.in{background:var(--plat-lt);color:#0a0a0c;border-radius:0}
.grid button.end1{background:var(--plat-lt);color:#0a0a0c;border-radius:999px 0 0 999px}
.grid button.end2{background:var(--plat-lt);color:#0a0a0c;border-radius:0 999px 999px 0}
.grid button.solo{background:var(--plat-lt);color:#0a0a0c;border-radius:999px}
.grid .pad{visibility:hidden}

.bkcar{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.16;margin:12px 0 20px;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.bkrow{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(201,205,211,.11);font-size:12.5px}
.bkrow span{color:var(--txt-mut)}
.bkrow b{font-weight:500;color:var(--plat-lt);white-space:nowrap;font-variant-numeric:tabular-nums}
.bktot{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:16px 0 4px;border-top:1px solid rgba(201,205,211,.24);margin-top:4px}
.bktot span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-dim)}
.bktot b{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:1.65rem;font-variant-numeric:tabular-nums}
.bkgo{
  margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:10px;
}
.bkgo button{
  width:100%;padding:15px;border-radius:999px;background:var(--plat-grad);color:#0a0a0c;
  font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:filter .25s ease,transform .25s var(--ease-lux);
}
.bkgo button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bkgo button:disabled{opacity:.34;cursor:default;transform:none;filter:none}
.bknote{font-size:10.5px;color:var(--txt-dim);text-align:center;line-height:1.5}
.bkx{
  position:absolute;top:calc(var(--safe-t) + 18px);right:calc(var(--safe-r) + 18px);
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,205,211,.22);
  display:grid;place-items:center;color:var(--txt-mut);z-index:2;
  background:rgba(14,14,16,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .25s,color .25s;
}
.bkx:hover{border-color:rgba(201,205,211,.6);color:#fff}
.bkx svg{width:14px;height:14px}
.bkok{padding:clamp(30px,4vw,48px);text-align:center;grid-column:1 / -1;display:none}
.bkok b{display:block;font-family:var(--display);font-weight:700;font-stretch:125%;font-size:1.5rem;text-transform:uppercase;margin-bottom:10px}
.bkok p{color:var(--txt-mut);font-size:13px;margin:0 auto;max-width:44ch}
.bkpanel.done .bkcal,.bkpanel.done .bkside{display:none}
.bkpanel.done{grid-template-columns:1fr}
.bkpanel.done .bkok{display:block}

/* ---------- FOOT NOTE ---------- */
/* Sits in the bottom left stack under the counter. It used to be centred and fixed,
   which put it straight through the spec line. */
.specwrap{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.disc{
  margin:0;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:#797B80;line-height:1.5;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.9);
}

/* ---------- TABLET ---------- */
@media (max-width:1080px){
  .rail{gap:0}
  .rail button{font-size:10.5px;letter-spacing:.16em}
  .stat{width:126px;padding:15px 16px 13px}
  .wordwrap{bottom:clamp(104px,16vh,160px)}
}

/* ---------- PHONE ----------
   A portrait phone cannot cover with a 16:9 studio photo without cutting the car in
   half, so the car is CONTAINED here and the dark stage behind it becomes the room.
   Because every photo's own background is that same dark room, the letterboxing is
   invisible. Header follows the house standard: logo hard left, control hard right. */
@media (max-width:760px){
  .rail{display:none}
  .dots{display:flex}
  .hint{display:none}

  .hd{padding-top:calc(var(--safe-t) + 14px)}
  .hd nav{gap:0}
  .hd nav a:not(.call){display:none}
  .hd .call{padding:0;width:42px;height:42px;border-radius:50%;justify-content:center;gap:0}
  .hd .call span{display:none}
  .hd .call svg{width:16px;height:16px}

  /* The rank is a centred 16:9 band that runs slightly wider than the screen, so the
     car is big, cover still fills it, and the elliptical mask reaches real image
     edges instead of leaving a letterbox seam across the stage. */
  .cars{inset:auto -14% auto -14%;top:40%;transform:translateY(-50%);aspect-ratio:16/9}
  /* The band is narrower than the screen vertically and wider horizontally, so the
     fade has to be tight top and bottom and loose left and right. */
  .car{transform-origin:50% 50%;-webkit-mask-size:150% 100%;mask-size:150% 100%}
  .car.front{-webkit-mask-size:190% 102%;mask-size:190% 102%}
  .car img{object-position:50% 50%}
  .env-floor{background:radial-gradient(60% 12% at 50% 70%, rgba(190,202,220,.14) 0%, transparent 72%)}
  .env-vig{
    background:
      radial-gradient(140% 90% at 50% 40%, transparent 58%, rgba(4,4,6,.5) 92%, rgba(4,4,6,.8) 100%),
      linear-gradient(to bottom, rgba(6,6,8,.72) 0%, transparent 16%, transparent 52%, rgba(5,5,7,.88) 74%, rgba(4,4,6,.98) 100%);
  }

  .stat{
    top:auto;bottom:calc(var(--safe-b) + 196px);
    right:auto;left:calc(var(--pad) + var(--safe-l));
    width:auto;display:flex;align-items:baseline;gap:9px;
    padding:9px 15px;border-radius:999px;
  }
  .stat .lab{font-size:8.5px;letter-spacing:.2em}
  .stat .num{display:inline;margin:0;font-size:1.25rem}
  .stat .unit{display:inline;font-size:8.5px}
  .stat .mph{display:none}

  .wordwrap{bottom:calc(var(--safe-b) + 246px);justify-content:flex-start;padding:0 var(--pad)}

  .bar{
    grid-template-columns:1fr;align-items:stretch;gap:11px;
    padding-bottom:calc(var(--safe-b) + 16px);
  }
  .bar::before{height:250px}
  .city{order:1;justify-content:flex-start}
  .count{display:none}
  .specwrap{order:2;align-items:flex-start;gap:5px}
  .spec{text-align:left;font-size:10.5px;letter-spacing:.06em;max-width:none}
  .disc{text-align:left}
  .reserve{order:3;justify-self:stretch;justify-content:center;padding:17px 20px;font-size:11px}
  .dots{top:calc(40% + clamp(152px,26vw,182px));bottom:auto}

  .bkpanel{grid-template-columns:1fr;border-radius:20px}
  .bkcal{border-right:0;border-bottom:1px solid rgba(201,205,211,.1)}
  .bkcar{font-size:1.22rem}
  .bktot b{font-size:1.45rem}
}
@media (max-width:400px){
  .stat{bottom:calc(var(--safe-b) + 188px)}
  .wordwrap{bottom:calc(var(--safe-b) + 238px)}
}

/* ---------- LANDSCAPE PHONE ---------- */
@media (max-height:520px) and (orientation:landscape){
  .wordwrap{bottom:clamp(64px,13vh,92px)}
  .word{font-size:clamp(2rem,8vw,4rem)}
  .stat{width:118px;padding:12px 14px 11px}
  .stat .num{font-size:1.8rem}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .car,.word,.rail button,.rail button i,.reserve,.bk,.bkpanel,.spec,.dots span{
    transition-duration:.001ms !important;
  }
}