/* ==========================================================
   PALM & TIDE — design tokens
   ========================================================== */
:root{
  color-scheme: light;
  --ink:        #12282A;
  --ink-soft:   #274445;
  --sand:       #EDE6D6;
  --foam:       #FAF7F1;
  --tide:       #1B4B4A;
  --brass:      #B08D57;
  --ember:      #C86E4A;

  --deep-water: #0E3A52;
  --azure:      #1F6E96;
  --azure-mid:  #2E86B8;
  --sky-blue:   #6FB8D9;
  --pale-blue:  #BFE0EE;
  --ice-blue:   #E4F2F7;

  --sand-card:  #F2F8FA;

  --deep-ocean: #123536;
  --reef:       #17706F;
  --lagoon:     #3FA9C4;
  --shallow:    #9FDCEA;

  --sea-glass:      #90D1C8;
  --sea-glass-pale: #B7DBD6;
  --shore-transition: #CBC0A9;

  --water-about: #90D1C8;
  --water-ankle: #EFFAFC;
  --water-exp:   #DFF3F7;
  --beach-white: #FCFBF7;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --nav-h: 80px;
  --max: 1240px;

  /* Height of the "Begin Your Journey" strip. Referenced by the
     strip itself AND by .experiences' negative margin below —
     keep both in sync if this ever changes. */
  --strip-h: 120px;

  --overlay-rgb: 12,22,24;
}

:root[data-time-of-day="morning"]{ --overlay-rgb: 40,55,70; }
:root[data-time-of-day="afternoon"]{ --overlay-rgb: 12,22,24; }
:root[data-time-of-day="evening"]{ --overlay-rgb: 70,38,24; }
:root[data-time-of-day="night"]{ --overlay-rgb: 8,12,26; }

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--foam);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden intentionally NOT set here — it silently
     breaks position:sticky on mobile browsers. If a horizontal
     scrollbar ever appears, add overflow:hidden to the SPECIFIC
     section causing it (e.g. .about, .hero), not here. */
}

a{ color: inherit; text-decoration: none; }
img, svg{ display: block; max-width: 100%; }

:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* ==========================================================
   NAV
   ========================================================== */
.site-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  color: var(--foam);
  transition: background 0.5s ease, backdrop-filter 0.5s ease,
              border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.site-nav.is-tinted{
  background: rgba(16,28,29,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-nav.is-solid{
  background: var(--foam);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(18,40,42,0.08);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(18,40,42,0.05);
}

.nav-inner{
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand{
  display: flex;
  align-items: center;
}

.nav-logo{
  height: 68px;
  width: auto;
  transition: height 0.4s ease;
}

.nav-right{
  display: flex;
  align-items: center;
}

/* ==========================================================
   DESKTOP NAV LINKS — visible on screens wider than 860px
   ========================================================== */
.nav-links-desktop {
  display: none;  /* hidden by default, shown on desktop */
  align-items: center;
  gap: 28px;
}

.nav-links-desktop a {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: currentColor;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.nav-links-desktop a:hover {
  opacity: 1;
  border-bottom-color: currentColor;
}

.nav-links-desktop .nav-cta {
  padding: 8px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 1;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-links-desktop .nav-cta:hover {
  background: var(--foam);
  color: var(--ink);
  border-color: var(--foam);
}

/* Hide desktop nav when menu is open */
.site-nav.is-open .nav-links-desktop {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 861px) {
  .nav-links-desktop {
    display: flex;
  }
  
  /* Hide hamburger on desktop */
  .menu-toggle {
    display: none;
  }
}

.menu-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 6px 2px;
}

.menu-toggle-icon{
  display: block;
  width: 24px;
  height: 16px;
  flex-shrink: 0;
}

.menu-toggle-icon .wave-line{
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.site-nav.is-open .menu-toggle-icon .wave-line-top{
  transform: translateY(4px) rotate(45deg);
}
.site-nav.is-open .menu-toggle-icon .wave-line-bottom{
  transform: translateY(-4px) rotate(-45deg);
}

/* ==========================================================
   MENU — right-side sliding drawer, not a full-screen takeover.
   .menu-scrim dims the rest of the page and closes the menu on
   click. .menu-panel is the actual drawer: it slides in from
   the right to roughly a quarter of the viewport on desktop
   (a real quarter would be unusably narrow on phones, so mobile
   gets a wider drawer instead). The nav's hamburger/X toggle
   stays fixed above everything (z-index 200 > 150) so it's
   always reachable to close.
   ========================================================== */
.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

body.menu-open .menu-overlay{
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.menu-scrim{
  position: absolute;
  inset: 0;
  background: rgba(8,18,22,0.55);
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

body.menu-open .menu-scrim{
  opacity: 1;
}

.menu-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 28px) 40px 40px;
  background: linear-gradient(165deg, var(--deep-ocean) 0%, var(--tide) 100%);
  box-shadow: -24px 0 60px rgba(6,14,17,0.35);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.22, 0.7, 0.2, 1);
  overflow-y: auto;
}

@media (min-width: 900px){
  .menu-panel{ width: clamp(360px, 27vw, 460px); }
}

body.menu-open .menu-panel{
  transform: translateX(0);
}

.menu-links{
  display: flex;
  flex-direction: column;
}

.menu-links a{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  color: var(--foam);
  padding: 16px 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  opacity: 0.85;
  transition: opacity 0.25s ease, padding-left 0.25s ease;
  border-top: 1px solid rgba(250,247,241,0.14);
}

.menu-links a:first-child{ border-top: none; }

.menu-links a span{
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.68rem;
  color: var(--brass);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.menu-links a:hover,
.menu-links a:focus-visible{
  opacity: 1;
  padding-left: 10px;
}

.menu-links-pages a span{
  min-width: 68px;
}

.menu-footer{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 32px;
}

.menu-meta{
  color: var(--foam);
  opacity: 0.55;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

@media (max-width: 480px){
  .menu-panel{ padding: calc(var(--nav-h) + 20px) 26px 32px; }
  .menu-links a{ font-size: 1.5rem; padding: 14px 0; }
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px); }

.btn-ghost{
  border-color: rgba(250,247,241,0.55);
  color: var(--foam);
}
.btn-ghost:hover{
  border-color: var(--brass);
  background: rgba(176,141,87,0.12);
}

.btn-solid{
  background: var(--foam);
  color: var(--ink);
}
.btn-solid:hover{
  background: var(--brass);
  color: var(--foam);
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: var(--deep-ocean);
  overflow: hidden;
}

.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  opacity: 0;
  animation: mediaIn 1.2s ease-out forwards;
}

@keyframes mediaIn{ to{ opacity: 1; } }

.hero-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: waterTextureDrift 30s ease-in-out infinite;
}

@keyframes waterTextureDrift{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

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

.hero-viewport{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--overlay-rgb), 0.62) 0%,
    rgba(var(--overlay-rgb), 0.48) 22%,
    rgba(var(--overlay-rgb), 0.36) 40%,
    rgba(var(--overlay-rgb), 0.22) 58%,
    rgba(var(--overlay-rgb), 0.1) 78%,
    rgba(var(--overlay-rgb), 0.16) 100%
  );
}

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0 24px;
  text-align: center;
  color: var(--foam);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content > *{
  opacity: 0;
  transform: translateY(14px);
  animation: riseIn 0.8s cubic-bezier(0.2,0.7,0.2,1) forwards;
}

.hero-tagline{ animation-delay: 0.3s; }
.hero-support{ animation-delay: 0.5s; }
.hero-btn{ animation-delay: 0.72s; }

@keyframes riseIn{ to{ opacity: 1; transform: translateY(0); } }

.hero-tagline{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  line-height: 1.15;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}

.hero-support{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 34px;
  opacity: 0.92;
}

.hero-btn{ font-size: 0.92rem; padding: 14px 32px; margin: 0 0 64px; }

.hero-foam{
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 28%;
  height: 14%;
  background: linear-gradient(to bottom, rgba(250,247,241,0) 0%, rgba(250,247,241,0.12) 50%, rgba(250,247,241,0) 100%);
  animation: foamDrift 26s ease-in-out infinite;
  pointer-events: none;
}

@keyframes foamDrift{
  0%, 100%{ transform: translateY(0) translateX(0); opacity: 0.6; }
  50%{ transform: translateY(-10px) translateX(1.5%); opacity: 1; }
}

.hero-anchor{
  position: absolute;
  left: 50%;
  bottom: 44px;
  z-index: 3;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foam);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  padding: 6px 2px;
  text-shadow: 0 1px 4px rgba(14,40,42,0.55), 0 2px 14px rgba(14,40,42,0.35);
  transition: opacity 0.3s ease;
}

.hero-anchor:hover{ opacity: 1; }

/* ==========================================================
   TIDE TRANSITION
   ========================================================== */
.tide-transition{
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--deep-ocean);
}

.tide-wave{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tide-wave path{ fill: var(--water-about); }

.tide-transition .tide-foam{
  height: 90px;
  bottom: 34px;
}

@media (max-width: 860px){
  .tide-transition{ height: 110px; }
  .tide-transition .tide-foam{ height: 64px; bottom: 22px; }
}

/* ==========================================================
   TIDE FOAM
   ========================================================== */
.tide-foam{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 160px;
  overflow: hidden;
  pointer-events: none;
}

.tide-foam-layer{
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -20%;
  height: 100%;
  border-radius: 50%;
  filter: blur(35px);
  opacity: 0.45;
  will-change: transform, opacity;
}

.tide-foam-a{
  background: radial-gradient(ellipse 55% 90% at 22% 60%, rgba(255,255,255,0.6), transparent 72%);
  animation: foamBreatheA 18s ease-in-out infinite;
  animation-delay: 0s;
}

.tide-foam-b{
  background: radial-gradient(ellipse 50% 85% at 62% 55%, rgba(255,255,255,0.42), transparent 70%);
  animation: foamBreatheB 18s ease-in-out infinite;
  animation-delay: -5s;
}

.tide-foam-c{
  background: radial-gradient(ellipse 60% 80% at 85% 65%, rgba(223,239,244,0.5), transparent 74%);
  animation: foamBreatheA 18s ease-in-out infinite;
  animation-delay: -11s;
}

@keyframes foamBreatheA{
  0%, 100%{ opacity: 0.35; transform: translate(0, 2px); }
  50%{ opacity: 0.55; transform: translate(8px, -2px); }
}

@keyframes foamBreatheB{
  0%, 100%{ opacity: 0.4; transform: translate(0, -1.5px); }
  50%{ opacity: 0.28; transform: translate(-6px, 1.5px); }
}

.tide-foam-dark::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(14,58,82,0.2) 100%);
}

.tide-foam-dark .tide-foam-layer{ z-index: 1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .hero-foam, .tide-foam-layer{ animation: none; }
  .hero-media, .hero-content > *{ animation: none; opacity: 1; transform: none; }
}

/* ==========================================================
   REVEAL SECTIONS
   ========================================================== */
.reveal-section{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1), transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}

.reveal-section.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.section-eyebrow{
  display: block;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 56px;
}

.section-eyebrow-light{ color: var(--brass); }

/* ----------------------------------------------------------
   Sticky-header exception: .experiences and .guest-corner each
   contain a sticky child (.journey-strip / .guest-corner-strip).
   Any transform on an ancestor other than the literal keyword
   "none" — even translateY(0), which is visually a no-op — makes
   browsers treat that ancestor as a new containing block, which
   silently breaks position:sticky for everything inside it. The
   .reveal-section rule above sets exactly that kind of transform,
   so these two sections opt out of the transform (keeping the
   opacity fade only) to keep their sticky strips working.
   ---------------------------------------------------------- */
/* Opt these sections out of the CSS reveal entirely —
   GSAP handles their entrance animations now. */
.experiences.reveal-section,
.experiences.reveal-section.is-visible,
.guest-corner.reveal-section,
.guest-corner.reveal-section.is-visible{
  transform: none;
  opacity: 1;            /* ← override the 0 from .reveal-section */
  transition: none;       /* ← kill any competing CSS transition */
}

/* ==========================================================
   EXPERIENCE KENYA DIFFERENTLY
   ========================================================== */
.about{
  position: relative;
  overflow: hidden;
  padding: 128px 24px 160px;
  background: linear-gradient(180deg, var(--water-about) 0%, var(--ice-blue) 100%);
}

.about::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.14;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='white' stroke-width='1' opacity='0.55'%3E%3Cpath d='M8 18 Q 38 8 68 22 T 132 18'/%3E%3Cpath d='M-6 68 Q 28 58 58 74 T 122 70'/%3E%3Cpath d='M2 108 Q 34 98 64 114 T 138 110'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
  animation: causticsDrift 70s linear infinite;
  pointer-events: none;
}

@keyframes causticsDrift{
  from{ background-position: 0 0; }
  to{ background-position: 140px 90px; }
}

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

/* ==========================================================
   COASTAL BREEZE — shared motion + directional "sun" shadows,
   reused consistently across the site wherever a section wants
   this treatment. The direction of each shadow implies where
   the sun is relative to the element:
     - shadowPulseLeft  → sun on the RIGHT (About/Experience Kenya
       Differently — the image sits camera-left, so light falls
       from the right, casting shadow left)
     - shadowPulseTop   → sun OVERHEAD (What We Offer cards, and
       the "We Curate Journeys" quote — uniform, no left/right
       bias, since these read as a flat, evenly-lit grid/panel)
     - shadowPulseRight → sun on the LEFT (Guests Corner — the
       opposite hand from About, so the two sections visually
       "balance" across the page)
   Each shadow keyframe is paired with a matching float keyframe
   so the shadow and the element drift together, like a palm
   frond passing overhead. Every element below respects
   prefers-reduced-motion by falling back to a fixed shadow with
   no motion.
   ========================================================== */
@keyframes shadowPulseLeft{
  0%, 100%{ box-shadow: -28px 32px 58px -16px rgba(18,40,42,0.32); }
  50%{ box-shadow: -38px 40px 68px -12px rgba(18,40,42,0.36); }
}
@keyframes shadowPulseTop{
  0%, 100%{ box-shadow: 0 24px 48px -16px rgba(18,40,42,0.3); }
  50%{ box-shadow: 0 34px 58px -12px rgba(18,40,42,0.34); }
}
@keyframes shadowPulseRight{
  0%, 100%{ box-shadow: 28px 32px 58px -16px rgba(18,40,42,0.26); }
  50%{ box-shadow: 38px 40px 68px -12px rgba(18,40,42,0.3); }
}
/* translate3d (not translate) forces each element onto its own
   GPU compositing layer for the life of the animation. Plain 2D
   translate() on italic serif text caused visible blur mid-tween
   in Chrome/Firefox, since the browser was repainting the glyphs
   on the CPU every frame instead of moving a pre-rasterized layer. */
@keyframes breezeFloatLeft{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(-4px, -6px, 0); }
}
@keyframes breezeFloatY{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(0, -6px, 0); }
}
@keyframes breezeFloatRight{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(4px, -6px, 0); }
}

@media (prefers-reduced-motion: reduce){
  .about-image,
  .experience-card,
  .approach-copy-last{
    animation: none !important;
    box-shadow: 0 24px 48px -16px rgba(18,40,42,0.28) !important;
    transform: none !important;
  }
}

.about-frame{
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 32px;
  align-items: center;
}

.about-copy{
  max-width: 460px;
  padding-top: 8px;
}

.about-heading{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.08;
  margin: 0 0 30px;
  color: var(--ink);
}

.about-lede{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.62;
  margin: 0 0 18px;
  color: var(--ink);
}

.about-body{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.78;
  margin: 0 0 30px;
  color: var(--ink-soft);
  max-width: 46ch;
}

.about-close{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0;
}

.about-visual{
  max-width: 100%;
  opacity: 0;
  transform: translateX(64px);
}

/* Entrance is now owned entirely by GSAP ScrollTrigger (see
   script.js) so it can trigger at the 50%-into-section mark,
   land after the copy, and replay every time the section is
   re-entered from either direction. The old whole-section
   ".is-visible" coupling is removed on purpose. A no-JS/no-GSAP
   fallback is provided further down. */

@media (prefers-reduced-motion: reduce){
  .about-visual{ opacity: 1; transform: none; transition: none; }
}

.about-image{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--tide);
  animation: shadowPulseLeft 9s ease-in-out infinite, breezeFloatLeft 9s ease-in-out infinite;
}

.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 41%;
}

.about-caption{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0 0;
}

.about-caption-kicker{
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

.about-caption-line{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ==========================================================
   APPROACH
========================================================== */

.approach{
    background: linear-gradient(180deg, var(--sea-glass-pale) 0%, var(--shore-transition) 65%, var(--sand) 100%);
    padding:140px 24px 90px;
}

.approach-frame{
    max-width:760px;
    margin:auto;
    text-align:center;
}

.approach-label{
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--brass);
    margin-bottom:24px;
}

.approach-title{
    font-family:var(--font-display);
    font-style:italic;
    font-size:clamp(2.8rem,5vw,4.6rem);
    line-height:1.05;
    color:var(--ink);
    margin-bottom:36px;
}

.approach-copy{
    max-width:60ch;
    margin:0 auto;
    font-size:1.08rem;
    line-height:1.9;
    color:var(--ink-soft);
    font-weight:300;
}

.approach-copy-last{
    display: inline-block;
    margin-top:34px;
    padding: 22px 34px;
    border-radius: 12px;
    background: rgba(255,255,255,0.68);  /* more opaque to compensate */
    animation: shadowPulseTop 8s ease-in-out infinite, breezeFloatY 8s ease-in-out infinite;
    animation-delay: 2s, 2s;
}

.approach-emphasis{
    display:block;
    margin-top:28px;
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.6rem;
    color:var(--ink);
}

.approach-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:52px;
    padding:16px 34px;
    border:1px solid rgba(18,40,42,.18);
    background:white;
    color:var(--ink);
    border-radius:999px;
    text-decoration:none;
    transition:.35s;
    box-shadow:0 18px 50px rgba(0,0,0,.06);
}

.approach-button:hover{
    transform:translateY(-3px);
    background:var(--lagoon);
    color:white;
    border-color:var(--lagoon);
}

.approach-button span{
    transition:.3s;
}

.approach-button:hover span{
    transform:translateX(6px);
}

/* ==========================================================
   BEGIN YOUR JOURNEY STRIP — sticky section header.
   Lives INSIDE .experiences (its first child), not as a sibling
   before it. That nesting is what makes the sticky behavior
   correct: a sticky element stays pinned at top:0 only for as
   long as its own PARENT is still scrolling through the
   viewport, and releases the instant the parent's bottom edge
   reaches the top. So this strip stays pinned for the entire
   scroll of the Four Tides section, then lets go right as
   .guest-corner begins — exactly the "sticky until the end of
   this section" behavior requested, no JS needed.
   ========================================================== */
.journey-strip{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5;
  height: var(--strip-h);
  margin: 0;         /* guards against any inherited default section/div margin insetting the strip */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(180deg, rgba(14,58,82,0.45), rgba(14,58,82,0.55)),
    url("assets/images/travel.jpg");
  background-size: cover;
  background-position: center;
}

.journey-strip-text{
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--foam);
  text-shadow: 0 2px 10px rgba(8,20,26,0.4);
}

/* ==========================================================
   THE JOURNEY IN FOUR TIDES
   ========================================================== */
.experiences{
  position: relative;
  overflow: hidden;      /* also confines the sticky strip above
                             to release exactly at this section's
                             own bottom edge — intentional. */
  padding: 0 0 140px;
  background: var(--sand);
}

.experience-mosaic{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 24px 0;   /* horizontal gutter now lives here, not
                              on .experiences, so .journey-strip
                              (a sibling before this element) is
                              never inset by it */
}

.experiences-heading{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 18px;
}

.experiences-subheading{
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0 0 56px;
}

.experiences-intro{
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin: 0 0 56px;
}

.experience-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(180px, 1fr));
  aspect-ratio: 16 / 9;
  gap: 5px;
}

.experience-card{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  animation: shadowPulseTop 8s ease-in-out infinite;
  /* No transform/float here deliberately — these cards sit in a
     tight 5px-gap mosaic grid, and shifting the whole element
     would open visible gaps against its neighbors. The shadow
     pulse alone still reads as "sunlight moving overhead". */
}

/* Lazy-loaded background images: a quiet placeholder tone until
   the real photo is fetched, then a soft fade once it lands. */
.experience-card.lazy-bg{
  background-color: var(--sand-card);
}
.experience-card.lazy-bg.bg-loaded{
  animation: shadowPulseTop 8s ease-in-out infinite, bgFadeIn 0.6s ease;
}

@keyframes bgFadeIn{
  from{ filter: brightness(1.15) saturate(0.85); }
  to{ filter: none; }
}

.card-wide{ animation-delay: 0s; }
.card-stack-a{ animation-delay: 1.6s; }
.card-stack-b{ animation-delay: 3.2s; }
.card-square-a{ animation-delay: 4.8s; }
.card-square-b{ animation-delay: 6.4s; }

.card-wide{ grid-column: 1 / 3; grid-row: 1; }
.experience-stack{
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}
.experience-stack .experience-card{
  flex: 1 1 0;
  min-height: 0;
}
.experience-stack .experience-card-copy{
  padding: 16px 18px;
  gap: 2px;
}
.experience-stack .card-number{ font-size: 0.6rem; }
.experience-stack .experience-icon{ width: 20px; height: 20px; margin-bottom: 4px; }
.experience-stack .experience-card-copy h3{
  font-size: 1.05rem;
  margin-bottom: 3px;
}
.experience-stack .experience-card-copy p{
  font-size: 0.74rem;
  max-width: 26ch;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.experience-stack .experience-link{ font-size: 0.68rem; }
.card-square-a{ grid-column: 1; grid-row: 2; }
.card-square-b{ grid-column: 2; grid-row: 2; }

/* ----------------------------------------------------------
   Default (touch / no-hover) state: always legible.
   ---------------------------------------------------------- */
.experience-card-tint{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, rgba(14,58,82,0.28) 0%, rgba(14,58,82,0.82) 100%);
}

.card-tide{ display: none; }

.experience-card-copy{
  position: relative;
  z-index: 2;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.card-number{
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sand);
  opacity: 0.75;
  margin-bottom: 2px;
}

.experience-icon{
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foam);
  opacity: 0.9;
  margin-bottom: 8px;
}

.experience-icon svg{ width: 100%; height: 100%; }

.experience-card-copy h3{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.14;
  margin: 0 0 6px;
  color: var(--foam);
}

.experience-card-copy p{
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--foam);
  opacity: 0.9;
  margin: 0 0 12px;
  font-weight: 300;
  max-width: 30ch;
}

.experience-link{
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--foam);
  opacity: 0.95;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(250,247,241,0.5);
}

.experience-link span{ display: inline-block; }

/* ----------------------------------------------------------
   Pointer/hover-capable devices only: restore the wave-rises-
   on-hover choreography.
   ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  .experience-card-tint{
    background: linear-gradient(200deg, rgba(14,58,82,0.10) 0%, rgba(14,58,82,0.72) 100%);
    transition: background 0.35s ease;
  }
  .experience-card:hover .experience-card-tint,
  .experience-card:focus-within .experience-card-tint{
    background: linear-gradient(200deg, rgba(14,58,82,0.06) 0%, rgba(14,58,82,0.5) 100%);
  }

  .card-tide{
    display: block;
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    height: 26%;
    z-index: 1;
    transform: translateY(100%);
    transition: transform 0.65s cubic-bezier(0.22, 0.7, 0.2, 1);
    pointer-events: none;
  }

  .card-tide svg{ width: 100%; height: 100%; display: block; }
  .card-tide path{ fill: var(--lagoon); opacity: 0.88; }

  .experience-card:hover .card-tide,
  .experience-card:focus-within .card-tide{
    transform: translateY(0);
  }

  .experience-card-copy{
    transition: transform 0.4s ease;
  }
  .experience-card:hover .experience-card-copy,
  .experience-card:focus-within .experience-card-copy{
    transform: translateY(-4px);
  }

  .experience-icon{
    color: var(--sand);
    opacity: 0.85;
    transition: color 0.5s ease;
  }
  .experience-card:hover .experience-icon,
  .experience-card:focus-within .experience-icon{
    color: var(--foam);
  }

  .experience-card-copy h3{
    color: var(--sand);
    transition: color 0.5s ease, text-shadow 0.5s ease;
  }
  .experience-card-copy p{
    color: var(--sand);
    opacity: 0.82;
    transition: color 0.5s ease, opacity 0.5s ease, text-shadow 0.5s ease;
  }
  .experience-link{
    color: var(--sand);
    opacity: 0.9;
    transition: color 0.5s ease, border-color 0.5s ease, text-shadow 0.5s ease;
  }
  .experience-link span{
    transition: transform 0.3s ease;
  }

  .experience-card:hover .experience-link,
  .experience-card:focus-within .experience-link{
    color: var(--foam);
    border-color: rgba(250,247,241,0.6);
  }
  .experience-card:hover .experience-link span,
  .experience-card:focus-within .experience-link span{
    transform: translateX(4px);
  }

  .experience-card:hover .experience-card-copy h3,
  .experience-card:focus-within .experience-card-copy h3,
  .experience-card:hover .experience-card-copy p,
  .experience-card:focus-within .experience-card-copy p{
    color: var(--foam);
    opacity: 1;
    text-shadow: 0 0 14px rgba(191,224,238,0.85), 0 0 30px rgba(159,220,238,0.45);
  }
}

.experiences-explore-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  max-width:calc(100% - 48px);
  margin:52px auto 0;
  padding:16px 34px;
  border:1px solid rgba(18,40,42,.18);
  background:white;
  color:var(--ink);
  border-radius:999px;
  text-decoration:none;
  text-align:center;
  transition:.35s;
  box-shadow:0 18px 50px rgba(0,0,0,.06);
}
.experiences-explore-button:hover{
  border-color: transparent;
}
.experiences-explore-button span{ transition:.3s; }
.experiences-explore-button:hover span{ transform:translateX(6px); }

/* ==========================================================
   GUEST CORNER
   ========================================================== */
.guest-corner{
  position: relative;
  /* overflow: hidden; */
  background:
    linear-gradient(rgba(252,250,245,.93), rgba(252,250,245,.94)),
    url("assets/images/coral.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.guest-corner-strip{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5;
  height: var(--strip-h);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(180deg, rgba(14,58,82,0.45), rgba(14,58,82,0.55)),
    url("assets/images/adventure3.png");
  background-size: cover;
  background-position: center;
}

.guest-corner-eyebrow{
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--foam);
  text-shadow: 0 2px 10px rgba(8,20,26,0.4);
}

.guest-corner-body{
  position: relative;
  z-index: 1;
  padding: 100px 24px 150px;
  text-align: center;
}

.guest-corner-heading{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  margin: 0 0 72px;
}

.guest-corner-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto 110px;
}

.guest-card{
  margin: 0;
  padding: 44px 28px 32px;
  background: rgba(255,255,255,0.72);  /* slightly more opaque to compensate */
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  /* Static — this used to carry a continuous shadowPulseRight /
     breezeFloatRight float, but the constant transform made the
     italic serif quote text read as blurry/in-motion, so it's a
     fixed shadow now instead. */
  box-shadow: 0 24px 48px -16px rgba(18,40,42,0.28);
}

/* The center card carries the quote about our top-selling package
   (the 5-Day Diani Adventure), so it sits a level higher than the
   two flanking cards — its own elevated podium position — and reads
   above them. */
.guest-corner-grid .guest-card:nth-child(2){
  position: relative;
  z-index: 2;
  margin-top: -30px;
  padding-bottom: 40px;
  background: rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.7);
}

@media (max-width: 900px){
  .guest-corner-grid .guest-card:nth-child(2){
    margin-top: 0;
  }
}

.guest-card-avatar{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tide);
  margin: -80px auto 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.15);
}

.guest-card-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guest-card p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 16px;
}

.guest-card cite{
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
}

.guest-favourite{
  max-width: 700px;
  margin: 0 auto;
  padding: 64px 24px;
  background: rgba(255,255,255,0.78);  /* more opaque to compensate */
  border-radius: 12px;
  /* Static for the same reason as .guest-card above — no more
     continuous float/shadow pulse. */
  box-shadow: 0 24px 48px -16px rgba(18,40,42,0.28);
}

.guest-favourite-label{
  display: inline-block;
  margin-bottom: 18px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--brass);
  font-size: .72rem;
}

.guest-favourite-title{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--ink);
}

.guest-stars{
  color: var(--brass);
  letter-spacing: .28em;
  font-size: 1rem;
  margin-bottom: 24px;
}

.guest-favourite-copy{
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.guest-favourite-button{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid rgba(18,40,42,.15);
  background: white;
  color: var(--ink);
  transition: .35s;
}
.guest-favourite-button:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.guest-favourite-note{
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

@media (max-width: 900px){
  .guest-corner-grid{
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 80px;
  }
  .guest-corner-body{ padding: 80px 24px 110px; }
  .guest-favourite{ padding: 48px 24px; }
}

/* ==========================================================
   WHAT WE BRING TO EVERY JOURNEY
========================================================== */

.journey-features{
    padding:120px 24px;
    background:var(--sand);
}

.journey-features-inner{
    max-width:1200px;
    margin:auto;
}

.journey-features-label{
    text-align:center;
    font-size:.72rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--brass);
    margin-bottom:70px;
}

.journey-features-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:90px;
}

.journey-feature{
    display:flex;
    align-items:flex-start;
    gap:28px;
}

.journey-feature-image{
    flex:0 0 120px;
    width:120px;
    height:120px;
    overflow:hidden;
    border-radius:4px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.journey-feature-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.journey-feature:hover .journey-feature-image img{
    transform:scale(1.05);
}

.journey-feature h3{
    margin:0 0 18px;
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:500;
    color:var(--ink);
}

.journey-feature p{
    margin:0;
    font-size:1.08rem;
    line-height:1.9;
    color:var(--ink-soft);
    max-width:34ch;
}

@media (max-width:900px){
    .journey-features-grid{
        grid-template-columns:1fr;
        gap:60px;
    }
}

/* ==========================================================
   FAQ — accordion. Shared by the homepage (nested inside Guest
   Corner, as .guest-faq) and the adventure page (as .adv-faq).
   Only the question is visible by default; the full answer
   appears on click via a grid-template-rows 0fr → 1fr reveal
   (same mechanism as the itinerary accordion), so nothing is
   truncated once opened.
   ========================================================== */
.section-eyebrow{ font-weight: 400; }

.guest-faq{
  max-width: 760px;
  margin: 90px auto 0;
  text-align: center;
}

.faq-heading{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--ink);
  margin: 0 0 36px;
}

.faq-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.faq-item{
  border-bottom: 1px solid rgba(18,40,42,0.12);
}
.faq-item:first-child{ border-top: 1px solid rgba(18,40,42,0.12); }

.faq-question-heading{ margin: 0; }

.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}

.faq-chevron{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-chevron{ transform: rotate(180deg); }

.faq-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

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

.faq-answer-inner{ overflow: hidden; }

.faq-answer p{
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 4px 22px;
}

/* ==========================================================
   FINAL CTA — BEGIN THE JOURNEY
   .reef is sticky and covers .guest-corner naturally: with no
   negative-margin overlap here, .reef only reaches top:0 (and
   sticks) after .guest-corner has fully scrolled past in normal
   flow — so none of guest-corner's content is skipped.
   ========================================================== */
.reef{
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 0;
  background: var(--deep-water);
}

.reef-photo{
  position: absolute;
  inset: 0;
  background-image: url('assets/images/scum.png');
  background-size: cover;
  background-position: center 70%;
}

.reef-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.35fr 1fr;
  grid-template-rows: minmax(340px, 56vh) auto;
  gap: 5px;
  padding: 5px;
}

.reef-block{
  position: relative;
  display: flex;
}

.reef-block-cta{
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  padding: 56px;
  background: linear-gradient(200deg, rgba(14,58,82,0.08) 0%, rgba(31,110,150,0.32) 55%, rgba(14,58,82,0.42) 100%);
}

.reef-cta-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.24;
  color: var(--foam);
  margin: 0;
  max-width: 18ch;
  text-shadow: 0 1px 3px rgba(8,20,26,0.45), 0 6px 22px rgba(8,20,26,0.3);
}

.reef-cta-product{
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pale-blue);
  margin: 4px 0 2px;
  text-shadow: 0 1px 3px rgba(8,20,26,0.4);
}

.reef-cta-copy{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(250,247,241,0.92);
  max-width: 38ch;
  margin: 0 0 10px;
  text-shadow: 0 1px 3px rgba(8,20,26,0.4);
}

.reef-block-blank{
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(180deg, rgba(191,224,238,0.05), rgba(14,58,82,0.16));
}

.reef-block-social{
  grid-column: 1 / span 2;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding: 34px 24px;
  background: linear-gradient(180deg, rgba(252,251,247,0.72), rgba(252,251,247,0.94));
}

.reef-social-label{
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azure);
  opacity: 0.85;
}

.reef-social-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.reef-social-links a{
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.reef-social-links a:hover{
  color: var(--azure);
  border-color: var(--azure);
}

.btn-blue{
  background: var(--azure);
  color: var(--foam);
}
.btn-blue:hover{
  background: var(--deep-water);
  color: var(--foam);
}

.btn-shore{
  background: #FDFBF8;
  color: var(--deep-water);
}
.btn-shore:hover{
  background: var(--foam);
  color: var(--deep-water);
}

.btn-ink{
  background: var(--ink);
  color: var(--foam);
}
.btn-ink:hover{
  background: var(--brass);
  color: var(--foam);
}

/* ----------------------------------------------------------
   "Begin Your Journey" — the one consistent CTA treatment,
   used everywhere this phrase appears across the site. White
   by default; on hover, water rises to fill the button with
   the same wavy tideline used on the "What We Offer" cards
   (see .card-tide) rather than a flat SaaS-style gradient
   wipe. Overrides whatever .btn-solid/.btn-shore background
   it's paired with, so existing markup can keep its base
   .btn class untouched.
   ---------------------------------------------------------- */
.btn-journey{
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: var(--foam);
  color: var(--ink);
  isolation: isolate;
}

.btn-journey::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320%;
  z-index: -1;
  background: var(--lagoon);
  opacity: 0.88;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C60 6 120 54 200 30 C280 6 340 54 400 30 L400 60 L0 60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C60 6 120 54 200 30 C280 6 340 54 400 30 L400 60 L0 60 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.btn-journey:hover,
.btn-journey:focus-visible{
  background: var(--foam);
  color: var(--foam);
}

.btn-journey:hover::before,
.btn-journey:focus-visible::before{
  transform: translateY(0%);
}

@media (prefers-reduced-motion: reduce){
  .btn-journey::before{ transition: none; }
}

/* ==========================================================
   FIVE-DAY COAST ADVENTURE — detail page
   ========================================================== */
.detail-hero{
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep-ocean);
}
 
.detail-hero-media{
  position: absolute;
  inset: 0;
}
 
.detail-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
 
.detail-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6,10,10,0.1) 0%, rgba(6,10,10,0.42) 48%, rgba(6,10,10,0.82) 100%),
    linear-gradient(to top, rgba(6,10,10,0.55) 0%, rgba(6,10,10,0) 30%);
}
 
.detail-hero-content{
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 100%;
  max-width: 540px;
  padding: 100px 6vw 60px;
  text-align: right;
  color: var(--foam);
}
 
.detail-hero-eyebrow{
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 22px;
}
 
.detail-hero-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.12;
  margin: 0 0 26px;
}
 
.detail-hero-line{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 42ch;
  margin: 0 0 0 auto;
  opacity: 0.92;
}
 
.detail-intro{
  padding: 130px 24px 150px;
  background: var(--water-ankle);
  text-align: center;
}
 
.detail-intro-frame{
  max-width: 640px;
  margin: 0 auto;
}
 
.detail-intro-lede{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 22px;
}
 
.detail-intro-body{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 44px;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
 
@media (max-width: 860px){
  .detail-hero{ min-height: 78svh; align-items: flex-end; }
  .detail-hero-content{
    max-width: 100%;
    text-align: left;
    padding: 60px 24px 56px;
  }
  .detail-hero-line{ margin: 0; }
  .detail-hero-overlay{
    background:
      linear-gradient(to top, rgba(6,10,10,0.88) 0%, rgba(6,10,10,0.25) 45%, rgba(6,10,10,0.1) 70%);
  }
  .detail-intro{ padding: 90px 24px 110px; }
}

/* ==========================================================
   FOOTER
   Sticky, same reasoning as .reef above — safe because its own
   content is short and .reef isn't overlapped via negative
   margin, so nothing gets truncated.
   ========================================================== */
.site-footer{
  position: sticky;
  top: 0;
  z-index: 7;
  padding: 64px 24px 40px;
  background: var(--beach-white);
  color: var(--ink);
}

.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.seal{ height: 68px; width: auto; }
.seal-footer{ margin: 0 auto 24px; opacity: 0.85; }

.footer-tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.5;
  max-width: 520px;
  margin: 0 0 32px;
  color: var(--ink);
}

.footer-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 28px;
}

.footer-links a{
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: 0.75;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.footer-links a:hover{ opacity: 1; }

.footer-links a.footer-cta{
  opacity: 1;
  color: var(--foam);
  background: var(--azure);
  padding: 9px 20px;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.footer-links a.footer-cta:hover{
  background: var(--deep-water);
}

.footer-meta{
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  opacity: 0.55;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 860px){

  .experience-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }
  .card-wide{ grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16/9; }
  .experience-stack{ display: contents; }
  .card-stack-a{ grid-column: 1; grid-row: 2; aspect-ratio: 1/1; }
  .card-stack-b{ grid-column: 2; grid-row: 2; aspect-ratio: 1/1; }
  .card-square-a{ grid-column: 1; grid-row: 3; aspect-ratio: 1/1; }
  .card-square-b{ grid-column: 2; grid-row: 3; aspect-ratio: 1/1; }

  .about{ padding: 96px 24px 110px; }
  .about-frame{ grid-template-columns: 1fr; gap: 48px; }
  .about-copy{ max-width: 100%; }
  .about-visual{ margin-top: 0; }
  .about-image{ aspect-ratio: 4 / 3; }

  .approach{ padding: 100px 24px 120px; }

  .experiences{ padding: 0 0 110px; }
  .experience-mosaic{ padding: 72px 24px 0; }

  .reef-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .reef-block-cta{ grid-column: 1; grid-row: 1; padding: 40px 28px; min-height: 320px; }
  .reef-block-blank{ grid-column: 1; grid-row: 2; min-height: 140px; }
  .reef-block-social{ grid-column: 1; grid-row: 3; }
}

@media (max-width: 480px){
  .hero-tagline{ font-size: 2.2rem; }
  .hero-support{ font-size: 0.95rem; }
  :root {--strip-h: 80px;}

  .experience-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 12px;
    aspect-ratio: auto;
  }
  
  /* Force all cards into a single column */
  .card-wide,
  .card-stack-a,
  .card-stack-b,
  .card-square-a,
  .card-square-b{
    grid-column: 1 !important;
  }
  
  .card-wide{ grid-row: 1; }
  .card-stack-a{ grid-row: 2; }
  .card-square-a{ grid-row: 3; }
  .card-square-b{ grid-row: 4; }
  .card-stack-b{ grid-row: 5; }

  /* Break the stack container into individual grid items */
  .experience-stack { 
    display: contents !important;
    gap: 0;
  }

  .experience-card{ 
    min-height: 220px; 
    aspect-ratio: auto;
  }
  .experience-card-copy{ padding: 20px 20px; gap: 6px; }
  .card-number{ margin-bottom: 2px; }
  .experience-icon{ width: 22px; height: 22px; margin-bottom: 4px; }
  .experience-card-copy h3{ font-size: 1.25rem; line-height: 1.15; margin-bottom: 6px; }
  .experience-card-copy p{ font-size: 0.82rem; max-width: 28ch; margin-bottom: 8px; }

  .experience-stack .experience-card{ min-height: 220px; flex: none; }
  .experience-stack .experience-card-copy{ padding: 20px 20px; gap: 6px; }
  .experience-stack .card-number{ font-size: 0.68rem; }
  .experience-stack .experience-icon{ width: 22px; height: 22px; margin-bottom: 4px; }
  .experience-stack .experience-card-copy h3{
    font-size: 1.25rem;
    line-height: 1.15;
    margin-bottom: 6px;
    -webkit-line-clamp: unset;
  }
  .experience-stack .experience-card-copy p{
    font-size: 0.82rem;
    max-width: 28ch;
    margin-bottom: 8px;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .experience-stack .experience-link{ font-size: 0.76rem; }

  .experiences-explore-button{
    width:100%;
    max-width:300px;
    white-space:normal;
    font-size:0.85rem;
    padding:16px 22px;
  }

  .reef-cta-title{ font-size: 1.6rem; max-width: none; }
  .nav-logo{ height: 50px; }
  .nav-inner{ padding: 0 24px; }
}

/* ==========================================================
   STRIP IMAGE DRIFT — slow right-to-left glide on the
   background photo only (the text label stays fixed).
   ========================================================== */
.journey-strip,
.guest-corner-strip {
  background-size: cover;
  background-position: 0% center;
  animation: stripDrift 30s ease-in-out infinite;
}

@keyframes stripDrift {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-strip,
  .guest-corner-strip {
    animation: none;
  }
}

/* ==========================================================
   JOURNEY MODAL — 3-Step Form
   Matches Palm & Tide's colour language and typography
   ========================================================== */

/* Overlay */
.journey-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 22, 24, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.journey-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

/* Modal card */
.journey-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--foam);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(12, 22, 24, 0.25);
  padding: 48px 40px 40px;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey-modal-overlay.is-open .journey-modal {
  transform: translateY(0);
}

/* Close button */
.journey-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 6px;
  border-radius: 50%;
  transition: color 0.25s ease, background 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-modal-close:hover {
  color: var(--ink);
  background: rgba(18, 40, 42, 0.06);
}

/* Progress indicator */
.journey-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 36px;
  padding: 0 20px;
}

.journey-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(18, 40, 42, 0.12);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.journey-progress-step.is-active .progress-dot {
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.15);
}

.journey-progress-step.is-complete .progress-dot {
  background: var(--tide);
}

.progress-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18, 40, 42, 0.35);
  transition: color 0.35s ease;
  white-space: nowrap;
}

.journey-progress-step.is-active .progress-label,
.journey-progress-step.is-complete .progress-label {
  color: var(--ink);
}

.journey-progress-line {
  width: 48px;
  height: 1px;
  background: rgba(18, 40, 42, 0.12);
  margin: 0 8px;
  margin-bottom: 20px;
  transition: background 0.35s ease;
}

.journey-progress-line.is-complete {
  background: var(--tide);
}

/* Steps */
.journey-step {
  display: none;
  animation: stepIn 0.4s ease;
}

.journey-step.is-active {
  display: block;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.journey-step-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
}

.journey-step-subtitle {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

/* Form fields */
.journey-field-group {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.journey-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.journey-field label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.field-hint {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.72rem;
}

.journey-field input[type="text"],
.journey-field input[type="email"],
.journey-field input[type="tel"],
.journey-field select,
.journey-field textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 12px 16px;
  border: 1px solid rgba(18, 40, 42, 0.15);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.journey-field input:focus,
.journey-field select:focus,
.journey-field textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.08);
}

.journey-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2312282A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.journey-field textarea {
  resize: vertical;
  min-height: 80px;
}

.journey-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Package selection cards */
.journey-package-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.journey-package-option {
  cursor: pointer;
}

.journey-package-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.package-option-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1.5px solid rgba(18, 40, 42, 0.12);
  border-radius: 8px;
  transition: border-color 0.25s ease, background 0.25s ease;
  background: white;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

/* Hover — same rising-water tide fill as .btn-journey (see that
   rule's comment for why), so hovering a package option always
   gives clear, on-brand feedback instead of relying on a subtle
   border/background tint that forced dark-mode color inversion on
   some devices was washing out entirely. Distinct from the
   `:checked`/`.is-featured` states above: those mark "selected" and
   "recommended" respectively and stay brass; this is purely the
   transient hover affordance, so it works the same on every card
   regardless of which of those states it's already in. */
.package-option-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320%;
  z-index: -1;
  background: var(--lagoon);
  opacity: 0.92;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C60 6 120 54 200 30 C280 6 340 54 400 30 L400 60 L0 60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C60 6 120 54 200 30 C280 6 340 54 400 30 L400 60 L0 60 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.journey-package-option input:checked + .package-option-card {
  border-color: var(--brass);
  background: rgba(176, 141, 87, 0.04);
}

/* Signature package — spans the full row and carries a badge so it
   reads as the recommended choice among the five options. */
.journey-package-option.is-featured {
  grid-column: 1 / -1;
}

.journey-package-option.is-featured .package-option-card {
  border-color: rgba(176, 141, 87, 0.55);
  background: rgba(176, 141, 87, 0.07);
}

.journey-package-option.is-featured input:checked + .package-option-card {
  border-color: var(--brass);
  background: rgba(176, 141, 87, 0.12);
}

.journey-package-option:hover .package-option-card,
.journey-package-option input:focus-visible + .package-option-card {
  border-color: var(--lagoon);
}

.journey-package-option:hover .package-option-card::before,
.journey-package-option input:focus-visible + .package-option-card::before {
  transform: translateY(0%);
}

.journey-package-option:hover .package-option-name,
.journey-package-option:hover .package-option-desc,
.journey-package-option:hover .package-option-badge,
.journey-package-option input:focus-visible + .package-option-card .package-option-name,
.journey-package-option input:focus-visible + .package-option-card .package-option-desc,
.journey-package-option input:focus-visible + .package-option-card .package-option-badge {
  color: var(--foam);
}

@media (prefers-reduced-motion: reduce){
  .package-option-card::before{ transition: none; }
}

.package-option-badge {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  transition: color 0.25s ease;
}

.package-option-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.25s ease;
}

.package-option-desc {
  transition: color 0.25s ease;
  font-size: 0.7rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Toggle buttons */
.journey-toggle-group {
  display: flex;
  gap: 10px;
}

.journey-toggle {
  flex: 1;
  cursor: pointer;
}

.journey-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.journey-toggle span {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-size: 0.82rem;
  border: 1.5px solid rgba(18, 40, 42, 0.12);
  border-radius: 8px;
  background: white;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.journey-toggle input:checked + span {
  border-color: var(--tide);
  background: rgba(27, 75, 74, 0.05);
  color: var(--tide);
  font-weight: 500;
}

/* Step actions */
.journey-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  gap: 14px;
}

.journey-btn-next,
.journey-btn-submit {
  background: var(--ink);
  color: var(--foam);
  border: none;
  margin-left: auto;
}

.journey-btn-next:hover,
.journey-btn-submit:hover {
  background: var(--brass);
}

.journey-btn-back {
  background: none;
  border: 1px solid rgba(18, 40, 42, 0.2);
  color: var(--ink-soft);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.journey-btn-back:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Submit button states */
.journey-btn-submit {
  position: relative;
  min-width: 200px;
}

.submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(250, 247, 241, 0.3);
  border-top-color: var(--foam);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 10px;
}

.journey-btn-submit.is-loading .submit-text {
  opacity: 0.6;
}

.journey-btn-submit.is-loading .submit-spinner {
  display: inline-block;
  position: absolute;
  right: 20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Summary (Step 3) */
.journey-summary {
  background: rgba(18, 40, 42, 0.03);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}

.journey-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(18, 40, 42, 0.06);
}

.journey-summary-item:last-child {
  border-bottom: none;
}

.journey-summary-label {
  color: var(--ink-soft);
  font-weight: 400;
}

.journey-summary-value {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}

/* Assurance */
.journey-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Success state */
.journey-success {
  display: none;
  text-align: center;
  padding: 20px 0;
  animation: stepIn 0.4s ease;
}

.journey-success.is-visible {
  display: block;
}

.journey-success-icon {
  margin-bottom: 20px;
}

.journey-btn-close-success {
  margin-top: 28px;
  background: var(--ink);
  color: var(--foam);
}

/* Body scroll lock */
body.modal-open {
  overflow: hidden;
}

/* ==========================================================
   RESPONSIVE — Modal
   ========================================================== */
@media (max-width: 600px) {
  .journey-modal {
    padding: 36px 24px 32px;
    max-height: 90vh;
  }

  .journey-progress {
    gap: 0;
  }

  .progress-label {
    font-size: 0.58rem;
  }

  .journey-progress-line {
    width: 28px;
  }

  .journey-field-row {
    grid-template-columns: 1fr;
  }

  .journey-package-options {
    grid-template-columns: 1fr;
  }

  .journey-toggle-group {
    flex-direction: column;
  }

  .journey-step-actions {
    flex-direction: column;
  }

  .journey-btn-next,
  .journey-btn-submit {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .journey-btn-back {
    width: 100%;
    text-align: center;
    order: 2;
  }
}