/* ==========================================================================
   ARTISAN ESCAPE - DESIGN SYSTEM & STYLESHEET v3.0 (The Full Restoration)
   Based on DESIGN (1).md Design System
   ========================================================================== */

/* 1. BRAND VARIABLES & CSS RESET */
:root {
  /* Color Matrix - Derived from DESIGN (1).md */
  --color-schist: #1C1C1C;      /* Otago Schist - Deep earthy charcoal (primary ink/dark bg) */
  --color-cream: #FAF8F5;       /* Koru Cream - Warm parchment (primary canvas) */
  --color-turquoise: #2A4D53;   /* Glacial Turquoise - Technical accent, thin borders, labels */
  --color-crimson: #8B1E22;     /* Pōhutukawa Crimson - Primary WhatsApp CTAs exclusively */
  --color-gold: #C4A45A;        /* Artisan Gold - Card glyphs, numerals, hover accents */
  
  /* Typography Variables */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  
  /* Spacing Definitions */
  --margin-safe: 5vw;
  --section-gap: 140px;
  --grid-gutter: 32px;
}

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

html {
  /* Lenis owns all smooth-scroll animation via JS — native CSS smooth-scroll
     here would fight Lenis's own easing on every scrollTo/anchor jump,
     producing exactly the stuttery, glitchy feel this was causing. */
  background-color: var(--color-schist);
  color: var(--color-schist);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  background-color: var(--color-schist);
}

/* ---- Site pre-loader: a full-bleed video masking hero-video buffering,
   instead of a static poster frame, while the network layer catches up. */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--color-schist);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.site-preloader.is-dismissing {
  transform: translateY(-100%);
}
.preloader-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72; /* slightly dimmed on its own; the overlay below does the rest */
}

/* Otago Schist (#1C1C1C) darkening overlay — keeps the wordmark reveal (and
   any other text) legible against the footage without crushing the video to
   near-black. Sits between the video (z-index: auto) and the logo (z: 2). */
.site-preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(28, 28, 28, 0.55);
  pointer-events: none;
}

@media (max-width: 768px) {
  .preloader-video {
    /* Narrow portrait crop otherwise centres just left of the bridge — a
       very slight nudge right keeps the bridge itself centred in frame. */
    object-position: 52% center;
  }
}

/* Centred wordmark — hidden until the video's playhead hits 4s (see the
   inline script above), then plays a slow-motion "distort in" reveal:
   heavily blurred/skewed/over-tracked, settling into a sharp, normal
   wordmark and locking in place over 2s (~4s to ~6s into the video). */
.preloader-logo-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 6vw;
  text-align: center;
}
.preloader-logo-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 72px);
  color: var(--color-cream, #FDFBF7);
  letter-spacing: 0.05em;
  opacity: 0;
  filter: blur(24px);
  transform: scale(1.5) skewX(10deg);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.preloader-logo-text.is-visible {
  animation: preloaderLogoDistortReveal 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.preloader-logo-accent {
  font-style: italic;
  font-weight: 300;
}
/* Slow-motion hold: the distortion barely eases through the first third,
   lingers soft/blurred through the middle, then locks sharp only in the
   final stretch — rather than resolving evenly across the full 2s. */
@keyframes preloaderLogoDistortReveal {
  0%   { opacity: 0;   filter: blur(24px); transform: scale(1.5)  skewX(10deg); letter-spacing: 0.55em; }
  35%  { opacity: 0.7; filter: blur(14px); transform: scale(1.28) skewX(6deg);  letter-spacing: 0.34em; }
  70%  { opacity: 1;   filter: blur(5px);  transform: scale(1.06) skewX(-1.5deg); letter-spacing: 0.14em; }
  100% { opacity: 1;   filter: blur(0);    transform: scale(1)    skewX(0deg);    letter-spacing: 0.05em; }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader {
    transition: opacity 400ms ease;
  }
  .site-preloader.is-dismissing {
    transform: none;
    opacity: 0;
  }
  .preloader-logo-text.is-visible {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

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

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

/* Typography Helpers */
.accent-gold-italic {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-turquoise);
  font-weight: 300;
}

/* Accents over dark backgrounds use Koru Cream */
.hero-title .accent-gold-italic,
.nav-logo a .accent-gold-italic,
.footer-logo .accent-gold-italic,
.banner-text .accent-gold-italic {
  color: var(--color-cream);
}

.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-turquoise);
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}

.text-center {
  text-align: center;
}

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

.text-muted {
  color: rgba(250, 248, 245, 0.7) !important;
}

/* ==========================================================================
   2. REVEAL ANIMATIONS (INTERSECTION OBSERVER)
   ========================================================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   3. SECTION 1: THE TRANSPARENT "ANTI-NAV"
   ========================================================================== */
.anti-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent;
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 24px var(--margin-safe);
}

.anti-nav.scrolled {
  background-color: rgba(28, 28, 28, 0.96);
  backdrop-filter: blur(12px);
  padding: 16px var(--margin-safe);
  box-shadow: 0 1px 0 rgba(42, 77, 83, 0.2);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}

.nav-logo a {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  transition: color 0.3s ease;
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-item {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.85);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s ease;
}

.nav-item:hover {
  color: var(--color-turquoise);
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-turquoise);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Navigation CTA — frosted-glass look, matching the itinerary's
   request-itinerary-btn (see experience-map.css). Values are hardcoded
   here rather than via var() since the glass tokens are scoped to
   #journey-map-section and can't leak into the nav. */
.btn-whatsapp.btn-outline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FDFBF7 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-radius: 999px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.btn-whatsapp.btn-outline:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   4. SECTION 2: THE 2.5D IMMERSIVE HERO
   ========================================================================== */
.hero-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-schist);
}

.hero-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(1.08);
  transform-origin: center;
  will-change: transform;
}

/* Vimeo embed has no object-fit equivalent, so it's oversized and
   re-centred with the standard 16:9 "cover" trick: whichever dimension
   (vw or vh) would leave a gap is forced up to fill it. */
.hero-bg-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;   /* 16 / 9 */
  min-height: 100vh;
  min-width: 177.78vh; /* 16 / 9 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.22) 45%,
    rgba(0, 0, 0, 0.58) 72%,
    rgba(0, 0, 0, 0.88) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Title — true vertical centre of hero */
.hero-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  color: var(--color-cream);
  opacity: 0;
  /* Start 18px below centre, animate up to centre */
  transform: translateY(calc(-50% + 18px));
  animation: heroTextReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
  will-change: opacity, transform;
}

@keyframes heroTextReveal {
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

/* Scroll CTA — bottom-centre */
.hero-scroll-cta {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: heroTextReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 3.6s forwards;
}
.hero-scroll-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.65);
  white-space: nowrap;
}
.hero-scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--color-crimson, #8B1A1A);
  transform-origin: top center;
  animation: scrollLinePulse 2s cubic-bezier(0.45, 0, 0.55, 1) 4.6s infinite;
}
@keyframes scrollLinePulse {
  0%   { transform: scaleY(1);   opacity: 1; }
  50%  { transform: scaleY(0.4); opacity: 0.4; }
  100% { transform: scaleY(1);   opacity: 1; }
}

/* ==========================================================================
   4.5 SECTION 2.5: "BEGIN YOUR JOURNEY" HORIZONTAL MARQUEE (GSAP + Lenis)
   ========================================================================== */
.Horizontal {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-schist);
  color: var(--color-cream);
  position: relative;
}

/* Top fade: black from hero bottom into this section */
.Horizontal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8vh;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* Bottom fade: dissolve video into journey map dark (#1C1C1C) */
.Horizontal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18vh;
  background: linear-gradient(
    to top,
    #1C1C1C 0%,
    rgba(28, 28, 28, 0.7) 40%,
    rgba(28, 28, 28, 0) 100%
  );
  z-index: 5;
  pointer-events: none;
}

.horizontal-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.horizontal-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.horizontal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(28, 28, 28, 0.45) 0%,
    rgba(28, 28, 28, 0.65) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.Horizontal .container {
  width: 100%;
  position: relative;
  z-index: 6;
  overflow: hidden;
}

.Horizontal__text {
  display: flex;
  width: max-content;
  white-space: nowrap;
  gap: 4vw;
  padding-left: 100vw;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-cream) !important;
  will-change: transform;
}

.heading-xl {
  font-size: clamp(3rem, 12vw, 12rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.split-char {
  display: inline-block;
  will-change: transform, opacity;
}

.split-word {
  display: inline-block;
  white-space: nowrap;
}

/* Smooth fade transition to subsequent Koru Cream section */
.horizontal-fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(250, 248, 245, 0) 0%,
    rgba(250, 248, 245, 0.6) 55%,
    rgba(250, 248, 245, 1) 100%
  );
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}


/* ==========================================================================
   5. SECTION 3: THE CURATOR'S LINEAGE (THE MOAT)
   ========================================================================== */
/* ==========================================================================
   CURATOR — Asymmetric Elastic Bi-Fold Split Screen (Full-Bleed Portrait)
   ========================================================================== */

.bifold-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 88vh;
  max-height: 98vh;
  background: #1C1C1C;
  overflow: hidden;
  position: relative;
}

.bifold-panels-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* Top blend — dissolves the hard top edge of the coloured panels into the
   dark CTA section above for a smooth, seamless transition. */
.bifold-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to bottom, #1C1C1C 0%, rgba(28,28,28,0.4) 42%, transparent 100%);
  z-index: 6;
  pointer-events: none;
}

.bifold-panel {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 48px;
  overflow: hidden;
  transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: default;
}

.bifold-panel--left {
  background: #2A4D53;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  margin-right: -3vw;
  z-index: 1;
}

.bifold-panel--right {
  background: #8B1E22;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
  padding-left: calc(48px + 3vw);
  z-index: 0;
}

.bifold-section:hover .bifold-panel--left:not(:hover),
.bifold-section:hover .bifold-panel--right:not(:hover) {
  flex: 0.55;
}

.bifold-panel:hover {
  flex: 2;
}

/* ── Full-bleed portrait canvas ── */
.bifold-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Colour tint removed from the portrait itself — the brand colour now lives
   only in the name/designation strip below (.bifold-byline). */
.bifold-canvas-overlay {
  display: none;
}

/* Portrait image — full colour, scales up slightly on hover. Uses "cover"
   so the image fills its panel edge-to-edge with no background showing
   through (a "contain" fit was tried, but left visible letterbox bars
   beside the portraits). Panels are tall enough, and object-position is
   pulled back, that the full figure still reads as zoomed-out rather than
   a tight face crop. */
.bifold-canvas-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.0);
  transform-origin: center 25%;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.bifold-panel--left .bifold-canvas-img { object-position: center 30%; transform-origin: center 30%; }
.bifold-panel--right .bifold-canvas-img { object-position: center 18%; transform-origin: center 18%; }

.bifold-panel:hover .bifold-canvas-img {
  transform: scale(1.08);
}

/* ── Byline (name + role + circular frame icon) ── */
.bifold-byline {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(250, 248, 245, 0.20);
  padding: 18px 48px 32px;
  margin: 8px -48px -32px -48px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.bifold-panel--left .bifold-byline { background: rgba(42, 77, 83, 0.95); }
.bifold-panel--right .bifold-byline {
  background: rgba(139, 30, 34, 0.95);
  margin-left: calc(-48px - 3vw);
  padding-left: calc(48px + 3vw);
}

.bifold-byline--right {
  flex-direction: row-reverse;
  text-align: right;
}

/* Small circular portrait frame */
.bifold-frame {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 245, 0.35);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
}

.bifold-frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.bifold-byline-text { flex: 1; }
.bifold-byline--right .bifold-byline-text { text-align: right; }

.bifold-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #FAF8F5;
  margin: 0 0 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.bifold-role {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.60);
  margin: 0;
}

/* ── Founders story — copy block below the bifold portraits ── */
.founders-story {
  background: #FDFBF7;                  /* Koru Cream — matches site background */
  padding: clamp(24px, 3.5vh, 40px) var(--margin-safe, 6vw) clamp(32px, 5vh, 56px);
}

.founders-story-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
}

.founders-story-col p {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.7;
  color: rgba(28, 28, 28, 0.88);        /* near-black on cream */
  margin: 0 0 14px;
}

.founders-story-col p:last-child { margin-bottom: 0; }

.founders-story-col em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.12em;
  color: #8B1E22; /* Pōhutukawa Crimson */
}

@media (max-width: 768px) {
  .founders-story-columns { grid-template-columns: 1fr; }
}

/* ── Mobile: side-by-side, full section in one screen ── */
@media (max-width: 768px) {
  .bifold-section {
    min-height: 60vh;
    max-height: 74vh;
  }

  .bifold-panels-row {
    flex-direction: row;
  }

  .bifold-panel {
    flex: 1 !important;
    min-height: 0;
    padding: 24px 16px 20px;
    clip-path: none !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
  }

  .bifold-panel--left {
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%) !important;
    margin-right: -8vw !important;
    z-index: 1;
  }

  .bifold-panel--right {
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%) !important;
    padding-left: calc(16px + 8vw) !important;
    z-index: 0;
  }

  .bifold-frame { width: 30px; height: 30px; }
  .bifold-name {
    font-size: 13px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .bifold-role { font-size: 7px; }
  .bifold-byline {
    gap: 8px;
    padding: 12px 16px 20px;
    margin: 8px -16px -20px -16px;
  }

  .bifold-panel--right .bifold-byline {
    margin-left: calc(-16px - 8vw);
    padding-left: calc(16px + 8vw);
  }

  .bifold-byline--right {
    text-align: left;
    margin-left: 0;
    flex-direction: row;
  }
}



/* ==========================================================================
   6+7. SECTIONS 4+5: WAYS TO EXPERIENCE — UNIFIED TABBED CAROUSEL
   ========================================================================== */
.ways-section {
  padding: 48px 0 48px;
  background-color: transparent;
  border-top: none;
  position: relative;
  z-index: 6;
  width: 100%;
}

/* Ways header adapts to dark video background */

.ways-section .section-label {
  color: rgba(250, 248, 245, 0.65) !important;
}

/* Prompt — Koru Cream text with a gold sheen gliding across (below cards, above nav) */
.ways-explore-prompt {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 18px 0 8px;
  /* Cream base with a travelling gold highlight */
  background: linear-gradient(100deg,
    #FDFBF7 0%,
    #FDFBF7 38%,
    #E6C88A 47%,
    #C6A87C 50%,
    #E6C88A 53%,
    #FDFBF7 62%,
    #FDFBF7 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(198, 168, 124, 0.3));
  animation: waysPromptShine 3.4s linear infinite;
}

@keyframes waysPromptShine {
  0%   { background-position: 220% center; }
  100% { background-position: -120% center; }
}

@media (prefers-reduced-motion: reduce) {
  .ways-explore-prompt {
    animation: none;
    -webkit-text-fill-color: #FDFBF7;
    color: #FDFBF7;
  }
}

/* Tab nav on dark video background — override base rules for cream */
.segment-selector {
  border-bottom-color: rgba(250, 248, 245, 0.25) !important;
}

.segment-tab {
  color: rgba(250, 248, 245, 0.65) !important;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.segment-tab.active,
.segment-tab:hover {
  color: #FAF8F5 !important;
}

.segment-tab::after {
  background-color: #FAF8F5 !important;
}

.ways-header {
  margin: 0 auto 20px;
  padding: 0 var(--margin-safe);
}

.ways-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 400;
  margin: 0;
  color: var(--color-cream);
  text-align: center;
}

/* ---------- Segment Selector ---------- */
.segment-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
  margin: 0 var(--margin-safe) 28px;
  padding: 0;
}

.segment-tab {
  position: relative;
  background: none;
  border: none;
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.38);
  cursor: pointer;
  transition: color 0.3s ease;
}

.segment-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background-color: var(--color-schist);
  transform-origin: center;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.segment-tab.active,
.segment-tab:hover {
  color: var(--color-schist);
}

.segment-tab.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Carousel Wrappers kept for stories section */
.ways-carousel-wrapper, .ethos-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Stories/Chamber/Events nav buttons reuse a shared style — frosted-glass
   look, matching the video section's .video-cta-btn (see experience-map.css),
   but these three carousels (Curator's Chamber, The Events That Shaped
   Aotearoa, Guest Stories) all sit on cream/white section backgrounds, not
   dark ones — white-on-white marks and borders were invisible there. Marks,
   border and glass tint use Otago Schist (#1C1C1C) instead so they read
   clearly against a light background. */
.carousel-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(28, 28, 28, 0.06) !important;
  border: 1px solid rgba(28, 28, 28, 0.28) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  color: #1C1C1C !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  outline: none !important;
}

.carousel-nav-btn svg { display: block !important; flex-shrink: 0 !important; stroke: #1C1C1C !important; width: 20px !important; height: 20px !important; pointer-events: none !important; }
.carousel-nav-btn svg path { stroke: #1C1C1C !important; }
.carousel-nav-btn.prev { left: 24px !important; }
.carousel-nav-btn.next { right: 24px !important; }
.carousel-nav-btn:hover { background: rgba(28, 28, 28, 0.12) !important; border-color: rgba(28, 28, 28, 0.45) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important; }
.carousel-nav-btn:active, .carousel-nav-btn:focus:active { background: rgba(28, 28, 28, 0.16) !important; border-color: rgba(28, 28, 28, 0.55) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important; }


/* ==========================================================================
   8. SECTION 6: PREMIUM EDITORIAL STORYTELLING — NEW ZEALAND, REIMAGINED
   ========================================================================== */
.ethos-container {
  background-color: var(--color-cream);
  color: var(--color-schist);
  position: relative;
  padding: 52px var(--margin-safe) 40px;
}

/* Texture overlay */
.grain-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 2;
}

/* ---- New click-driven chapter layout ---- */

.ethos-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}

.ethos-section-header .section-label {
  color: var(--color-turquoise);
  opacity: 0.85;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 16px;
}

.ethos-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-schist);
  line-height: 1.15;
  margin: 0 0 16px;
  text-align: center;
}

.ethos-subtitle-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(28, 28, 28, 0.65);
  text-align: center;
}

/* Nav row: relative container — buttons absolute at edges */
.ethos-nav-row {
  position: relative;
}

/* Cream curtains — hide slide image edges during transitions (permanently fixes black line) */
.ethos-nav-row::before,
.ethos-nav-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 76px;
  background: var(--color-cream);
  z-index: 8;
  pointer-events: none;
}
.ethos-nav-row::before { left: 0; }
.ethos-nav-row::after { right: 0; }

.ethos-slides-viewport {
  width: 100%;
  overflow: hidden;
}

.ethos-slides-track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.ethos-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ethos-text-col {
  padding: 8px 16px 8px 84px;
}

.ethos-visual-col {
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: #1c1c1c;
  position: relative;
}

/* Side nav buttons — absolute over slides edges */
.ethos-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--color-turquoise);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  z-index: 10;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

#ethos-prev-btn { left: 24px; }
#ethos-next-btn { right: 24px; }

.ethos-side-btn svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.ethos-side-btn:hover,
.ethos-side-btn:active {
  background-color: var(--color-crimson);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 20px rgba(139, 30, 34, 0.45);
}

/* Chapter nav — just the progress dots now */
.ethos-chapter-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

.ethos-progress {
  display: flex;
  gap: 12px;
}

.chapter-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-crimson);
  margin-bottom: 12px;
}

.chapter-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  color: var(--color-schist);
  line-height: 1.25;
  margin: 0 0 8px 0;
}

.chapter-location {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-turquoise);
  opacity: 0.85;
  margin-bottom: 18px;
  display: block;
}

.chapter-paragraph {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(28, 28, 28, 0.75);
  margin-bottom: 16px;
  max-width: 440px;
}

.chapter-milestones h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-schist);
  opacity: 0.85;
  margin: 0 0 8px 0;
}

.chapter-milestones ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chapter-milestones li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(28, 28, 28, 0.8);
  position: relative;
  padding-left: 16px;
}

.chapter-milestones li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-turquoise);
  opacity: 0.85;
}

.ethos-progress {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.ethos-progress-dot {
  width: 6px;
  height: 6px;
  background-color: rgba(28, 28, 28, 0.2);
  transition: background-color 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}

.ethos-progress-dot.active {
  background-color: var(--color-schist);
  transform: scale(1.5);
}

/* Old sticky visual col + cards-stack removed — replaced by new .ethos-chapter-display grid above */

/* Chapter slideshow — crossfade between the two images every 2 s */
.visual-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

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

/* Per-image focal points */
.slide-img[src*="ch1_1"] { object-position: center 30%; }
.slide-img[src*="ch1_2"] { object-position: center 40%; }
.slide-img[src*="ch2_1"] { object-position: center 50%; }
.slide-img[src*="ch2_2"] { object-position: center 50%; }
.slide-img[src*="ch3_1"] { object-position: center 35%; }
.slide-img[src*="ch3_2"] { object-position: center 45%; }
.slide-img[src*="ch4_1"] { object-position: center 50%; }
.slide-img[src*="ch4_2"] { object-position: center 50%; }
.slide-img[src*="ch5_1"] { object-position: center 75%; }
.slide-img[src*="ch5_2"] { object-position: center 50%; }
.slide-img[src*="ch6_1"] { object-position: center 55%; }
.slide-img[src*="ch6_2"] { object-position: center 50%; }


/* ==========================================================================
   8.5. SECTION 7.5: OUR ETHOS / THE PILLARS OF OUR PROMISE
   ========================================================================== */
.ethos-values-section {
  background: #FDFBF7;
  padding: 80px var(--margin-safe) 80px;
  overflow: hidden;
}

/* Kōkiri intro block */
.ethos-kokiri-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 72px;
}

.ethos-kokiri-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8B1E22;
  margin-bottom: 14px;
}

.ethos-kokiri-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 300;
  color: #1C1C1C;
  margin: 0 0 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ethos-kokiri-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.80;
  color: rgba(28, 28, 28, 0.70);
  margin: 0 0 16px;
}

.ethos-kokiri-body:last-child { margin-bottom: 0; }

.ethos-kokiri-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
}

.kokiri-svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.10));
}

.kokiri-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.10));
}

.ethos-values-header {
  text-align: center;
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ethos-values-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  color: #1C1C1C;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.ethos-values-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B1E22;
  margin: 0 0 10px;
}

.ethos-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
}

.ethos-card {
  padding: 28px 24px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

.ethos-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.ethos-card--gold {
  background: #C6A87C;
  color: #1C1C1C;
}

.ethos-card--dark {
  background: #1C1C1C;
  color: #FDFBF7;
}

.ethos-card--turquoise {
  background: #2A4D53;
  color: #FDFBF7;
}

.ethos-card--crimson {
  background: #8B1E22;
  color: #FDFBF7;
}

.ethos-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.90;
  transition: opacity 0.4s ease;
}

.ethos-card:hover .ethos-card-icon {
  opacity: 1;
}

.ethos-card-icon svg {
  width: 100%;
  height: 100%;
  color: inherit;
}

.ethos-card-label {
  display: block;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.80;
  margin-bottom: -8px;
}

.ethos-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  color: inherit;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ethos-card-body {
  font-family: 'Avenir Next', 'Avenir', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.70;
  color: inherit;
  margin: 0;
  opacity: 0.80;
}

@media (max-width: 1024px) {
  .ethos-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .ethos-card {
    padding: 36px 28px;
  }
}

@media (max-width: 1024px) {
  .ethos-kokiri-intro {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .ethos-kokiri-diagram { order: -1; }
  .kokiri-svg { max-width: 260px; }
  .kokiri-img { max-width: 260px; }
}

@media (max-width: 768px) {
  .ethos-values-section {
    padding: 60px var(--margin-safe) 60px;
  }
  .ethos-kokiri-intro { margin-bottom: 48px; }
  .ethos-values-header { margin-bottom: 32px; }
  .ethos-values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ethos-card {
    padding: 32px 24px;
  }
}

/* ==========================================================================
   9. SECTION 7: REVERSING RISKS (LOGISTICS & POLISH)
   ========================================================================== */
.logistics-container {
  padding: var(--section-gap) var(--margin-safe) var(--section-gap);
  background-color: #FDFBF7;
  position: relative;
  overflow: hidden;
}

.logistics-container .section-label {
  color: #1C1C1C;
  letter-spacing: 0.25em;
  font-weight: 600;
  margin-bottom: 12px;
}

.logistics-header {
  max-width: 1400px;
  margin: 0 auto 64px;
  position: relative;
  z-index: 2;
}

.logistics-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-schist);
}

.logistics-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  position: relative;
  z-index: 2;
}

.logistics-pillar {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
}

#pillar-1 {
  padding: 8px 48px 8px 0;
}

#pillar-2 {
  padding: 8px 48px;
}

#pillar-3 {
  padding: 8px 0 8px 48px;
}

/* Micro-interaction hover states */
.logistics-pillar:hover {
  transform: translateY(-4px); /* Drift text layer upwards by 4px */
}

/* Standalone Vertical Divider Lines */
.logistics-divider {
  width: 1px;
  background-color: rgba(28, 28, 28, 0.15); /* Muted Otago Schist */
  position: relative;
  align-self: stretch;
  margin: 8px 0;
  transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center;
}

/* Crimson anchor points on the divider lines */
.logistics-divider::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 5px;
  height: 5px;
  background-color: var(--color-schist);
  opacity: 0.3;
  transform: translateY(-50%);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Sibling transitions on Hover */
#pillar-1:hover ~ #divider-1,
#pillar-2:hover ~ #divider-1,
#pillar-2:hover ~ #divider-2,
#pillar-3:hover ~ #divider-2 {
  background-color: #8A1C14; /* Pōhutukawa Crimson */
  transform: scaleY(1.08); /* Scale line slightly */
}

#pillar-1:hover ~ #divider-1::after,
#pillar-2:hover ~ #divider-1::after,
#pillar-2:hover ~ #divider-2::after,
#pillar-3:hover ~ #divider-2::after {
  background-color: #8A1C14; /* Pōhutukawa Crimson */
  opacity: 1;
  transform: translateY(-50%) scale(1.3);
}

.pillar-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--color-schist);
}

.pillar-copy {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(28, 28, 28, 0.75);
  font-weight: 300;
}



/* ==========================================================================
   THE REALITIES OF DISCONNECTING — pinned image-mask scroll reveal
   Editorial two-column layout: left column scrolls through 6 Q&A blocks;
   right column stays pinned (desktop only — see initFaqScrollReveal in
   index.js) while a clip-path wipe reveals the matching image as each
   block scrolls into focus. Canvas stays pure Koru Cream throughout — no
   colour-changing backgrounds between steps.
   ========================================================================== */
.disconnect-ledger {
  background: #FDFBF7;
  padding: clamp(64px, 9vw, 130px) 0 0;
  position: relative;
}

.disconnect-ledger-header {
  max-width: 760px;
  margin: 0 auto clamp(44px, 6vw, 72px);
  padding: 0 var(--margin-safe);
  text-align: center;
}

.disconnect-ledger-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin: 0 0 16px;
}

.disconnect-ledger-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 56px);
  color: #1C1C1C;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.faq-scroll-grid {
  display: flex;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--margin-safe);
  gap: clamp(32px, 5vw, 96px);
}

.faq-text-col {
  flex: 1 1 50%;
  min-width: 0;
}

.faq-text-block {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  padding: 8vh 0;
}

.faq-text-number {
  display: block;
  font-family: 'Avenir Next Arabic', 'Avenir Next', 'Avenir', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #C6A87C;
  margin: 0 0 14px;
}

.faq-text-question {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1C1C1C;
  margin: 0 0 22px;
}

.faq-text-answer {
  font-family: 'Avenir Next Arabic', 'Avenir Next', 'Avenir', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(28, 28, 28, 0.8);
  margin: 0;
}

.faq-image-col {
  flex: 1 1 50%;
  min-width: 0;
  align-self: stretch;
}

.faq-image-rail {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Landscape-framed box (not a full-height portrait slab) — matches a
   contained editorial photo rather than an elongated poster. */
.faq-image-frame {
  position: relative;
  width: min(640px, 90%);
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(28, 28, 28, 0.14);
}

.faq-image-item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Hidden by default; JS reveals #1 immediately and wipes 2–6 into view
     via clip-path as their matching text block scrolls into focus. */
  clip-path: inset(0 0 100% 0);
}

.faq-image-item[data-faq-index="1"] { clip-path: inset(0 0 0 0); }

.faq-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .disconnect-ledger-title {
    font-size: clamp(19px, 6.6vw, 30px);
    white-space: nowrap;
  }

  /* Mobile fallback: no pin, no clip-path — plain linear stack,
     Image 1, Text 1, Image 2, Text 2, ... */
  .faq-scroll-grid {
    display: block;
    padding: 0 var(--margin-safe);
  }
  .faq-text-col {
    display: contents;
  }
  .faq-image-col {
    display: none;
  }
  .faq-text-block {
    min-height: 0;
    max-width: none;
    padding: 0 0 48px;
    display: block;
  }
  .faq-text-block::before {
    content: '';
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    margin: 0 0 24px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
  }
  .faq-text-block[data-faq-index="1"]::before { background-image: url('assets/faq/q1.jpg'); }
  .faq-text-block[data-faq-index="2"]::before { background-image: url('assets/faq/q2.jpg'); }
  .faq-text-block[data-faq-index="3"]::before { background-image: url('assets/faq/q3.jpg'); }
  .faq-text-block[data-faq-index="4"]::before { background-image: url('assets/faq/q4.jpg'); }
  .faq-text-block[data-faq-index="5"]::before { background-image: url('assets/faq/q5.jpg'); }
  .faq-text-block[data-faq-index="6"]::before { background-image: url('assets/faq/q6.jpg'); }
  .faq-text-question {
    font-size: clamp(24px, 6vw, 30px);
  }
  .faq-text-answer {
    font-size: 16px;
  }
}

/* ==========================================================================
   CTA SCROLL-REVEAL SECTION
   ========================================================================== */

.cta-scroll-section {
  position: relative;
  height: 350vh; /* scroll travel distance */
  background: var(--color-schist); /* Deep Otago Schist (#1C1C1C) */
}

/* Trailing spacer, same Otago Schist as the section and the footer beyond
   it — no seam to blend since all three now share one dark tone. */
.cta-scroll-fade {
  height: 220px;
  background: var(--color-schist);
}

.cta-scroll-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Poster fallback — the exact same image as canvas frame 1 (bungy jump
     platform, assets/CTA-bungy/). If the user scrolls into this section
     before the frame-sequence JS has finished loading/drawing, this shows
     instead of the section's raw dark background, so there's never a
     blank flash on arrival. */
  background-image: url('assets/CTA-bungy/frame_001.jpg');
  background-size: cover;
  background-position: center;
}

.cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}

/* End CTA overlay — absolutely centred */
.cta-overlay-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cta-overlay-content.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Scroll hint line — dead-centre of frame, fades on scroll */
.cta-scroll-hint {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 10;
  text-align: center;
  font-family: var(--font-display); /* Cormorant Garamond */
  font-size: clamp(22px, 3.2vw, 44px);
  font-weight: 700;
  font-style: normal;
  text-transform: none; /* sentence case */
  color: #FDFBF7; /* Koru Cream, entirely */
  letter-spacing: 0;
  margin: 0;
  padding: 0 5%;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0,0,0,0.85);
  transition: opacity 0.4s ease;
}

.cta-scroll-hint-accent {
  font-style: italic;
  font-weight: 700;
  color: #FDFBF7; /* same Koru Cream — italic is the only accent */
}

/* End-state CTA button — matches header style, larger. transform/opacity
   are still driven per-scroll-tick from JS (see index.js), but adding a
   transition here smooths the interpolation between those discrete steps
   into one slow, continuous grow-in rather than a snappy stepped one. */
.cta-end-btn {
  text-decoration: none;
  font-size: 14px !important;
  padding: 18px 56px !important;
  letter-spacing: 0.18em !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 768px) {
  .cta-scroll-section { height: 280vh; }

  /* Full phrase kept, scaled down via a vw-driven clamp so the single line
     still fits down to the smallest phone widths. */
  .cta-scroll-hint {
    font-size: clamp(11px, 4.8vw, 20px);
    white-space: nowrap;
    padding: 0 4%;
  }
}

/* ==========================================================================
   SECTION: CHOOSE YOUR ARRIVAL — one-screen date-window selector
   ========================================================================== */
/* ==========================================================================
   THE DISCOVERY LEDGER — unified multi-step preference engine
   Full-bleed Deep Otago Schist container hosting Steps I–IV + Curator Portal.
   ========================================================================== */
.ledger-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--margin-safe);
  text-align: center;
  box-sizing: border-box;
}

.ledger-header {
  margin-bottom: clamp(10px, 1.8vh, 22px);
}

.ledger-eyebrow {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #C6A87C;                      /* Champagne Gold */
  margin: 0;
}

/* ---- Steps: cross-fade, one visible at a time ------------------------------ */
.ledger-step {
  display: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ledger-step.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.ledger-step-roman {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.2em;
  color: #C6A87C;                      /* Champagne Gold */
  margin: 0 0 8px;
}

.ledger-step-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #FDFBF7;                      /* Koru Cream */
  margin: 0 0 clamp(28px, 5vh, 44px);
  line-height: 1.25;
}
.ledger-step:has(.ledger-grid--img) .ledger-step-heading {
  font-size: clamp(24px, 3vw, 38px);
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

/* Step I call-to-action glow — an unmissable, premium pulse that signals
   the guest still needs to choose a card. Removed the instant a card is
   selected, and correctly re-evaluated (off) if they return here having
   already chosen. Layered shadows build a real bloom (not a faint tint),
   the colour itself swings toward a hot amber-white at peak, and the
   brisk 1.4s cadence reads as urgency rather than ambient decoration. */
.ledger-step-heading.is-glowing {
  animation: ledgerStep1Glow 1.4s ease-in-out infinite;
}
@keyframes ledgerStep1Glow {
  0%, 100% {
    color: #C6A87C;
    text-shadow:
      0 0 10px rgba(198, 168, 124, 0.55),
      0 0 22px rgba(198, 168, 124, 0.35),
      0 0 44px rgba(198, 168, 124, 0.18);
  }
  50% {
    color: #FFE7B0;
    text-shadow:
      0 0 16px rgba(255, 231, 176, 0.95),
      0 0 40px rgba(230, 180, 110, 0.85),
      0 0 80px rgba(230, 180, 110, 0.55),
      0 0 130px rgba(198, 168, 124, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ledger-step-heading.is-glowing {
    animation: none;
    color: #FFE7B0;
    text-shadow:
      0 0 16px rgba(255, 231, 176, 0.9),
      0 0 44px rgba(230, 180, 110, 0.6);
  }
}
.ledger-step-heading:has(+ .ledger-step-hint) {
  margin-bottom: 6px;
}
.ledger-step-hint {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #C6A87C;                      /* Champagne Gold */
  margin: 0 0 clamp(14px, 2.4vh, 26px);
}

/* ---- Step IV: The Epicurean Canvas — two stacked multi-select tiers -------- */
.ledger-step--epicurean .ledger-step-heading {
  font-size: clamp(19px, 2.2vw, 28px);
  margin-bottom: 6px;
}
.ledger-step--epicurean .ledger-step-hint {
  margin-bottom: clamp(16px, 2.6vh, 26px);
}
.ledger-epicurean-tier {
  margin-bottom: clamp(16px, 2.6vh, 26px);
}
.ledger-epicurean-tier:last-of-type {
  margin-bottom: clamp(14px, 2vh, 20px);
}
.ledger-tier-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #FDFBF7;
  margin: 0 0 clamp(10px, 1.6vh, 16px);
}

/* ---- Step IV, Tier B: Dietary Imperative — circular icon selectors -------- */
.ledger-dietary-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 22px);
  max-width: 720px;
  margin: 0 auto;
}
.ledger-dietary-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 84px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
}
.ledger-dietary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2A4D53;                  /* Glacial Turquoise */
  color: #FDFBF7;                       /* icon stays Koru Cream in every state */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ledger-dietary-icon svg {
  width: 21px;
  height: 21px;
}
.ledger-dietary-opt:hover .ledger-dietary-icon {
  background: #345d64;
  transform: translateY(-2px);
}
.ledger-dietary-opt.is-selected .ledger-dietary-icon {
  background: #8B1E22;                  /* Pōhutukawa Crimson */
  box-shadow: 0 8px 22px rgba(139, 30, 34, 0.45);
}
.ledger-dietary-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(253, 251, 247, 0.8);
  text-align: center;
}
.ledger-dietary-opt.is-selected .ledger-dietary-label {
  color: #FDFBF7;
}

.ledger-dietary-custom {
  max-width: 480px;
  margin: clamp(20px, 3vh, 30px) auto 0;
  overflow: hidden;
  animation: ledgerCustomFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ledgerCustomFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ledger-dietary-custom-input {
  width: 100%;
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(253, 251, 247, 0.4);
  color: #FDFBF7;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 13px;
  text-align: center;
  transition: border-color 0.3s ease;
}
.ledger-dietary-custom-input::placeholder {
  color: rgba(253, 251, 247, 0.45);
}
.ledger-dietary-custom-input:focus {
  outline: none;
  border-bottom-color: #C6A87C;
}

/* ---- Option grids ----------------------------------------------------------- */
.ledger-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}
.ledger-grid--7 {
  grid-template-columns: repeat(4, 1fr);
}
.ledger-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 640px;
  margin: 0 auto;
}
.ledger-grid--img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 28px);
}

.ledger-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(90px, 14vh, 140px);
  padding: 18px 16px;
  border-radius: 14px;
  background: #2A4D53;                  /* Glacial Turquoise */
  color: #FDFBF7;
  border: 1px solid rgba(253, 251, 247, 0.5);
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.ledger-opt:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Image-card variant — Steps I & II. Photo fills the card, gradient overlay
   for label legibility, matching the visual language of the old ways-card. */
.ledger-opt--img {
  flex: 0 0 auto;
  width: calc(25% - 30px);
  min-height: clamp(180px, 18vh, 245px);
  padding: 0;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  background: #111;
  overflow: visible;
}
/* Deliberately no intermediate tablet tier here — 4-per-row is kept all
   the way down to the mobile breakpoint below, so a 7-card grid always
   wraps as a balanced 4+3 instead of an awkward 3+3+1 with an orphan
   card on its own row. */
@media (max-width: 640px) {
  .ledger-opt--img { min-height: clamp(180px, 26vh, 260px); }
}
.ledger-opt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ledger-opt--img:hover .ledger-opt-img {
  transform: scale(1.06);
}
.ledger-opt-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 85%);
  pointer-events: none;
}
.ledger-opt-label {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 16px 16px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #FDFBF7;
  text-align: left;
}
@media (max-width: 1200px) {
  .ledger-opt-label { font-size: clamp(14px, 1.6vw, 18px); padding: 14px 14px 12px; }
}
.ledger-opt--img:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* Title + descriptive sub-line inside an image-card label (Step IV cards) */
.ledger-opt-label-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
}
.ledger-opt-label-sub {
  display: block;
  margin-top: 3px;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: rgba(253, 251, 247, 0.72);
}

/* Step III — 3 bigger image cards, filling the row to match the visual
   weight of the other steps' image-card treatment. Kept to one row all
   the way down to the mobile breakpoint — never wraps 2+1. */
.ledger-grid--hotel .ledger-opt--img {
  width: calc(33.333% - 26px);
  min-height: clamp(210px, 22vh, 270px);
}
@media (max-width: 768px) {
  .ledger-grid--hotel .ledger-opt--img { width: calc(33.333% - 14px); min-height: clamp(150px, 22vh, 210px); }
}
@media (max-width: 640px) {
  .ledger-grid--hotel .ledger-opt--img { width: 100%; }
}

/* ── Classic-tier reveal capsule ──
   Appears only when the Classic card is chosen: a hairline divider draws
   left-to-right, a quiet burst of Koru Cream / Champagne Gold confetti
   marks the moment, then the reward copy stomps into place word by word
   like a stamp landing and settling. Sequenced entirely via
   initClassicReveal() in index.js. */
.ledger-classic-reveal {
  position: relative;
  overflow: hidden;
  max-width: 640px;
  margin: clamp(18px, 2.8vh, 28px) auto 0;
  padding: clamp(14px, 2vh, 20px) clamp(18px, 2.6vw, 26px);
  background: rgba(198, 168, 124, 0.06);
  border: 1px solid rgba(198, 168, 124, 0.16);
  border-radius: 10px;
}

.ledger-classic-reveal-divider {
  display: block;
  height: 1px;
  width: 100%;
  background: #C6A87C;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
  margin-bottom: clamp(12px, 1.8vh, 16px);
}
.ledger-classic-reveal-divider.is-drawn {
  transform: scaleX(1);
}

.ledger-classic-reveal-text {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: 'Avenir Next Arabic', 'Avenir Next', 'Avenir', sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: rgba(253, 251, 247, 0.85);
}

@media (max-width: 640px) {
  .ledger-classic-reveal {
    padding: 12px 14px;
  }
  .ledger-classic-reveal-text {
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }
}

/* Custom-quote intercept — a quiet, minimal alternative to the reward
   capsule for Luxury / custom-arrival selections that can't carry a fixed
   price anchor. No confetti, no glow, just a clear next step. */
.ledger-custom-quote-reveal {
  max-width: 640px;
  margin: clamp(18px, 2.8vh, 28px) auto 0;
  text-align: center;
}
.ledger-custom-quote-btn {
  display: inline-block;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid rgba(198, 168, 124, 0.5);
  border-radius: 999px;
  font-family: 'Avenir Next Arabic', 'Avenir Next', 'Avenir', sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #C6A87C;
  cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.ledger-custom-quote-btn:hover,
.ledger-custom-quote-btn:focus-visible {
  background-color: rgba(198, 168, 124, 0.1);
  border-color: #C6A87C;
}
@media (max-width: 640px) {
  .ledger-custom-quote-btn {
    padding: 12px 20px;
    font-size: 11px;
  }
}

/* Reward stomp — each word lands oversized and slightly off-balance, then
   snaps down through a small overshoot into its final resting size, like a
   stamp hitting the page and locking in (rather than a soft, passive fade). */
.ledger-reveal-word {
  display: inline-block;
  opacity: 0;
  transform: scale(1.5) translateY(-5px);
  animation: ledgerRevealWordStomp 550ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--word-delay, 0ms);
  will-change: opacity, transform;
}
@keyframes ledgerRevealWordStomp {
  /* opacity is explicitly repeated at every stop, not left to implicit
     carry-forward — this Electron/Chromium build was observed to silently
     freeze the whole property at its 0% value when a later keyframe (80%,
     100%) redefines a sibling property (transform) without re-stating it. */
  0%   { opacity: 0; transform: scale(1.5) translateY(-5px); }
  55%  { opacity: 1; transform: scale(0.94) translateY(0); }
  80%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

.ledger-price-glow {
  display: inline-block;
  color: #2A4D53;
  animation: ledgerPriceGlow 500ms ease-out forwards;
  animation-delay: var(--word-delay, 0ms);
  will-change: color, text-shadow;
}
@keyframes ledgerPriceGlow {
  0%   { color: #2A4D53; text-shadow: none; }
  100% { color: #C6A87C; text-shadow: 0 0 6px rgba(198, 168, 124, 0.25); }
}

/* Currency picker — a small pill sitting right of the price figure so a
   visitor can re-anchor the reward line to their own local currency. */
.ledger-currency-picker {
  display: inline-flex;
  vertical-align: middle;
  opacity: 0;
  animation: ledgerPickerFade 400ms ease forwards;
  animation-delay: var(--word-delay, 0ms);
  margin: 0 2px;
}
@keyframes ledgerPickerFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.ledger-currency-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Avenir Next Arabic', 'Avenir Next', 'Avenir', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #C6A87C;
  background: rgba(198, 168, 124, 0.1);
  border: 1px solid rgba(198, 168, 124, 0.4);
  border-radius: 999px;
  padding: 2px 16px 2px 8px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #C6A87C 50%), linear-gradient(135deg, #C6A87C 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.ledger-currency-select:hover,
.ledger-currency-select:focus {
  background-color: rgba(198, 168, 124, 0.18);
  outline: none;
}
.ledger-currency-select option {
  background: #1B2E30;
  color: #FDFBF7;
}

/* Confetti burst — a small, tasteful pop of Koru Cream and Champagne Gold
   pieces timed to the divider completing, not a cartoonish shower. */
.ledger-classic-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ledger-confetti-piece {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--size, 5px);
  height: var(--size, 5px);
  background: var(--piece-color, #C6A87C);
  border-radius: var(--radius, 1px);
  opacity: 0;
  transform: translate(-50%, -10px) rotate(0deg) scale(0.6);
  animation: ledgerConfettiFall var(--fall-duration, 1100ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--piece-delay, 0ms);
}
@keyframes ledgerConfettiFall {
  0%   { opacity: 0; transform: translate(-50%, -10px) rotate(0deg) scale(0.6); }
  14%  { opacity: 1; }
  75%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift, 0px)), var(--fall-y, 70px)) rotate(var(--rot, 180deg)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-classic-reveal-divider,
  .ledger-reveal-word,
  .ledger-price-glow,
  .ledger-currency-picker {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .ledger-price-glow {
    color: #C6A87C;
    text-shadow: 0 0 6px rgba(198, 168, 124, 0.25);
  }
  .ledger-classic-confetti {
    display: none;
  }
}

/* Step III — Epicurean Canvas cards. Sized generously on desktop (3 per
   row) so even the longest title ("The Alchemist's Pour") sits on one
   line; steps down to 2 per row on tablet/mobile with a title size tuned
   to still hold a single line at that width, without needing to be as
   large as the desktop treatment. */
.ledger-grid--epicurean {
  gap: clamp(10px, 1.1vw, 20px);
}
.ledger-grid--epicurean .ledger-opt--img {
  width: calc(33.333% - 18px);
  min-height: clamp(220px, 24vh, 290px);
}
@media (max-width: 980px) {
  .ledger-grid--epicurean .ledger-opt--img { width: calc(50% - 12px); min-height: clamp(180px, 22vh, 230px); }
}
@media (max-width: 640px) {
  .ledger-grid--epicurean .ledger-opt--img { width: calc(50% - 8px); min-height: clamp(160px, 24vh, 230px); }
}
.ledger-grid--epicurean .ledger-opt-label {
  padding: 16px 16px 14px;
  font-size: clamp(17px, 1.6vw, 22px);
}
.ledger-grid--epicurean .ledger-opt-label-title {
  white-space: nowrap;
}
.ledger-grid--epicurean .ledger-opt-label-sub {
  display: block;
  font-size: 0.58em;
}
@media (max-width: 980px) {
  .ledger-grid--epicurean .ledger-opt-label { font-size: clamp(13px, 1.8vw, 15px); padding: 12px 12px 10px; }
  .ledger-grid--epicurean .ledger-opt-label-sub { font-size: 0.64em; }
}
@media (max-width: 640px) {
  .ledger-grid--epicurean .ledger-opt-label { font-size: 12.5px; padding: 10px 10px 9px; }
}

/* Single-select steps (I, III, IV) — crimson fill + rotating gold shimmer,
   matching the site's established selected-card language. */
@property --ledger-ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ledger-opt.is-selected {
  background: #8B1E22;                  /* Pōhutukawa Crimson */
  border-color: rgba(253, 251, 247, 0.9);
  transform: translateY(-3px);
  --ledger-ring-angle: 0deg;
  animation: ledgerSelectedPulse 2.8s ease-in-out infinite;
}
.ledger-opt.is-selected::before,
.ledger-opt.is-selected::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}
.ledger-opt.is-selected::before {
  inset: -3px;
  padding: 2px;
  background: conic-gradient(from var(--ledger-ring-angle),
    transparent 0deg,
    rgba(253, 251, 247, 0.95) 22deg,
    rgba(230, 200, 138, 1) 42deg,
    rgba(198, 168, 124, 0.85) 62deg,
    transparent 108deg,
    transparent 252deg,
    rgba(198, 168, 124, 0.85) 298deg,
    rgba(230, 200, 138, 1) 318deg,
    rgba(253, 251, 247, 0.95) 338deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(198, 168, 124, 0.55));
  animation: ledgerRingSpin 2.6s linear infinite;
}
.ledger-opt.is-selected::after {
  inset: -12px;
  background:
    radial-gradient(circle at 0% 0%,   rgba(198, 168, 124, 0.5), transparent 58%),
    radial-gradient(circle at 100% 0%, rgba(198, 168, 124, 0.5), transparent 58%),
    radial-gradient(circle at 0% 100%, rgba(198, 168, 124, 0.5), transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(198, 168, 124, 0.5), transparent 58%);
  filter: blur(7px);
  opacity: 0.4;
  animation: ledgerCornerGlow 2.8s ease-in-out infinite;
}
@keyframes ledgerRingSpin { to { --ledger-ring-angle: 360deg; } }
@keyframes ledgerCornerGlow { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.8; } }
@keyframes ledgerSelectedPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(139, 30, 34, 0.4), 0 0 16px rgba(198, 168, 124, 0.2); }
  50%      { box-shadow: 0 18px 42px rgba(139, 30, 34, 0.46), 0 0 30px rgba(198, 168, 124, 0.5); }
}

/* Multi-select step (II) — explicit 1px Glacial Turquoise border stroke */
.ledger-opt--multi.is-selected {
  background: #23424a;
  border: 1px solid #2A4D53;
  box-shadow: 0 0 0 1px #2A4D53, 0 10px 26px rgba(42, 77, 83, 0.4);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .ledger-opt.is-selected,
  .ledger-opt.is-selected::before,
  .ledger-opt.is-selected::after {
    animation: none;
  }
}

.ledger-proceed-btn,
.ledger-submit-btn {
  display: inline-block;
  margin-top: clamp(16px, 3vh, 32px);
  padding: 16px 44px;
  background: transparent;
  color: #FDFBF7;
  border: 1px solid rgba(253, 251, 247, 0.5);
  border-radius: 2px;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ledger-proceed-btn:hover,
.ledger-submit-btn:hover {
  background: #C6A87C;
  color: #1C1C1C;
  border-color: #C6A87C;
  transform: translateY(-2px);
}

/* ---- Step IV split pane: horizon choices + Auckland map ------------------- */
.ledger-step--split.is-active {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  text-align: left;
}
.ledger-step--split .ledger-step-roman,
.ledger-step--split .ledger-step-heading {
  text-align: left;
}
.ledger-step--split .ledger-grid--3 {
  margin: 0;
}

.ledger-split-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 280px;
}
.ledger-airport-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  background: rgba(253, 251, 247, 0.03);
  border: 1px solid rgba(253, 251, 247, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.ledger-airport-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ledger-airport-caption {
  font-family: 'Avenir Next', 'Avenir', -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C6A87C;
  text-align: center;
}

@media (max-width: 768px) {
  .ledger-airport-caption {
    font-size: clamp(9px, 2.7vw, 12px);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .ledger-airport-video {
    /* Narrow portrait crop otherwise centres past the left side of frame —
       left-align so it stays visible instead of getting cropped off. */
    object-position: left center;
  }
}

.ledger-opt--custom {
  position: relative;
}
/* Native date picker anchor — present in DOM, visually hidden; opened via showPicker() */
.ledger-date-input {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

/* Arrival city — small chooser revealed once Custom Arrival is opened */
.ledger-arrival-city {
  max-width: 480px;
  margin: clamp(16px, 2.4vh, 24px) auto 0;
  animation: ledgerCustomFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ledger-arrival-city-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.55);
  text-align: center;
  margin-bottom: 10px;
}
.ledger-arrival-city-opts {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ledger-city-opt {
  font-family: 'Avenir Next', 'Avenir', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(253, 251, 247, 0.8);
  background: rgba(253, 251, 247, 0.04);
  border: 1px solid rgba(253, 251, 247, 0.18);
  border-radius: 999px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ledger-city-opt:hover {
  border-color: rgba(253, 251, 247, 0.4);
  transform: translateY(-1px);
}
.ledger-city-opt.is-selected {
  background: #8B1E22;
  border-color: rgba(253, 251, 247, 0.9);
  color: #FDFBF7;
}

/* ---- Curator Portal --------------------------------------------------------- */
.ledger-curator {
  text-align: center;
}
.ledger-curator-images {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: clamp(28px, 4vh, 40px);
}
.ledger-curator-img-ph {
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(198, 168, 124, 0.18), rgba(253, 251, 247, 0.05));
  border: 1px solid rgba(198, 168, 124, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ledger-curator-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.ledger-curator-copy {
  max-width: 560px;
  margin: 0 auto clamp(28px, 4vh, 40px);
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(253, 251, 247, 0.75);
}
.ledger-curator-copy-strong {
  font-weight: 700;
  color: #C6A87C;                      /* Champagne Gold */
}
.ledger-curator-urgency {
  font-weight: 700;
  color: #C6A87C;                      /* Champagne Gold */
}
/* ---- Curator portal: choice summary + copy-to-clipboard -------------------- */
.ledger-summary {
  max-width: 460px;
  margin: 0 auto clamp(24px, 4vh, 36px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 32px);
  border: 1px solid rgba(198, 168, 124, 0.35);
  border-radius: 10px;
  background: rgba(28, 28, 28, 0.55);
  backdrop-filter: blur(6px);
  text-align: left;
}
/* Reference ticket — a passport-stamp-style badge sitting above the rest
   of the summary, giving the plan a tangible, bookable identity. */
.ledger-summary-ticket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 4px 0 clamp(16px, 2.6vh, 24px);
  margin-bottom: clamp(14px, 2.2vh, 20px);
  border-bottom: 1px dashed rgba(198, 168, 124, 0.4);
}
.ledger-summary-ticket-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.55);
}
.ledger-summary-ticket-code {
  font-family: 'Avenir Next', 'Avenir', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.06em;
  color: #C6A87C;
  text-shadow: 0 0 18px rgba(198, 168, 124, 0.35);
}

.ledger-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(253, 251, 247, 0.1);
}
.ledger-summary-row:first-child {
  padding-top: 0;
}
.ledger-summary-row:last-of-type {
  border-bottom: none;
}
.ledger-summary-label {
  flex: 0 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C6A87C;
}
.ledger-summary-value {
  flex: 1 1 auto;
  text-align: right;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #FDFBF7;
}

/* "Experiences" and "Food and Drink Preferences" — tag-based readouts
   inside the summary card, headed like the other Cormorant labels. */
.ledger-summary-block {
  padding: 14px 0;
  border-bottom: 1px solid rgba(253, 251, 247, 0.1);
}
.ledger-summary-epicurean {
  padding: 14px 0;
  border-bottom: 1px solid rgba(253, 251, 247, 0.1);
}
.ledger-summary-epicurean-heading {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C6A87C;
  margin-bottom: 10px;
}
.ledger-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ledger-summary-tags--dietary {
  margin-top: 8px;
}
.ledger-summary-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(253, 251, 247, 0.08);
  border: 1px solid rgba(253, 251, 247, 0.18);
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FDFBF7;
}
.ledger-summary-tag--dietary {
  text-transform: none;
  letter-spacing: 0.01em;
  background: rgba(42, 77, 83, 0.35);
  border-color: rgba(253, 251, 247, 0.12);
}
.ledger-summary-tag--dietary svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #FDFBF7;
}
.ledger-summary-fallback {
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 12.5px;
  font-style: italic;
  color: rgba(253, 251, 247, 0.55);
}
.ledger-summary-exclusions {
  margin: 10px 0 0;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(253, 251, 247, 0.6);
}
.ledger-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: clamp(16px, 2.4vh, 24px);
  padding: 13px 20px;
  background: transparent;
  border: 1px solid rgba(198, 168, 124, 0.6);
  border-radius: 4px;
  color: #C6A87C;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ledger-copy-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.ledger-copy-btn:hover {
  background: rgba(198, 168, 124, 0.1);
  border-color: #C6A87C;
}
.ledger-copy-btn.is-copied {
  background: rgba(198, 168, 124, 0.18);
  border-color: #C6A87C;
  color: #FDFBF7;
}

.ledger-whatsapp-btn {
  display: inline-block;
  padding: 18px 48px;
  background-color: #2A4D53;            /* Glacial Turquoise idle */
  color: #FDFBF7;
  border: 1px solid #FDFBF7;
  border-radius: 2px;
  font-family: 'Avenir Next Arabic', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
}
.ledger-whatsapp-btn:hover,
.ledger-whatsapp-btn:focus-visible {
  background-color: #8B1E22;            /* Crimson red hover */
  box-shadow: 0 4px 18px rgba(139, 30, 34, 0.55);
  transform: translateY(-2px);
}

/* ---- Progress row: thin Koru Cream roman numerals, gold glow when active -- */
.ledger-progress {
  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 6vh, 64px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.ledger-progress-num {
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: rgba(253, 251, 247, 0.4);      /* thin Koru Cream */
  transition: color 0.4s ease, text-shadow 0.4s ease, font-size 0.4s ease, font-weight 0.4s ease, transform 0.4s ease;
  cursor: default;
}
.ledger-progress-num.is-active {
  color: #C6A87C;                      /* Champagne Gold */
  font-weight: 700;
  font-size: 19px;
  transform: translateY(-1px) scale(1.08);
  text-shadow: 0 0 6px rgba(198, 168, 124, 0.95), 0 0 20px rgba(198, 168, 124, 0.75);
}
.ledger-progress-num.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C6A87C;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(198, 168, 124, 0.9);
}
.ledger-progress-num.is-done {
  color: rgba(253, 251, 247, 0.75);
  cursor: pointer;
}
.ledger-progress-sep {
  color: rgba(253, 251, 247, 0.25);
  font-size: 12px;
}

@media (max-width: 768px) {
  .ledger-grid--7 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ledger-step--split.is-active {
    grid-template-columns: 1fr;
  }
  .ledger-split-right {
    order: -1;
    min-height: 200px;
  }
  .ledger-step--split .ledger-step-roman,
  .ledger-step--split .ledger-step-heading {
    text-align: center;
  }
  .ledger-step-heading {
    font-size: clamp(24px, 7vw, 32px);
  }
}

/* ==========================================================================
   SECTION 8.75: SPEAK WITH ONE OF OUR CURATORS — full-bleed image CTA
   ========================================================================== */
.family-cta-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1C1C1C;                 /* Deep Otago Schist — blends with neighbours */
  padding: clamp(52px, 8vw, 120px) 0;  /* breathing room top & bottom, no tight sandwich */
  margin-top: -130px;                  /* tighten gap under the journey section's fade */
  z-index: 1;
}

.family-cta-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.family-cta-bg {
  display: block;
  width: 100%;
  height: auto;                        /* entire image always visible */
}

/* Fade the image edges into the dark section padding — smooth, no hard cutouts */
.family-cta-frame::before,
.family-cta-frame::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;
}

.family-cta-frame::before {
  top: 0;
  height: 32%;
  background: linear-gradient(to bottom, #1C1C1C 0%, rgba(28,28,28,0.35) 45%, transparent 100%);
}

.family-cta-frame::after {
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, #1C1C1C 0%, rgba(28,28,28,0.55) 38%, rgba(28,28,28,0.15) 74%, transparent 100%);
}

.family-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;           /* bottom-anchored composition, per reference */
  text-align: center;
  padding: 0 24px clamp(26px, 4.5vw, 60px);
}

/* Arrival banner — appears at the top of the CTA when a date/window is chosen */
.family-cta-arrival {
  position: absolute;
  top: clamp(20px, 4.5vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C6A87C;                      /* Champagne Gold */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 4;
}

.family-cta-arrival.visible {
  opacity: 1;
}

.family-cta-arrival[hidden] {
  display: none;
}

/* Default prompt — shown only while no arrival window is selected; loops a
   soft disappear/reappear so it invites a click without feeling intrusive. */
.family-cta-default-prompt {
  position: absolute;
  top: clamp(20px, 4.5vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #C6A87C;                      /* Champagne Gold */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  z-index: 4;
  animation: ctaDefaultPromptPulse 3.4s ease-in-out infinite;
  transition: color 0.3s ease;
}

.family-cta-default-prompt:hover,
.family-cta-default-prompt:focus-visible {
  color: #FDFBF7;                      /* Koru Cream on hover */
  outline: none;
}

.family-cta-default-prompt.is-hidden {
  display: none;
}

@keyframes ctaDefaultPromptPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.12; }
}

@media (prefers-reduced-motion: reduce) {
  .family-cta-default-prompt {
    animation: none;
    opacity: 1;
  }
}

.family-cta-text {
  max-width: 92vw;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.family-cta-subheader {
  font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FDFBF7;                      /* Koru Cream */
  margin: 0 0 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.75);
}

.family-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4.6vw, 58px);
  font-weight: 300;
  color: #FDFBF7;                      /* Koru Cream */
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  white-space: nowrap;                 /* keep on a single line */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 0, 0, 0.5);
}

.family-cta-socials {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
  justify-content: center;
}

/* Frosted-glass emblem — Koru Cream icon, bright idle / dimmer hover-click. */
.family-cta-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 4.8vw, 56px);
  height: clamp(40px, 4.8vw, 56px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #FDFBF7;                       /* Koru Cream — bright idle icon colour */
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.family-cta-social:hover,
.family-cta-social:focus-visible,
.family-cta-social:active {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(253, 251, 247, 0.55);     /* Koru Cream, dark/dim shade on hover-click */
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-3px);
}

.family-cta-social svg {
  width: 46%;
  height: 46%;
  display: block;
}

/* Mobile: a landscape image is too short to hold the overlay, so switch to a
   taller portrait container. object-fit:cover then crops only the sides —
   the full sky→couple→foreground vertical range stays visible for the overlay. */
@media (max-width: 768px) {
  .family-cta-section {
    padding: 40px 0;
    margin-top: -20px;
  }
  .family-cta-frame {
    min-height: 78vh;
  }
  .family-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .family-cta-overlay {
    padding: 0 12px 11%;
  }
  .family-cta-title {
    font-size: clamp(19px, 6.2vw, 34px);
    line-height: 1.1;
    white-space: nowrap;               /* keep on a single line */
  }
  .family-cta-subheader {
    font-size: clamp(10px, 3vw, 13px);
    letter-spacing: 0.18em;
    white-space: nowrap;               /* keep on a single line */
  }
  .family-cta-socials {
    gap: clamp(18px, 5vw, 26px);       /* more breathing room between icons */
  }
}

/* Footer Container — sits directly below the dark CTA, same schist background, no hard border needed */
.footer-container {
  background-color: var(--color-schist);
  color: var(--color-cream);
  position: relative;
  z-index: 10; /* Raise stacking context to overlay pinned CTA components cleanly */
  border-top: none;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px var(--margin-safe) 80px;
}

.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
  margin-bottom: 40px;
}

.footer-brand {
  max-width: 480px;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
}

.footer-nz-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex-shrink: 0;
  margin-top: 24px;
}

.footer-nz-logo-img {
  height: 48px;
  width: auto;
  opacity: 0.9;
  display: block;
}

.logo-credit {
  font-size: 10px;
  color: rgba(250, 248, 245, 0.4);
  margin-top: 8px;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: 220px;
}

.footer-divider {
  height: 1px;
  background-color: rgba(250, 248, 245, 0.1);
  margin-bottom: 40px;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.footer-info {
  font-size: 12px;
  color: rgba(250, 248, 245, 0.5);
  line-height: 1.6;
  font-weight: 300;
}

.footer-location {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(250, 248, 245, 0.7);
  margin-bottom: 8px;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(250, 248, 245, 0.4);
  line-height: 1.6;
}

.footer-secondary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(250, 248, 245, 0.6);
}

.footer-secondary-nav a:hover {
  color: var(--color-turquoise);
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250, 248, 245, 0.22);
  border-radius: 50%;
  color: var(--color-cream);
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.footer-social-link:hover {
  color: var(--color-schist);
  background-color: var(--color-cream);
  border-color: var(--color-cream);
  transform: translateY(-2px);
}


/* ==========================================================================
   SECTION 6.5: GUEST STORIES SECTION
   ========================================================================== */
.stories-section {
  padding: var(--section-gap) 0 var(--section-gap);
  background-color: var(--color-cream);
  position: relative;
  overflow: hidden;
}

.stories-header {
  max-width: 800px;
  margin: 0 auto 48px;
  padding: 0 var(--margin-safe);
}

.stories-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  color: var(--color-schist);
  margin-bottom: 16px;
}

.stories-subtitle {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(28, 28, 28, 0.7);
  line-height: 1.6;
  font-weight: 300;
}

@media (max-width: 768px) {
  .stories-title {
    font-size: clamp(22px, 7.4vw, 32px);
    white-space: nowrap;
  }
}

.stories-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* wrapper now contains only buttons + track — dots are outside */
}

.stories-track-wrapper {
  overflow: visible;
  padding: 24px 0;
}

.stories-track {
  display: flex;
  gap: 32px;
  overflow: visible;
  scrollbar-width: none;
  cursor: grab;
  will-change: transform;
}

.stories-track::-webkit-scrollbar {
  display: none;
}

.stories-track:active {
  cursor: grabbing;
}

.stories-card {
  flex: 0 0 clamp(300px, 45vw, 540px);
  min-height: 380px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.62;
  transform: scale(0.93);
  border: 1px solid rgba(250, 248, 245, 0.15);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card 1 (Rajesh Patel) → review/2.jpg */
.stories-card:nth-child(1) {
  background-image: linear-gradient(to bottom, rgba(15, 30, 35, 0.42) 0%, rgba(15, 30, 35, 0.72) 100%), url('assets/review/2.jpg');
  background-size: cover;
  background-position: center;
}

/* Card 2 (Sarah & Michael Thompson) → review/1.jpg */
.stories-card:nth-child(2) {
  background-image: linear-gradient(to bottom, rgba(15, 30, 35, 0.42) 0%, rgba(15, 30, 35, 0.72) 100%), url('assets/review/1.jpg');
  background-size: cover;
  background-position: center;
}

/* Card 3 (Emma Chu) → review/3.jpg */
.stories-card:nth-child(3) {
  background-image: linear-gradient(to bottom, rgba(15, 30, 35, 0.42) 0%, rgba(15, 30, 35, 0.72) 100%), url('assets/review/3.jpg');
  background-size: cover;
  background-position: center;
}

/* 2.5D shadow overlay on non-active cards */
.stories-card {
  position: relative;
}

.stories-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.stories-card.active::after {
  opacity: 0;
}

/* All card content sits above the shadow overlay */
.stories-card > * {
  position: relative;
  z-index: 2;
}

.stories-card.active {
  opacity: 1;
  transform: scale(1.02);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  border-color: rgba(250, 248, 245, 0.3);
  z-index: 5;
}

.stories-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.stories-quote-icon {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--color-cream); /* Koru Cream quote marks */
  margin-top: -15px;
  font-weight: 600;
}

.stories-stars {
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--color-turquoise); /* Glacial Turquoise stars */
  text-shadow: 0 0 1px #FFFFFF;
  -webkit-text-stroke: 1px #FFFFFF; /* White border */
}

.stories-quote {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  font-style: italic;
  color: var(--color-cream); /* Koru Cream text */
  margin-bottom: 32px;
}

.stories-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.story-author {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-cream); /* Koru Cream text */
}

.story-details {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: rgba(250, 248, 245, 0.75); /* Muted Koru Cream */
  opacity: 0.85;
}

.stories-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.stories-progress-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(28, 28, 28, 0.2);
  transition: background-color 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}

.stories-progress-dot.active {
  background-color: #2A4D53;
  transform: scale(1.3);
}


/* ==========================================================================
   11. RESPONSIVE BREAKPOINTS — TABLET (max 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --section-gap: 100px;
  }

  /* Ethos Section — tablet */
  .ethos-slide {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ethos-side-btn {
    width: 40px;
    height: 40px;
  }

  .ethos-title {
    white-space: normal;
    font-size: clamp(30px, 5vw, 48px);
  }

  /* Curator — tablet: handled by bifold mobile block */

  .matrix-grid.active {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }


  /* Logistics */
  .logistics-container {
    padding: 100px var(--margin-safe) 100px;
  }

  .logistics-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .logistics-divider {
    display: none !important;
  }

  .logistics-pillar {
    padding: 24px 0 0 0 !important;
    border-top: 1px solid rgba(28, 28, 28, 0.15);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .logistics-pillar:first-child,
  #pillar-1 {
    border-top: none;
    padding-top: 0 !important;
  }

  .logistics-pillar:hover {
    border-top-color: #8A1C14;
  }
}


/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS — MOBILE (max 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --section-gap: 72px;
  }

  /* Nav */
  .anti-nav {
    padding: 12px var(--margin-safe) 8px !important;
  }

  .anti-nav.scrolled {
    padding: 10px var(--margin-safe) 6px !important;
  }

  .nav-container {
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: space-between;
    align-items: center;
  }

  .nav-logo {
    flex: 1 1 auto;
    order: 1;
  }
  .nav-logo a {
    font-size: 20px !important;
  }

  .nav-cta {
    flex: 0 0 auto;
    order: 2;
  }
  .nav-cta .btn-whatsapp.btn-outline {
    padding: 8px 16px !important;
    font-size: 11px !important;
  }

  .nav-links {
    display: flex !important;
    flex: 1 0 100%;
    justify-content: center;
    gap: 14px;
    border-top: 1px solid rgba(250, 248, 245, 0.15);
    padding-top: 8px;
    margin-top: 4px;
    order: 3;
  }

  .nav-item {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* Hero */
  .hero-content {
    padding: 0 16px;
  }

  /* Ways — mobile: natural stacked layout, no scroll trap */
  #experience-section {
    position: relative;
    height: auto;
    overflow: visible;
    padding: 72px 0 24px;
  }

  .ledger-opt--img {
    width: 100%;
  }

  /* Horizontal marquee section */
  .ethos-title {
    white-space: normal;
    font-size: clamp(26px, 7vw, 36px);
  }

  /* Ethos section — mobile */
  .ethos-slide {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ethos-side-btn {
    width: 36px;
    height: 36px;
  }

  .ethos-chapter-nav {
    gap: 20px;
    margin-top: 36px;
  }

  .carousel-nav-btn {
    width: 40px !important;
    height: 40px !important;
    background: rgba(28, 28, 28, 0.06) !important;
    border: 1px solid rgba(28, 28, 28, 0.28) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    color: #1C1C1C !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  }

  .carousel-nav-btn:hover {
    background: rgba(28, 28, 28, 0.12) !important;
    border-color: rgba(28, 28, 28, 0.45) !important;
  }

  .carousel-nav-btn:active {
    background: rgba(28, 28, 28, 0.16) !important;
    border-color: rgba(28, 28, 28, 0.55) !important;
  }

  .carousel-nav-btn svg,
  .carousel-nav-btn svg path {
    stroke: #1C1C1C !important;
  }

  .carousel-nav-btn.prev {
    left: 6px !important;
  }

  .carousel-nav-btn.next {
    right: 6px !important;
  }

  /* Ways to travel — stale rules cleared; current layout handled above */
  .segment-selector {
    flex-direction: column;
    gap: 8px;
    margin: 0 16px 24px;
  }

  .segment-tab {
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  /* .ways-card height and .ways-carousel-outer padding-bottom removed —
     superseded by the scroll-snap layout block above */

  /* Curator — mobile: handled by bifold mobile block */

  /* Logistics */
  .logistics-container {
    padding: 64px var(--margin-safe) 64px !important;
  }

  .logistics-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .logistics-divider {
    display: none !important;
  }

  .logistics-pillar {
    border-top: 1px solid rgba(28, 28, 28, 0.15);
    padding: 20px 0 0 0 !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .logistics-pillar:first-child,
  #pillar-1 {
    border-top: none;
    padding-top: 0 !important;
  }

  .logistics-pillar:hover {
    border-top-color: #8A1C14;
  }

  /* Footer */
  .footer-top-row {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
  }

  .footer-nz-logo {
    align-items: flex-start;
    text-align: left;
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-secondary-nav {
    flex-direction: column;
    gap: 16px;
  }

  /* Trust metrics */
  .trust-metrics-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  /* Progress dots hidden on mobile — cards stack vertically */
  .ethos-progress {
    display: none;
  }
}

/* ── Desktop: video + experience section, roomy enough for the Discovery Ledger ── */
@media (min-width: 769px) {
  .Horizontal {
    min-height: 100vh;
    height: auto;
    padding: 64px 0;
    justify-content: center;
  }

  .ways-section {
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
  }
}

/* ── Curator's Chamber Lore Slideshow ── */
.chamber-lore-section {
  background: #FAF8F5;
  padding: 80px 0 60px;
  overflow: hidden;
}

.chamber-lore-header {
  max-width: 800px;
  margin: 0 auto 48px;
  padding: 0 var(--margin-safe);
  text-align: center;
}

.chamber-lore-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #8B1E22;
  margin-bottom: 14px;
}

.chamber-lore-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.chamber-lore-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.chamber-lore-track {
  display: flex;
  flex-direction: row;
  gap: 32px;
  padding-bottom: 16px;
  overflow: visible;
  width: max-content;
  will-change: transform;
}

.chamber-card {
  position: relative;
  flex-shrink: 0;
  width: clamp(300px, 45vw, 540px);
  height: auto;
  min-height: 540px;
  background: #111;
  border: 1px solid rgba(250, 248, 245, 0.06);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0.62;
  transform: scale(0.93);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.chamber-card.active {
  opacity: 1;
  transform: scale(1.02);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
  z-index: 5;
}

/* Shadow overlay — dims inactive cards */
.chamber-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 3;
}

.chamber-card.active::after {
  opacity: 0;
}

/* Ensure card content sits above shadow overlay */
.chamber-card-bg,
.chamber-card-content {
  z-index: 2;
}

.chamber-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.chamber-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(28,28,28,0.96) 0%, rgba(28,28,28,0.45) 55%, transparent 100%);
  transition: background 0.5s ease;
}

.chamber-card:hover .chamber-card-overlay {
  background: linear-gradient(to top, rgba(28,28,28,0.97) 0%, rgba(28,28,28,0.70) 65%, transparent 100%);
}

.chamber-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.0);
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.chamber-card:hover .chamber-card-img {
  transform: scale(1.06);
}

.chamber-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.chamber-card:hover .chamber-card-content {
  transform: translateY(-10px);
}

.chamber-card-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C6A87C;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chamber-card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  color: #FAF8F5;
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chamber-card-body {
  font-family: 'Avenir Next', 'Avenir', -apple-system, sans-serif;
  font-size: 11px;
  line-height: 1.80;
  color: rgba(250, 248, 245, 0.80);
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.chamber-card:hover .chamber-card-body,
.chamber-card.revealed .chamber-card-body {
  max-height: 220px;
  opacity: 1;
}

.chamber-card.revealed .chamber-card-content {
  transform: translateY(-10px);
}

.chamber-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.chamber-progress-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(28, 28, 28, 0.2);
  transition: background-color 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}

.chamber-progress-dot.active {
  background-color: #2A4D53;
  transform: scale(1.3);
}

/* ── Historical Chronicles Section ── */
.hist-section {
  background: #FAF8F5;
  padding: 60px 0 48px;
  overflow: hidden;
}

.hist-header {
  max-width: 800px;
  margin: 0 auto 36px;
  padding: 0 var(--margin-safe);
  text-align: center;
}

.hist-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #2A4D53;
  margin-bottom: 14px;
}

.hist-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 300;
  color: #1C1C1C;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hist-title-accent {
  font-style: italic;
  color: #8B1E22;
}

.hist-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hist-track {
  display: flex;
  flex-direction: row;
  gap: 32px;
  padding-bottom: 16px;
  overflow: visible;
  width: max-content;
  will-change: transform;
}

.hist-card {
  position: relative;
  flex-shrink: 0;
  /* Sized to match the Curator's Chamber / Local Lore cards. */
  width: clamp(300px, 45vw, 540px);
  height: auto;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(198, 168, 124, 0.14);
  background: #1C1C1C;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0.55;
  transform: scale(0.92);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hist-card.active {
  opacity: 1;
  transform: scale(1.0);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
}

/* Dim overlay on inactive cards */
.hist-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  z-index: 3;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hist-card.active::after {
  opacity: 0;
}

.hist-card-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hist-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  opacity: 0.70;
  transform: scale(1.0);
  transform-origin: center center;
  transition: filter 0.9s ease, opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.hist-card:hover .hist-card-img {
  filter: grayscale(30%);
  opacity: 0.90;
  transform: scale(1.05);
}

.hist-card-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.10) 100%);
  z-index: 4;
  transition: background 0.5s ease;
}

.hist-card:hover .hist-card-vignette {
  background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.70) 65%, transparent 100%);
}

.hist-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 28px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hist-card:hover .hist-card-content {
  transform: translateY(-10px);
}

.hist-card-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #C6A87C;
  margin-bottom: 10px;
}

.hist-card-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  color: #FAF8F5;
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.hist-card-body {
  font-family: 'Avenir Next', 'Avenir', -apple-system, sans-serif;
  font-size: 11px;
  line-height: 1.80;
  color: rgba(250, 248, 245, 0.80);
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hist-card:hover .hist-card-body,
.hist-card.revealed .hist-card-body {
  max-height: 220px;
  opacity: 1;
}

.hist-card.revealed .hist-card-content {
  transform: translateY(-10px);
}

.hist-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.hist-progress-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(28, 28, 28, 0.2);
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.4s ease;
}

.hist-progress-dot.active {
  background-color: #2A4D53;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .hist-section { padding: 60px 0 40px; }
  .hist-header { margin-bottom: 36px; }
  .hist-title {
    font-size: clamp(15px, 5.4vw, 26px);
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  /* Native horizontal scroll-snap — buttery momentum + perfect snapping */
  .hist-track {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 16px;
    padding: 14px 10vw 40px;
  }
  .hist-track::-webkit-scrollbar { display: none; }
  .hist-card {
    /* Sized to match the Curator's Chamber / Local Lore mobile cards. */
    width: 80vw;
    min-height: 540px;
    height: auto;
    scroll-snap-align: center;
    /* Native scroll-snap already handles centring — animating transform/
       box-shadow in step with it fights the touch-scroll compositor and
       is the source of the stutter/stuck feeling on mobile. Only opacity
       (cheap, GPU-composited) transitions here; scale/shadow are dropped. */
    transition: opacity 0.25s ease;
    transform: none;
  }
  .hist-card.active {
    transform: none;
    box-shadow: none;
  }
  .hist-card-content { padding: 20px 22px; }
  .hist-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(16px, 4.5vw, 20px);
  }
}

/* ── End Historical Chronicles ── */

@media (max-width: 768px) {
  .chamber-lore-section {
    padding: 60px 0 40px;
  }
  .chamber-lore-header {
    padding: 0 24px;
    margin-bottom: 32px;
  }
  .chamber-lore-title {
    font-size: clamp(22px, 7.6vw, 32px);
    white-space: nowrap;
  }
  /* Native horizontal scroll-snap — buttery momentum + perfect snapping */
  .chamber-lore-track {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    gap: 16px;
    padding: 14px 10vw 40px;
  }
  .chamber-lore-track::-webkit-scrollbar { display: none; }
  .chamber-card {
    width: 80vw;
    min-height: 480px;
    height: auto;
    scroll-snap-align: center;
    /* Native scroll-snap already handles centring — animating transform/
       box-shadow in step with it fights the touch-scroll compositor and
       is a source of stutter on mobile. Only opacity (cheap, GPU-
       composited) transitions here; scale/shadow are dropped. */
    transition: opacity 0.25s ease;
    transform: none;
  }
  .chamber-card.active {
    transform: none;
    box-shadow: none;
  }
  .chamber-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 16px;
  }
  .chamber-card-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}