/* ============================================================
   ONYX — design tokens
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: local('Fraunces');
}

:root{
  --onyx-black: #0a0a0a;
  --onyx-ink: #111110;
  --onyx-charcoal: #1c1a18;
  --onyx-charcoal-2: #262320;
  --onyx-ivory: #f2ece1;
  --onyx-white: #f8f6f2;
  --onyx-smoke: #8f897f;
  --onyx-smoke-dim: #5c5852;
  --onyx-line: rgba(242,236,225,0.14);
  --onyx-line-strong: rgba(242,236,225,0.28);
  --accent: #b3603a;
  --accent-dim: #7c4a30;

  --font-serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --nav-h: 96px;
  --nav-h-scrolled: 68px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: auto;
  background: var(--onyx-black);
  /* always reserve the scrollbar's gutter, whether or not one is currently
     needed — otherwise opening the nav overlay (which sets overflow:hidden
     on body to lock scrolling) removes the scrollbar, the viewport gets
     wider by its width, and the logo's left:50% centering shifts sideways
     by half that amount. Confirmed: htmlClientWidth measured 1425px before
     opening the overlay and 1440px while it was open. */
  scrollbar-gutter: stable;
}

body{
  margin: 0;
  background: var(--onyx-black);
  color: var(--onyx-ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* NOTE: overflow-x:hidden must stay on body only, not html — putting it on
   both breaks position:sticky for any descendant (e.g. .day-stage), because
   html then becomes its own separate scrolling container instead of letting
   body's overflow propagate up to the viewport. Confirmed this the hard way:
   adding it to html broke the day-section's sticky pinning entirely. */
.site-nav,
.grain{
  transform: translateZ(0);
}

body.lock-scroll{ overflow: hidden; height: 100vh; }

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

button{
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

h1,h2,h3,h4,p{ margin: 0; }

::selection{ background: var(--accent); color: var(--onyx-white); }

/* film grain, sits above everything, never blocks input */
.grain{
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.eyebrow{
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--onyx-smoke);
  font-weight: 500;
}

.serif-display{
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 340;
  letter-spacing: -0.01em;
}

.container{
  width: 100%;
  padding: 0 clamp(20px, 5vw, 64px);
}

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.onyx-logo{
  display: block;
  width: auto;
}

/* ============================================================
   Navigation
   ============================================================ */

.site-nav{
  /* must be position:fixed, not sticky — sticky occupies real space in the
     document flow, which pushes the hero/video down and exposes the body's
     black background above it (confirmed: this was the actual cause of the
     "black bar behind the nav" complaint). Fixed takes the nav out of flow
     entirely so it overlays directly on top of the hero at all times. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(20px, 5vw, 56px);
  transition: height .6s var(--ease-soft), background-color .6s var(--ease-soft), border-color .6s var(--ease-soft);
  border-bottom: 1px solid transparent;
  background: transparent;
}

@media (min-width: 641px){
  .nav-mark{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.site-nav.nav-scrolled{
  height: var(--nav-h-scrolled);
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}

.nav-mark{
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.nav-mark .onyx-logo{
  height: 32px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

.nav-links{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.nav-cta{
  background: var(--onyx-ivory);
  color: var(--onyx-black) !important;
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  transition: background-color .3s var(--ease-soft), transform .2s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.nav-cta:hover{ background: var(--onyx-white); color: var(--onyx-black) !important; transform: translateY(-1px); }

.nav-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2;
  background: var(--onyx-charcoal);
  border: 1px solid var(--onyx-line-strong);
  border-radius: 6px;
  padding: 12px;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.nav-toggle-label{
  display: none;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--onyx-ivory);
  transition: color .3s var(--ease-soft);
}
.nav-toggle:hover .nav-toggle-label{ color: var(--onyx-ivory); }
.nav-toggle-icon{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 22px;
  height: 16px;
}
.nav-toggle-icon span{
  height: 1px; width: 100%;
  background: var(--onyx-ivory);
  transition: transform .45s var(--ease-soft), opacity .3s, width .3s;
}
.nav-toggle-icon span:last-child{ width: 70%; align-self: flex-end; }
.nav-toggle:hover .nav-toggle-icon span:last-child{ width: 100%; }

.toggle-open .nav-toggle-icon span:first-child{
  transform: translateY(3.5px) rotate(45deg);
}
.toggle-open .nav-toggle-icon span:last-child{
  transform: translateY(-3.5px) rotate(-45deg);
  width: 100%;
}

/* Fullscreen editorial menu overlay */
.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--onyx-ink);
  display: flex;
  align-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-out);
  pointer-events: none;
}
.nav-overlay.overlay-open{
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
}

.overlay-grid{
  width: 100%;
  padding: 0 clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}

.overlay-links{
  display: flex;
  flex-direction: column;
}

.overlay-links a{
  font-family: var(--font-serif);
  font-weight: 320;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--onyx-smoke);
  padding: .06em 0;
  transition: color .5s var(--ease-soft), padding-left .5s var(--ease-soft);
  border-top: 1px solid transparent;
}
.overlay-links a:hover,
.overlay-links a:focus-visible,
.overlay-links a.active{
  color: var(--onyx-ivory);
  padding-left: .18em;
}
.overlay-links a .num{
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .1em;
  vertical-align: super;
  margin-right: 18px;
  color: var(--onyx-smoke-dim);
}

.overlay-side{
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-left: 1px solid var(--onyx-line);
  padding-left: 40px;
}
.overlay-side .eyebrow{ margin-bottom: 4px; }
.overlay-side address{
  font-style: normal;
  font-size: 14px;
  color: var(--onyx-smoke);
  line-height: 1.9;
}
.overlay-side address a:hover{ color: var(--onyx-ivory); }

/* qualified with the element (a.overlay-discount-link) so its specificity
   safely beats `.overlay-links a` — it now lives inside .overlay-links so
   it stays visible on mobile too (see the max-width:640px block below),
   and without this it would inherit that rule's huge serif nav-link size
   and smoke color instead of its own pill styling */
a.overlay-discount-link{
  display: inline-flex;
  align-items: center;
  /* .overlay-links is a flex column, whose default align-items:stretch
     would otherwise force this to the full column width like the other
     (plain-text, so it's invisible there) nav links — align-self keeps it
     a compact pill instead of a full-width bar */
  align-self: flex-start;
  margin-top: 22px;
  background: var(--accent);
  color: var(--onyx-white);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 6px;
  transition: background-color .3s var(--ease-soft), transform .2s;
}
a.overlay-discount-link:hover{
  background: var(--accent-dim);
  transform: translateY(-1px);
}

/* same reasoning/fix as the discount link above: lives inside
   .overlay-links so it stays visible on mobile, qualified with the
   element so it doesn't inherit the giant serif nav-link styling */
.overlay-legal-links{ display: flex; gap: 20px; margin-top: 20px; }
a.overlay-legal-links-link{
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--onyx-smoke-dim);
  padding: 0;
  border-top: none;
  transition: color .3s var(--ease-soft);
}
a.overlay-legal-links-link:hover{ color: var(--onyx-ivory); padding-left: 0; }

@media (max-width: 640px){
  .site-nav{ justify-content: space-between; }
  .nav-mark{
    position: static !important;
    left: auto; top: auto;
    transform: none !important;
  }
  .overlay-grid{ grid-template-columns: 1fr; }
  .overlay-side{ display: none; }
}

@media (max-width: 340px){
  /* logo + Reservieren + Menü fit with zero slack at 320px — a small safety buffer */
  .nav-cta{ padding: 10px 16px; }
  .nav-links{ gap: 12px; }
}

/* ============================================================
   Hero — video + one line
   Full-bleed looping video, a dark legibility overlay, and a
   single short German tagline. Nothing else.
   ============================================================ */

.hero{
  position: relative;
  height: 100vh;
  background: var(--onyx-black);
  overflow: visible;
}

.hero-frame{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-frame::after{
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.28) 45%, rgba(10,10,10,.6) 100%);
  pointer-events: none;
}

.hero-copy{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.hero-tagline{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 2vw, 18px);
}
.hero-tagline span{
  font-family: var(--font-serif);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(40px, 8vw, 110px);
  line-height: .95;
  color: var(--onyx-ivory);
  opacity: 0;
  transform: translateY(20px);
  animation: hero-tagline-in .6s var(--ease-out) forwards;
}
.hero-tagline span:nth-child(1){ animation-delay: .15s; }
.hero-tagline span:nth-child(2){ animation-delay: .3s; }
.hero-tagline span:nth-child(3){ animation-delay: .45s; }

@keyframes hero-tagline-in{
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-tagline span{ animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Scroll badge — spinning "SCROLL" ring straddling the hero seam
   ============================================================ */

.scroll-badge{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(110px, 12vw, 150px);
  height: clamp(110px, 12vw, 150px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-badge::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
}
.scroll-badge-ring{
  position: relative;
  width: 100%;
  height: 100%;
  animation: scroll-badge-spin 12s linear infinite;
}
.scroll-badge-ring text{
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .14em;
  fill: var(--onyx-ivory);
  text-transform: uppercase;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.scroll-badge-arrow{
  position: absolute;
  font-size: 22px;
  color: var(--onyx-ivory);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  animation: scroll-arrow-bob 1.8s ease-in-out infinite;
}
@keyframes scroll-badge-spin{
  from{ transform: rotate(0); }
  to{ transform: rotate(360deg); }
}
@keyframes scroll-arrow-bob{
  0%, 100%{ transform: translateY(-3px); }
  50%{ transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-badge-ring{ animation: none; }
  .scroll-badge-arrow{ animation: none; }
}

@media (max-width: 480px){
  .scroll-badge{ width: 84px; height: 84px; }
  /* the SVG's internal font-size scales down with the container (viewBox is
     fixed), so bump it here to keep the rendered text legible at 84px */
  .scroll-badge-ring text{ font-size: 24px; }
  .scroll-badge-arrow{ font-size: 16px; }
}

/* ============================================================
   Ein Tag im Onyx — day timeline
   ============================================================ */

.day{
  position: relative;
  background: var(--onyx-black);
}

.day-intro{
  padding: 180px clamp(20px, 6vw, 64px) 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.day-intro h2{
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: .96;
  letter-spacing: -0.01em;
}
.day-intro p{
  font-size: 15px;
  color: var(--onyx-smoke);
  max-width: 440px;
  line-height: 1.75;
  justify-self: end;
  text-align: right;
}

.day-track{
  position: relative;
  height: 400vh; /* 4 chapters of runway */
  height: 400dvh;
}

.day-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.day-bg{
  position: absolute; inset: 0;
  z-index: 0;
  transition: background-color 1s var(--ease-soft);
}
/* a soft cross-fade + gentle settle, instead of a hard clip-path wipe —
   opacity/transform are compositor-only properties (no layout, no repaint
   of the full-viewport image every frame), which is both the fix for the
   scroll jank this section had and a nicer, more "one moment dissolving
   into the next" transition than a geometric wipe ever looked like. */
.day-bg-frame{
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 1.4s var(--ease-soft), transform 1.8s var(--ease-soft);
  overflow: hidden;
  will-change: opacity, transform;
}
.day-bg-frame.chapter-active{
  opacity: 1;
  transform: scale(1);
}
.day-bg-frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: day-kb 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* only the visible frame keeps animating — the other three would otherwise
   burn scale/translate recalculation every frame for nothing */
.day-bg-frame.chapter-active img{ animation-play-state: running; }
@keyframes day-kb{
  from{ transform: scale(1) translateX(0); }
  to{ transform: scale(1.1) translateX(-1.5%); }
}
@media (prefers-reduced-motion: reduce){
  .day-bg-frame img{ animation: none; }
  .day-bg-frame{ transition: opacity .3s linear; }
}
.day-bg::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.62) 42%, rgba(10,10,10,.2) 75%);
}

.day-chapters{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(20px, 6vw, 64px);
}

.day-chapter{
  position: absolute;
  top: 50%;
  left: clamp(20px, 6vw, 64px);
  transform: translateY(-50%) translateX(-14px);
  opacity: 0;
  transition: opacity .8s var(--ease-soft), transform .9s var(--ease-soft);
  pointer-events: none;
}
.day-chapter.chapter-active{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.day-chapter h3{
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 330;
  font-size: clamp(46px, 8vw, 108px);
  line-height: .96;
  max-width: 12ch;
}
.day-chapter h3::after{
  content: '';
  position: absolute;
  left: 0; bottom: -.08em;
  height: 2px;
  width: 0%;
  background: var(--accent);
  transition: width .4s var(--ease-soft) .35s;
}
.day-chapter.chapter-active h3::after{ width: 100%; }

.day-tags{
  margin-top: 22px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.day-tags span{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--onyx-smoke);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--onyx-line-strong);
}

/* dots: mobile fallback only — the clock arc takes over on desktop */
.day-progress{
  display: none;
  position: absolute;
  right: clamp(20px, 6vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  flex-direction: column;
  gap: 22px;
}
.day-progress .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--onyx-line-strong);
  transition: background-color .4s, transform .4s;
}
.day-progress .dot.dot-active{
  background: var(--accent);
  transform: scale(1.6);
}

/* ---------------- the sun's path — a literal day-to-night arc, driven by
   the same scroll progress that switches chapters, plus a sky-wash overlay
   that darkens the whole stage as the day turns to night ---------------- */

.day-sky{
  position: absolute;
  top: clamp(40px, 9vh, 90px);
  right: clamp(24px, 7vw, 80px);
  width: clamp(300px, 30vw, 420px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
/* no hard card — just a glow that shifts through the same day → sunset →
   night colors as the sun (set in main.js, right alongside the sun's own
   color) — but sized and saturated enough now to read as the section's
   main visual event, not a small corner accent */
.day-sky-panel{
  position: relative;
  width: 100%;
  height: clamp(150px, 14vw, 190px);
  border-radius: 24px;
  /* deliberately not clipped — the sun's path runs close enough to the
     rounded corners that overflow:hidden would shave its edge off right
     at the start/end of its journey. The rounded shape still reads fine
     purely from the gradient background's own border-radius. */
  background: linear-gradient(180deg, rgba(235,214,181,.08) 0%, rgba(235,214,181,.24) 100%);
  transition: background .5s linear;
}
.day-sky-arc{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.day-sky-arc path{
  fill: none;
  stroke: rgba(242,236,225,.4);
  stroke-width: 1.75;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
/* the line the sun rises from and sets behind — the clearest "this is a
   horizon" cue, now bright enough to actually register at a glance */
.day-horizon{
  position: absolute;
  left: 8%; right: 8%;
  bottom: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--onyx-line-strong) 25%, var(--onyx-line-strong) 75%, transparent 100%);
}

.day-sun{
  position: absolute;
  top: 0; left: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 30px 8px rgba(179,96,58,.6);
  offset-path: path('M 14,96 Q 110,4 206,96');
  offset-distance: 0%;
  z-index: 2;
  will-change: offset-distance;
}

/* the caption that names the moment — grouped with the visual, not over on
   the chapter text, and its color is driven by main.js from the exact same
   day → sunset → night arc as the sun and the glow behind it. The text
   itself warms and cools with the sky instead of sitting next to it as a
   static label, so the two read as one continuous transition. */
.day-sky-caption{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: .01em;
  color: var(--onyx-ivory);
  text-align: right;
  transition: color .5s linear, text-shadow .5s linear;
}

@media (prefers-reduced-motion: reduce){
  .day-sun{ transition: none; }
  .day-sky-panel{ transition: none; }
  .day-sky-caption{ transition: none; }
}

.day-sky-wash{
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,.9) 100%);
  opacity: 0;
  pointer-events: none;
}

/* ---------------- day motto — persistent line, grouped with the sky
   widget (a flex child right under the caption) instead of floating alone
   at the bottom of the stage, so it reads as part of the same composition
   on every breakpoint ---------------- */

.day-motto{
  text-align: right;
  pointer-events: none;
}
.day-motto span{
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: .12em;
  line-height: 1.6;
  color: var(--onyx-smoke);
  text-transform: none;
}

/* on short viewports (landscape phones especially) the whole stacked group
   can run tall enough to collide with the vertically-centered chapter text
   — the motto is the least essential line, so it's the one that yields */
@media (max-height: 480px){
  .day-motto{ display: none; }
}

@media (max-width: 860px){
  .day-intro{ grid-template-columns: 1fr; }
  .day-intro p{ justify-self: start; text-align: left; }
  .day-progress{ display: flex; top: 56%; }
  /* nudge the whole composition down a little so nothing sits directly
     behind the fixed nav's buttons at the very top of the screen. Note:
     .day-chapter's own `top` percentage can't do this — it resolves against
     .day-chapters, which renders at 0 height (it only holds absolutely-
     positioned children), so any top:% value on .day-chapter is a no-op.
     The actual vertical centering comes from .day-stage's flex
     align-items:center acting on .day-chapters as a flex item, so a margin
     on that flex item is what actually shifts it. */
  .day-chapters{ margin-top: 48px; }
  /* the sun-arc sweep must stay on mobile too, matching desktop — shrunk,
     and moved well below the fixed nav's Reservieren/Menü buttons, which
     it was previously rendering directly behind (same top-right corner —
     nav floats over the pinned stage since the stage is sticky at top:0).
     The visible dashed arc (an SVG with viewBox + preserveAspectRatio=
     "none") stretches to fit automatically, but .day-sun's offset-path is
     plain CSS using absolute units against this element's own box, so it
     needs its own mobile-proportioned path to match. */
  .day-sky{
    top: 108px;
    right: 16px;
    width: 190px;
    gap: 8px;
  }
  .day-sky-panel{ height: 95px; border-radius: 18px; }
  .day-sky-caption{ font-size: 16px; }
  .day-sun{ width: 20px; height: 20px; offset-path: path('M 12,83 Q 95,4 178,83'); }
  .day-motto span{ font-size: 11px; line-height: 1.5; }
  .day-chapter h3{ max-width: 12ch; }
}

@media (max-width: 340px){
  /* at the narrowest stress-test width the chapter heading's bounding box
     genuinely reaches far enough right to intersect the sky widget. Shrink
     the widget a little further AND give the chapter text more headroom
     (rather than shrinking the widget down to nothing, which would undercut
     the whole point of this round's change) to clear it properly. */
  .day-sky{ top: 100px; width: 148px; gap: 6px; }
  .day-sky-panel{ height: 72px; border-radius: 14px; }
  .day-sky-caption{ font-size: 13px; }
  .day-sun{ width: 16px; height: 16px; offset-path: path('M 8,54 Q 60,2 112,54'); }
  .day-chapters{ margin-top: 150px; }
  /* at this width every right-anchored element (widget, dots) and the
     chapter text are all fighting for the same tight vertical space — the
     dots are the least essential piece (a supplementary progress cue; the
     chapter text + sky widget are the real story), so they're the one that
     yields here rather than chasing an ever-shifting gap between the rest */
  .day-progress{ display: none; }
}

/* ============================================================
   Discover Onyx — a slowly self-scrolling gallery
   The rail drifts sideways on its own (main.js: discoverRail(), a
   requestAnimationFrame loop nudging native scrollLeft), and instantly
   pauses on hover/touch/drag. Because it's driven through real scrollLeft
   on a plain overflow-x:auto element (not a scroll-jacked pin), it's also
   just a normal draggable/swipeable strip the rest of the time — on both
   desktop and mobile — with no dependency on the page's own scroll
   position at all.
   ============================================================ */

.discover{
  position: relative;
  background: var(--onyx-ink);
  padding: 140px 0 120px;
}

.discover-head{
  margin: 0 clamp(20px, 6vw, 64px) 60px;
}
.discover-head h2{
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(38px, 5vw, 64px);
}

.discover-rail-wrap{
  position: relative;
}

.discover-rail{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: 0 clamp(20px, 6vw, 64px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.discover-rail::-webkit-scrollbar{ display: none; }
.discover-rail.is-dragging{ cursor: grabbing; scroll-snap-type: none; }

.discover-panel{
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(46vw, 560px);
  height: 62vh;
  min-height: 360px;
  max-height: 560px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--onyx-charcoal);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}

.discover-panel-media{
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  overflow: hidden;
}
.discover-panel-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: saturate(.85) brightness(.68);
  transition: transform 1s var(--ease-out), filter .6s var(--ease-soft);
  animation: discover-kb 20s ease-in-out infinite alternate;
}
.discover-panel:nth-child(2n) .discover-panel-media img{ animation-duration: 24s; animation-delay: -6s; }
.discover-panel:nth-child(3n) .discover-panel-media img{ animation-duration: 17s; animation-delay: -3s; }
@keyframes discover-kb{
  from{ transform: scale(1.08) translate(0, 0); }
  to{ transform: scale(1.2) translate(-2%, -1.5%); }
}
.discover-panel:hover .discover-panel-media img{
  transform: scale(1.14);
  filter: saturate(1) brightness(.8);
  animation-play-state: paused;
}

.discover-panel::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 32%, rgba(10,10,10,.9) 100%);
}

.discover-panel-info{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(24px, 3vw, 44px);
}
.discover-panel-count{
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--onyx-smoke-dim);
  margin-bottom: 16px;
}
.discover-panel-info .eyebrow{ display: block; margin-bottom: 10px; }
.discover-panel-info h3{
  font-weight: 330;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1;
  color: var(--onyx-white);
}
.discover-panel-info p{
  margin-top: 14px;
  font-size: 14px;
  color: var(--onyx-smoke);
  max-width: 34ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.discover-panel:hover .discover-panel-info p{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .discover-panel-media img{ transition: none; animation: none; }
  .discover-panel-info p{ transition: none; }
}

@media (max-width: 860px){
  .discover{ padding: 100px 0 100px; }
  .discover-head{ margin: 0 clamp(20px, 6vw, 64px) 36px; }

  .discover-rail{
    gap: 14px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
  }
  .discover-panel{
    width: 82vw;
    height: 58vh;
    min-height: 340px;
    max-height: none;
  }
  /* on touch there's no hover — keep the description visible at rest */
  .discover-panel-info p{ opacity: 1; transform: none; }
}

/* ============================================================
   Footer / reserve strip
   ============================================================ */

.reserve-strip{
  position: relative;
  padding: 200px clamp(20px, 6vw, 64px) 160px;
  background: var(--onyx-black);
  overflow: hidden;
  text-align: center;
}
.reserve-strip::before{
  content:'';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 30%, rgba(179,96,58,.08), transparent 70%);
}
.reserve-strip .eyebrow{ display:block; margin-bottom: 26px; }
.reserve-strip h2{
  font-family: var(--font-serif);
  font-weight: 320;
  font-size: clamp(48px, 9vw, 140px);
  line-height: .92;
  letter-spacing: -0.01em;
}
.reserve-strip .reserve-cta{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 46px;
  padding: 18px 40px;
  border: 1px solid var(--onyx-line-strong);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background-color .35s, color .35s, border-color .35s;
}
.reserve-strip .reserve-cta:hover{
  background: var(--onyx-ivory);
  color: var(--onyx-black);
}

/* ============================================================
   LEGAL PAGES — Impressum / Datenschutz
   ============================================================ */

.legal-page{
  max-width: 780px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 64px) clamp(20px, 5vw, 40px) 100px;
}
.legal-page > .eyebrow{ display: block; margin-bottom: 18px; }
.legal-page h1{
  font-family: var(--font-serif);
  font-weight: 320;
  font-size: clamp(40px, 7vw, 64px);
  line-height: .98;
  letter-spacing: -0.01em;
}
.legal-page .legal-updated{
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--onyx-smoke-dim);
}

.legal-notice{
  margin-top: 40px;
  padding: 18px 22px;
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(179,96,58,.12) 0%, rgba(179,96,58,.02) 100%);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--onyx-smoke);
}
.legal-notice strong{ color: var(--accent); }

.legal-body{ margin-top: 48px; }
.legal-body section{ margin-top: 40px; }
.legal-body section:first-child{ margin-top: 0; }
.legal-body h2{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--onyx-ivory);
  margin-bottom: 14px;
}
.legal-body h3{
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--onyx-ivory);
  margin: 20px 0 8px;
}
.legal-body p, .legal-body li{
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--onyx-smoke);
  max-width: 68ch;
}
.legal-body p + p{ margin-top: 12px; }
.legal-body ul{ margin: 10px 0; padding-left: 20px; }
.legal-body li{ margin: 6px 0; }
.legal-body a{ color: var(--onyx-ivory); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover{ color: var(--accent); }

/* every business-specific fact the owner still needs to fill in is
   wrapped in this — impossible to miss, and greppable (search the html
   for "placeholder") before the site goes live */
.legal-placeholder{
  display: inline;
  background: rgba(179,96,58,.16);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}

@media (max-width: 640px){
  .legal-page{ padding-top: calc(var(--nav-h-scrolled) + 40px); }
}

.site-footer{
  border-top: 1px solid var(--onyx-line);
  padding: 48px clamp(20px, 6vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--onyx-black);
}
.site-footer .foot-mark{ display: flex; align-items: center; gap: 10px; color: var(--onyx-smoke); }
.site-footer nav{ display: flex; gap: 28px; flex-wrap: wrap; }
.site-footer nav a{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--onyx-smoke); }
.site-footer nav a:hover{ color: var(--onyx-ivory); }
.site-footer small{ font-size: 11px; color: var(--onyx-smoke-dim); letter-spacing: .04em; }

/* Impressum / Datenschutz / "Cookie-Einstellungen erneut öffnen" — a
   button styled identically to the plain-text nav links beside it, so
   reopening consent preferences later reads as just another footer link */
.site-footer .foot-legal{ display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer .foot-legal a,
.site-footer .foot-legal button{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--onyx-smoke);
}
.site-footer .foot-legal a:hover,
.site-footer .foot-legal button:hover{ color: var(--onyx-ivory); }

/* ============================================================
   Menu page
   ============================================================ */

.menu-hero{
  position: relative;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(20px, 6vw, 64px) 90px;
  overflow: hidden;
}
.menu-hero-bg{
  position: absolute; inset: 0;
  z-index: 0;
}
.menu-hero-bg img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.25) brightness(.55);
  transform: scale(1.05);
}
.menu-hero-bg::after{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 40%, var(--onyx-black) 100%);
}
.menu-hero-copy{ position: relative; z-index: 2; }
.menu-hero-copy .eyebrow{ display: block; margin-bottom: 20px; }
.menu-hero-copy h1{
  font-family: var(--font-serif);
  font-weight: 320;
  font-size: clamp(60px, 13vw, 180px);
  line-height: .86;
}

.menu-shell{
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  background: var(--onyx-black);
}

.menu-rail{
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 20px 0;
  border-right: 1px solid var(--onyx-line);
}
.menu-rail button{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--onyx-smoke-dim);
  text-align: left;
  transition: color .4s var(--ease-soft);
  padding: 4px 0;
}
.menu-rail button:hover{ color: var(--onyx-smoke); }
.menu-rail button.rail-active{ color: var(--onyx-ivory); }

.menu-content{ min-width: 0; }

.menu-cat{
  position: relative;
  padding: 120px clamp(20px, 5vw, 64px) 40px;
  background: var(--onyx-black);
  transition: background-color .6s var(--ease-soft);
}
.menu-cat[data-cat="matcha"]{ background: linear-gradient(180deg, #12160e 0%, var(--onyx-black) 70%); }
.menu-cat[data-cat="acai"]{ background: linear-gradient(180deg, #150f17 0%, var(--onyx-black) 70%); }
.menu-cat[data-cat="coffee"]{ background: linear-gradient(180deg, #18120b 0%, var(--onyx-black) 70%); }
.menu-cat[data-cat="tea"]{ background: linear-gradient(180deg, #141310 0%, var(--onyx-black) 70%); }
.menu-cat[data-cat="desserts"]{ background: linear-gradient(180deg, #1a140c 0%, var(--onyx-black) 70%); }
.menu-cat[data-cat="cocktails"]{ background: linear-gradient(180deg, #180c10 0%, var(--onyx-black) 70%); }
.menu-cat[data-cat="shisha"]{ background: linear-gradient(180deg, #0d0d0d 0%, #050505 70%); }

.menu-cat-grid{
  display: grid;
  grid-template-columns: minmax(220px, 400px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.menu-cat-label{
  position: sticky;
  top: calc(var(--nav-h) + 60px);
  min-width: 0;
}
.menu-cat-label .eyebrow{ display: block; margin-bottom: 18px; }
.menu-cat-label h2{
  font-family: var(--font-serif);
  font-weight: 320;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .96;
  overflow-wrap: break-word;
  hyphens: auto;
}
.menu-cat-label p{
  margin-top: 20px;
  font-size: 14px;
  color: var(--onyx-smoke);
  max-width: 26ch;
  line-height: 1.7;
}

.menu-cat-products{ display: flex; flex-direction: column; }

.menu-item{
  display: grid;
  grid-template-columns: minmax(180px, 40%) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--onyx-line);
  cursor: pointer;
}
.menu-cat-products .menu-item:first-child{ border-top: none; }

.menu-item-media{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--onyx-charcoal);
}
.menu-item-media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.1s var(--ease-out), filter .6s;
  filter: saturate(.92) brightness(.92);
}
.menu-item:hover .menu-item-media img{ transform: scale(1); filter: saturate(1) brightness(1); }

/* a product image that fails to load (missing file, typo'd path in
   menu-data.js) falls back to this quiet mark instead of a broken-image
   icon — the box itself already has a fixed aspect-ratio, so nothing
   shifts either way */
.menu-item-media.img-missing::after,
.product-overlay-media.img-missing::after{
  content: 'ONYX';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--onyx-smoke-dim);
}

.menu-error{
  padding: 120px clamp(20px, 5vw, 64px);
  text-align: center;
  color: var(--onyx-smoke);
  font-size: 15px;
  line-height: 1.8;
}
.menu-error-hint{ margin-top: 8px; font-size: 13px; color: var(--onyx-smoke-dim); }

.menu-item-index{
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--onyx-smoke-dim);
  display: block;
  margin-bottom: 14px;
}
.menu-item-info h3{
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
}
.menu-item-info .featured-mark{
  display: inline-block;
  margin-left: 12px;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent);
  vertical-align: middle;
  border: 1px solid var(--accent-dim);
  padding: 3px 8px;
  border-radius: 2px;
}
.menu-item-info p{
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--onyx-smoke);
  max-width: 46ch;
}
.menu-item-bottom{
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.menu-item-price{
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--onyx-ivory);
}
.menu-item-tags{ display: flex; gap: 12px; flex-wrap: wrap; }
.menu-item-tags span{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--onyx-smoke-dim);
}

@media (max-width: 860px){
  .menu-shell{ grid-template-columns: 1fr; }
  /* a slim, editorial text-tab bar instead of app-style pill chips — all
     seven categories at once, anchored to the bottom of the screen */
  .menu-rail{
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 2px;
    column-gap: clamp(18px, 5vw, 30px);
    padding: 8px clamp(20px, 6vw, 40px);
    background: rgba(10,10,10,.97);
    backdrop-filter: blur(14px);
    border-right: none;
    border-top: 1px solid var(--onyx-line);
    z-index: 250;
    overflow: visible;
  }
  .menu-rail button{
    writing-mode: horizontal-tb;
    transform: none;
    white-space: nowrap;
    flex: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 1px;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--onyx-smoke-dim);
    transition: color .3s var(--ease-soft);
  }
  .menu-rail button::after{
    content: '';
    position: absolute;
    left: 1px; right: 1px; bottom: 7px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .35s var(--ease-soft);
  }
  .menu-rail button.rail-active{ color: var(--onyx-ivory); }
  .menu-rail button.rail-active::after{ transform: scaleX(1); }

  /* the rail is fixed at the bottom again — give the product list room so
     the last cards in each category aren't hidden behind it */
  .menu-content{ padding-bottom: 130px; }
  .menu-cat{ scroll-margin-top: 84px; }
  .menu-cat-grid{ grid-template-columns: 1fr; }
  .menu-cat-label{ position: static; margin-bottom: 30px; }
  .menu-item{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  /* compact horizontal image+text cards — target ~4 visible per screen */
  .menu-item{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
  }
  .menu-item-media{
    width: 92px;
    height: 92px;
    aspect-ratio: auto;
    flex: 0 0 92px;
    border-radius: 4px;
    overflow: hidden;
  }
  .menu-item-info{
    flex: 1;
    min-width: 0;
  }
  .menu-item-index{ display: none; }
  .menu-item-info h3{
    font-size: 15px;
    line-height: 1.25;
  }
  .menu-item-info .featured-mark{
    margin-left: 8px;
    font-size: 9px;
    padding: 2px 6px;
  }
  .menu-item-info p{
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .menu-item-bottom{
    margin-top: 6px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .menu-item-price{ font-size: 13px; }
  .menu-item-tags{ gap: 8px; }
  .menu-item-tags span{ font-size: 9px; }
}

/* ---------------- product overlay ---------------- */
.product-overlay{
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-soft);
}
.product-overlay.overlay-active{ opacity: 1; pointer-events: auto; }
.product-overlay-backdrop{
  position: absolute; inset: 0;
  background: rgba(6,6,6,.88);
  backdrop-filter: blur(6px);
}
.product-overlay-panel{
  position: relative;
  z-index: 2;
  width: min(1000px, 100%);
  max-height: 88vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--onyx-ink);
  border: 1px solid var(--onyx-line);
  overflow: hidden;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.overlay-active .product-overlay-panel{ transform: translateY(0); opacity: 1; }

.product-overlay-media{ position: relative; overflow: hidden; background: var(--onyx-charcoal); }
.product-overlay-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.product-overlay-info{
  padding: clamp(28px, 4vw, 56px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.product-overlay-info .eyebrow{ display: block; margin-bottom: 20px; }
.product-overlay-info h3{
  font-family: var(--font-serif);
  font-weight: 320;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.08;
}
.product-overlay-info p.desc{
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--onyx-smoke);
}
.product-overlay-info .price-row{
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--onyx-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-overlay-info .price{
  font-family: var(--font-serif);
  font-size: 26px;
}
.product-overlay-info .allergens{
  margin-top: 18px;
  font-size: 12px;
  color: var(--onyx-smoke-dim);
  letter-spacing: .02em;
}
.product-overlay-close{
  position: absolute;
  top: 20px; right: 20px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--onyx-line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--onyx-ivory);
  transition: background-color .3s;
}
.product-overlay-close:hover{ background: rgba(255,255,255,.08); }

@media (max-width: 720px){
  .product-overlay-panel{ grid-template-columns: 1fr; max-height: 92vh; }
  .product-overlay-media{ height: 40vh; }
}

/* ============================================================
   Coming soon — standalone teaser page
   ============================================================ */

.coming-soon{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--onyx-black);
}
.coming-soon-video{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coming-soon-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.28) 45%, rgba(10,10,10,.6) 100%);
  pointer-events: none;
}
.coming-soon-content{
  position: relative;
  z-index: 2;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coming-soon-logo{
  height: clamp(40px, 5vw, 60px);
  width: auto;
  margin-bottom: 32px;
  opacity: .92;
}
.coming-soon-content h1{
  font-family: var(--font-serif);
  font-weight: 340;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  color: var(--onyx-ivory);
}
.coming-soon-content p{
  margin-top: 22px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--onyx-smoke);
}
.coming-soon-content address{
  margin-top: 36px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.9;
  color: var(--onyx-smoke);
}
.coming-soon-content address a:hover{ color: var(--onyx-ivory); }

.coming-soon-cta{
  display: inline-block;
  margin-top: 28px;
  background: var(--accent);
  color: var(--onyx-white);
  border-radius: 6px;
  padding: 12px 26px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .3s var(--ease-soft), transform .2s;
}
.coming-soon-cta:hover{ background: var(--accent-dim); transform: translateY(-1px); }