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

:root {
  /* Shared "atmosphere" of the hero and the cards section, sampled from hero.jpg. */
  --atmos-base: #221a2c;
  --atmos-violet: 125 92 168;
  --atmos-amber: 214 160 112;
}

html {
  font-size: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: Georgia, "Times New Roman", serif;
  background-color: var(--atmos-base);
  color: #ece6de;
  line-height: 1.4;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Header */

/* A whisper of a navigation, laid over the top of the hero: a hairline, then two small links. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: clamp(1rem, 2.4vw, 2rem) clamp(1.25rem, 2.6vw, 2.5rem) 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.site-nav__line {
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.6);
}

.site-nav__link {
  position: relative;
  padding: 0.85rem 0; /* the text is small, so the tap target is generous */
  font-size: clamp(0.7rem, 0.9vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / 0.76);
  transition: color 0.25s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #fff;
}

.site-nav__link:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.9);
  outline-offset: 0.3rem;
}

/* Booking is the call to action: whiter, a touch bolder, with a hairline in the tagline's gradient. */
.site-nav__link--primary {
  font-weight: 600;
  color: #fff;
}

.site-nav__link--primary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.22em; /* the last letter's tracking */
  bottom: 0.55rem;
  height: 1px;
  background: linear-gradient(90deg, #6f8cff 0%, #9b7dff 38%, #d67cf0 72%, #ff85c6 100%);
}

/* ------------------------------------------------------------------ Hero */

.hero {
  /* The logo's width, and the height of the block above the photo (space for the header + logo). */
  --logo-w: clamp(16rem, 32vw, 26rem);
  --brand-top: clamp(5.75rem, 8.4vw, 8rem);
  --brand-h: calc(var(--brand-top) + var(--logo-w) * 0.296);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 34% at 50% 0%, rgb(var(--atmos-violet) / 0.3), transparent 72%),
    radial-gradient(ellipse 46% 34% at 84% 46%, rgb(var(--atmos-amber) / 0.4), transparent 72%),
    radial-gradient(ellipse 40% 30% at 12% 52%, rgb(var(--atmos-amber) / 0.2), transparent 72%),
    linear-gradient(180deg, #2b2338 0%, #2a2133 42%, var(--atmos-base) 100%);
}

.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: var(--brand-top) 1.25rem 0;
  text-align: center;
}

/*
 * The logo is an image (transparent background); it keeps its proportions and never
 * exceeds the screen. The PNG has transparent margins above and below the lettering
 * (11% and 10% of its width); the negative margins take them out of the layout, so
 * the spacing is measured from the letters themselves.
 */
.hero__logo {
  width: var(--logo-w);
  height: auto;
  margin: calc(var(--logo-w) * -0.108) 0 calc(var(--logo-w) * -0.096);
}

/*
 * The figure is a full-width band exactly as tall as the photo. Its background
 * continues the photo's own left and right edge colours (sampled from hero.jpg),
 * so the portrait dissolves into the page instead of showing as a rectangle.
 *
 * The photo keeps its natural 571:1024 proportion. Its height fills the rest of
 * the first screen (minus the brand block) and never exceeds the file's own
 * height, so it is never stretched or upscaled.
 */
.hero__figure {
  --figure-h: clamp(28rem, calc(100vh - var(--brand-h) - 1rem), 64rem);
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: min(var(--figure-h), calc(100vw * 1024 / 571));
}

.hero__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* darken towards the outer edges */
    linear-gradient(90deg, var(--atmos-base) 0%, transparent 30%, transparent 70%, var(--atmos-base) 100%),
    /* photo edge colours, left half then right half */
    linear-gradient(180deg, #252037 0%, #2d253c 10%, #3a2e46 20%, #4d3a4d 30%, #64474f 40%, #8c634e 50%, #835e4d 60%, #573a45 70%, #3e2d3e 80%, #2d2032 90%, #20182a 100%)
      left / 50% 100% no-repeat,
    linear-gradient(180deg, #584351 0%, #715660 10%, #a88571 20%, #bb987c 30%, #ad8a7d 40%, #b48c74 50%, #c28d5c 60%, #a9714f 70%, #7b4f4e 80%, #573b4b 90%, #432f44 100%)
      right / 50% 100% no-repeat;
  /* Blend the band into the hero background above and below the photo. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 84%, transparent);
}

@supports (height: 100svh) {
  .hero__figure {
    --figure-h: clamp(28rem, calc(100svh - var(--brand-h) - 1rem), 64rem);
  }
}

.hero__image {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 571 / 1024;
  flex: none;
  max-width: none;
  /* Feather the photo into the band; the bottom fade stays clear of the shoes. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 26%, #000 74%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 95.5%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 26%, #000 74%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 95.5%, transparent);
  mask-composite: intersect;
}

/*
 * Transition between the hero and the cards section: two big, tight lines of
 * bold sans-serif. "Music for" is white; "Every Mood." fades from blue through
 * purple to pink.
 */
.hero__tagline {
  padding: clamp(2.5rem, 7vw, 5rem) 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.6rem, 7.6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: center;
  color: #fff;
}

/*
 * Two lines under the tagline, in the tagline's own sans-serif and white: the first a bold
 * subtitle, the second a step smaller and a touch softer.
 */
.hero__tagline:has(+ .hero__subtitles) {
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.hero__subtitles {
  padding: 0 1.25rem clamp(2.5rem, 7vw, 5rem);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  text-wrap: balance;
}

.hero__subtitle {
  max-width: 44rem;
  margin: 0 auto;
  font-size: clamp(1.2rem, 3.1vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #fff;
}

.hero__subtitle--small {
  margin-top: 0.7rem;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgb(255 255 255 / 0.74);
}

/* Shrink-wrapped, so the gradient runs across the words rather than the whole row. */
.hero__accent {
  display: block;
  width: fit-content;
  margin: 0 auto -0.1em;
  padding-bottom: 0.1em; /* room for the descender of the "y" inside the clipped background */
  background: linear-gradient(90deg, #6f8cff 0%, #9b7dff 38%, #d67cf0 72%, #ff85c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 1.4rem rgb(155 125 255 / 0.22));
}

/* ---------------------------------------------------------------- Sections */

.section {
  min-height: 50svh;
  padding: 3rem 1.25rem;
  background-color: var(--atmos-base);
}

/* ------------------------------------------------------------ Cards section */

.section.section--cards {
  min-height: 0;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  /*
   * Same violet and amber haze as the hero, lit up behind the glass cards as in
   * the reference. The first and last layers fade to the neighbouring sections'
   * colours, so the section joins the hero and the events section without a seam.
   */
  background:
    linear-gradient(180deg, var(--atmos-base) 0%, transparent 16%),
    linear-gradient(0deg, var(--atmos-base) 0%, transparent 18%),
    radial-gradient(ellipse 52% 44% at 96% 30%, rgb(226 176 128 / 0.6), transparent 70%),
    radial-gradient(ellipse 50% 44% at 6% 36%, rgb(122 86 130 / 0.58), transparent 70%),
    radial-gradient(ellipse 60% 26% at 46% 82%, rgb(140 100 156 / 0.5), transparent 72%),
    linear-gradient(180deg, var(--atmos-base) 0%, #3a2c48 20%, #55405f 54%, #4c3855 80%, #3a2a42 100%);
}

/* Clip only sideways (no horizontal scroll); the cards' glow may spill upwards. */
@supports (overflow: clip) {
  .section.section--cards {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/*
 * The coverflow is an endless carousel of glass cards (see js/main.js). Every
 * measurement derives from --w, the width of the card in the centre; the script
 * sizes and places the others from their distance to the centre.
 * --w is small on purpose, so that a phone shows about five cards at once: the
 * one in front and its neighbours, smaller and further back on each side.
 */
.coverflow {
  --w: min(32vw, 12.5rem);
  position: relative;
  height: calc(var(--w) * 2.8);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Soft light on the floor under the cards. */
.coverflow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--w) * 1.55);
  width: calc(var(--w) * 5.6);
  height: calc(var(--w) * 1.5);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 214 170 / 0.26), transparent);
  pointer-events: none;
}

/* The glowing ring on the floor, centred under the middle card. */
.coverflow__ring {
  position: absolute;
  left: calc(50% - var(--w) * 2.3);
  top: calc(var(--w) * 2.083);
  width: calc(var(--w) * 4.6);
  height: calc(var(--w) * 0.42);
  border: 1.5px solid rgb(255 240 218 / 0.92);
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--w) * 0.06) rgb(255 224 180 / 0.7),
    inset 0 0 calc(var(--w) * 0.06) rgb(255 224 180 / 0.38);
  pointer-events: none;
}

.coverflow__ring::after {
  content: "";
  position: absolute;
  inset: 13% 4%;
  border: 1px solid rgb(255 238 214 / 0.32);
  border-radius: 50%;
}

/* Dragging sideways moves the carousel; vertical swipes still scroll the page. */
.coverflow__stage {
  position: absolute;
  inset: 0;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.coverflow.is-dragging .coverflow__stage {
  cursor: grabbing;
}

/*
 * Fallback arrangement, used only when the script does not run. The script
 * replaces it with a transform computed for each card on every frame.
 * Measured from the reference and expressed as the transform that flattens onto it:
 * --tx / --ty  where the card's centre sits, in card widths, from the centre card
 * --ry         rotation towards the arc's centre     --s   size, from distance
 * --z          stacking order (the closer the card, the higher)
 */
.card[data-offset="0"] {
  --tx: 0;
  --ty: 0;
  --ry: 0deg;
  --s: 1;
  --z: 7;
}

.card[data-offset="-1"] {
  --tx: -0.88;
  --ty: 0.024;
  --ry: -37.8deg;
  --s: 0.857;
  --z: 6;
}

.card[data-offset="1"] {
  --tx: 0.88;
  --ty: 0.024;
  --ry: 37.8deg;
  --s: 0.857;
  --z: 6;
}

.card[data-offset="-2"] {
  --tx: -1.4625;
  --ty: 0.028;
  --ry: -50.3deg;
  --s: 0.739;
  --z: 5;
}

.card[data-offset="2"] {
  --tx: 1.4625;
  --ty: 0.028;
  --ry: 50.3deg;
  --s: 0.739;
  --z: 5;
}

.card[data-offset="3"] {
  --tx: 1.896;
  --ty: 0.041;
  --ry: 51.8deg;
  --s: 0.652;
  --z: 4;
}

.card[data-offset="4"] {
  --tx: 2.295;
  --ty: 0.055;
  --ry: 49.8deg;
  --s: 0.572;
  --z: 3;
}

.card[data-offset="-3"] {
  --tx: -1.896;
  --ty: 0.041;
  --ry: -51.8deg;
  --s: 0.652;
  --z: 4;
}

.card[data-offset="5"] {
  --tx: 2.62;
  --ty: 0.069;
  --ry: 47deg;
  --s: 0.5;
  --z: 2;
}

/*
 * A glass card. The reference card is 211 x 444 px (1 : 2.104); the art, title and
 * play button sit at fixed fractions of that box.
 */
.card {
  /* Per-genre colours: edge light (--c1 > --c2), glow and glass tint as rgb triplets. */
  --c1: #f0d6ff;
  --c2: #c27cff;
  --glow: 190 110 255;
  --tint-a: 52 30 88;
  --tint-b: 30 20 60;
  --play: #f6eeff;
  position: absolute;
  left: 50%;
  top: calc(var(--w) * 1.303);
  z-index: var(--z);
  width: var(--w);
  height: calc(var(--w) * 2.104);
  margin: calc(var(--w) * -1.052) 0 0 calc(var(--w) * -0.5);
  border-radius: calc(var(--w) * 0.075);
  background: linear-gradient(180deg, rgb(var(--tint-a) / 0.72), rgb(var(--tint-b) / 0.88));
  box-shadow:
    0 0 calc(var(--w) * 0.05) rgb(var(--glow) / 0.55),
    0 0 calc(var(--w) * 0.17) rgb(var(--glow) / 0.32),
    inset 0 0 calc(var(--w) * 0.09) rgb(var(--glow) / 0.22);
  transform: translate(calc(var(--tx) * var(--w)), calc(var(--ty) * var(--w)))
    perspective(calc(var(--w) * 10.5)) rotateY(var(--ry)) scale(var(--s));
  will-change: transform, opacity;
  /* Faint mirror image on the floor (Chromium and Safari; other browsers skip it). */
  -webkit-box-reflect: below calc(var(--w) * 0.02)
    linear-gradient(transparent 72%, rgb(255 255 255 / 0.14));
}

/* Depth: the further back a card is, the darker it gets (--shade is set by the script). */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(14 9 24);
  opacity: var(--shade, 0);
  pointer-events: none;
}

/* Lit edge: a gradient border drawn as a masked ring, so the glass stays translucent. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: max(1.25px, calc(var(--w) * 0.009));
  border-radius: inherit;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

.card__art {
  position: absolute;
  left: 8.5%;
  top: 5%;
  width: 83%;
  height: 54%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.06);
}

.card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the browser's own image dragging out of the carousel's way. */
  pointer-events: none;
  -webkit-user-drag: none;
}

.card__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 68.7%;
  transform: translateY(-50%);
  font-size: calc(var(--w) * 0.13);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #f7f2ee;
  text-shadow: 0 0 calc(var(--w) * 0.05) rgb(0 0 0 / 0.4);
}

.card__play {
  position: absolute;
  left: 50%;
  top: 85.1%;
  display: grid;
  place-items: center;
  width: calc(var(--w) * 0.308);
  height: calc(var(--w) * 0.308);
  transform: translate(-50%, -50%);
  border: max(1.25px, calc(var(--w) * 0.0075)) solid var(--c1);
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--w) * 0.05) rgb(var(--glow) / 0.55),
    inset 0 0 calc(var(--w) * 0.04) rgb(var(--glow) / 0.3);
}

.card__play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: calc(var(--w) * 0.014);
  border-style: solid;
  border-width: calc(var(--w) * 0.054) 0 calc(var(--w) * 0.054) calc(var(--w) * 0.095);
  border-color: transparent transparent transparent var(--play);
}

.card--reggaeton {
  --c1: #ff9be6;
  --c2: #e070d0;
  --glow: 236 90 200;
  --tint-a: 84 30 96;
  --tint-b: 62 22 74;
  --play: #ffe8fa;
}

.card--latin {
  --c1: #ffe0a8;
  --c2: #ffab5e;
  --glow: 255 170 90;
  --tint-a: 86 50 46;
  --tint-b: 66 38 46;
  --play: #fff0dc;
}

.card--house {
  --c1: #f0d6ff;
  --c2: #c27cff;
  --glow: 190 110 255;
  --tint-a: 52 30 88;
  --tint-b: 30 20 60;
  --play: #f6eeff;
  box-shadow:
    0 0 calc(var(--w) * 0.06) rgb(var(--glow) / 0.7),
    0 0 calc(var(--w) * 0.22) rgb(var(--glow) / 0.45),
    inset 0 0 calc(var(--w) * 0.1) rgb(var(--glow) / 0.28);
}

.card--afro {
  --c1: #ffd79a;
  --c2: #ff9f4d;
  --glow: 255 165 80;
  --tint-a: 54 36 28;
  --tint-b: 74 48 34;
  --play: #fff0d8;
}

.card--circuit {
  --c1: #c9d6ff;
  --c2: #6d8cff;
  --glow: 95 125 255;
  --tint-a: 38 38 86;
  --tint-b: 26 26 62;
  --play: #d4e6ff;
}

.card--brazilian {
  --c1: #b9fff2;
  --c2: #3fd8d0;
  --glow: 70 220 210;
  --tint-a: 26 66 70;
  --tint-b: 20 48 58;
  --play: #d2fff8;
}

.card--brazilian .card__title {
  font-size: calc(var(--w) * 0.118);
}

.card--lounge {
  --c1: #ffd9d2;
  --c2: #e6a89a;
  --glow: 240 170 160;
  --tint-a: 100 70 92;
  --tint-b: 82 58 78;
  --play: #fff0ea;
}

.card--cuban {
  --c1: #ffa3a3;
  --c2: #ff4d5e;
  --glow: 255 77 94;
  --tint-a: 92 26 40;
  --tint-b: 64 18 30;
  --play: #ffe9e9;
}

.card--dancepop {
  --c1: #f4ffb0;
  --c2: #c2f04a;
  --glow: 200 245 80;
  --tint-a: 44 56 22;
  --tint-b: 30 40 18;
  --play: #f8ffd8;
}

/* ----------------------------------------------------------- Event types strip */

/*
 * A line of text that drifts left, forever. The track holds four identical
 * copies of the list and slides by exactly one copy (a quarter of its width)
 * per cycle, so the end of the animation is pixel-identical to its start: no
 * jump, no pause and no gap. Four copies also cover very wide screens.
 * Every size is in em, so the pace scales with the type on small screens.
 */
.marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4.5vw, 3rem) 0;
  border-block: 1px solid rgb(255 255 255 / 0.09);
  background-color: var(--atmos-base);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #f3effa;
}

/* Let the words fade in and out at the edges instead of being cut off. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 9%;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--atmos-base), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--atmos-base), transparent);
}

/* One list is ~52 times the font size wide, so a shorter cycle on small screens keeps the pace readable. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
  will-change: transform;
}

.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  list-style: none;
}

.marquee__group li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Discreet separator after every item, including the last, so each copy ends with the same gap. */
.marquee__group li::after {
  content: "";
  flex: none;
  width: 0.26em;
  height: 0.26em;
  margin: 0 1.5em;
  border-radius: 50%;
  background: #9b7dff;
  opacity: 0.7;
}

@keyframes marquee {
  to {
    transform: translate3d(-25%, 0, 0);
  }
}

@media (min-width: 768px) {
  .marquee__track {
    animation-duration: 36s;
  }
}

@media (min-width: 1200px) {
  .marquee__track {
    animation-duration: 40s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ------------------------------------------------------------ Events (placeholder) */

.section--events {
  background-color: var(--atmos-base);
}

/* Events is still empty. It takes no room, so the Gallery flows straight into what follows. */
.section.section--events {
  min-height: 0;
  padding: 0;
}

/* ----------------------------------------------------------------- Gallery */

.gallery,
.booking,
.contact,
.site-footer,
.lightbox,
.legal {
  --gutter: clamp(1.25rem, 4vw, 3rem);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.gallery {
  overflow-x: clip; /* the video row runs edge to edge of the screen; it must never widen the page */
  padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(4.5rem, 10vw, 8rem);
  background:
    radial-gradient(ellipse 60% 14% at 92% 3%, rgb(var(--atmos-violet) / 0.34), transparent 72%),
    radial-gradient(ellipse 50% 16% at 2% 34%, rgb(var(--atmos-amber) / 0.26), transparent 72%),
    radial-gradient(ellipse 56% 16% at 98% 66%, rgb(var(--atmos-amber) / 0.22), transparent 72%),
    radial-gradient(ellipse 60% 14% at 6% 96%, rgb(var(--atmos-violet) / 0.3), transparent 72%),
    linear-gradient(180deg, var(--atmos-base) 0%, #2d2439 45%, #30263d 100%);
  color: #f3effa;
}

.gallery__inner,
.booking__inner,
.contact__inner {
  width: min(100% - var(--gutter) * 2, 82rem);
  margin-inline: auto;
}

/* Section titles: big, bold and tight like the tagline, with a hairline in its gradient. */
.gallery__title,
.booking__title,
.contact__title {
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.gallery__title::after,
.booking__title::after,
.contact__title::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, #6f8cff 0%, #9b7dff 38%, #d67cf0 72%, #ff85c6 100%);
}

.gallery__head {
  margin-bottom: clamp(3.25rem, 7vw, 5.5rem);
}

.gallery__group + .gallery__group {
  margin-top: clamp(3.75rem, 7.5vw, 6.25rem);
}

/* Sub-titles echo the header: small, tracked, followed by a hairline. */
.gallery__subtitle {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.82);
}

.gallery__subtitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.16);
}

/* --- Videos: one horizontal carousel at every size, in a medium scale. It runs to both edges of
   the screen, so the next card is always seen peeking in; the first card lines up with the content. */

.video-carousel {
  --video-w: clamp(11.5rem, 54.5%, 17.75rem);
  --edge: max(var(--gutter), calc((100vw - 82rem) / 2));
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-inline: calc(50% - 50vw);
  padding: 0.25rem var(--edge) 1.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.video-carousel::-webkit-scrollbar {
  display: none;
}

/* While the mouse drags the row, it follows the pointer freely; on release it settles on a card. */
.video-carousel.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.video {
  flex: 0 0 var(--video-w);
  scroll-snap-align: start;
}

.video__button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0f0a14;
  cursor: inherit;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 1rem 2rem rgb(0 0 0 / 0.42);
  transition: box-shadow 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}

.video__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* A soft shade towards the bottom, so the tiles read as one family. */
.video__button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgb(8 5 12 / 0.55));
  pointer-events: none;
}

/* The same play button as before, scaled with the card. */
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: max(16.5%, 2.8rem);
  max-width: 3.2rem;
  aspect-ratio: 1;
  border: 1.5px solid rgb(255 255 255 / 0.7);
  border-radius: 50%;
  background: rgb(12 8 18 / 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 1.2rem rgb(155 125 255 / 0.3);
  transform: translate(-50%, -50%);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.5s ease;
}

.video__play::before {
  content: "";
  width: 30%;
  aspect-ratio: 0.8;
  margin-left: 8%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.video__button:focus-visible,
.photo__button:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.9);
  outline-offset: 4px;
}

@media (hover: hover) {
  .video__button:hover {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.22),
      0 1.25rem 2.5rem rgb(0 0 0 / 0.5),
      0 0 2rem rgb(155 125 255 / 0.18);
  }

  .video__button:hover img {
    transform: scale(1.04);
  }

  .video__button:hover .video__play {
    border-color: #fff;
    box-shadow: 0 0 1.8rem rgb(155 125 255 / 0.55);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (min-width: 700px) {
  .video-carousel {
    --video-w: clamp(15rem, 30vw, 17.75rem);
  }
}

@media (min-width: 1100px) {
  .video-carousel {
    --video-w: clamp(15rem, 20.5vw, 17.75rem);
  }
}

/* --- Photos: one framed board with all the photos at once, like a small photo wall.
   The board is a grid of square cells; each photo takes a fixed block of them (the tiles are
   squares plus slightly vertical or horizontal rectangles), so the wall is always complete,
   with no gaps. Photos are cropped to their tile here and shown whole in the viewer.
   Tile N of the HTML is tile N below, in reading order: the first photos get the biggest tiles. */

.photo-board {
  --cols: 7;
  --gap: 6px;
  --tile-radius: 8px;
  container-type: inline-size;
  max-width: 26rem;
  margin-inline: auto;
  padding: 0.6rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.012));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.photo-board__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 3.5rem;
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  list-style: none;
}

.photo {
  grid-area: var(--area);
}

.photo__button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--tile-radius);
  overflow: hidden;
  background: #0f0a14;
  cursor: zoom-in;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07);
  transition: box-shadow 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}

.photo__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .photo__button:hover {
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.24),
      0 0 1.5rem rgb(155 125 255 / 0.18);
  }

  .photo__button:hover img {
    transform: scale(1.06);
  }
}

/* Phones: 7 x 8 cells. Bands of two rows, alternating wider and squarer tiles. */
.photo:nth-child(1) { --area: 1 / 1 / span 2 / span 3; }
.photo:nth-child(2) { --area: 1 / 4 / span 2 / span 2; }
.photo:nth-child(3) { --area: 1 / 6 / span 2 / span 2; }
.photo:nth-child(4) { --area: 3 / 1 / span 2 / span 2; }
.photo:nth-child(5) { --area: 3 / 3 / span 2 / span 3; }
.photo:nth-child(6) { --area: 3 / 6 / span 2 / span 2; }
.photo:nth-child(7) { --area: 5 / 1 / span 2 / span 3; }
.photo:nth-child(8) { --area: 5 / 4 / span 2 / span 2; }
.photo:nth-child(9) { --area: 5 / 6 / span 2 / span 2; }
.photo:nth-child(10) { --area: 7 / 1 / span 2 / span 2; }
.photo:nth-child(11) { --area: 7 / 3 / span 2 / span 3; }
.photo:nth-child(12) { --area: 7 / 6 / span 2 / span 2; }

/* Tablets: 10 x 6 cells. A tall feature on the left, a row of squares underneath. */
@media (min-width: 700px) {
  .photo-board {
    --cols: 10;
    --gap: 8px;
    --tile-radius: 9px;
    max-width: 56rem;
    padding: 0.75rem;
    border-radius: 18px;
  }

  .photo:nth-child(1) { --area: 1 / 1 / span 4 / span 3; }
  .photo:nth-child(2) { --area: 1 / 4 / span 2 / span 2; }
  .photo:nth-child(3) { --area: 1 / 6 / span 2 / span 3; }
  .photo:nth-child(4) { --area: 1 / 9 / span 2 / span 2; }
  .photo:nth-child(5) { --area: 3 / 4 / span 2 / span 3; }
  .photo:nth-child(6) { --area: 3 / 7 / span 2 / span 2; }
  .photo:nth-child(7) { --area: 3 / 9 / span 2 / span 2; }
  .photo:nth-child(8) { --area: 5 / 1 / span 2 / span 2; }
  .photo:nth-child(9) { --area: 5 / 3 / span 2 / span 2; }
  .photo:nth-child(10) { --area: 5 / 5 / span 2 / span 2; }
  .photo:nth-child(11) { --area: 5 / 7 / span 2 / span 2; }
  .photo:nth-child(12) { --area: 5 / 9 / span 2 / span 2; }
}

/* Desktop: 14 x 5 cells, about 480px tall. Two square features, verticals and horizontals. */
@media (min-width: 1100px) {
  .photo-board {
    --cols: 14;
    --gap: 10px;
    --tile-radius: 10px;
    max-width: none;
    margin-inline: 0;
    padding: 1rem;
    border-radius: 20px;
  }

  .photo:nth-child(1) { --area: 1 / 1 / span 3 / span 3; }
  .photo:nth-child(2) { --area: 1 / 4 / span 3 / span 2; }
  .photo:nth-child(3) { --area: 1 / 6 / span 2 / span 3; }
  .photo:nth-child(4) { --area: 1 / 9 / span 2 / span 2; }
  .photo:nth-child(5) { --area: 1 / 11 / span 3 / span 2; }
  .photo:nth-child(6) { --area: 1 / 13 / span 2 / span 2; }
  .photo:nth-child(7) { --area: 3 / 6 / span 3 / span 3; }
  .photo:nth-child(8) { --area: 3 / 9 / span 3 / span 2; }
  .photo:nth-child(9) { --area: 3 / 13 / span 3 / span 2; }
  .photo:nth-child(10) { --area: 4 / 1 / span 2 / span 2; }
  .photo:nth-child(11) { --area: 4 / 3 / span 2 / span 3; }
  .photo:nth-child(12) { --area: 4 / 11 / span 2 / span 2; }
}

/* --- Entrance: things rise and fade in as they come into view (only when the script runs). */

.gallery-js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0ms);
}

.gallery-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- Lightbox */

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: #fff;
}

.lightbox::backdrop {
  background: rgb(8 5 12 / 0.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox[open] {
  display: grid;
  animation: lightbox-in 0.35s ease both;
}

/* The stage fills the screen; its padding leaves room for the buttons. */
.lightbox__stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: clamp(4rem, 9vh, 5.5rem) clamp(1rem, 7vw, 6.5rem);
  touch-action: pan-y;
}

.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #0b070f;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 2rem 5rem rgb(0 0 0 / 0.6);
  animation: lightbox-media 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.lightbox__stage img {
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
  object-fit: contain;
}

/* Videos fill the space they can while keeping their own proportions (--ratio is set by the script). */
.lightbox__stage video {
  width: min(100%, calc((100vh - 11rem) * var(--ratio, 1.7778)));
  width: min(100%, calc((100dvh - 11rem) * var(--ratio, 1.7778)));
  height: auto;
  aspect-ratio: var(--ratio, 16 / 9);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: rgb(14 9 20 / 0.55);
  color: #fff;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  border-color: #fff;
  background: rgb(14 9 20 / 0.8);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

.lightbox__close {
  top: clamp(0.9rem, 2.4vw, 1.75rem);
  right: clamp(0.9rem, 2.6vw, 2.25rem);
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  width: 1.05rem;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.lightbox__close::after {
  transform: rotate(-45deg);
}

.lightbox__nav {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__nav--prev {
  left: clamp(0.9rem, 2.6vw, 2.25rem);
}

.lightbox__nav--next {
  right: clamp(0.9rem, 2.6vw, 2.25rem);
}

.lightbox__nav::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border: solid currentColor;
  border-width: 0 0 1px 1px;
  transform: translateX(0.12rem) rotate(45deg);
}

.lightbox__nav--next::before {
  transform: translateX(-0.12rem) rotate(225deg);
}

@media (max-width: 699px) {
  /* On phones the arrows sit under the picture instead of over it. */
  .lightbox__stage {
    padding-bottom: 6rem;
  }

  .lightbox__nav {
    top: auto;
    bottom: 1.25rem;
    translate: none;
  }

  .lightbox__nav--prev {
    left: calc(50% - 3.5rem);
  }

  .lightbox__nav--next {
    right: calc(50% - 3.5rem);
  }
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
}

@keyframes lightbox-media {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* ------------------------------------------------------------------ Booking */

.booking {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  border-top: 1px solid rgb(255 255 255 / 0.07);
  background: #140f16;
  color: #f3effa;
}

.booking__intro {
  max-width: 34rem;
  margin-top: 1.1rem;
  color: rgb(255 255 255 / 0.84);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
}

.booking-form {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

.booking-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

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

/* Inputs, selects and the date picker's popover follow the page's own dark theme. */
.booking-form input,
.booking-form textarea {
  color-scheme: dark;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgb(255 255 255 / 0.94);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 10px;
  background: #0f0a14;
  color: #fff;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgb(255 255 255 / 0.6);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: rgb(255 255 255 / 0.55);
  box-shadow: 0 0 0 3px rgb(155 125 255 / 0.25);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

/*
 * A field the script rejects, once the visitor has tried to submit: on the wrapper for a plain
 * input, or directly on a conditional text field (e.g. #serviceOtherDetails) that is invalid on
 * its own, without marking the whole (optional) group around it as wrong.
 */
.field.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.field.is-invalid textarea,
.field__conditional.is-invalid {
  border-color: rgb(255 130 140 / 0.75);
}

.field.is-invalid input:focus-visible,
.field.is-invalid textarea:focus-visible,
.field__conditional.is-invalid:focus-visible {
  box-shadow: 0 0 0 3px rgb(255 130 140 / 0.25);
}

.field__error {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #ffb3bd;
}

.field__error[hidden] {
  display: none;
}

/* Revealed only once its checkbox or radio is picked (see js/booking.js). */
.field__conditional {
  margin-top: 0.85rem;
}

fieldset.field {
  border: 0;
  padding: 0;
  margin: 0;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Pills are labels inside .field; keep them in a row, not styled like the field labels above. */
.field .choice {
  display: inline-flex;
  margin-bottom: 0;
  font-weight: 500;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.15rem;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  color: rgb(255 255 255 / 0.92);
  font-size: 1rem;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.choice input {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: #9b7dff;
}

/* The pill itself lights up once its box is ticked (Safari 15.4+ / Chrome 105+; older
   browsers still show the tinted native control above, so the choice stays clear). */
.choice:has(input:checked) {
  border-color: rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}

.choice:has(input:focus-visible) {
  outline: 1px solid rgb(255 255 255 / 0.9);
  outline-offset: 2px;
}

.booking-form__addons {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.booking-form__addons-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
}

.booking-form__addons-note {
  max-width: 34rem;
  margin-top: 0.6rem;
  margin-bottom: 1.5rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 1.0625rem;
}

.booking-form__addons-disclaimer {
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.9375rem;
}

.booking-form__addons .field--full {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

.booking-form__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.booking-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.5rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6f8cff 0%, #9b7dff 38%, #d67cf0 72%, #ff85c6 100%);
  color: #14101c;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0.9rem 2rem rgb(155 125 255 / 0.35);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

.booking-form__button:hover {
  box-shadow: 0 1.1rem 2.4rem rgb(155 125 255 / 0.48);
  transform: translateY(-1px);
}

.booking-form__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.booking-form__button:disabled {
  cursor: progress;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.booking-form__fineprint {
  max-width: 30rem;
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.9375rem;
}

.booking-form__status {
  margin-top: 1.5rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.04);
  color: rgb(255 255 255 / 0.92);
  font-size: 1rem;
}

.booking-form__status:empty {
  display: none;
}

.booking-form__status--success {
  border-color: rgb(120 224 178 / 0.5);
  background: rgb(120 224 178 / 0.08);
  color: #e8fff3;
}

.booking-form__status--error {
  border-color: rgb(255 130 140 / 0.5);
  background: rgb(255 130 140 / 0.08);
  color: #ffeef0;
}

.booking-form__status--sending {
  border-color: rgb(155 125 255 / 0.5);
  background: rgb(155 125 255 / 0.08);
}

@media (min-width: 700px) {
  .booking-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.75rem;
  }
}

/* ------------------------------------------------------------ Contact + footer */

.contact {
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid rgb(255 255 255 / 0.09);
  background:
    radial-gradient(ellipse 60% 40% at 90% 0%, rgb(var(--atmos-amber) / 0.2), transparent 72%),
    radial-gradient(ellipse 50% 50% at 4% 100%, rgb(var(--atmos-violet) / 0.26), transparent 72%),
    linear-gradient(180deg, #30263d 0%, #2a2133 100%);
  color: #f3effa;
}

.contact__list {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.contact__item {
  padding: 1.6rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.contact__item dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

.contact__item dd {
  margin-top: 0.8rem;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Bracketed placeholders are dimmed on purpose, so they cannot pass for real details. */
.contact__item .contact__placeholder {
  color: rgb(255 255 255 / 0.42);
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  background: linear-gradient(90deg, #6f8cff 0%, #9b7dff 38%, #d67cf0 72%, #ff85c6 100%) bottom / 100% 1px no-repeat;
  color: #fff;
  text-decoration: none;
}

.contact__link[href] {
  cursor: pointer;
}

/* A placeholder link has no href yet, so it is not clickable; drop its underline too. */
.contact__link.contact__placeholder {
  background: none;
}

.contact__icon {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  fill: currentColor;
}

.site-footer {
  padding: 1.5rem 0 2.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.09);
  background: #2a2133;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  width: min(100% - var(--gutter) * 2, 82rem);
  margin-inline: auto;
}

.site-footer__nav a,
.legal__back {
  padding: 0.8rem 0; /* small type, generous tap target */
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / 0.62);
  transition: color 0.25s ease;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.legal__back:hover,
.legal__back:focus-visible {
  color: #fff;
}

@media (min-width: 800px) {
  .contact__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact__item {
    padding: 2.25rem 2rem 0 0;
    border-bottom: 0;
  }

  .contact__item + .contact__item {
    padding-left: 2rem;
    border-left: 1px solid rgb(255 255 255 / 0.12);
  }

  .site-footer__nav {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------- Placeholder pages (terms, privacy) */

.legal {
  min-height: 100vh;
  background: #140f16;
  color: #f3effa;
}

.legal__main {
  width: min(100% - var(--gutter) * 2, 46rem);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.legal__main h1 {
  margin-top: 2.5rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.legal__note {
  margin-top: 1.5rem;
  color: rgb(255 255 255 / 0.5);
}

.legal__main h2 {
  margin-top: 2.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}

.legal__main p {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(243 239 250 / 0.82);
}

.legal__main a:not(.legal__back) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ------------------------------------------------------ Reduced motion (gallery) */

@media (prefers-reduced-motion: reduce) {
  .gallery-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .video__button,
  .video__button img,
  .video__play,
  .photo__button,
  .photo__button img {
    transition: none;
  }

  .lightbox[open],
  .lightbox__stage img,
  .lightbox__stage video {
    animation: none;
  }
}

/* ------------------------------------------------------------- Breakpoints */

@media (min-width: 768px) {
  .section {
    padding: 4.5rem 3rem;
    min-height: 40svh;
  }
}

@media (min-width: 1200px) {
  .section {
    padding: 5rem;
  }
}

/* ------------------------------------------------- Gallery: After Movies (placeholder) */

/* A single wide frame, waiting for the first edited film. No play button until there is a file. */
.aftermovie {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  max-width: 56rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 50% 70% at 20% 70%, rgb(var(--atmos-violet) / 0.55), transparent 72%),
    radial-gradient(ellipse 46% 64% at 82% 30%, rgb(var(--atmos-amber) / 0.5), transparent 72%),
    linear-gradient(135deg, #2b2338, #3a2c48);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.aftermovie__word {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  color: rgb(255 255 255 / 0.92);
}

.aftermovie__tag {
  position: absolute;
  left: clamp(0.85rem, 2vw, 1.25rem);
  bottom: clamp(0.85rem, 2vw, 1.25rem);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgb(20 15 22 / 0.55);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

/* ------------------------------------------------------- Booking: how it works */

/* Always visible, inside the form, between the optional extras and the submit button. */
.booking-how {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1.5px solid rgb(255 255 255 / 0.2);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.04);
}

.booking-how__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: #fff;
}

.booking-how__steps {
  margin-top: 1.25rem;
  padding-left: 0;
  list-style: none;
  counter-reset: how;
}

.booking-how__steps li {
  position: relative;
  padding: 0.55rem 0 0.55rem 2.6rem;
  color: rgb(255 255 255 / 0.88);
  font-size: 1.0625rem;
  line-height: 1.5;
  counter-increment: how;
}

.booking-how__steps li::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #9b7dff;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.booking-how__steps strong {
  display: block;
  font-weight: 700;
  color: #fff;
}

.booking-how__reassure {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid #9b7dff;
  border-radius: 0 10px 10px 0;
  background: rgb(155 125 255 / 0.14);
  color: #fff;
  font-size: clamp(1.0625rem, 1.8vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
}

/* ------------------------------------------------------ Gallery: photo grid (any number) */

/*
 * Square tiles on a grid that fills itself, so it adapts to however many photos there are.
 * The first photo, and any photo marked "featured" in gallery.json, takes a 2 x 2 block.
 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  list-style: none;
}

.photo-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.photo-tile--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.photo-tile__button {
  display: block;
  flex: 1;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
  cursor: zoom-in;
}

.photo-tile--featured .photo-tile__button {
  aspect-ratio: auto;
}

.photo-tile__button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.photo-tile__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (hover: hover) {
  .photo-tile__button:hover img {
    transform: scale(1.03);
  }
}

@media (min-width: 700px) {
  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ Gallery: captions + featured */

.media-caption {
  margin-top: 0.55rem;
  color: rgb(255 255 255 / 0.82);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.35;
}

.photo-tile .media-caption {
  margin-top: 0;
}

.media-caption--big {
  max-width: 56rem;
  margin-inline: auto;
  font-size: 1.05rem;
}

/* A featured video is wider than the others in the row. */
.video--featured {
  flex-basis: calc(var(--video-w) * 1.55);
}

/* The first After Movie: one big playable frame. */
.aftermovie--film {
  --ratio: 1.7778;
  /* as wide as the page allows, but never taller than the screen: a vertical film stays whole */
  width: min(100%, 56rem, calc(80dvh * var(--ratio)));
  max-width: none;
  margin-block: 0;
  aspect-ratio: var(--ratio);
  background: #1a1324;
}

.aftermovie__button {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.aftermovie__button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aftermovie__button .video__play {
  max-width: 4.5rem;
  width: 4.5rem;
}

.aftermovie__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.aftermovie--film + .media-caption,
.aftermovie--film + .video-carousel {
  margin-top: 1rem;
}

.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 2;
  padding: 0 4.5rem;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
  pointer-events: none;
}

/* ------------------------------------------------ Gallery: every file keeps its own shape */

/* Videos: all tiles share a height; the width follows the video (tall for vertical, wide for landscape). */
.video-carousel {
  --tile-h: clamp(20rem, 85vw, 28rem);
  align-items: flex-start;
}

.video {
  --ratio: 1.7778;
  flex: 0 0 auto;
  width: calc(var(--tile-h) * var(--ratio));
  max-width: 88vw;
}

.video--featured {
  flex-basis: auto;
  width: calc(var(--tile-h) * 1.2 * var(--ratio));
}

.video__button {
  aspect-ratio: var(--ratio, 1.7778);
}

.video__button img {
  object-fit: contain;
}

/* Photos: rows that fill the width; each photo is as wide as its own proportion asks. */
.photo-grid {
  --row-h: clamp(9rem, 22vw, 15rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  list-style: none;
}

.photo-grid::after {
  content: "";
  flex-grow: 100000; /* keeps the last row from stretching */
}

.photo-tile {
  --ratio: 1;
  display: flex;
  flex-direction: column;
  flex: var(--ratio) 1 calc(var(--row-h) * var(--ratio));
  min-width: 0;
}

.photo-tile--featured {
  flex: 0 0 100%;
  align-items: center;
}

.photo-tile--featured .photo-tile__button {
  width: min(100%, calc(70dvh * var(--ratio)));
}

.photo-tile__button {
  flex: none;
  aspect-ratio: var(--ratio);
  width: 100%;
}

.photo-tile__button img {
  object-fit: contain;
}

/* Shown only when a phone browser blocks sound from the start. */
.lightbox__sound {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  left: 50%;
  z-index: 3;
  padding: 0.65rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #140f16;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  transform: translateX(-50%);
  cursor: pointer;
}

/* ------------------------------------------- Booking page: the home page's violet and amber glow */

/* The booking page used to be flat black. It now carries the same atmosphere as the home page,
   repeated down the page so a long form never runs out of colour; the boxes stay dark enough to read. */
.page-booking {
  min-height: 100vh;
  background-color: #2c2339;
  /* every glow fades out well inside the tile, so the repeat has no visible seam */
  background-image:
    radial-gradient(ellipse 62% 16% at 90% 18%, rgb(var(--atmos-violet) / 0.5), transparent 100%),
    radial-gradient(ellipse 54% 16% at 6% 42%, rgb(var(--atmos-amber) / 0.34), transparent 100%),
    radial-gradient(ellipse 58% 16% at 96% 66%, rgb(var(--atmos-amber) / 0.3), transparent 100%),
    radial-gradient(ellipse 62% 16% at 8% 86%, rgb(var(--atmos-violet) / 0.44), transparent 100%);
  background-size: 100% 80rem;
  background-repeat: repeat-y;
}

.page-booking .booking {
  border-top: 0;
  background: none;
}

.page-booking .field input,
.page-booking .field textarea {
  background: rgb(18 12 26 / 0.82);
}

.page-booking .booking-how {
  border-color: rgb(255 255 255 / 0.26);
  background: rgb(18 12 26 / 0.45);
}

/* A clear way back, at the top and at the end of the page. */
.page-booking .legal__main {
  width: min(100% - var(--gutter) * 2, 82rem);
  padding: clamp(1.25rem, 3vw, 2rem) 0 0;
}

.page-booking .page-booking__bottom {
  padding: 0 0 clamp(3rem, 7vw, 5rem);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid rgb(255 255 255 / 0.7);
  border-radius: 999px;
  background: rgb(18 12 26 / 0.55);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.back-link:hover,
.back-link:focus-visible {
  border-color: #fff;
  background: rgb(255 255 255 / 0.16);
}

.back-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}