/* ===========================================================================
   Section styles. Tokens come from hyper.css. No raw colours here.
   =========================================================================== */

/* --- emergency bar -------------------------------------------------------- */

.ebar{background:#fff5f5;border-bottom:1px solid #ffd9d9;font-size:.8125rem}
.ebar__inner{display:flex;align-items:center;gap:.625rem;padding-block:.5rem}
.ebar__icon{color:var(--danger);display:flex}
.ebar__text{flex:1;line-height:1.4;color:#5a1b1b}
.ebar__text a{font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ebar__close{color:#5a1b1b;opacity:.6;display:flex;padding:.25rem;border-radius:var(--r-full)}
.ebar__close:hover{opacity:1;background:rgba(0,0,0,.05)}
@media(max-width:640px){.ebar__sep{display:block}}

/* --- nav ------------------------------------------------------------------ */

.nav{position:sticky;top:.75rem;z-index:100;margin-top:.75rem}
.nav__inner{
  display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:.5rem .5rem .5rem 1.25rem;
  min-height:56px;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}
.nav__brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.nav__dot{color:var(--accent)}
.nav__links{display:none;gap:1.5rem;margin-inline:auto;font-size:.9375rem}
.nav__links a{color:var(--muted-foreground);transition:color .15s}
.nav__links a:hover{color:var(--foreground)}
.nav__actions{display:none;gap:.5rem;margin-left:auto}
.nav__actions .btn{padding:.625rem 1.125rem;min-height:40px;font-size:.875rem}
.nav__burger{display:flex;margin-left:auto;padding:.5rem;border-radius:var(--r-full)}
.nav__burger:hover{background:var(--secondary)}

@media(min-width:900px){
  .nav__links,.nav__actions{display:flex}
  .nav__burger{display:none}
}
@media(max-width:420px){.nav__signin{display:none}}

/* --- mobile sheet --------------------------------------------------------- */

.sheet{position:fixed;inset:0;z-index:200}
.sheet__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.4);backdrop-filter:blur(2px)}
.sheet__panel{
  position:absolute;inset-block:0;right:0;width:min(20rem,88vw);
  background:#fff;border-radius:var(--r-slab) 0 0 var(--r-slab);
  padding:1.25rem;display:flex;flex-direction:column;
  box-shadow:var(--shadow-float);
  animation:sheet-in .2s ease;
}
@keyframes sheet-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.sheet__close{padding:.5rem;border-radius:var(--r-full)}
.sheet__close:hover{background:var(--secondary)}
.sheet__links{display:flex;flex-direction:column;gap:.25rem;flex:1}
.sheet__links a{padding:.875rem .75rem;border-radius:var(--r-base);font-size:1.0625rem}
.sheet__links a:hover{background:var(--secondary)}
.sheet__actions{display:flex;flex-direction:column;gap:.5rem;padding-top:1rem;border-top:1px solid var(--border)}

/* --- hero ----------------------------------------------------------------- */

.hero{
  position:relative;
  padding-top:4.5rem;
  padding-bottom:2rem;
  text-align:center;
  overflow:hidden;
}
@media(min-width:768px){.hero{padding-top:7rem;padding-bottom:3rem}}

/* The ground.
   Two layers: a three stop mesh, and a dot grid masked to fade out before the
   copy ends so the texture never competes with the words on top of it. */
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}

.hero__grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(10,10,10,.055) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(120% 78% at 50% 0%,#000 32%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 32%,transparent 72%);
}

/* The mesh is masked at its own top edge rather than trusted to fall off on
   its own. Without the mask the section clips a blurred gradient mid slope and
   the cut shows as a straight band under the nav, which is the tell that gives
   away every gradient hero. */
.hero__glow{
  position:absolute;inset:0 -20% auto -20%;height:46rem;
  background:
    radial-gradient(40rem 24rem at 50% 16%,var(--accent-glow),transparent 64%),
    radial-gradient(28rem 20rem at 8% 44%,var(--mesh-cool),transparent 68%),
    radial-gradient(32rem 22rem at 92% 30%,rgba(255,122,0,.10),transparent 66%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 62%,transparent 100%);
}

.hero__inner{position:relative;z-index:1}

/* --- hero copy ------------------------------------------------------------ */

.hero__eyebrow{
  margin-inline:auto;margin-bottom:1.5rem;
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--accent-line);
  color:var(--accent-ink);
  padding:.5rem .875rem;
  box-shadow:var(--shadow-sm);
}
.hero__eyebrow .ico{color:var(--accent-deep)}

.hero__title{
  /* Floor stays at the 34px the spec commits to. At 375px a 38px floor pushed
     the second line to within a few pixels of both margins, which reads as an
     accident rather than as confidence. The ceiling is what moved. */
  font-size:clamp(2.125rem,6.2vw,4.25rem);
  letter-spacing:-.038em;
  line-height:.98;
  text-wrap:balance;
  max-width:17ch;
  margin-inline:auto;
  transform:none;                    /* the reveal owns transform on this one */
  margin-top:-.02em;                 /* optical nudge, moved off transform */
}
/* The promise is the last two words, so they carry the one warm gradient on
   the page. Background clip needs the fallback colour underneath it for any
   engine that ignores the clip. */
.hero__title em{
  font-style:normal;
  color:var(--accent-deep);
  background:linear-gradient(96deg,var(--accent-deep),var(--accent-on-white) 62%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero__sub{
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  line-height:1.55;
  max-width:36rem;
  text-wrap:pretty;
  margin:1.5rem auto 0;
}

.hero__cta{margin-top:2.25rem;gap:.75rem}

/* Trust strip. Hairline separators instead of bullets, so the row reads as one
   statement rather than three loose fragments. */
.hero__trust{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.75rem 1.5rem;
  margin-top:2rem;
}
.hero__trust li{display:flex;align-items:center;gap:.5rem;position:relative}
.hero__trust li .ico{color:var(--accent-deep);opacity:.85}
@media(min-width:900px){
  .hero__trust li+li::before{
    content:"";position:absolute;left:-.75rem;top:50%;transform:translateY(-50%);
    width:1px;height:1rem;background:var(--border-strong);
  }
}

/* --- the booking panel ---------------------------------------------------- */

.hero__shot-wrap{position:relative;z-index:1;margin-top:2.5rem}
@media(min-width:768px){.hero__shot-wrap{margin-top:3.5rem}}

/* A soft pool of light under the panel so it sits on the page rather than
   floating over it. */
.hero__shot-wrap::before{
  content:"";position:absolute;z-index:0;
  left:50%;transform:translateX(-50%);
  top:-2rem;width:min(72rem,112%);height:118%;
  background:radial-gradient(ellipse at center,var(--accent-glow),transparent 68%);
  opacity:.85;
}

.hero__shot{
  position:relative;z-index:1;
  /* Frosted rather than opaque, because the pool of light below sits directly
     behind it and the blur is what picks that up. Glass over a flat ground is
     just an expensive white box, so the treatment stops here and at the nav
     and the eyebrow. It is not applied to buttons. */
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);
  border-radius:var(--r-slab);
  box-shadow:var(--shadow-lg);
  padding:1.25rem;text-align:left;
  transition:box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur) ease;
}
@media(min-width:768px){.hero__shot{padding:1.75rem}}

/* The top edge catches the light, the way a real raised surface does. */
.hero__shot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* Working in the panel lifts it. One state change, driven by focus rather than
   by hover, because this panel is used with a keyboard as often as a mouse. */
.hero__shot:focus-within{
  border-color:var(--accent-line);
  box-shadow:var(--shadow-lg),0 0 0 4px var(--accent-glow);
}

.stepper{
  display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;margin-bottom:1.25rem;border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.stepper::-webkit-scrollbar{display:none}
.stepper__item{
  display:flex;align-items:center;gap:.5rem;flex:none;scroll-snap-align:start;
  font-size:.8125rem;color:var(--muted-foreground);
  padding:.5rem .875rem;border-radius:var(--r-full);
  background:var(--secondary);
  border:1px solid transparent;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.stepper__item.is-active{
  color:var(--foreground);
  background:var(--accent-soft);
  border-color:var(--accent-line);
}
.stepper__n{
  width:1.25rem;height:1.25rem;border-radius:var(--r-full);
  display:grid;place-items:center;font-size:.6875rem;font-weight:600;
  font-family:var(--font-mono);
  background:#fff;border:1px solid var(--border);
}
/* White on --accent is 2.6:1, and this number is 11px, so it needed 4.5:1 and
   was failing. The deep ink reads at 8.8:1 and still says amber, with the glow
   underneath keeping the warmth the bright fill was there for. */
.stepper__item.is-active .stepper__n{
  background:var(--accent-ink);color:#fff;border-color:transparent;
  box-shadow:0 2px 6px -1px var(--accent-bloom);
}

.flowform__row{display:flex;flex-direction:column;gap:.875rem}
@media(min-width:768px){
  .flowform__row{flex-direction:row;align-items:flex-end}
  .flowform__field{flex:1}
  .flowform__field--sm{flex:0 0 10rem}
}
.flowform__field label{display:block;margin-bottom:.5rem}
.flowform__input{position:relative;display:flex;align-items:center}
.flowform__input .ico{
  position:absolute;left:.9375rem;color:var(--muted-foreground);pointer-events:none;
  transition:color var(--dur-fast) ease;
}
.flowform__input:focus-within .ico{color:var(--accent-deep)}
.flowform__input .field{padding-left:2.75rem}
.flowform__go{min-height:48px}
@media(max-width:767px){.flowform__go{width:100%}}
.flowform__note{display:flex;align-items:center;gap:.5rem;margin-top:1rem}

.chipcloud{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);
}
.chipcloud__item{
  font-size:.8125rem;padding:.4375rem .875rem;border-radius:var(--r-full);
  background:var(--secondary);color:var(--muted-foreground);
  border:1px solid transparent;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.chipcloud__item:hover{
  background:var(--accent-soft);color:var(--accent-ink);
  border-color:var(--accent-line);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

/* --- marquee -------------------------------------------------------------- */

.marquee__head{margin-bottom:1.25rem}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:3rem;width:max-content;animation:scroll-x 40s linear infinite}
.marquee-wrap:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-mono);font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted-foreground);opacity:.6;white-space:nowrap;
}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- zones ---------------------------------------------------------------- */

.zones__head{margin-bottom:2.5rem}
.zones__head .h2{max-width:none}
.zones__head .lead{margin-top:1rem;max-width:36rem;margin-inline:auto}

.zones{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:768px){.zones{grid-template-columns:repeat(3,1fr)}}

.zone{border:1px solid var(--panel-hairline);border-radius:var(--r-card);overflow:hidden;background:var(--panel-chip)}
.zone__media{position:relative;aspect-ratio:16/10}
.zone__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.zone__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(10,10,10,.88) 100%);
}
.zone__badge{position:absolute;top:.75rem;right:.75rem;z-index:2}
.zone__badge .dot{width:.375rem;height:.375rem;border-radius:var(--r-full);background:currentColor}
.zone__name{position:absolute;left:1rem;bottom:.875rem;z-index:2;color:#fff}
.zone__body{padding:1rem}
.zone__pc{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;margin-top:.5rem}

/* --- ticker --------------------------------------------------------------- */

.ticker{margin-top:2.5rem;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker__track{display:flex;gap:.625rem;width:max-content;animation:scroll-x 46s linear infinite}
.ticker__item{display:flex;align-items:center;gap:.5rem;white-space:nowrap;font-size:.8125rem;padding:.625rem .875rem}
.ticker__label{color:var(--panel-fg)}
.ticker__tag{margin-left:.25rem}

/* --- footer --------------------------------------------------------------- */

.footer{border-top:1px solid var(--border);padding-block:3rem 2rem;margin-top:2rem}
.footer__grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:640px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer__grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.footer__blurb{margin-top:.75rem;max-width:22rem}
.footer__head{font-size:.875rem;font-weight:600;margin-bottom:.75rem;letter-spacing:-.01em}
.footer__col li+li{margin-top:.5rem}
.footer__col a{font-size:.875rem;color:var(--muted-foreground)}
.footer__col a:hover{color:var(--foreground)}
.footer__legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);display:grid;gap:.75rem}
.footer__legal a{text-decoration:underline;text-underline-offset:2px}
.footer__positioning{max-width:60rem}