/* ==========================================================================
   Budva Boat Party — landing page
   Mobile-first. Breakpoints: 640 (sm), 900 (md), 1200 (lg).
   ========================================================================== */

:root {
  /* Brand */
  --blue: #29ABE2;
  --blue-ink: #1878D4;
  --blue-dark: #0F5AA8;
  --navy: #12172A;

  /* Surfaces */
  --bg: #fff;
  --bg-blue: #EEF5FB;
  --bg-blue-2: #EAF3FB;
  --bg-pink: #FDF2FA;
  --bg-faq-open: #EAF7FD;
  --border-faq-open: #8AD4F5;

  /* Lines */
  --line: #ECECEC;
  --line-2: #E5E7EB;
  --line-3: #F0F0F0;
  --line-4: #E3E3E3;
  --line-divider: #EFEFEF;

  /* Text */
  --ink: #111;
  --ink-2: #555;
  --ink-3: #7a7a7a;
  --ink-4: #8a8a8a;
  --ink-muted: #9a9a9a;

  /* Type */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  /* Accent words in headings are Inter italic — no separate accent family. */

  /* Space. The 80px cap places hero content at left:80 on the 1728 frame, which
     in turn lands the centred nav at left:345 — both as specified. */
  --pad-x: clamp(20px, 5vw, 80px);
  --radius: 16px;
  --radius-lg: 24px;

  /* Nav (from design spec: 1038x72, radius 20, padding 12/16/12/24) */
  --nav-w: 1038px;
  --nav-h: 72px;
  --nav-radius: 20px;

  /* Hero column (spec: 351 wide at left:80, top:174). Left comes from --pad-x
     so the hero starts on the same line as every section below it. */
  --hero-col: 351px;

  /* Elevation */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------- base ---- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--blue-ink); }
a:hover { color: var(--blue-dark); }

/* Icons inherit colour and size with the text by default. :where() keeps this
   at element specificity so a plain class can still set an explicit size. */
svg:not(:where(.sprite)) { width: 1em; height: 1em; flex-shrink: 0; }
.sprite { display: none; }

.inline-icon { vertical-align: -0.125em; color: #FFC24B; }

/* A line break that only exists on narrow screens. */
@media (min-width: 900px) { .br-sm { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__bg--video { display: none !important; }
  .hero__bg--image { display: block !important; }
  .hero__sound-toggle { display: none !important; }
}

:where(a, button):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ elements --- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: .039em;
  text-transform: uppercase;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.eyebrow--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 40px;
}
.h2--lg { font-size: clamp(32px, 5.5vw, 52px); margin-bottom: clamp(32px, 5vw, 60px); }
.h2--tight { margin-bottom: 24px; }
.h2--center { text-align: center; }
/* Contrast against the condensed caps now comes from width and case rather
   than from a serif, so the italic needs extra weight to hold its own. */
.h2 em, .event__title em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: .82em;
  letter-spacing: -0.01em;
  text-transform: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 30px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, transform .18s;
}
.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn__icon { font-size: 18px; }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }

.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: #1d2440; color: #fff; transform: translateY(-1px); }

/* One badge, used by the hero and by every event card. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px 10px 10px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.badge--gradient { background: linear-gradient(90deg, #F78048 0%, #F865DD 50%, #E09EFE 100%); }
.badge--link { color: #fff; text-decoration: underline; }
.badge--link:hover { color: #fff; opacity: .9; }
.badge__item { display: inline-flex; align-items: center; gap: 7px; }
.badge__sep { opacity: .6; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--blue);
  color: var(--blue-ink);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
}

.section {
  padding: clamp(56px, 9vw, 110px) var(--pad-x) clamp(48px, 7vw, 90px);
}
.section--center { text-align: center; }
.section--tight-top { padding-top: clamp(32px, 5vw, 60px); }
.section--faq { padding-top: 20px; padding-bottom: clamp(72px, 11vw, 140px); }

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

/* Floats over the photo at every width. It scrolls away with the page, then
   returns as a fixed bar the moment the user scrolls back up (see app.js). */
.nav {
  position: absolute;
  top: 20px;
  left: var(--pad-x);
  right: var(--pad-x);
  max-width: var(--nav-w);
  margin-inline: auto;
  z-index: 20;
  background: #fff;
  border-radius: var(--nav-radius);
  box-shadow: var(--shadow-nav);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Pinned state: same bar, now travelling with the viewport. */
.nav.is-stuck {
  position: fixed;
  top: 12px;
  transition: transform .28s ease;
}
.nav.is-hidden { transform: translateY(calc(-100% - 24px)); }

@media (prefers-reduced-motion: reduce) {
  .nav.is-stuck { transition: none; }
}

.nav__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.nav__logo img {
  width: auto;
  height: 32px;
}
@media (min-width: 900px) {
  .nav__logo img { height: 40px; }
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-4);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}
.nav__toggle:hover { background: #f2f2f2; }
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

/* Mobile: menu collapses into the pill and expands below the logo row. */
.nav__menu {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 4px;
}
.nav__menu.is-open { display: flex; }

.nav__links { display: flex; flex-direction: column; }
.nav__links a {
  display: block;
  padding: 12px 8px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
}
.nav__links a:hover { background: #f5f5f5; color: #1a1a1a; }

/* In the open burger menu the CTA is a full-width block sitting right above the
   hero's own buttons, so it takes their 16px corner rather than the .btn pill.
   The desktop rule below puts the pill back for the bar. */
.nav__cta { margin-top: 8px; border-radius: 16px; }

@media (min-width: 900px) {
  .nav {
    top: 32px;
    height: var(--nav-h);
    padding: 12px 16px 12px 24px;
    flex-wrap: nowrap;
  }
  .nav__toggle { display: none; }
  .nav__menu {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 3vw, 44px);
    padding: 0;
    flex: 1;
    justify-content: space-between;
  }
  .nav__links {
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 3vw, 44px);
    margin-inline: auto;
  }
  .nav__links a { padding: 4px; font-size: 14px; line-height: 1; white-space: nowrap; }
  /* 72px bar less 12px padding top and bottom leaves exactly 48px of content. */
  .nav__cta { margin-top: 0; height: 48px; padding-inline: 22px; font-size: 14px; border-radius: 30px; }
}

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

/* Mobile stacks: white nav, then the photo as its own block, then the copy on
   white below it. Desktop layers the copy over a full-bleed photo instead. */
.hero {
  position: relative;
  display: block;
  padding: 0;
}

.hero__bg { display: block; }
.hero__bg img { width: 100%; aspect-ratio: 400 / 552; object-fit: cover; }

/* Both breakpoints show the looping video; the static photo is kept as the
   reduced-motion fallback (see the prefers-reduced-motion block below). */
.hero__bg--image { display: none; }
.hero__bg--video {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 552;
  object-fit: cover;
}

.hero__video-wrap { position: relative; }

.hero__sound-toggle {
  display: flex;
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(10, 20, 40, .45);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
}
.hero__sound-icon { width: 20px; height: 20px; }
.hero__sound-icon--on { display: none; }
.hero__sound-toggle[aria-pressed="true"] .hero__sound-icon--muted { display: none; }
.hero__sound-toggle[aria-pressed="true"] .hero__sound-icon--on { display: block; }

.hero__scrim { display: none; pointer-events: none; }

/* Full width on mobile; the 351 column is a desktop-only constraint. */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 34px var(--pad-x) 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Spacing is per-pair, not uniform (24/16/24/48 down the column), so each
     child carries its own top margin rather than sharing a flex gap. */
  gap: 0;
}

/* Dark on white by default; the desktop overlay flips both to white. */
.hero__title {
  margin: 24px 0 0;
  color: #1A1A1A;
  font-weight: 400;
  text-wrap: balance;
}
/* Spec sets both hero lines at 96/96 on the 1728 frame; the lower bound keeps
   them inside the column on phones. */
.hero__title-main {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  /* 80 on the 400 mobile frame, 96 on the 1728 desktop one; the 20vw arm keeps
     it from overflowing the column on phones narrower than 400. */
  font-size: min(20vw, clamp(80px, 75.2px + 1.2vw, 96px));
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero__title-accent {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  /* 80 on the 400 mobile frame, 96 on the 1728 desktop one; the 20vw arm keeps
     it from overflowing the column on phones narrower than 400. */
  font-size: min(20vw, clamp(80px, 75.2px + 1.2vw, 96px));
  line-height: 1;
  letter-spacing: 0;
}

.hero__lead {
  margin-top: 16px;
  color: #1A1A1A;
  opacity: .7;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}

.hero__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
/* Stacked, the pair splits the row so it ends flush with the copy above and the
   price card below. */
@media (max-width: 899px) {
  .hero__actions .btn { flex: 1; }
}
/* Too narrow for two 152px buttons side by side — give each its own row. */
@media (max-width: 355px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Spec: card 351x128, radius 8, padding 16, gap 16 — which is exactly a 40px
   price row plus a 40px chip. */
/* Tinted with a dashed outline on mobile, where it sits on white; solid and
   lifted on the desktop photo. The outline is an SVG because CSS `dashed` gives
   no control over dash length, and the spec calls for 12/12. */
.price-card {
  margin-top: 48px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='128' preserveAspectRatio='none'%3E%3Crect x='.5' y='.5' width='359' height='127' rx='7.5' fill='none' stroke='%232DC2FF' stroke-dasharray='12 12'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    #EEFAFF;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
/* 40x40 icon slot; the 35x25 artwork letterboxes inside it rather than stretching. */
.price-card__icon { width: 40px; height: 40px; color: #066ADE; }
.price-card__amount {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0;
  color: var(--blue-ink);
}
.price-card__unit {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: #066ADE;
  /* Sits it on the bottom of the row, which lands its baseline on the price's. */
  align-self: flex-end;
}
.chip--filled {
  background: #EEFAFF;
  border: 1px solid #2DC2FF;
}
.price-card .chip {
  border-radius: 6px;
  padding: 8px 16px 8px 12px;
  gap: 12px;
  min-height: 40px;
  font-size: 12px;
  color: #2DC2FF;
}
.chip__icon { width: 22.5px; height: 18px; color: #2DC2FF; }

.badge__icon { width: 18px; height: 20px; }
/* 20 renders the artwork at its specified 19.5; the rest is the icon's padding. */
.badge__icon--clock { width: 20px; height: 20px; }

.hero__actions .btn {
  border-radius: 16px;
  padding: 16px 24px 16px 16px;
  gap: 12px;
  min-width: 152px;
  /* Spec fixes the height at 56 inclusive of the 1px border, so state it
     rather than letting the border push an auto height past it. */
  height: 56px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}
/* Spec sizes the WhatsApp mark deliberately larger than its label. */
.hero__actions .btn__icon,
.nav__cta .btn__icon { width: 24px; height: 24px; }

@media (min-width: 900px) {
  /* Back to the layered hero: photo full-bleed, copy over it. */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    /* Nav is fixed at top:32 height:72 across this range, so pinning the column
       to 174 holds the specified 70px below it at every desktop width. */
    padding: 174px var(--pad-x);
  }
  .hero__bg { position: absolute; inset: 0; z-index: 0; }
  .hero__bg img { height: 100%; aspect-ratio: auto; }
  .hero__bg--image { display: none; }
  .hero__video-wrap { position: absolute; inset: 0; z-index: 0; }
  .hero__bg--video { width: 100%; height: 100%; aspect-ratio: auto; }
  .hero__scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(10,20,40,.55) 0%, rgba(10,20,40,.15) 45%, rgba(10,20,40,0) 65%);
  }
  .hero__inner { padding: 0; max-width: var(--hero-col); }
  .hero__title { color: #fff; }
  .hero__lead { color: #f1f1f1; opacity: 1; }
  /* Shorthand also drops the mobile dashed outline. */
  .price-card {
    max-width: var(--hero-col);
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
  }
  .price-card .chip { font-size: 13px; }
}

@media (min-width: 1200px) {
  /* 174 + 576 column + 174 . Section 2's top:1103 less its 179 lead-in puts the
     hero's end at 924, which is also where the source photo stops. */
  .hero { min-height: 924px; }
}

/* ----------------------------------------------------------- why cards --- */

/* Section 2 is specified against the 1728 frame: 179 above the eyebrow, 12 to
   the heading, 64 to the card grid, 180 below it. Figma reports text heights
   from font metrics, so "line-height: 100%" there means normal, not 1. */
.section--why {
  padding-top: clamp(72px, 10.4vw, 179px);
  padding-bottom: clamp(72px, 10.4vw, 180px);
}
.section--why .h2 {
  /* 56 on the 400 frame, 72 on the 1728 one. */
  font-size: clamp(44px, 51.2px + 1.2vw, 72px);
  line-height: 1;
  letter-spacing: 0;
  color: #1A1A1A;
  margin-bottom: clamp(32px, 3.7vw, 64px);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* No bottom padding: the body's own 32px is the gap to the card's edge. */
.why-card {
  background: #fff;
  border-radius: 16px;
  padding: 8px 8px 0;
  box-shadow:
    0 15px 33px 0 #3838380F,
    0 59px 59px 0 #3838380D,
    0 134px 80px 0 #38383808,
    0 238px 95px 0 #38383803;
  transition: transform .2s;
}
.why-card:hover { transform: translateY(-4px); }

/* Spec's 493x395 as a ratio: lands on 395 at desktop width and scales down on
   phones, where a fixed height would leave the photo far too tall. */
.why-card__img {
  width: 100%;
  /* height:auto is required — the img's height attribute is a presentational
     hint that would otherwise fix the height and void the ratio. */
  height: auto;
  aspect-ratio: 493 / 395;
  object-fit: cover;
  border-radius: 12px;
}
.why-card__body { padding: 32px 24px; }
/* block, or the inline baseline gap adds ~6px under it. */
.why-card__icon {
  display: block;
  width: 40px;
  height: 40px;
  color: #2DC2FF;
  margin-bottom: 16px;
}
/* Line heights are the design's text-box heights (38/19); Chrome's `normal`
   runs taller than Figma's font metrics and would break the 596 card. */
.why-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: .02em;
  color: #1A1A1A;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.why-card__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0;
  color: #1A1A1A;
  opacity: .7;
}

/* --------------------------------------------------------------- places --- */

.places { background: var(--bg-blue); }

/* Spec: 372-tall band (56 + 260 image + 56), text column running from the 80px
   margin to the 477 boundary, marquee filling the rest to 80 off the far edge.
   Everything is simply centred in the band. */
.places__band {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(48px, 7vw, 56px) var(--pad-x);
  overflow: hidden;
}
.places__band--pink { background: var(--bg-pink); }

.places .eyebrow,
.starting .eyebrow { margin-bottom: 16px; }

/* Stacked, the copy leads in both bands; on desktop this band mirrors instead. */
.places__band--pink .places__text { order: -1; }
.places__h {
  font-size: clamp(28px, 2.315vw, 40px);
  line-height: 1;
  letter-spacing: 0;
  color: #1A1A1A;
  margin-bottom: 0;
}

.marquee {
  min-width: 0;
  /* Hard edges: the track is clipped at the boundary, not faded into it. */
  overflow: hidden;
  /* Bleed to the viewport edge on mobile; the desktop rule pulls it back. */
  margin-inline: calc(var(--pad-x) * -1);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-rtl var(--marquee-duration, 40s) linear infinite;
}
.marquee__track--ltr { animation-name: marquee-ltr; }
.marquee__item { margin-right: 20px; }
.marquee__item img {
  width: 377px;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Durations track copy width (6 vs 7 images, each 377 + 20 of margin) so both
   bands move at ~40px/s regardless of how many photos a band holds. */
.places__band:first-child .marquee__track { --marquee-duration: 60s; }
.places__band--pink .marquee__track { --marquee-duration: 70s; }

/* Track is three identical copies, so one copy is exactly a third of it. Using
   margin-right (not flex gap) keeps every copy the same width, which is what
   makes the wrap seamless. */
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@keyframes marquee-ltr {
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; }
}

@media (min-width: 900px) {
  .places__band {
    flex-direction: row;
    align-items: center;
    gap: 0;
    height: 372px;
    padding-block: 0;
  }
  /* 80 -> 477 on the 1728 frame: 168 of eyebrow plus the specified 229. */
  .places__text { flex: 0 0 397px; }
  .places__text--end { text-align: right; }
  /* Same specificity as the stacked rule above, so this one wins on order. */
  .places__band--pink .places__text { order: 2; }
  .places__band--pink .marquee { order: 1; }
  .marquee { flex: 1; margin-inline: 0; }
}

/* ------------------------------------------------------------- starting --- */

/* Spec: 907-tall #EEF5FB band starting 180 below the previous section, holding
   a 1568-wide card — 642 photo + 926 copy over a 118 step strip. */
.starting {
  background: var(--bg-blue-2);
  margin-top: 180px;
  padding: 40px var(--pad-x);
}

.starting__card {
  background: #fff;
  border-radius: var(--radius);
  max-width: 1568px;
  margin-inline: auto;
  /* Stacked, the whole thing reads as one lifted card. */
  box-shadow:
    0 15px 33px 0 #3838380F,
    0 59px 59px 0 #3838380D,
    0 134px 80px 0 #38383808,
    0 238px 95px 0 #38383803;
}

.starting__top { display: flex; flex-direction: column; }

.starting__figure { position: relative; }
/* Spec: 360x446 on the 400 frame — a ratio so it scales with the card. */
.starting__img {
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 446;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Badge is a real element; the source photo's baked copy was cropped away.
   Mobile spec: 312x88 at 24/24, padding 16/24; desktop: 422x104 at 32/32. */
.boarding {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 312px;
  max-width: calc(100% - 48px);
  height: 88px;
  padding: 16px 24px;
  border-radius: 12px;
  background: #2E3035;
  color: #fff;
}
.boarding__icon { width: 32px; height: 32px; color: #2DC2FF; }
.boarding__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: 0;
  color: #2DC2FF;
}
.boarding__text {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .039em;
  color: #fff;
  text-transform: uppercase;
}

/* Stacked: 24 inset, 24 between the copy and the info cards. Desktop swaps in
   the 72/73.5 padding and the 100 gap. */
.starting__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.starting__h {
  /* 64 on the 400 frame, 72 on the 1728 one. */
  font-size: clamp(48px, 61.6px + .6vw, 72px);
  line-height: 1;
  letter-spacing: 0;
  color: #1A1A1A;
  margin-bottom: 16px;
  /* "STARTING POINT." inks at 310 but advances to 314 — the trailing side
     bearing alone would wrap it. The design's own text box is 317 wide against
     a 312 column for the same reason; this buys back that slack. */
  margin-right: -8px;
}
.starting__lead {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .039em;
  color: #1A1A1A;
  max-width: 576px;
}
.starting__lead a { text-decoration: underline; }

.info-boxes { display: flex; flex-wrap: wrap; gap: 16px; }

.info-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 144px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line-4);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 3px 7px 0 #9E9E9E12,
    0 12px 12px 0 #9E9E9E0F,
    0 27px 16px 0 #9E9E9E08,
    0 48px 19px 0 #9E9E9E03;
  transition: border-color .18s, transform .18s;
}
.info-box:hover { border-color: var(--blue); transform: translateY(-2px); color: inherit; }
.info-box__icon { width: 28px; height: 28px; }
.info-box__icon--maps { color: #F71D1D; }
.info-box__icon--wa { color: #01C501; }
.info-box__label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: .039em;
  text-transform: uppercase;
  color: #1A1A1A;
  opacity: .7;
}
.info-box__value {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: .039em;
  color: #1A1A1A;
}

/* Step strip: icon + number stacked over the copy, 24 inset all round. */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-4);
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--line-4);
}
.step:last-child { border-bottom: 0; }
.step__head { display: flex; align-items: center; gap: 12px; height: 32px; }
.step__icon { width: 32px; height: 32px; color: var(--blue); }
.step__num {
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .039em;
  color: #2DC2FF;
}
.step__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .039em;
  color: #1A1A1A;
  opacity: .7;
}

@media (min-width: 900px) {
  .starting { padding-block: 80px; }
  .starting__card { box-shadow: none; }
  .starting__top { flex-direction: row; align-items: stretch; }
  /* 642 of the 1568 card on the design frame. As a share rather than a fixed
     642, or at 900 the photo alone would leave the copy 24px to live in. */
  .starting__figure { flex: 0 0 40.94%; }
  .starting__img { height: 100%; aspect-ratio: auto; border-radius: var(--radius) 0 0 0; }
  .boarding {
    top: 32px;
    left: 32px;
    width: 422px;
    max-width: calc(100% - 64px);
    height: 104px;
  }
  .starting__body {
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: clamp(32px, 5.8vw, 100px);
    padding: clamp(24px, 4.25vw, 73.5px) clamp(24px, 4.17vw, 72px);
    border: 1px solid var(--line-4);
    border-width: 1px 1px 0 0;
    border-radius: 0 var(--radius) 0 0;
  }
  .info-box { width: 244px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { border-bottom: 0; padding: 24px; }
  /* Divider as its own rule rather than a full-height border: shorter than the
     strip and lighter than the card's edges. */
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 56px;
    transform: translateY(-50%);
    background: var(--line-divider);
  }
}

/* --------------------------------------------------------------- event --- */

/* Spec: 1304x306 card at 12px padding (40 on the right), 377x282 photo, copy 40
   off the photo, price rail 69 further right. */
/* 120 on the 400 frame, 176/180/247 on the 1728 one. */
.section--events { padding-top: clamp(96px, 103.1px + 4.22vw, 176px); padding-bottom: 0; }
.section--upcoming {
  padding-top: clamp(96px, 101.9px + 4.52vw, 180px);
  padding-bottom: clamp(96px, 81.8px + 9.56vw, 247px);
}

.eyebrow--icon { margin-bottom: 13px; }
/* Gradient flame as a raster; the fill can't come from currentColor. */
.eyebrow__icon { width: 17px; height: 21px; }

/* flex-start, not baseline: Figma stacks both words as equal 96-tall boxes at
   the same y, and baseline alignment would push the row past 96. */
.events__h {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  /* 20 apart side by side; 12 once the words stack, per the mobile spec. */
  row-gap: 12px;
  column-gap: 20px;
  /* 64 on the 400 frame, 96 on the 1728 one. */
  font-size: clamp(48px, 54.4px + 2.41vw, 96px);
  line-height: 1;
  letter-spacing: 0;
  color: #1A1A1A;
  /* 48 to the card on the 400 frame, 64 on the 1728 one. */
  margin-bottom: clamp(40px, 43.2px + 1.2vw, 64px);
}
.events__h em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
}

/* Border drawn as an inset shadow, matching Figma's inside stroke: a real
   1px border would push the card to 308 and the photo to 13 off the edge. */
.event {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
  max-width: 1304px;
  margin: 0 auto;
  box-shadow:
    inset 0 0 0 1px #064DDE3B,
    0 15px 33px 0 #3838380F,
    0 59px 59px 0 #3838380D,
    0 134px 80px 0 #38383808,
    0 238px 95px 0 #38383803;
}
.event + .event { margin-top: 24px; }

.event__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

.event__body { flex: 1; min-width: 0; }

.event__badges { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.badge__icon--pin { width: 17px; height: 21px; }
.badge--link {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

/* Same reason as .events__h: two fonts on one text line make the line box grow
   past the font size, so the words are laid out as flex items instead. */
.event__title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  /* 64 on the 400 frame, 72 on the 1728 one; it wraps to two lines on phones. */
  font-size: clamp(48px, 61.6px + .6vw, 72px);
  line-height: 1;
  letter-spacing: 0;
  color: #1A1A1A;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.event__title em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
}

.event__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.event__chips .chip {
  gap: 12px;
  min-height: 40px;
  padding: 8px 16px 8px 12px;
  border-radius: 8px;
  border-width: 1px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .039em;
  color: #2DC2FF;
}

.event__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: #1A1A1A;
  opacity: .7;
}

.event__price { text-align: center; }
/* 100-wide text blocks centred on the 152 rail, per spec. */
.event__amount,
.event__unit { width: 100px; margin-inline: auto; }
.event__amount {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0;
  color: #066ADE;
}
.event__unit {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: #066ADE;
  margin-top: 12px;
  margin-bottom: 20px;
}
.event .btn--primary {
  width: 152px;
  height: 56px;
  gap: 12px;
  padding: 16px 24px 16px 16px;
  border: 1px solid #FFFFFF59;
  border-radius: 16px;
  background: #2DC2FF;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.event .btn--primary:hover { background: #0FB4F5; }
.event .btn__icon { width: 24px; height: 24px; }

/* Stacked, the event sections read left-aligned and the CTA spans the card.
   Must sit after the rules above to win on source order. */
@media (max-width: 899px) {
  .section--center { text-align: left; }
  .eyebrow--icon { justify-content: flex-start; }
  .events__h { justify-content: flex-start; }
  .event .btn--primary { width: 100%; }
}

@media (min-width: 900px) {
  .event {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 12px 40px 12px 12px;
  }
  .event__img { width: 377px; height: 282px; flex-shrink: 0; }
  /* 69 from the copy, and the rail is the button's own 152. */
  .event__price { margin-left: 29px; flex: 0 0 152px; }
}

/* ----------------------------------------------------------------- faq --- */

/* Spec: 1038 column, 56 below the heading, 16 between items. Closed item is
   32 + 40 + 32 = 104; open is 32 + 40 + 24 + 38 + 32 = 166. */
.section--faq { padding-top: 0; padding-bottom: clamp(72px, 8vw, 140px); }
.faq__title {
  font-family: var(--font-body);
  font-weight: 860;
  font-size: clamp(40px, 4.63vw, 80px);
  line-height: normal;
  letter-spacing: 0;
  color: #1A1A1A;
  text-align: center;
  margin-bottom: 56px;
}

.faq {
  max-width: 1038px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Inset border, as on the event card: a real one would make the boxes 106/170.
   Padding lives here, not on the button, so the mark can centre on the whole
   box — which is where the design puts it, not on the question's line. */
.faq__item {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  opacity: .5;
  box-shadow: inset 0 0 0 1px var(--line-4);
  transition: background-color .2s, opacity .2s;
}
.faq__item:hover { opacity: .75; }
.faq__item.is-open {
  opacity: 1;
  background: #EEFAFF;
  box-shadow:
    inset 0 0 0 1px #2DC2FF,
    0 15px 33px 0 #3838380F,
    0 59px 59px 0 #3838380D,
    0 134px 80px 0 #38383808,
    0 238px 95px 0 #38383803;
}

/* 48 of right padding on both rows keeps the copy clear of the mark; that is
   what narrows the answer to the specified width. */
.faq__q {
  width: 100%;
  display: block;
  padding: 0 48px 0 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* 32 on the 400 frame, 40 on the 1728 one. */
  font-size: clamp(26px, 29.6px + .6vw, 40px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: left;
  color: #1A1A1A;
  cursor: pointer;
}
/* block, so the label's box is its line box; inline it would measure by font
   metrics and sit taller than the specified 40/64. */
.faq__q span { display: block; }

.faq__mark {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: currentColor;
  transition: transform .25s ease;
}
/* The plus rotates into an ✕ — one icon, no swap. */
.faq__item.is-open .faq__mark { transform: translateY(-50%) rotate(45deg); }

.faq__a { padding: 24px 48px 0 0; }
.faq__a p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0;
  color: #1A1A1A;
  opacity: .7;
  max-width: 911px;
}

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

/* Deliberately quiet: a pale band and one row of small links. Everything that
   sells the party lives above it, so this only has to close the page. Light
   rather than navy because the logo's wordmark is dark and would vanish. */
.footer {
  background: var(--bg-blue);
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
  padding: 40px var(--pad-x);
}

.footer__inner {
  max-width: 1038px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.footer__logo img { width: 132px; height: auto; }

.footer__nav,
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  font-size: 14px;
}

.footer__nav a,
.footer__contact a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s;
}
.footer__nav a:hover,
.footer__contact a:hover { color: var(--blue-ink); }

.footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.footer__contact svg { color: var(--blue); }

.footer__meta {
  font-size: 12px;
  color: var(--ink-4);
  /* Hairline rather than a full rule — the band is already a divider. */
  border-top: 1px solid var(--line-2);
  padding-top: 20px;
  width: 100%;
}

@media (min-width: 900px) {
  .footer { padding-block: 48px; }
  .footer__nav { gap: 10px 32px; }
}

/* ----------------------------------------------------------- cookiebar --- */

/* A strip along the bottom, not a modal: it never blocks the booking button,
   and it leaves with the first tap either way. */
.cookiebar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  max-width: 620px;
  margin-inline: auto;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(18, 23, 42, .96);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + 12px));
  transition: transform .25s ease;
}
.cookiebar.is-open { transform: none; }

@supports (backdrop-filter: blur(8px)) {
  .cookiebar { background: rgba(18, 23, 42, .82); backdrop-filter: blur(8px); }
}

.cookiebar__text { font-size: 13px; line-height: 1.45; }
.cookiebar__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookiebar__text a:hover { color: #fff; opacity: .8; }

.cookiebar__actions { display: flex; gap: 8px; margin-left: auto; }

.cookiebar__btn {
  padding: 9px 18px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s;
}
.cookiebar__btn:hover { background: rgba(255, 255, 255, .22); }
.cookiebar__btn--yes { background: var(--blue); }
.cookiebar__btn--yes:hover { background: var(--blue-dark); }

/* Below ~420 the two buttons and the copy stop fitting on one line. */
@media (max-width: 460px) {
  .cookiebar { flex-direction: column; align-items: stretch; text-align: center; }
  .cookiebar__actions { margin-left: 0; justify-content: center; }
}

/* --------------------------------------------------------------- legal --- */

/* legal.html only: a single reading column on white. */
.legal {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 64px) var(--pad-x) clamp(56px, 8vw, 96px);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 32px;
}

.legal h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  color: #1A1A1A;
}

.legal__updated { font-size: 13px; color: var(--ink-3); margin-top: 10px; }

/* scroll-margin keeps the anchored heading clear of the sticky nav. */
.legal h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  color: #1A1A1A;
  margin-top: 48px;
  margin-bottom: 14px;
  scroll-margin-top: 96px;
}

.legal h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  margin-top: 24px;
  margin-bottom: 8px;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.legal p + p { margin-top: 12px; }

.legal ul {
  list-style: disc;
  padding-left: 22px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 16px 20px;
  margin-top: 28px;
  border-radius: 12px;
  background: var(--bg-blue);
  font-size: 14px;
  font-weight: 600;
}