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

/* ---------- Custom properties ---------- */
:root {
  /* ===== Onyx Crimson theme (baked in from the prototype) ===== */
  --color-primary: #D6303B;

  --color-secondary: #dbb658;

  --color-accent: #CBB26A;

  --color-bg: #202024;

  --color-bg-alt: #131316;

  --color-text: #F2ECE4;

  /* Panels that sit on the page: navbar, menus, package card, gallery, booking box */
  --color-surface: #1B1B1F;

  --color-muted: #c0b5a4;

  --color-dark: #1E1E1E;

  --font-heading: 'Berkshire Swash', Georgia, serif;
  --font-body: 'Caveat Brush', 'Inter', Arial, sans-serif;

  --font-default: 'Inter', system-ui, Arial, sans-serif;

  --font-size-base: 1.45rem;

  --font-size-secondary: 1.4rem;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --radius: 12px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
  --maxw: 1200px;

  /* Motion: the spring is for feedback only (hover lifts, press release, things that
     open); passive transitions like fades and slides stay on plain easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* press-down: fast and flat, so the squash lands on mousedown; the release then
     springs back on the element's own scale transition */
  --press-scale: 0.95;
  --press-in: 0.08s ease-out;
  --press-out: 0.45s var(--ease-spring);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-spring: ease-out;
  }

  html {
    scroll-behavior: auto;
  }
}

html {
  /* dark page: the browser draws its scrollbars and built-in controls dark too */
  color-scheme: dark;
  scroll-behavior: smooth;
  /* clears the sticky navbar (68px) for anchor jumps and for elements focused with Tab */
  scroll-padding-top: 72px;
  /* keep the scrollbar's space reserved, so locking the page doesn't shift it sideways */
  scrollbar-gutter: stable;
}

/* set by window.__scrollLock while the menu, intro video or gallery popup is open.
   Only <body>: its overflow is handed to the window, which is what stops the scroll.
   Setting it on <html> too would turn <body> into its own scroll box, and the
   sticky navbar would stick to that instead of the window and slide off screen. */
html.scroll-locked body {
  overflow: hidden;
}

body {
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
}

.font-default {
  font-family: var(--font-default);
  font-size: 1.2rem;
}

.text-dark {
  color: var(--color-dark) !important;
}

h1,
h2,
h3,
.logo {
  font-family: var(--font-heading);
}

/* headings break into even lines instead of leaving one word on the last */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* taps fire straight away instead of waiting to see if it is a double-tap zoom */
a,
button,
summary,
[role="slider"] {
  touch-action: manipulation;
}

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

img {
  max-width: 100%;
  /* the width/height attributes only reserve the aspect ratio; CSS sets the size */
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.section {
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.section>.container {
  position: relative;
  z-index: 1;
}

.section-heading {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.section-intro {
  text-align: center;
  font-size: var(--font-size-secondary);
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  color: var(--color-muted);
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.navbar.nav-hidden {
  transform: translateY(-100%);
}

/* Backdrop behind the open mobile menu — catches taps to close it and
   blocks accidental hits on page buttons underneath. Sits below the
   navbar (z-index 1000) so the bar and the menu stay interactive. */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(10, 10, 12, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  touch-action: none;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}

@media (max-width: 1024px) {
  .nav-backdrop {
    display: block;
  }
}

.nav-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

@media (min-width: 1025px) {
  .nav-backdrop {
    display: none !important;
  }
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-primary);
  white-space: nowrap;
}

.logo-text {
  display: flex;
  align-items: baseline;
  color: var(--color-primary);
}

.logo-letter {
  display: inline-block;
  will-change: transform;
}

.logo-letter:nth-child(2) {
  animation-delay: .05s;
}

.logo-letter:nth-child(3) {
  animation-delay: .1s;
}

.logo-letter:nth-child(4) {
  animation-delay: .15s;
}

.logo-letter:nth-child(5) {
  animation-delay: .2s;
}

.logo-letter:nth-child(6) {
  animation-delay: .25s;
}

.logo-letter:nth-child(7) {
  animation-delay: .3s;
}

.logo-letter:nth-child(8) {
  animation-delay: .35s;
}

.logo-letter:nth-child(9) {
  animation-delay: .4s;
}

.logo-letter:nth-child(10) {
  animation-delay: .45s;
}

.logo-letter:nth-child(11) {
  animation-delay: .5s;
}

.logo-letter:nth-child(12) {
  animation-delay: .55s;
}

.logo-letter:nth-child(13) {
  animation-delay: .6s;
}


/* longhands, not the `animation` shorthand: the shorthand would reset the per-letter
   animation-delay above (and outrank it), so every letter would jump at once */
.logo.waving .logo-letter {
  animation-name: logo-wave;
  animation-duration: 0.6s;
  animation-timing-function: ease;
}

@keyframes logo-wave {

  0%,
  100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(-7px);
  }
}

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.nav-cta {
  display: none;
}

/* inline-block so the hover lift/press can transform it; line-height: normal keeps
   the box (and the underline) exactly where the old inline box was */
.nav-links a {
  display: inline-block;
  line-height: normal;
  font-weight: 500;
  font-size: var(--font-size-secondary);
  position: relative;
  padding: 4px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* Scroll-spy: underline the nav link of the section currently in view */
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ===== Language picker (scales to any number of languages) ===== */
.lang-picker {
  position: relative;
  flex: 0 0 auto;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, scale var(--press-out);
}

.lang-current:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.flag {
  width: 22px;
  height: 15px;
  display: block;
  flex: 0 0 auto;
  border-radius: 2px;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  padding: 4px;
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 1200;
}

.lang-picker.open .lang-menu {
  display: block;
  transform-origin: top right;
  animation: menu-pop 0.35s var(--ease-spring);
}

@keyframes menu-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
}

.lang-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  text-align: left;
}

.lang-menu button:hover {
  background: var(--color-bg-alt);
}

/* gold, not red: red text on the dark menu is only 3.5:1 */
.lang-menu button[aria-current="true"] {
  color: var(--color-secondary);
  font-weight: 700;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font-size: var(--font-size-secondary);
  transition: transform 0.4s var(--ease-spring), scale var(--press-out), opacity 0.2s ease, background 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.btn-secondary {
  background: var(--color-secondary);
  color: #ffffff;
}

.btn-book {
  padding: 0.5rem 1.1rem;
  font-size: calc(var(--font-size-secondary) - 0.3rem);
}

/* ===== Playful button hover scenes ===== */
.btn-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-scene .btn-label {
  position: relative;
  z-index: 3;
  display: inline-block;
  transition: transform 0.35s ease, color 0.35s ease, opacity 0.25s ease;
}

/* drop the default lift so each scene reads on its own (hover devices only) */

/* --- Discover: night sky with stars; Santa's sleigh flies fully across, loops with a 1s pause --- */
.btn-sleigh .scene-night {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  background: #0a1836;
  /* inner edge of the outline fades softly toward the middle */
  box-shadow: inset 0 0 16px 3px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}


.scene-night .star {
  position: absolute;
  width: 5px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1.5px rgba(255, 226, 122, 0.9));
}

.scene-night .star:nth-child(1) {
  top: 20%;
  left: 6%;
  width: 5px;
  transform: translate(-50%, -50%) rotate(18deg);
}

.scene-night .star:nth-child(2) {
  top: 38%;
  left: 13%;
  width: 7px;
  transform: translate(-50%, -50%) rotate(-24deg);
}

.scene-night .star:nth-child(3) {
  top: 15%;
  left: 22%;
  width: 4px;
  transform: translate(-50%, -50%) rotate(41deg);
}

.scene-night .star:nth-child(4) {
  top: 55%;
  left: 28%;
  width: 5px;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.scene-night .star:nth-child(5) {
  top: 28%;
  left: 35%;
  width: 4px;
  transform: translate(-50%, -50%) rotate(63deg);
}

.scene-night .star:nth-child(6) {
  top: 62%;
  left: 44%;
  width: 5px;
  transform: translate(-50%, -50%) rotate(9deg);
}

.scene-night .star:nth-child(7) {
  top: 22%;
  left: 52%;
  width: 6px;
  transform: translate(-50%, -50%) rotate(-35deg);
}

.scene-night .star:nth-child(8) {
  top: 48%;
  left: 60%;
  width: 4px;
  transform: translate(-50%, -50%) rotate(28deg);
}

.scene-night .star:nth-child(9) {
  top: 33%;
  left: 68%;
  width: 5px;
  transform: translate(-50%, -50%) rotate(-52deg);
}

.scene-night .star:nth-child(10) {
  top: 60%;
  left: 76%;
  width: 4px;
  transform: translate(-50%, -50%) rotate(15deg);
}

.scene-night .star:nth-child(11) {
  top: 18%;
  left: 84%;
  width: 6px;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.scene-night .star:nth-child(12) {
  top: 44%;
  left: 92%;
  width: 5px;
  transform: translate(-50%, -50%) rotate(47deg);
}


/* letters hidden on hover, revealed one-by-one (via JS .lit) behind the sleigh */

.btn-sleigh .sleigh {
  position: absolute;
  left: -15%;
  bottom: 4px;
  z-index: 4;
  width: 3.4rem;
  height: auto;
  opacity: 0;
  transform: translate(-50%, 0);
  pointer-events: none;
}


/* fly fully across (0-50%, ~2s), then hold off-frame (50-100%, ~2s) before looping */
@keyframes sleigh-fly {
  0% {
    left: -15%;
    transform: translate(-50%, 0) rotate(-14deg);
  }

  6% {
    left: 1%;
    transform: translate(-50%, -6px) rotate(-11deg);
  }

  13% {
    left: 17%;
    transform: translate(-50%, -10px) rotate(-8deg);
  }

  19% {
    left: 34%;
    transform: translate(-50%, -12px) rotate(-4deg);
  }

  25% {
    left: 50%;
    transform: translate(-50%, -13px) rotate(0deg);
  }

  31% {
    left: 66%;
    transform: translate(-50%, -12px) rotate(4deg);
  }

  37% {
    left: 82%;
    transform: translate(-50%, -10px) rotate(8deg);
  }

  43% {
    left: 99%;
    transform: translate(-50%, -6px) rotate(11deg);
  }

  50% {
    left: 115%;
    transform: translate(-50%, 0) rotate(14deg);
  }

  100% {
    left: 115%;
    transform: translate(-50%, 0) rotate(14deg);
  }
}

/* --- Book Now: solid blue sky, falling snow, snowman pops up --- */
.btn-snow .scene-snow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  background: #91adc8;
  /*#cfe8ff*/
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}


.scene-snow .snow-flake {
  position: absolute;
  top: -20%;
  width: 0.62rem;
  height: auto;
  animation-duration: 2.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* apply the animation only on hover so it restarts from the top each time */

.scene-snow .snow-flake:nth-child(1) {
  left: 12%;
  animation-duration: 2.2s;
  animation-delay: 0s;
}

.scene-snow .snow-flake:nth-child(2) {
  left: 30%;
  animation-duration: 2.9s;
  animation-delay: 0.5s;
  width: 0.48rem;
}

.scene-snow .snow-flake:nth-child(3) {
  left: 48%;
  animation-duration: 2s;
  animation-delay: 0.9s;
}

.scene-snow .snow-flake:nth-child(4) {
  left: 66%;
  animation-duration: 3.1s;
  animation-delay: 0.3s;
  width: 0.54rem;
}

.scene-snow .snow-flake:nth-child(5) {
  left: 82%;
  animation-duration: 2.5s;
  animation-delay: 1.1s;
}

.scene-snow .snow-flake:nth-child(6) {
  left: 92%;
  animation-duration: 2.7s;
  animation-delay: 0.7s;
  width: 0.46rem;
}

/* fall through the full height of the button (top: percentage of button) */
@keyframes snow-fall {
  0% {
    top: -20%;
    transform: rotate(0deg);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  88% {
    opacity: 0.9;
  }

  100% {
    top: 112%;
    transform: rotate(200deg);
    opacity: 0;
  }
}

/* snowman rises up from below on hover, Dracula-style */
.scene-snow .snow-man {
  position: absolute;
  left: 50%;
  bottom: -140%;
  z-index: 2;
  width: 2.5rem;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(40, 80, 120, 0.2));
  transform: translateX(-50%);
  transition: bottom 0.45s ease;
  pointer-events: none;
}


/* button-scene hover effects — hover-capable devices only (touch uses .anim-play) */
@media (hover: hover) {
  .btn-scene:hover {
    transform: none;
    opacity: 1;
  }

  .btn-sleigh:hover .scene-night {
    opacity: 1;
  }

  .btn-sleigh:hover .btn-label .ltr {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .btn-sleigh:hover .btn-label .ltr.lit {
    opacity: 1;
  }

  .btn-sleigh:hover .sleigh {
    opacity: 1;
    animation: sleigh-fly 4s linear infinite;
  }

  .btn-snow:hover .scene-snow {
    opacity: 1;
  }

  .btn-snow:hover .btn-label {
    transform: scale(1.25);
    color: #91adc82a;
  }

  .btn-snow:hover .scene-snow .snow-flake {
    animation-name: snow-fall;
  }

  .btn-snow:hover .snow-man {
    bottom: 2px;
  }
}

/* Reduce Motion: no endless loops while a mouse rests on the button. A tap (the
   .anim-play scene) still plays once: it is short, small and asked for. */
@media (prefers-reduced-motion: reduce) and (hover: hover) {

  .btn-sleigh:hover .sleigh,
  .btn-snow:hover .scene-snow .snow-flake {
    animation: none;
  }
}

/* mobile tap-to-play: .anim-play (added by JS on touch) mirrors the hover scenes */
.btn-scene.anim-play {
  transform: none;
  opacity: 1;
}

.btn-sleigh.anim-play .scene-night {
  opacity: 1;
}

.btn-sleigh.anim-play .sleigh {
  opacity: 1;
  animation: sleigh-fly 2.6s linear 1 both;
}

.btn-sleigh.anim-play .btn-label .ltr {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn-sleigh.anim-play .btn-label .ltr.lit {
  opacity: 1;
}

.btn-snow.anim-play .scene-snow {
  opacity: 1;
}

.btn-snow.anim-play .btn-label {
  transform: scale(1.25);
  color: #ffffff2a;
}

.btn-snow.anim-play .scene-snow .snow-flake {
  animation-name: snow-fall;
}

.btn-snow.anim-play .snow-man {
  bottom: 2px;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.25s ease, scale var(--press-out);
}

.hamburger.open {
  background: rgba(242, 236, 228, 0.08);
}

.hamburger-bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.5s var(--ease-spring), opacity 0.2s ease;
}


.hamburger-bar+.hamburger-bar {
  margin-top: 5px;
}

.hamburger.open .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  /* svh = screen height with the browser bars showing, so the hero doesn't jump on iPhone */
  height: 100svh;
  width: 100%;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.8);
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Slide photos; phones get the portrait crops below. Slide 1 is the LCP image and
   always loads; the rest only once the carousel marks them .is-loaded (main.js) */
.hero-slide:nth-child(1) {
  background-image: url('../images/hero-1.jpeg');
}

.hero-slide.is-loaded:nth-child(2) {
  background-image: url('../images/hero-2.jpg');
}

.hero-slide.is-loaded:nth-child(3) {
  background-image: url('../images/hero-3.jpeg');
}

.hero-slide.is-loaded:nth-child(4) {
  background-image: url('../images/hero-4.jpeg');
}

.hero-slide.is-loaded:nth-child(5) {
  background-image: url('../images/hero-5.jpeg');
}

.hero-slide.is-loaded:nth-child(6) {
  background-image: url('../images/hero-6.jpg');
}

.hero-slide.is-loaded:nth-child(7) {
  background-image: url('../images/hero-7.jpg');
}

.hero-slide.is-loaded:nth-child(8) {
  background-image: url('../images/hero-8.jpg');
}

.hero-slide.is-loaded:nth-child(9) {
  background-image: url('../images/hero-9.jpeg');
}

.hero-slide.is-loaded:nth-child(10) {
  background-image: url('../images/hero-10.jpeg');
}

.hero-slide.is-loaded:nth-child(11) {
  background-image: url('../images/hero-11.jpg');
}

@media (max-width: 767px) {
  .hero-slide:nth-child(1) {
    background-image: url('../images/hero-1-mobile.jpg');
  }

  .hero-slide.is-loaded:nth-child(2) {
    background-image: url('../images/hero-2-mobile.jpg');
  }

  .hero-slide.is-loaded:nth-child(4) {
    background-image: url('../images/hero-4-mobile.jpg');
  }

  .hero-slide.is-loaded:nth-child(6) {
    background-image: url('../images/hero-6-mobile.jpg');
  }

  .hero-slide.is-loaded:nth-child(7) {
    background-image: url('../images/hero-7-mobile.jpg');
  }

  .hero-slide.is-loaded:nth-child(8) {
    background-image: url('../images/hero-8-mobile.jpg');
  }

  .hero-slide.is-loaded:nth-child(10) {
    background-image: url('../images/hero-10-mobile.jpg');
  }
}


.hero-slide.active {
  opacity: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.14) 42%, rgba(0, 0, 0, 0.48));
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 0 var(--space-sm);
  z-index: 2;

}

.hero-content h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.hero-content p {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  max-width: 600px;
  margin-bottom: var(--space-md);
}

.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
}

/* ---------- Trip info (icon chips) ---------- */
.info-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: start;
  gap: var(--space-md) var(--space-lg);
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .info-chips {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

.chip-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.chip-burst {
  position: absolute;
  color: var(--color-secondary);
  font-size: 1.15rem;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* a <button> (decorative: hidden from screen readers and the Tab order) whose
   click sets off the icon shower */
.info-chip .icon {
  display: inline-flex;
  padding: 0;
  border: none;
  font-family: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: rgba(219, 182, 88, 0.16);
  color: var(--color-secondary);
  font-size: 1.25rem;
  line-height: 1;
  flex: 0 0 auto;
  transition: background 0.2s ease, scale var(--press-out);
}

/* Hidden SVG that holds the reusable Christmas icons */
.icon-sprite {
  position: absolute;
}

.st0 {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

/* UI icons from the sprite (Font Awesome shapes): sized like the old icon font,
   1em tall with each icon's own width, coloured by the text colour */
.fa-ico {
  display: inline-block;
  height: 1em;
  width: auto;
  fill: currentColor;
  vertical-align: -0.125em;
  overflow: visible;
}

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.info-chip:hover .icon {
  background: rgba(219, 182, 88, 0.3);
}

.chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: left;
}

.info-chip .chip-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.info-chip .chip-value {
  font-size: 1.05rem;
  color: var(--color-text);
}

/* ---------- Packages (full-width connected-tab box) ---------- */
.packages {
  background: var(--color-bg-alt);
}

.package-box {
  width: 100%;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.package-tabs {
  display: flex;
  background: var(--color-bg-alt);
}

.package-tab {
  flex: 1 1 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.5rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-muted);
  padding: 1.1rem 1rem;
  position: relative;

  border-top: 3px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: none;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.package-tab:hover {
  color: var(--color-text);
}

/* the label (not the tab) takes the press, so the tab's corner joins stay put */
.tab-label {
  display: inline-block;
  transition: scale var(--press-out);
}

.package-tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.package-tab.active[data-package="bundle"] {
  color: var(--color-secondary);
}

.package-tab.active::before,
.package-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--radius);
  height: var(--radius);
  pointer-events: none;
}

.package-tab.active::before {
  left: calc(-1 * var(--radius));
  background: radial-gradient(circle at top left, transparent var(--radius), var(--color-surface) var(--radius));
}

.package-tab.active::after {
  right: calc(-1 * var(--radius));
  background: radial-gradient(circle at top right, transparent var(--radius), var(--color-surface) var(--radius));
}

.package-body {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  transition: border-radius 0.25s ease;
}

/* the selected package's colour, used by the outline, ticket and list flakes at every size */
.package-box.show-base {
  --pkg-accent: var(--color-primary);
}

.package-box.show-bundle {
  --pkg-accent: var(--color-secondary);
}

.package-box.show-base .package-body {
  border-top-right-radius: var(--radius);
}

.package-box.show-bundle .package-body {
  border-top-left-radius: var(--radius);
}

/* PC: sides + bottom outline with rounded bottom corners, fading up into the tab */
@media (min-width: 1025px) {
  .package-body {
    position: relative;
  }

  .package-body::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--pkg-accent, transparent);
    border-top: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    pointer-events: none;
    -webkit-mask: linear-gradient(to bottom, transparent 4%, #000 52%);
    mask: linear-gradient(to bottom, transparent 4%, #000 52%);
  }
}

.package-info h3 {
  font-size: 1.8rem;
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

#pkgDesc {
  margin-bottom: var(--space-sm);
}


/* Heading turns red on the Essential package only */
.package-box.show-base .package-info h3 {
  color: var(--color-primary);
}

/* "What's included": a drawn snowflake per line in the package colour, text always
   left-aligned so the marker stays next to its line */
.package-features {
  list-style: none;
  display: grid;
  gap: 0.15rem 2.5rem;
  text-align: left;
}

.package-features li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  column-gap: 0.7rem;
  align-items: start;
  padding: 0.5rem 0;
  line-height: 1.4;
  animation: feat-in 0.4s var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.feat-flake {
  width: 1.3rem;
  height: 1.3rem;
  /* sits on the first line of text, whatever the line height */
  margin-top: calc((1lh - 1.3rem) / 2);
  color: var(--pkg-accent, var(--color-secondary));
  rotate: 12deg;
  transition: rotate 0.6s var(--ease-spring);
}

.package-features li:nth-child(even) .feat-flake {
  rotate: -12deg;
}

/* Complete's "everything in Essential" line carries Essential's red */
.package-features li.feat-inherit .feat-flake {
  color: var(--color-primary);
}

@media (hover: hover) {
  .package-features li:hover .feat-flake {
    rotate: 72deg;
  }

  .package-features li:nth-child(even):hover .feat-flake {
    rotate: -48deg;
  }
}

@keyframes feat-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

@media (min-width: 1025px) {
  .package-features {
    grid-template-columns: 1fr 1fr;
  }
}

.package-cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

/* ---------- Gallery ---------- */
.gallery {
  background: var(--color-surface);
}

/* ---------- Guide ---------- */
.guide-card {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

/* Which part of the (portrait) photo shows in the circle. --photo-y: 0% = the top
   of the photo, 50% = the middle, 100% = the bottom. A lower number shows more of
   the top, so the person sits LOWER in the circle; a higher number moves them up. */
.guide-photo {
  --photo-y: 18%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  object-fit: cover;
  object-position: 50% var(--photo-y);
  margin: 0 auto var(--space-sm);
}

.guide-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.guide-role {
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.guide-bio {
  color: var(--color-muted);
  max-width: 460px;
  margin: 0 auto;
}

.guide-bio p {
  margin-bottom: var(--space-sm);
}

.guide-bio p:last-child {
  margin-bottom: 0;
}

.guide-bio strong {
  color: var(--color-text);
  font-weight: 700;
}

.guide-signoff {
  margin-top: var(--space-md);
  text-align: center;
}

.guide-heart-svg {
  display: block;
  width: var(--heart-size, 34px);
  height: auto;
  margin: 0 auto var(--space-sm);
  fill: var(--color-primary);
  stroke: var(--color-primary);
  stroke-width: var(--heart-weight, 0);
  stroke-linejoin: round;
}

.guide-withlove {
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.guide-signature {
  display: block;
  margin: 0 auto var(--space-xs);
  width: var(--sign-width, 230px);
  height: auto;
  fill: var(--color-primary);
  stroke: var(--color-primary);
  stroke-width: var(--sign-weight, 3);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.guide-signrole {
  color: var(--color-accent);
  font-weight: 600;
}

.footer-silhouette {
  line-height: 0;
  margin-bottom: -15px;

  margin-top: -70px;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.footer-silhouette-crest {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--color-primary);
}

.guide-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.guide-stars img {
  position: absolute;
  display: block;
  opacity: 0.85;
}

.guide-stars img:nth-child(1) {
  top: 11%;
  left: 6%;
  width: 30px;
}

.guide-stars img:nth-child(2) {
  top: 7%;
  right: 8%;
  width: 20px;
}

.guide-stars img:nth-child(3) {
  top: 39%;
  left: 4%;
  width: 24px;
}

.guide-stars img:nth-child(4) {
  top: 57%;
  right: 5%;
  width: 34px;
}

.guide-stars img:nth-child(5) {
  top: 80%;
  left: 8%;
  width: 22px;
}

.guide-stars img:nth-child(6) {
  top: 73%;
  right: 9%;
  width: 28px;
}


/* ---------- Footer ---------- */
.footer {
  background: var(--color-primary);
  color: var(--color-bg);
  padding: var(--space-lg) 0 0;
  padding-top: 35px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.footer-info {
  margin-top: var(--space-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}

.footer-info p {
  margin: 0.2rem 0;
}

.footer h4,
.footer .logo {
  font-size: 2.2rem;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.footer .logo {
  font-size: 2rem;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  margin-bottom: 0.2rem;
}

/* Contact links — colourful icon + hover underline animation, like the navbar */
.footer .contact-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 3px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
}

.footer .contact-link .fa-ico {
  font-size: 1.3em;
}

.footer .contact-link--mail .fa-ico {
  color: var(--color-secondary);
}

.footer .contact-link--wa .fa-ico {
  color: #25D366;
}

.footer .contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.footer .contact-link:hover::after {
  transform: scaleX(1);
}

.footer .contact-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.footer-bottom {
  margin-top: var(--space-lg);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-accent);
  font-size: 1.2rem;
  color: var(--color-accent);
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

/* equal side columns keep the logo dead-centre (desktop/tablet) */
@media (min-width: 768px) {
  .footer-bottom .container>:first-child {
    flex: 1 1 0;
  }

  .footer-bottom .footer-legal {
    flex: 1 1 0;
    justify-content: flex-end;
  }
}

.footer-logo {
  height: 48px;
  width: auto;
  border-radius: 8px;
  display: block;
}

.footer-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

@media (max-width: 767px) {
  .footer-bottom .container {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Tablet ---------- */
/* ---------- Tablets, landscape phones, and phones ---------- */
@media (max-width: 1024px) {
  .package-body {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .package-cta-col {
    align-items: center;
  }

  /* ===== Collapsed navbar: logo + language + burger only =====
     The menu is the navbar dropping down: full width, same surface, unrolled from
     the bar's bottom edge, with a snowdrift along its foot.
     Link styling and the snow: "Mobile menu" at the end. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 4px 10px 0;
    background: var(--color-surface);
    border-top: 1px solid rgba(242, 236, 228, 0.06);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.25s ease, visibility 0s 0.25s;
  }

  .nav-links.open {
    visibility: visible;
    /* the bottom inset leaves room for the shadow */
    clip-path: inset(0 0 -60px 0);
    transition: clip-path 0.5s var(--ease-out-expo), visibility 0s;
  }

  .nav-links li {
    position: relative;
    width: 100%;
    text-align: center;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    order: 3;
  }

  /* not positioned, so the snowfall inside it spans the whole menu */
  .nav-links .nav-cta {
    position: static;
    display: block;
    padding-top: 0.9rem;
  }

  .nav-cta a {
    display: block;
    width: 100%;
    line-height: inherit;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    font-size: var(--font-size-secondary);
    text-align: center;
  }

  .nav-right .btn-book {
    display: none;
  }

  .logo {
    font-size: 1.15rem;
  }

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hero-content h1 {
    font-size: clamp(2.8rem, 10vw, 3.6rem);
  }

  .hero-content p {
    font-size: 1.25rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }

  .section {
    padding: var(--space-lg) 0;
  }

  /* ===== Packages on phones: a segmented toggle, then two sibling cards
     (package info, ticket) instead of boxes nested inside each other ===== */
  .package-box {
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .package-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    margin: 0 auto var(--space-sm);
    max-width: 22rem;
    background: var(--color-surface);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(242, 236, 228, 0.08);
  }

  /* the sliding thumb under the selected option */
  .package-tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--pkg-accent);
    transition: translate 0.45s var(--ease-spring), background 0.3s ease;
  }

  .package-box.show-bundle .package-tabs::before {
    translate: 100% 0;
  }

  .package-tab {
    z-index: 1;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 999px;
    font-size: 1.3rem;
    background: transparent;
  }

  .package-tab.active {
    background: transparent;
  }

  .package-tab.active::before,
  .package-tab.active::after {
    content: none;
  }

  .package-box.show-base .package-tab.active {
    color: #fff;
  }

  .package-box.show-bundle .package-tab.active {
    color: var(--color-dark);
  }

  .package-body {
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .package-info {
    padding: var(--space-md) 1.1rem 1.4rem;
    background: var(--color-surface);
    border: 1.5px solid var(--pkg-accent);
    border-radius: 16px;
    transition: border-color 0.3s ease;
  }

  #pkgDesc {
    text-align: left;
  }

  .footer-silhouette {
    margin-bottom: -5px;
    margin-top: -15px;
  }
}

/* ====== Get more info: gradient reveal between Trip & Packages ====== */
.trip-more {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.trip-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 2.2rem 1rem;
  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  outline: none;
}

/* solid red pill, like .btn-primary, so it reads as a button */
.trip-more-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem 0.7rem 1.7rem;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-secondary);
  font-weight: 600;
  box-shadow: 0 8px 22px -8px rgba(214, 48, 59, 0.7);
  transition:
    transform 0.4s var(--ease-spring),
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
  animation: trip-more-pulse 2.2s ease-in-out infinite;
}

/* Hover: lift on a spring, arrow nudges toward the content below */
@media (hover: hover) {
  .trip-more-toggle:hover .trip-more-cta {
    transform: translateY(-2px);
    background: #e23f4a;
  }

  .trip-more-toggle:hover .trip-more-arrow {
    transform: translateY(3px);
  }
}

.trip-more-toggle:active .trip-more-cta {
  transform: scale(0.96);
  transition: transform 0.08s ease-out;
}

.trip-more-toggle:focus-visible .trip-more-cta {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* open: quieter outline "collapse" state, stops drawing attention */
.trip-more.open .trip-more-cta {
  animation: none;
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
}

@keyframes trip-more-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(214, 48, 59, 0);
  }

  50% {
    box-shadow: 0 0 20px 2px rgba(214, 48, 59, 0.45);
  }
}

.trip-more-arrow {
  color: inherit;
  font-size: 0.9em;
  transition: transform 0.4s var(--ease-spring);
}

.trip-more.open .trip-more-arrow {
  color: var(--color-primary);
  transform: rotate(180deg);
}

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

/* The panel sits above the button in the HTML. It grows to its real height by
   animating a single grid row from 0fr to 1fr (no max-height guess): opening
   eases out (starts at once, settles gently), closing eases in and out. The
   script keeps the button still on screen while it closes. */
.trip-more-panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--color-bg);
  /* durations grow with the content's height (set by the script), so a tall
     timeline on a phone doesn't race past */
  transition: grid-template-rows var(--reveal-close, 0.6s) cubic-bezier(0.65, 0, 0.35, 1);
}

.trip-more.open .trip-more-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--reveal-open, 0.85s) cubic-bezier(0.33, 1, 0.68, 1);
}

.trip-more-inner {
  min-height: 0;
  overflow: hidden;
}

.trip-more-content {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-sm) var(--space-xl);
}

/* The content arrives instead of just being uncovered: the title and each stop
   fade up into place one after another (--i is set by the script). On close it
   all fades out quickly together, so the fold happens on quiet content. */
.trip-more-title,
.trip-more .timeline > li {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.18s ease, translate 0.18s ease;
}

.trip-more.open .trip-more-title,
.trip-more.open .timeline > li {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(120ms + var(--i, 0) * 45ms);
}

.trip-more-title {
  text-align: center;
  color: var(--color-primary);
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}

.timeline {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
}

.timeline li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tl-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tl-detail {
  color: var(--color-muted);
  font-size: 0.9em;
  line-height: 1.5;
}

.tl-detail:empty {
  display: none;
}

.timeline li:last-child {
  border-bottom: none;
}

.timeline .time {
  flex: 0 0 auto;
  min-width: 62px;
  font-family: var(--font-default);
  font-weight: 700;
  /* every digit the same width, so the times line up */
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.timeline .tl-info {
  color: var(--color-accent);
}

/* ====== FAQ accordion ====== */
.faq {
  background: var(--color-bg-alt);
}

.accordion {
  max-width: 760px;
  margin: 0 auto;
}

.acc-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 1.15rem 0.2rem;
  font-family: var(--font-body);
  font-size: var(--font-size-secondary);
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.5s ease;
}

.acc-arrow {
  flex: 0 0 auto;
  color: var(--color-primary);
  transition: transform 0.45s var(--ease-spring);
}

.acc-item.open .acc-arrow {
  transform: rotate(180deg);
}

/* 0fr -> 1fr (same technique as .trip-more-panel): opens to the answer's real
   height, however long it is or however large the text is zoomed. Closed answers
   are visibility: hidden so screen readers skip them; the visibility switch waits
   for the collapse to finish so the text doesn't vanish mid-animation. */
.acc-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s 0.35s;
}

.acc-item.open .acc-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s ease, visibility 0s;
}

/* no vertical padding here: padding can't shrink, so it would keep a closed answer
   1.15rem tall. The bottom space is a pseudo-element instead, clipped with the text. */
.acc-a-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 0.2rem;
  color: var(--color-muted);
}

.acc-a-inner::after {
  content: "";
  display: block;
  height: 1.15rem;
}

/* a link at the end of an answer (e.g. to the cancellation terms) */
.acc-link {
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.acc-link::after {
  content: " \2192";
}

.acc-link:hover {
  text-decoration-thickness: 2px;
}

.acc-link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ====== Gallery: a pile of postcards that deals out into the popup ======
   Paper and ink colours for every postcard (the stack, the fronts and the backs) */
#gallery {
  --paper: var(--color-text);
  --ink: #2a2124;
}

.gallery-stack {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: scale var(--press-out);
}

/* loose photos, each at its own tilt; no frame, just a hairline of light on the
   edge so they separate from each other; hover fans them out on a spring */
.stack-img {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 86%;
  height: 86%;
  object-fit: cover;
  border-radius: 10px;
  outline: 1px solid rgba(242, 236, 228, 0.22);
  outline-offset: -1px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: translate 0.55s var(--ease-spring), rotate 0.55s var(--ease-spring);
}

.stack-1 {
  z-index: 3;
  rotate: -3deg;
}

.stack-2 {
  z-index: 2;
  rotate: 4deg;
  translate: 3% 2%;
}

.stack-3 {
  z-index: 1;
  rotate: 9deg;
  translate: 6% 5%;
}

@media (hover: hover) {
  .gallery-stack:hover .stack-1 {
    rotate: -6deg;
    translate: -4% -3%;
  }

  .gallery-stack:hover .stack-2 {
    rotate: 6deg;
    translate: 5% 1%;
  }

  .gallery-stack:hover .stack-3 {
    rotate: 14deg;
    translate: 11% 6%;
  }
}

.stack-hint {
  position: absolute;
  z-index: 4;
  top: 46%;
  left: 49%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  background: rgba(19, 19, 22, 0.72);
  color: #fff;
  font-weight: 600;
  border-radius: 5rem;
  white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--color-secondary);
  pointer-events: none;
}

.stack-hint .fa-ico {
  color: var(--color-secondary);
  font-size: 1.05em;
}

/* ====== Gallery: the popup ====== */
#gallery>.container {
  z-index: auto;
}

.gallery-modal {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  /* solid, so the page underneath never shows through the postcards */
  background: var(--color-bg-alt);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* visible at once when opening (so focus can move straight into the popup);
   closing still waits for the fade before hiding */
.gallery-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.gallery-modal-inner {
  width: 100%;
  max-width: 960px;
  max-height: 100%;
  /* room for the tilted cards and their shadows */
  padding: 1rem 1.25rem 1.5rem;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-modal-inner::-webkit-scrollbar {
  display: none;
}

.gallery-close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 4001;
  width: 58px;
  height: 58px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 1.75rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.5s ease, scale var(--press-out);
}

.gallery-close:hover {
  color: var(--color-primary);
  transform: rotate(90deg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.75rem;
}

/* ====== Postcards: photo on the front, the words on the back ======
   --tilt is set per card by the script; the deal-out animation runs on
   `transform` (script), the flip on .postcard-inner, the lift on translate/rotate */
.postcard {
  position: relative;
  rotate: var(--tilt, 0deg);
  perspective: 1400px;
  transition: rotate 0.45s var(--ease-spring), translate 0.45s var(--ease-spring);
}

.postcard-inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s var(--ease-spring);
}

.postcard.flipped {
  z-index: 3;
  rotate: 0deg;
}

.postcard.flipped .postcard-inner {
  transform: rotateY(180deg);
}

.postcard-front,
.postcard-back {
  border-radius: 6px;
  background-color: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.postcard-front {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 8px 0;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.postcard-photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
}

.postcard-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: scale 0.6s var(--ease-out-expo);
}

.postcard-title {
  display: block;
  padding: 0.55rem 2rem 0.65rem 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.15;
  color: var(--ink);
}

/* little "turn me over" mark in the corner of the caption */
.postcard-turn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.4;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.2s ease, rotate 0.5s var(--ease-spring);
}

@media (hover: hover) {
  .postcard:not(.flipped):hover {
    z-index: 2;
    rotate: 0deg;
    translate: 0 -6px;
  }

  .postcard:hover .postcard-photo img {
    scale: 1.05;
  }

  .postcard:hover .postcard-turn {
    opacity: 0.85;
    rotate: 180deg;
  }
}

.postcard-front:focus-visible,
.postcard-back button:focus-visible,
.postcard-link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* the back: lined writing paper, title in red, handwriting in ink */
.postcard-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem 0.85rem;
  transform: rotateY(180deg);
  overflow: hidden;
  background-image: repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(1.6rem - 1px),
      rgba(42, 33, 36, 0.11) calc(1.6rem - 1px),
      rgba(42, 33, 36, 0.11) 1.6rem);
  background-position: 0 2.55rem;
}

.postcard-back-title {
  padding-right: 2.2rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--color-primary);
}

.postcard-desc {
  flex: 1 1 auto;
  margin: 0;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.6rem;
  color: var(--ink);
}

.postcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-default);
}

/* a rubber-stamp style postmark */
.postcard-mark {
  padding: 0.2rem 0.6rem;
  border: 1.5px dashed rgba(42, 33, 36, 0.45);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(42, 33, 36, 0.75);
  rotate: -4deg;
}

.postcard-mark.is-included {
  border-color: #a8862f;
  color: #8a6a1c;
}

.postcard-link {
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.postcard-link::after {
  content: " \2197";
}

.postcard-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.postcard-flipback {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(42, 33, 36, 0.08);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, scale var(--press-out);
}

.postcard-flipback:hover {
  background: rgba(42, 33, 36, 0.16);
}

.postcard-flipback:active {
  scale: var(--press-scale);
  transition: scale var(--press-in);
}

/* gold postage stamp on the three Complete activities: the perforated edge is
   a dotted background showing round "holes", the gold inner sits on top */
.postcard-stamp {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: block;
  padding: 3px;
  background: radial-gradient(circle, transparent 2px, var(--color-secondary) 2.5px) -3px -3px / 6px 6px;
  rotate: 7deg;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  /* the stamp gets its own render layer (filter + rotate), so the front face's
     backface-visibility doesn't reach it: hide it explicitly, and switch it
     off once the card has turned edge-on (both directions) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: visibility 0s 0.15s;
}

.postcard.flipped .postcard-stamp {
  visibility: hidden;
}

.postcard-stamp-ico {
  display: block;
  width: 36px;
  height: 42px;
  padding: 8px 6px;
  background: var(--color-secondary);
  border: 1px solid rgba(42, 33, 36, 0.3);
  color: var(--ink);
}

.postcard-stamp--mini {
  position: static;
  display: inline-block;
  rotate: -6deg;
  filter: none;
}

.postcard-stamp--mini .postcard-stamp-ico {
  width: 22px;
  height: 26px;
  padding: 4px 3px;
}

/* legend under the cards, with a shortcut to the packages */
.gallery-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-top: 2rem;
  font-family: var(--font-default);
  font-size: 0.92rem;
  color: var(--color-muted);
}

.gallery-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.gallery-to-packages {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--color-secondary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-secondary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, scale var(--press-out);
}

.gallery-to-packages:hover,
.gallery-to-packages:focus-visible {
  background: var(--color-secondary);
  color: var(--color-dark);
}

.gallery-to-packages:active {
  scale: var(--press-scale);
  transition: scale var(--press-in);
}

@media (max-width: 1024px) {
  .gallery-modal {
    top: 0;
    z-index: 1100;
    padding-top: 76px;
  }

  .gallery-grid {
    gap: 1.4rem 1.1rem;
  }

  .postcard-title {
    font-size: 0.98rem;
  }
}

/* Phones: two small postcards per row so most of them are visible at once;
   a turned-over card takes the full width so its handwriting is readable */
@media (max-width: 767px) {
  .gallery-modal {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .gallery-modal-inner {
    padding: 0.75rem 0.6rem 1.25rem;
  }

  .gallery-close {
    top: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
  }

  /* dense: when a turned card takes a full row, the next card fills the gap it leaves */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 0.9rem 0.75rem;
  }

  .postcard-front {
    padding: 5px 5px 0;
  }

  .postcard-photo {
    aspect-ratio: 5 / 4;
  }

  .postcard-title {
    padding: 0.4rem 1.4rem 0.5rem 0.15rem;
    font-size: 0.86rem;
  }

  .postcard-turn {
    right: 8px;
    bottom: 8px;
    font-size: 0.72rem;
  }

  .postcard-stamp {
    top: 9px;
    right: 9px;
  }

  .postcard-stamp-ico {
    width: 26px;
    height: 30px;
    padding: 5px 4px;
  }

  .postcard.flipped {
    grid-column: 1 / -1;
  }

  /* the hidden front sets the card's size: a flatter photo keeps the turned card compact */
  .postcard.flipped .postcard-photo {
    aspect-ratio: 2 / 1;
  }

  .gallery-legend {
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
  }
}

/* ===== Packages decorative icons (desktop only) ===== */
.pkg-icon {
  display: none;
}

.pkg-icon-svg {
  display: block;
  width: 22px;
  height: 22px;
}

.package-tab[data-package="base"] .pkg-icon:nth-child(1) {
  --rot: -14deg;
  --delay: 0s;
}

.package-tab[data-package="base"] .pkg-icon:nth-child(2) {
  --rot: 8deg;
  --delay: .5s;
}

.package-tab[data-package="base"] .pkg-icon:nth-child(3) {
  --rot: -5deg;
  --delay: 1s;
}

.package-tab[data-package="base"] .pkg-icon:nth-child(5) {
  --rot: 12deg;
  --delay: .3s;
}

.package-tab[data-package="base"] .pkg-icon:nth-child(6) {
  --rot: -9deg;
  --delay: .8s;
}

.package-tab[data-package="base"] .pkg-icon:nth-child(7) {
  --rot: 6deg;
  --delay: 1.3s;
}

.package-tab[data-package="bundle"] .pkg-icon:nth-child(1) {
  --rot: 10deg;
  --delay: .2s;
}

.package-tab[data-package="bundle"] .pkg-icon:nth-child(2) {
  --rot: -8deg;
  --delay: .7s;
}

.package-tab[data-package="bundle"] .pkg-icon:nth-child(3) {
  --rot: 5deg;
  --delay: 1.1s;
}

.package-tab[data-package="bundle"] .pkg-icon:nth-child(5) {
  --rot: -12deg;
  --delay: .4s;
}

.package-tab[data-package="bundle"] .pkg-icon:nth-child(6) {
  --rot: 9deg;
  --delay: .9s;
}

.package-tab[data-package="bundle"] .pkg-icon:nth-child(7) {
  --rot: -6deg;
  --delay: 1.4s;
}


.package-scatter {
  display: none;
}

@keyframes pkg-wiggle {
  0% {
    transform: rotate(0deg);
  }

  28% {
    transform: rotate(-14deg);
  }

  64% {
    transform: rotate(14deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@media (min-width: 1025px) {

  .package-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
  }

  .pkg-icon {
    display: inline-block;
    flex: 0 0 auto;
    transform: rotate(var(--rot, 0deg));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .package-tab.active .pkg-icon {
    opacity: 1;
  }

  .package-tab[data-package="base"] .pkg-icon {
    color: var(--color-primary);
  }

  .package-tab[data-package="bundle"] .pkg-icon {
    color: var(--color-secondary);
  }

  .package-tab.active .pkg-icon .pkg-icon-svg {
    animation: pkg-wiggle 0.6s ease;
    animation-delay: var(--delay, 0s);
  }

  .package-scatter {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    color: var(--color-secondary);
  }

  #packages.pkg-bundle .package-scatter {
    opacity: 1;
  }

  .scatter-icon {
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  }

  .scatter-icon .pkg-icon-svg {
    width: 40px;
    height: 40px;
  }

  #packages.pkg-bundle .scatter-icon {
    animation: scatter-in 0.5s ease both;
    animation-delay: var(--delay, 0s);
  }

  /* rebuilt after a resize: just be there, no second entrance */
  #packages.pkg-bundle .package-scatter.no-intro .scatter-icon {
    animation: none;
    opacity: 1;
  }

  /* hover: the script sets --nx/--ny/--nr on icons near the cursor; the inner svg
     moves so it never fights the entrance animation on the outer span */
  .scatter-icon .pkg-icon-svg {
    display: block;
    transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(var(--nr, 0deg));
    transition: transform 0.45s var(--ease-spring);
  }

  @keyframes scatter-in {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(26px) scale(0.45);
    }

    60% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(0) scale(1);
    }
  }
}

/* ===== Decorative icons: gallery gutters + FAQ click-burst ===== */
.gallery-deco {
  display: none;
}

.deco-ico {
  display: block;
  width: 100%;
  height: 100%;
}

.faq-deco {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  color: var(--color-secondary);
}

.faq-burst {
  position: absolute;
  width: 19px;
  height: 19px;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (min-width: 1025px) {

  .gallery-deco {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    color: var(--color-secondary);
  }

  .gallery-deco .gdeco {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.6);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .gallery-deco .gdeco:nth-child(1) {
    top: 20%;
    left: 16%;
    --rot: -12deg;
  }

  .gallery-deco .gdeco:nth-child(2) {
    top: 44%;
    left: 21%;
    --rot: 9deg;
  }

  .gallery-deco .gdeco:nth-child(3) {
    top: 67%;
    left: 14%;
    --rot: -6deg;
  }

  .gallery-deco .gdeco:nth-child(4) {
    top: 87%;
    left: 21%;
    --rot: 14deg;
  }

  .gallery-deco .gdeco:nth-child(5) {
    top: 18%;
    left: 84%;
    --rot: 11deg;
  }

  .gallery-deco .gdeco:nth-child(6) {
    top: 43%;
    left: 79%;
    --rot: -9deg;
  }

  .gallery-deco .gdeco:nth-child(7) {
    top: 69%;
    left: 85%;
    --rot: 7deg;
  }

  .gallery-deco .gdeco:nth-child(8) {
    top: 88%;
    left: 79%;
    --rot: -13deg;
  }

  .gallery-deco .gdeco:nth-child(9) {
    top: 31%;
    left: 11%;
    --rot: 10deg;
  }

  .gallery-deco .gdeco:nth-child(10) {
    top: 56%;
    left: 19%;
    --rot: -8deg;
  }

  .gallery-deco .gdeco:nth-child(11) {
    top: 78%;
    left: 12%;
    --rot: 13deg;
  }

  .gallery-deco .gdeco:nth-child(12) {
    top: 32%;
    left: 89%;
    --rot: -11deg;
  }

  .gallery-deco .gdeco:nth-child(13) {
    top: 57%;
    left: 81%;
    --rot: 9deg;
  }

  .gallery-deco .gdeco:nth-child(14) {
    top: 79%;
    left: 88%;
    --rot: -6deg;
  }

  .gallery-deco .gdeco.on {
    opacity: 0.85;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }

  .gallery-deco.reveal .gdeco {
    opacity: 0.95;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }
}

/* ===== Footer legal links ===== */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
}

.footer-legal a {
  cursor: pointer;
  opacity: 0.9;
}

/* ===== Touch layout (<=1024px): drop hover-driven movement animations ===== */
@media (max-width: 1024px) {
  .btn:hover {
    transform: none;
  }

  .info-chip:hover {
    transform: none;
  }

  .nav-links a:hover::after {
    width: 0;
  }

  .gallery-close:hover {
    transform: none;
  }

  .guide-stars {
    display: none;
  }
}

/* Booking widget (Ticket Tailor) — a ticket stub in the selected package's colour.
   The dashed tear line is the header's bottom edge; the two "bites" are circles
   centred on the card's side edges, filled with whatever is behind the card
   (--notch-bg) and clipped to their inner half, so their ring meets the card border. */
.booking-widget {
  --notch: 14px;
  --notch-bg: var(--color-surface);
  --ticket-border: 1.5px;
  width: 100%;
  max-width: 640px;
  margin: var(--space-md) auto 0;
  /* on top of html's scroll-padding-top (navbar), a little breathing room */
  scroll-margin-top: 16px;
  background: var(--color-bg-alt);
  border: var(--ticket-border) solid var(--pkg-accent, var(--color-accent));
  border-radius: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* the ticket's stub, styled as a boarding pass: a soft wash of the package colour
   fading down to a dotted tear line, with the round notches at both ends
   (::before / ::after) */
.booking-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  padding: 1.2rem 1.6rem 1.3rem;
  border-radius: calc(16px - var(--ticket-border)) calc(16px - var(--ticket-border)) 0 0;
  /* plain fallback first: color-mix() needs iOS 16.2+ */
  border-bottom: 3px dotted var(--pkg-accent, var(--color-accent));
  border-bottom: 3px dotted color-mix(in srgb, var(--pkg-accent, var(--color-accent)) 65%, transparent);
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* "BOARDING PASS · SANTA PLANE" */
.pass-label {
  margin: 0;
  font-family: var(--font-default);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary);
  text-align: left;
}

/* BCN - - - ✈ - - - RVN */
.pass-route {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pass-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.pass-end--to {
  align-items: flex-end;
  text-align: right;
}

.pass-code {
  font-family: var(--font-default);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-text);
  white-space: nowrap;
}

.pass-city {
  margin-top: 0.3rem;
  font-family: var(--font-default);
  font-size: 0.8rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* the flight path: dashed line, plane, dashed line (the two halves are the
   ::before / ::after flex items, so nothing has to be painted over the wash) */
.pass-path {
  flex: 1 1 auto;
  min-width: 3rem;
  align-self: flex-start;
  height: 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pass-path::before,
.pass-path::after {
  content: "";
  flex: 1 1 0;
  border-top: 2px dashed var(--pkg-accent, var(--color-accent));
  border-top: 2px dashed color-mix(in srgb, var(--pkg-accent, var(--color-accent)) 70%, transparent);
  transition: border-color 0.3s ease;
}

.pass-plane {
  flex: none;
  font-size: 1.35rem;
  color: var(--pkg-accent, var(--color-accent));
  transition: color 0.3s ease;
}

.booking-head::before,
.booking-head::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--notch) - 1px);
  width: calc(2 * var(--notch));
  height: calc(2 * var(--notch));
  border-radius: 50%;
  background: var(--notch-bg);
  box-shadow: inset 0 0 0 var(--ticket-border) var(--pkg-accent, var(--color-accent));
  transition: box-shadow 0.3s ease;
}

.booking-head::before {
  left: calc(-1 * var(--notch) - var(--ticket-border));
  clip-path: inset(0 0 0 50%);
}

.booking-head::after {
  right: calc(-1 * var(--notch) - var(--ticket-border));
  clip-path: inset(0 50% 0 0);
}

/* date, package and seats of the chosen flight */
.pass-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0.35rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(242, 236, 228, 0.08);
}

.pass-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-align: left;
}

.pass-field[hidden] {
  display: none;
}

.pass-field dt {
  font-family: var(--font-default);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.pass-field dd {
  margin: 0;
  font-family: var(--font-default);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pass-field.is-low dd {
  color: var(--color-secondary);
}

.pass-field.is-soldout dd {
  color: var(--color-primary);
}

.booking-tt {
  padding: 1.4rem 1.6rem 0.6rem;
}

/* Departure cards: with two (English) they are a radio group, the chosen one edged
   in the package colour; with one they read as a plain heading, as before */
.flights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.flight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(242, 236, 228, 0.14);
  border-radius: 12px;
  background: rgba(242, 236, 228, 0.03);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

button.flight:not(.is-selected):hover {
  border-color: rgba(242, 236, 228, 0.32);
}

.flight.is-selected {
  border-color: var(--pkg-accent, var(--color-secondary));
  background: rgba(242, 236, 228, 0.06);
  box-shadow: inset 0 0 0 1px var(--pkg-accent, var(--color-secondary));
}

.flight:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* press feedback, as on the site's other buttons (a big target squashes less) */
button.flight {
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, scale var(--press-out);
}

button.flight:active {
  scale: 0.97;
  transition: scale var(--press-in);
}

.flights--single .flight {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: default;
}

.flight .tt-departure {
  margin: 0;
  font-size: 0.95rem;
}

.flight-date,
.flight-seats {
  font-family: var(--font-default);
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--color-muted);
}

.flight-seats {
  font-weight: 600;
}

.flight.is-low .flight-seats {
  color: var(--color-secondary);
}

.flight.is-soldout .flight-seats {
  color: var(--color-primary);
}

/* Phones, step 2: the chosen city's dates, as a row of smaller buttons */
.flight-step {
  margin: -0.35rem 0 1rem;
}

.flight-step-label {
  margin: 0 0 0.45rem;
  text-align: left;
  font-family: var(--font-default);
  font-size: 0.78rem;
  color: var(--color-muted);
}

.flights--dates {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.flight--date {
  gap: 0.15rem;
  padding: 0.55rem 0.75rem;
}

.flight--date .flight-date {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.booking-go {
  display: block;
  width: 100%;
  margin: 0 0 0.7rem;
  text-align: center;
  text-decoration: none;
}

.booking-code-note {
  margin: 0 0 0.5rem;
  font-family: var(--font-default);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
}

/* Checkout popup: Ticket Tailor's page in a frame, over ours (browser top layer) */
.tt-checkout {
  /* the page's reset zeroes margins; auto is what centres a dialog */
  margin: auto;
  width: min(720px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid rgba(242, 236, 228, 0.12);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  overflow: hidden;
}

.tt-checkout[open] {
  display: flex;
  flex-direction: column;
  animation: tt-checkout-in 0.22s ease-out;
}

.tt-checkout::backdrop {
  background: rgba(10, 10, 12, 0.72);
}

/* a short fade the visitor sets off with a tap, so it stays with Reduce Motion too */
@keyframes tt-checkout-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.tt-checkout-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-bottom: 1px solid rgba(242, 236, 228, 0.08);
  font-family: var(--font-default);
}

.tt-checkout-title {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.tt-checkout-title .fa-ico {
  color: var(--color-secondary);
}

.tt-checkout-newtab {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.tt-checkout-newtab:hover,
.tt-checkout-newtab:focus-visible {
  color: var(--color-text);
}

.tt-checkout-close {
  transition: background 0.2s ease, scale var(--press-out);
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(242, 236, 228, 0.08);
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
}

.tt-checkout-close:hover {
  background: rgba(242, 236, 228, 0.16);
}

.tt-checkout-close:active {
  scale: var(--press-scale);
  transition: scale var(--press-in);
}

.tt-checkout-body {
  flex: 1;
  min-height: 0;
  padding: 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tt-checkout-loading {
  margin: 0;
  padding: 2.5rem 0;
  font-family: var(--font-default);
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}

.tt-checkout-loading a {
  color: var(--color-text);
}

.tt-departure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-default);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-align: left;
}

.tt-departure .fa-ico {
  color: var(--pkg-accent, var(--color-secondary));
  transition: color 0.3s ease;
}

/* Price under the departure line: the old price crossed out with its discount tag,
   then the price you pay, large; the package colour marks the tag and the strike */
.tt-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0 0 1rem;
  font-family: var(--font-default);
  text-align: left;
}

.tt-price-old {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tt-price-was {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: var(--pkg-accent, var(--color-secondary));
  text-decoration-thickness: 2px;
}

.tt-price-off {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--pkg-accent, var(--color-secondary));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  rotate: -4deg;
  transition: background 0.3s ease, color 0.3s ease;
}

/* gold tag: dark text reads better than white */
.package-box.show-bundle .tt-price-off {
  color: var(--color-dark);
}

.tt-price-new {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.tt-price-now {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.tt-price-per {
  font-size: 0.82rem;
  color: var(--color-muted);
}

.booking-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.9rem 1.6rem 1rem;
  border-top: 1px solid rgba(242, 236, 228, 0.08);
  font-family: var(--font-default);
  font-size: 0.82rem;
  color: var(--color-muted);
}

.booking-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.booking-foot-link {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.booking-foot-link:hover,
.booking-foot-link:focus-visible {
  color: var(--color-text);
}

.booking-foot-link .fa-ico {
  color: #25d366;
}

@media (max-width: 767px) {
  .booking-widget {
    --notch: 10px;
    --notch-bg: var(--color-bg-alt);
    background: var(--color-surface);
  }

  .booking-head {
    gap: 0.55rem;
    padding: 1rem 1.1rem 1.05rem;
  }

  .pass-route {
    gap: 0.6rem;
  }

  .pass-code {
    font-size: 1.8rem;
  }

  .pass-path {
    height: 1.8rem;
    min-width: 2rem;
  }

  .pass-path {
    gap: 0.35rem;
  }

  .pass-plane {
    font-size: 1.1rem;
  }

  .pass-city {
    font-size: 0.72rem;
  }

  .booking-tt {
    padding: 1rem 0.6rem 0.4rem;
  }

  .tt-departure,
  .tt-price {
    padding-left: 0.5rem;
  }

  .tt-price-now {
    font-size: 1.55rem;
  }

  /* a single departure lines up with the price below it */
  .flights--single {
    padding-left: 0.5rem;
  }

  .flight .tt-departure {
    padding-left: 0;
  }

  .pass-details {
    gap: 0.5rem 1.25rem;
  }

  /* a single city (Spanish, Catalan) is a plain heading: its dates line up with it */
  .flights--single + .flight-step {
    padding-left: 0.5rem;
    margin-top: 0;
  }

  .flight {
    padding: 0.65rem 0.75rem;
  }

  /* phones: the checkout fills the screen */
  .tt-checkout {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .tt-checkout-body {
    padding: 0.5rem 0.25rem;
  }

  .booking-foot {
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 1rem 0.9rem;
  }
}

/* ===== Video overlay ===== */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: #000;
  overflow: hidden;
}

.video-overlay.open {
  display: block;
}

/* Whole video always visible, centred and letterboxed (the bars blend into the #000 background) */
.video-overlay video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- Mobile fit ----
   Default below = VERSION B: video height fills the screen, sides cropped, centred.
   For VERSION A (whole video, centred, letterboxed) add class "mobile-contain"
   to the #videoOverlay element in the HTML. */
@media (max-width: 767px) {
  .video-overlay video {
    height: 100%;
    object-fit: cover;
  }

  .video-overlay.mobile-contain video {
    object-fit: contain;
  }
}

.video-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.2s ease, transform 0.5s ease, scale var(--press-out);
}

.video-overlay.show-ui .video-close {
  opacity: 1;
  pointer-events: auto;
}

.video-close:hover {
  color: var(--color-accent);
  transform: rotate(90deg);
}

.video-mute {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.2s ease, scale var(--press-out);
}

.video-overlay.show-ui .video-mute {
  opacity: 1;
  pointer-events: auto;
}

.video-mute:hover {
  color: var(--color-accent);
}

/* unmute prompt (shown only when autoplay had to fall back to muted) */
.video-unmute {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: scale var(--press-out);
}

.video-overlay.muted-fallback .video-unmute {
  display: inline-flex;
}

/* scrubber — replay mode only */
.video-scrub {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 22px;
  z-index: 3;
  height: 20px;
  display: none;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-overlay.with-scrub .video-scrub {
  display: flex;
}

.video-overlay.with-scrub.show-ui .video-scrub {
  opacity: 1;
  pointer-events: auto;
}

/* a control reached with the keyboard stays visible even after the UI auto-hides */
.video-overlay .video-close:focus-visible,
.video-overlay .video-mute:focus-visible,
.video-overlay.with-scrub .video-scrub:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.video-scrub:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* center play indicator when paused */
.video-playpause {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.video-overlay.paused .video-playpause {
  opacity: 1;
}

.video-scrub-track {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.video-scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--color-accent);
}

.video-scrub-fill::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-accent);
}

/* floating replay button */
.video-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 995;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1b1b1f;
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--ease-spring), scale var(--press-out), background 0.2s ease, opacity 0.25s ease;
}

.video-fab:hover {
  transform: scale(1.08);
  background: var(--color-secondary);
}

/* hide the button while the footer is on screen so it never covers the legal links */
.video-fab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

@media (max-width: 767px) {
  .video-fab {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 14px;
  }
}

/* ---- Phone first visit: "watch the video" hint ----
   Replaces the autoplay intro on phones. A see-through scrim with hand-drawn arrows
   pointing at the video button, which is lifted above the scrim and pings. Any tap,
   scroll or Esc dismisses it; the script then removes it from the page entirely.
   The arrow art is a 300×300 box pinned to the bottom-right corner, so the button
   centre (14px inset + 25px radius) always lands at 261,261 in the SVG. */
.video-hint {
  position: fixed;
  inset: 0;
  z-index: 1001;
  /* light scrim overall, a little deeper behind the text and arrows so they read over the hero */
  background-color: rgba(19, 19, 22, 0.5);
  background-image: radial-gradient(130% 60% at 100% 100%, rgba(19, 19, 22, 0.55), rgba(19, 19, 22, 0) 70%);
  -webkit-tap-highlight-color: transparent;
  animation: vh-fade 0.35s ease-out both;
  transition: opacity 0.3s ease;
}

.video-hint[hidden] {
  display: none;
}

.video-hint.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.video-hint-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

.video-hint-text {
  position: absolute;
  left: 4px;
  top: 34px;
  width: 250px;
  text-align: center;
  rotate: -6deg;
  animation: vh-rise 0.5s 0.1s var(--ease-out-expo) both;
}

/* soft glow behind the words so the hero copy underneath doesn't fight them */
.video-hint-text::before {
  content: "";
  position: absolute;
  inset: -28px -24px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(19, 19, 22, 0.88) 45%, rgba(19, 19, 22, 0));
}

.video-hint-title {
  display: block;
  font-family: var(--font-body);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-text);
  text-shadow: 0 2px 14px rgba(19, 19, 22, 0.6);
}

.video-hint-sub {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-default);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.video-hint-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.video-hint-arrows path {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: vh-draw 0.8s ease-in-out forwards;
}

.video-hint-arrows .vh-head {
  animation-duration: 0.22s;
  animation-timing-function: ease-out;
}

.video-hint-arrows .vh-1 {
  animation-delay: 0.35s;
}

.video-hint-arrows .vh-1h {
  animation-delay: 1.12s;
}

.video-hint-arrows .vh-2 {
  stroke-width: 2.6;
  animation-duration: 0.45s;
  animation-delay: 0.75s;
}

.video-hint-arrows .vh-2h {
  stroke-width: 2.6;
  animation-delay: 1.18s;
}

/* sits just under the navbar so it doesn't land on the hamburger */
.video-hint-close {
  position: absolute;
  top: 82px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(19, 19, 22, 0.5);
  border: 1px solid rgba(242, 236, 228, 0.25);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: scale var(--press-out);
}

.video-hint-close:active {
  scale: var(--press-scale);
  transition: scale var(--press-in);
}

/* the button sits above the scrim and pings until the hint goes */
.video-fab.is-hinted {
  z-index: 1002;
  animation: vh-ping 1.8s 1.3s ease-out infinite;
}

@keyframes vh-fade {
  from {
    opacity: 0;
  }
}

@keyframes vh-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

@keyframes vh-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes vh-ping {
  0% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(219, 182, 88, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 18px rgba(219, 182, 88, 0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .video-hint,
  .video-hint-text,
  .video-fab.is-hinted {
    animation: none;
  }

  .video-hint-arrows path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* the hint only makes sense next to the phone-sized button */
@media (min-width: 768px) {
  .video-hint {
    display: none;
  }
}

/* ===== Promo video (custom controls over a YouTube embed) ===== */
.promo-video-section {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) var(--space-sm);
  background: var(--color-bg);
}

.promo-video {
  width: 100%;
  max-width: 960px;
}

.promo-video-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.promo-video-inner iframe,
.yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* click-to-load placeholder: poster + play button, swapped for the player on click */
.yt-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.yt-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  padding-left: 0.3rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease-spring);
}

.yt-facade:hover .yt-poster,
.yt-facade:focus-visible .yt-poster {
  opacity: 1;
}

.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-facade:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* ---------- Split-from-middle link hover ----------
   Shared by nav links, FAQ questions and footer links. The hover colour fills the
   text outward from its centre (a centred background layer clipped to the glyphs),
   the text lifts on a spring, and a press squashes it so the release bounces back.
   Each area keeps its own resting + hover colour via --split-base / --split-fill.
   The split is one gradient layer whose middle band widens with --split; two stacked
   text-clipped layers would let the base colour fringe the glyph edges of the fill. */
@property --split {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.nav-links li:not(.nav-cta)>a,
.acc-q>span,
.footer .footer-grid ul a,
.footer .footer-legal a {
  color: transparent;
  /* the 0% fallbacks matter: browsers without @property (iOS 16.3 and older, iPods)
     would otherwise drop the whole gradient and leave the text invisible */
  background-image: linear-gradient(to right,
      var(--split-base) calc(50% - var(--split, 0%) / 2),
      var(--split-fill) calc(50% - var(--split, 0%) / 2) calc(50% + var(--split, 0%) / 2),
      var(--split-base) calc(50% + var(--split, 0%) / 2));
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition:
    --split 0.3s var(--ease-out-expo),
    transform 0.4s var(--ease-spring);
}

.nav-links li:not(.nav-cta)>a {
  --split-base: var(--color-text);
  --split-fill: var(--color-accent);
}

.acc-q>span {
  --split-base: var(--color-text);
  --split-fill: var(--color-primary);
}

.footer .footer-grid ul a {
  display: inline-block;
  line-height: normal;
  --split-base: var(--color-bg);
  --split-fill: var(--color-text);
}

.footer .footer-grid ul .contact-link {
  display: inline-flex;
  line-height: inherit;
  --split-base: var(--color-muted);
}

/* contact links fill with the colour of their own icon */
.footer .footer-grid ul .contact-link--mail {
  --split-fill: var(--color-secondary);
}

.footer .footer-grid ul .contact-link--wa {
  --split-fill: #25D366;
}

.footer .footer-legal a {
  --split-base: var(--color-accent);
  --split-fill: var(--color-text);
}

/* Hover: fill splits open from the middle, text lifts with a little overshoot */
@media (hover: hover) {

  .nav-links li:not(.nav-cta)>a:hover,
  .acc-q:hover>span,
  .footer .footer-grid ul a:hover,
  .footer .footer-legal a:hover {
    --split: 100%;
    transform: translateY(-2px);
    transition:
      --split 0.45s var(--ease-out-expo),
      transform 0.5s var(--ease-spring);
  }

  /* Navbar: no lift, and a slower, more drawn-out fill */
  .nav-links li:not(.nav-cta)>a:hover {
    transform: none;
    transition:
      --split 0.75s var(--ease-out-expo),
      transform 0.5s var(--ease-spring);
  }
}

/* Navbar fill also closes back to the middle more slowly */
.nav-links li:not(.nav-cta)>a {
  transition:
    --split 0.5s var(--ease-out-expo),
    transform 0.4s var(--ease-spring);
}

/* An open FAQ question keeps its fill (on phones the tap only fills it while pressed) */
:where(.acc-item.open) .acc-q>span {
  --split: 100%;
  transition:
    --split 0.45s var(--ease-out-expo),
    transform 0.5s var(--ease-spring);
}

/* Keyboard focus gets the same fill (no lift) */
.nav-links li:not(.nav-cta)>a:focus-visible,
.acc-q:focus-visible>span,
.footer .footer-grid ul a:focus-visible,
.footer .footer-legal a:focus-visible {
  --split: 100%;
}

/* Press: quick squash; on release the hover/rest transition springs it back */
.nav-links li:not(.nav-cta)>a:active,
.acc-q:active>span,
.footer .footer-grid ul a:active,
.footer .footer-legal a:active {
  --split: 100%;
  transform: translateY(0) scale(0.92);
  transition:
    --split 0.12s var(--ease-out-expo),
    transform 0.08s ease-out;
}

@media (prefers-reduced-motion: reduce) {

  .nav-links li:not(.nav-cta)>a,
  .acc-q>span,
  .footer .footer-grid ul a,
  .footer .footer-legal a {
    transform: none !important;
  }
}

/* ---------- Cursor spotlight inside the glyphs ----------
   The cursor's colour lights the letters (and package icons) it passes over, as if
   shining through them from behind; nothing is drawn outside the glyphs. Text gets a
   radial spot layered over its base colour in a background-clip:text fill; SVG icons get
   a coloured clone (.pkg-icon-glow) masked to the same spot. JS sets --spot-x/--spot-y
   per element and adds .is-spot / .is-lit to the zone, only for a fine hover pointer
   without reduced motion; otherwise none of this applies and the plain styles stay. */
@property --spot-r {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --spot-base {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

/* One layer that fades from the spot colour back to the base colour (two stacked
   text-clipped layers would fringe the glyph edges, see the split hover above) */
.footer .footer-legal.is-spot a,
.footer .footer-legal.is-spot a:hover,
.footer .footer-legal.is-spot a:focus-visible,
.footer .footer-legal.is-spot a:active,
.package-tabs.is-spot .package-tab:not(.active) .tab-label {
  color: transparent;
  background-image: radial-gradient(circle var(--spot-r, 0px) at var(--spot-x, -99px) var(--spot-y, -99px),
      var(--spot-color) 72%, var(--spot-base, transparent));
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transform: none;
  transition: --spot-r 0.3s var(--ease-out-expo), --spot-base 0.2s ease, scale var(--press-out);
}

.footer-legal.is-spot.is-lit a,
.package-tabs.is-spot.is-lit .package-tab:not(.active) .tab-label {
  --spot-r: 1.4em;
  transition: --spot-r 0.45s var(--ease-spring), --spot-base 0.2s ease, scale var(--press-out);
}

/* Larger in the packages; the label and icons share the tab's font size, so one em
   value (matching the .pkg-icon rule below) keeps the circle the same size as it
   crosses from icon to label */
.package-tabs.is-spot.is-lit .package-tab:not(.active) .tab-label {
  --spot-r: 1.8em;
}

.footer .footer-legal.is-spot a {
  --spot-base: var(--color-accent);
  --spot-color: var(--color-text);
}

.footer .footer-legal.is-spot a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Package tabs: only the unselected tab is backlit, in its own package colour. Its
   icons are normally hidden; here the icon box stays visible with the original drawing
   transparent, so the spot reveals just the part of each icon it passes over. */
.package-tabs.is-spot .package-tab {
  --spot-base: var(--color-muted);
  --spot-color: var(--color-primary);
}

.package-tabs.is-spot .package-tab[data-package="bundle"] {
  --spot-color: var(--color-secondary);
}

.package-tabs.is-spot .package-tab:hover {
  --spot-base: var(--color-text);
}

.package-tabs.is-spot .pkg-icon {
  position: relative;
  opacity: 1;
  transition: --spot-r 0.3s var(--ease-out-expo);
}

.package-tabs.is-spot .pkg-icon>.pkg-icon-svg {
  transition: opacity 0.3s ease;
}

.package-tabs.is-spot .package-tab:not(.active) .pkg-icon>.pkg-icon-svg {
  opacity: 0;
}

.package-tabs.is-spot.is-lit .package-tab:not(.active) .pkg-icon {
  --spot-r: 1.8em;
  transition: --spot-r 0.45s var(--ease-spring);
}

.pkg-icon-glow {
  position: absolute;
  inset: 0;
  color: var(--spot-color);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--spot-r, 0px) at var(--spot-x, -99px) var(--spot-y, -99px), #000 72%, transparent);
  mask-image: radial-gradient(circle var(--spot-r, 0px) at var(--spot-x, -99px) var(--spot-y, -99px), #000 72%, transparent);
}

.package-tab.active .pkg-icon-glow {
  display: none;
}

/* ---------- Button press feedback ----------
   Buttons squash the moment the pointer goes down, not on release. It uses the
   standalone `scale` property, so it stacks on each button's own transform (hover
   lift, close-button rotate, unmute centring) instead of replacing it. Press-in is
   fast and flat; on release each element's own `scale var(--press-out)` transition
   takes over and springs it back with a slight overshoot. */
.btn:active,
.lang-current:active,
.hamburger:active,
.info-chip .icon:active,
.gallery-close:active,
.video-close:active,
.video-mute:active,
.video-unmute:active,
.video-fab:active,
.package-tab:active .tab-label,
/* the spotlight rules restyle the unselected label with higher specificity */
.package-tabs.is-spot .package-tab:active .tab-label,
.package-tabs.is-spot.is-lit .package-tab:active .tab-label {
  scale: var(--press-scale);
  transition: scale var(--press-in);
}

/* a big target needs a smaller squash to read the same */
.gallery-stack:active {
  scale: 0.98;
  transition: scale var(--press-in);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-default);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  transform: translateY(-110%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* <main> is focusable (tabindex="-1") so the skip link moves focus into it;
   it shouldn't get an outline of its own. html's scroll-padding-top clears the
   sticky navbar when jumping to it. */
#main:focus {
  outline: none;
}

/* ---------- Mobile menu: handwritten rows and a snowy foot ----------
   Centred words, and a gold brush stroke under the section in view that paints
   itself in as the menu drops.
   A tap fills the word from the middle (the same split fill as the desktop navbar).
   Snow drifts down behind the rows, and a snowman peeks over the drift at the bottom. */
@media (max-width: 1024px) {

  /* the desktop underline is replaced by the brush stroke */
  .nav-links a::after {
    display: none;
  }

  .nav-links li:not(.nav-cta)>a {
    display: block;
    padding: 0.6rem 0;
    font-size: 1.65rem;
  }

  /* The split fill lives on the word, not the link: Safari leaves the text of a
     positioned child (the word is, for its brush stroke) out of a parent's
     background-clip: text, so the whole menu read as blank on iPhones */
  .nav-links li:not(.nav-cta)>a {
    color: var(--color-text);
    background: none;
  }

  .nav-word {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(to right,
        var(--color-text) calc(50% - var(--split, 0%) / 2),
        var(--color-accent) calc(50% - var(--split, 0%) / 2) calc(50% + var(--split, 0%) / 2),
        var(--color-text) calc(50% + var(--split, 0%) / 2));
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: --split 0.5s var(--ease-out-expo);
  }

  .nav-links li:not(.nav-cta)>a:focus-visible .nav-word,
  .nav-links li:not(.nav-cta)>a:active .nav-word {
    --split: 100%;
    transition: --split 0.12s var(--ease-out-expo);
  }

  .nav-word::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -0.1em;
    height: 0.32em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath fill='%23CBB26A' d='M3 6.4C25 3.6 70 2 116.5 3c2.2.1 2.4 1.9.4 2.1C76 6.3 37 7.6 5.6 8.8 2 9 1 6.7 3 6.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.2s ease;
    pointer-events: none;
  }

  .nav-links.open li:not(.nav-cta)>a.active .nav-word::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s var(--ease-out-expo) 0.3s;
  }

  @media (hover: hover) {
    .nav-links li:not(.nav-cta)>a:hover .nav-word {
      --split: 100%;
      transition: --split 0.75s var(--ease-out-expo);
    }
  }

  /* --- snow falling behind the rows (only while the menu is open) --- */
  .nav-snowfall {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    opacity: 0.3;
    pointer-events: none;
  }

  .nav-flake {
    position: absolute;
    top: -20%;
    width: 0.7rem;
    height: auto;
    animation: snow-fall 8s linear infinite paused;
  }

  .nav-links.open .nav-flake {
    animation-play-state: running;
  }

  .nav-flake:nth-child(1) {
    left: 8%;
    animation-duration: 9s;
    animation-delay: -2s;
  }

  .nav-flake:nth-child(2) {
    left: 24%;
    width: 0.5rem;
    animation-duration: 11s;
    animation-delay: -7s;
  }

  .nav-flake:nth-child(3) {
    left: 41%;
    animation-duration: 8s;
    animation-delay: -4s;
  }

  .nav-flake:nth-child(4) {
    left: 63%;
    width: 0.55rem;
    animation-duration: 10s;
    animation-delay: -1s;
  }

  .nav-flake:nth-child(5) {
    left: 79%;
    animation-duration: 9.5s;
    animation-delay: -5.5s;
  }

  .nav-flake:nth-child(6) {
    left: 93%;
    width: 0.48rem;
    animation-duration: 12s;
    animation-delay: -9s;
  }

  /* --- the drift along the menu's foot, two layers of uneven snow ---
     The strip is tall enough to hold the whole snowman and clips him, so while he is
     hidden below the snow he never makes the menu scrollable. The snow is the bottom
     34px; each tile reaches 6px above the strip, so its top edge (where a bleed from
     the tile's solid bottom row would show) is clipped off */
  .nav-drift {
    position: relative;
    display: block;
    height: 58px;
    margin: 0 -10px;
    overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 240 64'%3E%3Cpath fill='%2391adc8' d='M0 14C30 4 60 6 90 12s60 10 90-3 30 15 60 5V34H0Z'/%3E%3C/svg%3E") 40px 100% / 240px 64px repeat-x;
  }

  .nav-drift::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 300 64'%3E%3Cpath fill='%23e9eef3' d='M0 20C25 12 50 10 78 16s42 12 74 2 53-12 88-5 35 15 60 7V34H0Z'/%3E%3C/svg%3E") 0 100% / 300px 64px repeat-x;
  }

  /* the snowman (the same one as on the Book Now button) pops up behind the front drift */
  .nav-snowman {
    position: absolute;
    right: 14%;
    bottom: 6px;
    width: 2.9rem;
    height: auto;
    translate: 0 110%;
    transition: translate 0.2s ease;
  }

  .nav-links.open .nav-snowman {
    translate: 0 0;
    transition: translate 0.65s var(--ease-spring) 0.4s;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .nav-snowfall {
    display: none;
  }
}

/* ---------- Packages toggle on phones: the thumb hits the far side and squishes ----------
   It stretches a little as it travels, flattens against the edge it lands on (pinned
   there by transform-origin), then wobbles back to shape. Only after a real switch
   (.thumb-anim, set by the script), so nothing plays on page load. */
@media (max-width: 767px) {
  .package-tabs.thumb-anim::before {
    transform-origin: left center;
    transition: background 0.3s ease;
    animation: pkg-thumb-left 0.65s both;
  }

  .package-box.show-bundle .package-tabs.thumb-anim::before {
    transform-origin: right center;
    animation-name: pkg-thumb-right;
  }
}

@keyframes pkg-thumb-right {
  0% {
    translate: 0 0;
    scale: 1 1;
    animation-timing-function: cubic-bezier(0.25, 0.3, 0.6, 0.8);
  }

  17% {
    scale: 1.07 0.95;
  }

  34% {
    translate: 100% 0;
    scale: 1 1;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }

  48% {
    translate: 100% 0;
    scale: 0.84 1.08;
    animation-timing-function: ease-in-out;
  }

  68% {
    scale: 1.04 0.97;
  }

  87% {
    scale: 0.985 1.01;
  }

  100% {
    translate: 100% 0;
    scale: 1 1;
  }
}

@keyframes pkg-thumb-left {
  0% {
    translate: 100% 0;
    scale: 1 1;
    animation-timing-function: cubic-bezier(0.25, 0.3, 0.6, 0.8);
  }

  17% {
    scale: 1.07 0.95;
  }

  34% {
    translate: 0 0;
    scale: 1 1;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }

  48% {
    translate: 0 0;
    scale: 0.84 1.08;
    animation-timing-function: ease-in-out;
  }

  68% {
    scale: 1.04 0.97;
  }

  87% {
    scale: 0.985 1.01;
  }

  100% {
    translate: 0 0;
    scale: 1 1;
  }
}