/* ==========================================================================
   99dreams — "Monochrome Nightlife"
   Pure black-and-white. No hue anywhere: every accent is a value of white,
   every photograph is desaturated in CSS. Hierarchy comes from luminance and
   space, never from colour. Fully tokenized — swapping the palette back is a
   one-block edit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* surface — neutral greys, deliberately free of the blue tint they had */
  --bg: #060606;
  --bg-raise: #0E0E0E;
  --bg-sink: #000000;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-3: rgba(255, 255, 255, .11);
  --glass-blur: 24px;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .26);

  /* text */
  --text: #F5F5F5;
  --muted: rgba(245, 245, 245, .62);
  --faint: rgba(245, 245, 245, .38);

  /* accents — the old gold/violet slots, now pure luminance.
     --spark is the soft silver used for rules, icons and small caps;
     --spark-hot is the full white reserved for things that must pop. */
  --spark: #E4E4E4;
  --spark-hot: #FFFFFF;
  --spark-soft: rgba(255, 255, 255, .22);
  --spark-ghost: rgba(255, 255, 255, .08);
  --violet: #FFFFFF;
  --violet-soft: rgba(255, 255, 255, .12);
  --cyan: #FFFFFF;
  --lavender: #FFFFFF;
  --mint: #FFFFFF;

  /* brushed-silver sweep for display type */
  --chrome-1: #ABABAB;
  --chrome-2: #EDEDED;
  --chrome-3: #FFFFFF;
  --chrome-4: #ABABAB;
  --chrome-sweep: linear-gradient(105deg,
      var(--chrome-1) 0%, var(--chrome-2) 38%, var(--chrome-3) 48%,
      var(--chrome-3) 56%, var(--chrome-2) 78%, var(--chrome-4) 100%);

  /* ink for text sitting on a white fill — the one place we go dark on light */
  --on-light: #050505;

  /* semantic — monochrome, so status is carried by the glyphs in .status */
  --ok: #FFFFFF;
  --ok-hover: #D6D6D6;
  --err: #FFFFFF;

  /* typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Montserrat', ui-monospace, monospace;

  /* geometry */
  --r-sm: 0px;
  --r-md: 16px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 0px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;

  /* elevation */
  --glow-spark: 0 8px 32px var(--spark-soft);
  --glow-violet: 0 8px 40px var(--violet-soft);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, .45);

  /* pointer position, written by app.js */
  --mx: 50%;
  --my: 40%;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }

img { max-width: 100%; }

::selection {
  background: var(--spark-hot);
  color: var(--on-light);
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: min(1152px, calc(100% - 48px));
  margin: 0 auto;
}

.section { padding: clamp(72px, 10vw, 118px) 0; }

/* headings ---------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Sized so "Where every night" fits one line and the <br> controls the break
   instead of natural wrapping. Syne is wide — don't raise this without
   re-checking the hero at 1024px and 1440px. */
h1 {
  margin: 22px auto 20px;
  max-width: 1120px;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: .95;
  letter-spacing: -0.02em;
}

h2 {
  margin: 14px 0 10px;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.section-intro {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(.88rem, 1.4vw, .95rem);
  line-height: 1.65;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--faint);
  font: 500 .68rem var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 12px var(--spark);
}

/* --------------------------------------------------------------------------
   3. UTILITIES — glass, chrome, ambient mesh
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
}

/* 1px gradient hairline that catches light on the top-left edge */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
      var(--spark-soft), rgba(255, 255, 255, .04) 38%,
      transparent 62%, var(--violet-soft));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.chrome-text {
  background: var(--chrome-sweep);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ambient gradient mesh — three drifting blobs behind everything */
.mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}

.mesh span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  /* pure white haze reads far hotter than the old tinted blobs did, so the
     opacities come down hard — this should be smoke, not a spotlight */
  opacity: .11;
  will-change: transform;
}

.mesh .b1 {
  width: 46vw;
  height: 46vw;
  top: -8vw;
  left: calc(var(--mx) - 40vw);
  background: radial-gradient(circle, var(--violet), transparent 70%);
  animation: drift1 26s var(--ease-io) infinite alternate;
}

.mesh .b2 {
  width: 38vw;
  height: 38vw;
  top: calc(var(--my) - 10vw);
  right: calc(90% - var(--mx));
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  opacity: .08;
  animation: drift2 32s var(--ease-io) infinite alternate;
}

.mesh .b3 {
  width: 42vw;
  height: 42vw;
  bottom: -14vw;
  left: calc(var(--mx) * .35 + 22%);
  background: radial-gradient(circle, var(--spark), transparent 70%);
  opacity: .07;
  animation: drift3 22s var(--ease-io) infinite alternate;
}

@keyframes drift1 { to { transform: translate3d(9vw, 6vw, 0) scale(1.18); } }
@keyframes drift2 { to { transform: translate3d(-11vw, -7vw, 0) scale(.86); } }
@keyframes drift3 { to { transform: translate3d(7vw, -9vw, 0) scale(1.12); } }

/* keep real content above the mesh */
.nav, main, footer { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity .75s var(--ease-out) calc(var(--i, 0) * 70ms),
    transform .75s var(--ease-out) calc(var(--i, 0) * 70ms),
    filter .75s var(--ease-out) calc(var(--i, 0) * 70ms);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   5. CUSTOM CURSOR (fine pointers only — enabled by app.js)
   -------------------------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity var(--dur) ease;
}

body.cursor-on .cursor-dot,
body.cursor-on .cursor-ring { opacity: 1; }

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  box-shadow: 0 0 12px var(--lavender);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: radial-gradient(circle, var(--violet-soft), transparent 65%);
  transition: opacity var(--dur) ease, width var(--dur) var(--ease-spring),
              height var(--dur) var(--ease-spring), margin var(--dur) var(--ease-spring),
              border-color var(--dur) ease, background var(--dur) ease;
}

body.cursor-hot .cursor-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: var(--spark);
  background: radial-gradient(circle, var(--spark-soft), transparent 62%);
}

/* --------------------------------------------------------------------------
   6. NAVIGATION — floating glass capsule
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding: 16px 0;
  transition: padding var(--dur) var(--ease-io);
}

.nav.scrolled { padding: 9px 0; }

.nav-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease-io), border-color var(--dur) var(--ease-io),
              box-shadow var(--dur) var(--ease-io), backdrop-filter var(--dur) var(--ease-io);
}

.nav.scrolled .nav-shell {
  background: rgba(12, 12, 12, .72);
  border-color: var(--line);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .42);
}

.nav-inner {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 18px;
  transition: height var(--dur) var(--ease-io);
}

.nav.scrolled .nav-inner { height: 58px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.04em;
  transition: transform var(--dur) var(--ease-spring);
}

.brand:hover { transform: scale(1.04); }

.brand-logo {
  display: block;
  width: 84px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  filter: invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, .22));
  transition: filter var(--dur) ease;
}

.brand:hover .brand-logo {
  filter: invert(1) drop-shadow(0 0 16px rgba(255, 255, 255, .45));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--spark);
  box-shadow: 0 0 10px var(--spark);
  transform: translateX(-50%);
  transition: width var(--dur) var(--ease-out);
}

.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav-links a.active { color: var(--text); }
.nav-links a.active::after { width: 16px; }

/* `.nav-links a` (0,1,1) outranks `.nav-cta` (0,1,0), so the pill has to
   restate its own ink and fill — on a white pill the inherited muted-white
   text was invisible, and the hover rule above wiped the fill entirely */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover {
  color: var(--on-light);
  background: linear-gradient(120deg, var(--spark), var(--spark-hot) 55%, var(--spark-hot));
  background-size: 200% 100%;
}

.nav-links a.nav-cta:hover { background-position: 100% 0; }

/* primary pill CTA (nav + hero) ------------------------------------------- */
.nav-cta,
.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 6px 7px 6px 18px;
  border-radius: var(--r-pill);
  color: var(--on-light);
  background: linear-gradient(120deg, var(--spark), var(--spark-hot) 55%, var(--spark-hot));
  background-size: 200% 100%;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 4px 18px var(--spark-soft);
  transition: background-position var(--dur-slow) var(--ease-io),
              box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
}

/* liquid-chrome sweep on hover */
.nav-cta::after,
.hero-cta::after,
.submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(0, 0, 0, .22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-io);
  pointer-events: none;
}

.nav-cta:hover::after,
.hero-cta:hover::after,
.submit:hover::after { transform: translateX(120%); }

.nav-cta:hover,
.hero-cta:hover {
  background-position: 100% 0;
  box-shadow: 0 10px 30px var(--spark-soft), var(--glow-violet);
}

.nav-cta:active,
.hero-cta:active { transform: scale(.97); }

.arrow {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* the disc sits on the white pill, so it inverts: ink glyph on a dark disc */
  color: var(--spark-hot);
  background: var(--on-light);
  transition: transform var(--dur) var(--ease-spring), background var(--dur-slow) ease;
}

.arrow svg {
  width: 14px;
  height: 16px;
  stroke: currentColor;
}

.nav-cta:hover .arrow,
.hero-cta:hover .arrow {
  transform: translate(3px, -3px) rotate(45deg);
  background-position: 100% 0;
}

/* mobile menu ------------------------------------------------------------- */
.menu {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 12px;
  color: #fff;
  background: var(--surface-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

.menu:active { transform: scale(.92); }

.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.mobile-menu > div { min-height: 0; overflow: hidden; }

.mobile-menu.open { grid-template-rows: 1fr; }

.mobile-menu a {
  display: block;
  padding: 13px 20px;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-8px);
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease,
              opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.mobile-menu.open a {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}

.mobile-menu a:hover {
  color: var(--text);
  padding-left: 26px;
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(820px, 92svh);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-sink);
}

.hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-sink);
}

/* Crossfade + Ken Burns. The zoom lives in an animation (not a transition) so
   it always restarts with the slide and always fits inside --slide-ms, however
   fast the carousel is set to run. The resting transform is the *end* of that
   drift, so a slide that is fading out keeps coasting in the same direction
   instead of snapping back. */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-size: cover;
  filter: grayscale(1) contrast(1.12) brightness(.92);
  transform: scale(1.15) translate3d(calc(var(--kb-x, 0%) * 1.5), calc(var(--kb-y, 0%) * 1.5), 0);
  transition: opacity var(--fade-ms, 1s) var(--ease-io),
              transform var(--fade-ms, 1s) var(--ease-out);
  will-change: opacity, transform;
}

/* each slide drifts its own way so the loop never feels mechanical */
.hero-slide:nth-child(1) { --kb-x: -1.4%; --kb-y: -0.8%; }
.hero-slide:nth-child(2) { --kb-x: 1.5%; --kb-y: 0.9%; }
.hero-slide:nth-child(3) { --kb-x: -1.2%; --kb-y: 1.1%; }
.hero-slide:nth-child(4) { --kb-x: 1.3%; --kb-y: -1%; }

.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 32%, rgba(0, 0, 0, .95) 100%);
}

/* the active slide keeps creeping the whole time it is shown */
.hero-slide.active {
  opacity: 1;
  animation: kenBurns calc(var(--slide-ms, 4200ms) + var(--fade-ms, 1s)) var(--ease-io) forwards;
}

/* ends short of the resting transform above, so the fade-out picks the drift up
   exactly where the animation left it and carries it in the same direction */
@keyframes kenBurns {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(var(--kb-x, 0%), var(--kb-y, 0%), 0); }
}

.hero.paused .hero-slide.active { animation-play-state: paused; }

/* soft rack-focus on the crossfade — desktop only, a full-viewport blur is too
   expensive to animate on phone GPUs */
@media (min-width: 900px) {
  .hero-slide {
    filter: grayscale(1) contrast(1.12) brightness(.92) blur(10px);
    transition: opacity var(--fade-ms, 1s) var(--ease-io),
                transform var(--fade-ms, 1s) var(--ease-out),
                filter var(--fade-ms, 1s) var(--ease-out);
  }

  .hero-slide.active { filter: grayscale(1) contrast(1.12) brightness(.92) blur(0); }
}

.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 12%, rgba(0, 0, 0, .5) 100%),
    radial-gradient(circle at 78% 18%, var(--violet-soft), transparent 45%),
    radial-gradient(circle at 18% 78%, var(--spark-ghost), transparent 42%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  padding: 130px 0 120px;
  text-align: center;
  animation: heroIn 1.1s var(--ease-out) both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

.hero-content > * { animation: heroIn .9s var(--ease-out) both; }
.hero-content > *:nth-child(1) { animation-delay: .1s; }
.hero-content > *:nth-child(2) { animation-delay: .22s; }
.hero-content > *:nth-child(3) { animation-delay: .34s; }
.hero-content > *:nth-child(4) { animation-delay: .46s; }

.eyebrow-elegant {
  display: inline-flex;
  align-items: center;
  color: var(--spark);
  font: 400 1rem var(--font-body);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.highlight-dreams {
  color: var(--spark-hot);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .02em;
}

h1 em {
  font-style: italic;
  font-weight: 300;
  color: #fff;
  text-shadow: 0 4px 24px rgba(255, 255, 255, .28);
}

.hero-copy-elegant {
  max-width: 50ch;
  margin: 0 auto 40px;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.8;
  font-weight: 300;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 40px;
  border: 1px solid var(--spark);
  border-radius: 0;
  color: var(--spark);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color var(--dur) ease;
}

.hero-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--spark);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease-io);
  z-index: -1;
}

.hero-btn:hover {
  color: var(--bg);
}

.hero-btn:hover::after {
  transform: scaleY(1);
}

.hero-cta .arrow { width: 30px; height: 30px; }

.hero-controls {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font: 500 .6rem var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-controls span { animation: bounceDown 2s infinite ease-in-out; }

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* slide dots with a fill that tracks the autoplay timer -------------------- */
.dots {
  position: absolute;
  z-index: 2;
  bottom: 32px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  overflow: hidden;
  transition: width var(--dur-slow) var(--ease-out), background var(--dur) ease;
}

.dot:hover { background: rgba(255, 255, 255, .5); }

.dot.active {
  width: 42px;
  background: rgba(255, 255, 255, .22);
}

.dot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--spark), var(--violet));
  box-shadow: 0 0 12px var(--spark-soft);
  transform-origin: left;
  animation: dotFill var(--slide-ms, 4200ms) linear forwards;
}

.hero.paused .dot.active::after { animation-play-state: paused; }

@keyframes dotFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   8. ETHOS BAND
   -------------------------------------------------------------------------- */
.ethos-band {
  background: var(--bg-raise);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ethos-head {
  margin-bottom: clamp(38px, 5vw, 58px);
  text-align: center;
}

.ethos-head h2 { margin-inline: auto; }

.ethos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  /* the perspective lives on the grid so all three cards tilt as if seen from
     one camera instead of each having its own vanishing point */
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

.ethos-item {
  position: relative;
  transform-style: preserve-3d;
}

/* pointer tilt — app.js writes --rx/--ry on .ethos-item, they inherit down.
   The rotation sits on the inner face so it never fights the translateY the
   scroll-reveal puts on .ethos-item itself. */
.ethos-face {
  position: relative;
  height: 100%;
  padding: clamp(30px, 3.4vw, 42px) clamp(24px, 2.6vw, 34px) clamp(34px, 3.6vw, 44px);
  /* overflow + backdrop-filter would each flatten this preserve-3d context and
     kill the depth on the children below, and the gradient is opaque enough
     that the frosted blur was invisible anyway */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(155deg, rgba(22, 22, 22, .84), rgba(9, 9, 9, .88));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .7s var(--ease-out), border-color var(--dur) ease,
              box-shadow var(--dur) ease, background var(--dur) ease;
}

/* while the pointer is actually on the card the tilt has to track it, not
   glide 700ms behind it */
.ethos-item.tilting .ethos-face { transition-duration: .09s, var(--dur), var(--dur), var(--dur); }

.ethos-item:hover .ethos-face {
  border-color: var(--spark-soft);
  box-shadow: var(--glow-spark), 0 26px 60px rgba(0, 0, 0, .5);
}

/* cursor-tracked highlight, same treatment the event + gallery cards get */
.ethos-face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(300px circle at var(--px, 50%) var(--py, 50%),
      rgba(255, 255, 255, .12), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) ease;
}

.ethos-item:hover .ethos-face::after { opacity: 1; }

/* everything inside floats above the glass, at staggered depths so the tilt
   reads as parallax rather than a flat rotating rectangle */
.ethos-face > * {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
}

.ethos-index {
  display: block;
  margin-bottom: 22px;
  color: var(--faint);
  font: 500 .7rem var(--font-mono);
  letter-spacing: .22em;
  transform: translateZ(18px);
}

.ethos-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border: 1px solid var(--line-strong);
  color: var(--spark);
  background: radial-gradient(circle at 30% 25%, var(--spark-ghost), transparent 70%);
  transform: translateZ(38px);
  transition: transform var(--dur-slow) var(--ease-out), color var(--dur) ease,
              border-color var(--dur) ease;
}

.ethos-icon svg { width: 26px; height: 26px; }

.ethos-item:hover .ethos-icon {
  color: var(--spark-hot);
  border-color: var(--spark);
  transform: translateZ(56px);
}

.ethos-item h3 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  /* resting at 0 lands on the darkest end of the sweep and reads as disabled —
     start part-way in so the wordmark sits bright, then sweep to the highlight */
  background-position: 26% 0;
  transform: translateZ(20px);
  transition: background-position 1.1s var(--ease-io);
}

/* gold sweep runs across the wordmark on hover */
.ethos-item:hover h3 { background-position: 100% 0; }

.ethos-item p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.8;
  font-weight: 300;
  transform: translateZ(14px);
}

.ethos-rule {
  display: block;
  height: 1px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--spark), transparent);
  transform: scaleX(.16) translateZ(8px);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.ethos-item:hover .ethos-rule { transform: scaleX(1) translateZ(8px); }

@media (max-width: 760px) {
  .ethos-grid { perspective: none; }
  .ethos-face { transform: none; }
}

@keyframes scroll { to { transform: translateX(-50%); } }
@keyframes scrollReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --------------------------------------------------------------------------
   9. INFO BAND + LOCATION
   -------------------------------------------------------------------------- */
.info-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 11, .62);
}

.location-card {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
}

.location-card:hover {
  border-color: var(--spark-soft);
  box-shadow: var(--glow-spark);
}

.location-card > * { position: relative; z-index: 1; }

.location-card h2 {
  margin-top: 14px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.location-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  color: var(--muted);
  font-size: .88rem;
}

.location-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.location-list strong {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.map-placeholder {
  position: relative;
  min-height: 240px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--faint);
  background: var(--bg-raise);
  font: 500 .8rem var(--font-mono);
}

/* Google's embed is the one thing on the page we don't author — desaturate and
   invert it so the map reads as a dark blueprint instead of a colour tile */
.map-placeholder iframe {
  filter: grayscale(1) invert(.92) contrast(.92) brightness(.95);
}

/* --------------------------------------------------------------------------
   10. EVENTS
   -------------------------------------------------------------------------- */
.events-section { display: none; }

.events-section.visible { display: block; }

.events-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.events-link {
  color: var(--spark-hot);
  font: 500 .74rem var(--font-mono);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--dur-fast) ease, text-shadow var(--dur) ease;
}

.events-link:hover {
  opacity: .85;
  text-shadow: 0 0 16px var(--spark-soft);
}

#public-events {
  display: grid;
  gap: 18px;
}

.event-card {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) 1fr;
  min-height: 380px;
  overflow: hidden;
  border-radius: var(--r-lg);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
}

.event-card:hover {
  border-color: var(--spark-soft);
  box-shadow: var(--shadow-card), var(--glow-spark);
  transform: translateY(-4px);
}

/* cursor-tracked highlight, position written by app.js */
.event-card::after,
.location-card::after,
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--px, 50%) var(--py, 50%),
      rgba(255, 255, 255, .10), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) ease;
}

.event-card:hover::after,
.location-card:hover::after,
.gallery-item:hover::after { opacity: 1; }

/* every photograph on the page is desaturated in CSS, so posters uploaded in
   colour through the admin still land in the monochrome scheme */
.event-image {
  position: relative;
  z-index: 1;
  min-height: 300px;
  background-position: center;
  background-size: cover;
  filter: grayscale(1) contrast(1.06);
  transition: transform var(--dur-slow) var(--ease-io), filter var(--dur-slow) ease;
}

.event-card:hover .event-image { filter: grayscale(1) contrast(1.06) brightness(1.1); }

.event-card:hover .event-image { transform: scale(1.04); }

.event-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 60px);
}

.event-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--spark-soft);
  background: var(--spark-ghost);
  color: var(--spark-hot);
  font: 500 .66rem var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.event-status::before { content: '✦'; }

.event-info h3 {
  margin: 18px 0 10px;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.event-date {
  color: var(--muted);
  font: 500 .86rem var(--font-mono);
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  background: var(--surface-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.button:hover {
  border-color: var(--spark);
  background: var(--spark-ghost);
  transform: translateY(-2px);
}

.button:active { transform: scale(.97); }

.button.primary {
  border-color: transparent;
  color: var(--on-light);
  background: linear-gradient(120deg, var(--spark), var(--spark-hot) 60%, var(--spark-hot));
  background-size: 200% 100%;
  box-shadow: 0 4px 18px var(--spark-soft);
}

.button.primary:hover {
  background-position: 100% 0;
  box-shadow: 0 10px 28px var(--spark-soft), var(--glow-violet);
}

/* --------------------------------------------------------------------------
   12. GALLERY + LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery-grid {
  column-count: 3;
  column-gap: 20px;
  margin-top: 40px;
}

.gallery-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--bg-raise);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 0;
  transition: border-color var(--dur) ease, filter var(--dur) ease,
              transform var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur) ease;
}

/* These items carry [data-reveal] too, and `[data-reveal].in { filter: none }`
   outranks a plain `.gallery-item` rule — which silently dropped the
   desaturation and left the gallery as the only colour on the page. So the
   grayscale has to be restated at every stage of the reveal, blur included. */
.gallery-item[data-reveal] {
  filter: grayscale(1) contrast(1.05) brightness(.9) blur(6px);
}

.gallery-item[data-reveal].in,
.gallery-item {
  filter: grayscale(1) contrast(1.05) brightness(.9);
}

.gallery-item[data-reveal].in:hover,
.gallery-item:hover {
  border-color: var(--spark);
  filter: grayscale(1) contrast(1.05) brightness(1.15);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.gallery-item:nth-child(1) { height: 400px; }
.gallery-item:nth-child(2) { height: 280px; }
.gallery-item:nth-child(3) { height: 350px; }
.gallery-item:nth-child(4) { height: 250px; }
.gallery-item:nth-child(5) { height: 420px; }
.gallery-item:nth-child(6) { height: 300px; }

.gallery-label {
  position: absolute;
  z-index: 2;
  left: 15px;
  bottom: 13px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--muted);
  font: 500 .64rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.gallery-item:hover .gallery-label {
  color: var(--text);
  transform: translateY(-3px);
}

/* lightbox ---------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.lightbox.open { display: grid; }
.lightbox.shown { opacity: 1; }

.lightbox img {
  max-width: min(1100px, 100%);
  max-height: 84svh;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
  filter: grayscale(1) contrast(1.04);
  transform: scale(.94);
  transition: transform var(--dur-slow) var(--ease-out);
}

.lightbox.shown img { transform: scale(1); }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) ease, transform var(--dur) var(--ease-spring);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--spark);
  border-color: var(--spark);
  transform: scale(1.1);
}

.lightbox-close { top: 22px; right: 22px; }
.lightbox-prev { left: 22px; top: 50%; margin-top: -23px; }
.lightbox-next { right: 22px; top: 50%; margin-top: -23px; }

.lightbox-count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--faint);
  font: 500 .72rem var(--font-mono);
  letter-spacing: .14em;
}

/* --------------------------------------------------------------------------
   13. ABOUT — tags + stats
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
}

.about-copy {
  max-width: 50ch;
  color: var(--muted);
  font-size: clamp(.9rem, 1.5vw, .98rem);
  line-height: 1.8;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.tag {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
  font: 500 .7rem var(--font-mono);
  letter-spacing: .06em;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease,
              background var(--dur-fast) ease, transform var(--dur) var(--ease-spring);
}

.tag:hover {
  border-color: var(--spark);
  color: var(--text);
  background: var(--spark-ghost);
  transform: translateY(-3px);
}

.stats {
  display: grid;
  gap: 10px;
}

.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 0 22px;
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease,
              box-shadow var(--dur) ease;
}

.stat:hover {
  transform: translateX(6px);
  border-color: var(--line-strong);
  box-shadow: var(--glow-violet);
}

.stat > * { position: relative; z-index: 1; }

.stat-label {
  color: var(--faint);
  font: 500 .66rem var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.045em;
  background: var(--chrome-sweep);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   14. STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.step {
  padding: 26px 22px 28px;
  border-radius: var(--r-md);
  text-align: left;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease,
              box-shadow var(--dur) ease;
}

.step:hover {
  transform: translateY(-6px);
  border-color: var(--spark-soft);
  box-shadow: var(--glow-spark);
}

.step > * { position: relative; z-index: 1; }

.step-number {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--spark-soft);
  background: var(--spark-ghost);
  color: var(--spark-hot);
  font: 500 .74rem var(--font-mono);
}

.step h3 {
  margin: 16px 0 8px;
  font-size: 1rem;
  letter-spacing: -.02em;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 42px;
  margin-top: 38px;
}

.faq-item {
  border-radius: var(--r-md);
  margin-bottom: 10px;
  transition: border-color var(--dur) ease, background var(--dur) ease;
}

.faq-item.open { border-color: var(--spark-soft); }

.faq-question {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 0;
  border-radius: inherit;
  color: var(--muted);
  background: none;
  cursor: pointer;
  text-align: left;
  font: 700 .92rem var(--font-body);
  transition: color var(--dur-fast) ease;
}

.faq-question:hover { color: var(--text); }

.faq-question span {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--spark-hot);
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease-spring), background var(--dur) ease;
}

.faq-item.open .faq-question { color: var(--text); }

.faq-item.open .faq-question span {
  transform: rotate(135deg);
  background: var(--spark-ghost);
}

/* 0fr -> 1fr animates to the real content height, no max-height guessing */
.faq-answer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.faq-answer > div { overflow: hidden; }

.faq-item.open .faq-answer { grid-template-rows: 1fr; }

.faq-answer p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   16. RESERVATION MODAL
   -------------------------------------------------------------------------- */
.reservation {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 32px);
  background: rgba(0, 0, 0, 0);
  color: var(--text);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background var(--dur) ease, backdrop-filter var(--dur) ease;
}

/* .open only takes it out of display:none; .shown (added a frame later by
   app.js) carries the visuals, because a transition can't run out of
   display:none in the same frame */
.reservation.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reservation.shown {
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* margin:auto (not just align-items:center) so an over-tall card still scrolls
   from its own top instead of having it clipped off */
.reservation-wrapper {
  position: relative;
  width: min(1040px, 100%);
  margin: auto;
}

.reservation-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  /* minmax(0,…) lets the row shrink to the capped height instead of being
     forced to the form's full content height, which is what makes the form
     panel below scroll rather than get clipped */
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  max-height: min(90svh, 940px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7);
  background: var(--bg-raise);
  transform: translateY(28px) scale(.95);
  opacity: 0;
  filter: blur(6px);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) ease,
              filter var(--dur-slow) ease;
}

/* --- left panel: photo + what-happens-next ------------------------------- */
.reservation-image {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  padding: clamp(26px, 3vw, 38px);
  background-size: cover;
  background-position: center;
  /* grayscale on the element also covers the aside text, which is already
     white — no visual cost, and it keeps the photo in the scheme */
  filter: grayscale(1) contrast(1.08) brightness(.95);
}

.reservation-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, .95) 100%);
}

.reservation-aside {
  position: relative;
  z-index: 1;
  width: 100%;
}

.reservation-kicker {
  display: block;
  color: var(--spark-hot);
  font: 500 .68rem var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.reservation-tagline {
  margin: 14px 0 26px;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  font-weight: 400;
}

.reservation-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 300;
}

.reservation-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reservation-steps span {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  color: var(--spark);
  font: 500 .68rem var(--font-mono);
}

.reservation-note {
  display: block;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: .74rem;
  letter-spacing: .04em;
}

.mobile-only { display: none; }

@media (max-width: 860px) {
  .reservation-grid {
    grid-template-columns: 1fr;
    max-height: min(92svh, 940px);
  }
  .reservation-image { display: none; }
  .mobile-only { display: block; margin-bottom: 12px; }
}

/* --- right panel: the form ----------------------------------------------- */
.reservation-grid .form-card {
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--line);
  /* the card scrolls, not the whole overlay, so the close button and the photo
     panel stay put while a long form is being filled in */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* the glass hairline is anchored to the padding box, so in a scrolling panel it
   would slide away with the content — the grid's own border replaces it */
.reservation-grid .form-card::before { display: none; }

@media (max-width: 860px) {
  .reservation-grid .form-card { border-left: none; }
}

.reservation-grid .form-card::-webkit-scrollbar { width: 6px; }
.reservation-grid .form-card::-webkit-scrollbar-track { background: transparent; }
.reservation-grid .form-card::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

.reservation.shown .reservation-grid {
  transform: none;
  opacity: 1;
  filter: none;
}

.form-card {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(19, 19, 19, .94), rgba(10, 10, 10, .94));
  box-shadow: var(--shadow-card);
}

.form-card > * { position: relative; z-index: 1; }

.form-heading {
  margin-bottom: 30px;
  padding-right: 48px;
}

.form-heading h3 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.02em;
}

.form-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 300;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}

.field {
  position: relative;
  margin-bottom: 24px;
}

/* inside the grid the inputs' own 24px top padding is the row gutter — the
   per-field margin on top of it left the rows drifting apart */
.form-grid .field { margin-bottom: 0; }

.field.full { grid-column: 1 / -1; }

input,
select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 24px 0 8px;
  color: var(--text);
  font: 300 1rem var(--font-body);
  outline: none;
  border-radius: 0;
  transition: border-color var(--dur) ease;
  -webkit-appearance: none;
}

label {
  position: absolute;
  left: 0;
  top: 24px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 300;
  pointer-events: none;
  transition: top var(--dur) ease, font-size var(--dur) ease, color var(--dur) ease;
}

label span { color: var(--spark-hot); }

input:focus,
select:focus {
  border-bottom-color: var(--spark);
  box-shadow: none;
  /* background-color, not the shorthand — the shorthand would wipe the caret
     drawn onto the select below */
  background-color: transparent;
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label,
select:focus ~ label,
select:valid ~ label {
  top: 0;
  font-size: 0.75rem;
  color: var(--spark);
}

/* -webkit-appearance:none strips the native caret, so draw one back in —
   without it the ticket-type field reads as a dead text input */
select {
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--spark) 50%),
                    linear-gradient(135deg, var(--spark) 50%, transparent 50%);
  background-position: right 10px top 32px, right 5px top 32px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

select option { color: #111; }

.submit {
  position: relative;
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--on-light);
  background: linear-gradient(120deg, var(--spark), var(--spark-hot) 60%, var(--spark-hot));
  background-size: 200% 100%;
  overflow: hidden;
  cursor: pointer;
  font: 700 .8rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px var(--spark-soft);
  transition: background-position var(--dur-slow) var(--ease-io),
              transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.submit:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--spark-soft), var(--glow-violet);
}

.submit:active { transform: scale(.98); }

.submit:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* travelling shimmer while the request is in flight */
.submit:disabled::after {
  transform: none;
  background: linear-gradient(105deg, transparent 30%, rgba(0, 0, 0, .2) 50%, transparent 70%);
  animation: shimmer 1.1s linear infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.status {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

/* with no colour left to carry meaning, the glyph does it */
.status.success,
.status.error { color: var(--text); }

.status.success::before,
.status.error::before {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .6rem;
  vertical-align: 1px;
}

.status.success::before { content: '✓'; }
.status.error::before { content: '✕'; }

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 16px;
  color: var(--faint);
  font: .68rem var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 10, .82);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring), color var(--dur) ease,
              background var(--dur) ease, border-color var(--dur) ease;
}

.modal-close:hover {
  background: var(--spark-hot);
  border-color: var(--spark-hot);
  color: var(--on-light);
  transform: rotate(90deg);
}

/* --- transfer destination, driven by site_settings in the admin ----------- */
.bank-info {
  margin-top: 28px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  animation: bankIn .5s var(--ease-out) both;
}

.bank-info[hidden] { display: none; }

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

.bank-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.bank-info-title {
  color: var(--spark);
  font: 500 .72rem var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bank-info-badge {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  color: var(--spark-hot);
  font: 600 .68rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bank-info-details { padding: 6px 18px 14px; }

.bank-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
}

.bank-info-row + .bank-info-row { border-top: 1px solid var(--line); }

.bank-info-label {
  flex: none;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 300;
}

.bank-info-value {
  color: var(--text);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-align: right;
  word-break: break-word;
}

.bank-info-value.mono {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: .09em;
  color: var(--spark-hot);
  /* the account number is the one string on this page people must be able to
     take with them — see the copy guard in app.js */
  user-select: all;
  -webkit-user-select: all;
}

.bank-info-number {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bank-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font: 500 .68rem var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) ease, border-color var(--dur) ease, background var(--dur) ease;
}

/* a display declaration beats the UA [hidden] rule — restore it */
.bank-copy[hidden] { display: none; }

.bank-copy svg { width: 13px; height: 13px; }

.bank-copy:hover {
  color: var(--spark);
  border-color: var(--spark);
  background: var(--spark-ghost);
}

.bank-copy.copied {
  color: var(--bg);
  background: var(--spark);
  border-color: var(--spark);
}

.bank-info-foot {
  margin: 0;
  padding: 0 18px 15px;
  color: var(--faint);
  font-size: .74rem;
  line-height: 1.6;
  font-weight: 300;
}

/* the brand green would be the only hue left on the page, so this is the
   outlined secondary to the solid white submit above it */
.whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  background: transparent;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.whatsapp:hover {
  border-color: var(--spark-hot);
  background: var(--spark-ghost);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, .1);
}

.whatsapp:active { transform: scale(.98); }

.whatsapp svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font: 500 .74rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

footer a { text-decoration: none; transition: color var(--dur-fast) ease; }
footer a:hover { color: var(--spark-hot); }

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 1152px); }
  .nav { padding: 10px 0; }
  .nav-inner { height: 60px; padding: 0 8px 0 14px; }
  .nav.scrolled .nav-inner { height: 56px; }
  .nav-links { display: none; }
  .menu { display: block; }
  .nav-shell {
    background: rgba(12, 12, 12, .72);
    border-color: var(--line);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  }
  .hero { min-height: 640px; }
  .hero-content { padding: 120px 0 130px; }
  .hero-controls { display: none; }
  .event-card { grid-template-columns: 1fr; }
  .event-image { min-height: 300px; }
  .location-card,
  .about-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(2.2rem, 10.5vw, 3.4rem); }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .gallery-grid {
    column-count: 2;
  }
  .events-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .gallery-grid { column-count: 1; }
  .events-head { flex-direction: column; align-items: flex-start; }
  .dots { bottom: 26px; }
  footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION — kill every effect, keep the page fully usable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .mesh { display: none; }
  .cursor-dot,
  .cursor-ring { display: none; }
  .hero-slide { transform: none; filter: none; animation: none; }
  .hero-slide.active { transform: none; filter: none; animation: none; }
  .dot.active::after { animation: none; transform: scaleX(1); }
  .ethos-face { transform: none !important; }
}