/* ============================================
   PINK MY DIVE — Static Preview
   Mockup of how a Squarespace Bennie-based site could look.
   This is NOT the production site; production = Squarespace.
   ============================================ */

:root {
  /* PMD palette — DARK MODE.
     Black canvas. Pink = brand emphasis. Logo yellow #F0D850 reserved for HOVER/EFFECT only. */
  --pink:        #F72798;
  --pink-soft:   #FFE0EE;
  --accent:      #F0D850;          /* logo yellow — RESERVED for hover/effect ONLY (do not use as default fill) */
  --accent-deep: #C8B233;
  --accent-soft: #FAF3C8;
  --accent-glow: rgba(240, 216, 80, 0.65);
  --black:       #000000;
  --black-2:     #0A0A0A;          /* slight tonal step for depth */
  --white:       #FFFFFF;
  --off-white:   #FAFAFA;
  --grey-100:    rgba(255,255,255,0.08);
  --grey-500:    rgba(255,255,255,0.65);
  --text-muted:  rgba(255,255,255,0.65);

  --font-display: "Unbounded", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-meta:    "Space Mono", "SF Mono", ui-monospace, monospace;
  --font-funny:   "Bagel Fat One", "Lilita One", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container: 1240px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}
/* Brand-emphasis text — like STAY's salmon <em>, but PMD pink */
em { color: var(--pink); font-style: normal; }
strong em, em strong { font-weight: inherit; }
/* Use class for chartreuse pop in copy (rare highlight) */
.pop { color: var(--accent); font-style: normal; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.5rem, 6.5vw, 5.25rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.85rem, 4.2vw, 3.25rem); font-weight: 800; }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-meta);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.85rem;
}

.lede { font-size: 1.18rem; color: var(--grey-500); max-width: 60ch; }

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 64px 0; }
@media (max-width: 720px) { section { padding: 44px 0; } }

/* Water-ripple canvas overlay on hero — mouse moves = ripples emanate from cursor */
.hero-ripples {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* GENERIC SNAP-PAGE rules placed early so they always parse */
body.snap-page > header,
body.snap-page > section {
  scroll-snap-align: start;
}
body.snap-page > .loc-hero,
body.snap-page > .loc-hero-detail,
body.snap-page > .hero,
body.snap-page > .detail-hero {
  min-height: 100vh;
}
body.snap-page > .loc-intro,
body.snap-page > .loc-cta {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* All sections inherit black body bg by default. Variants for tonal contrast. */
.section--cream      { background: var(--black-2); }                         /* very subtle lift */
.section--accent     { background: var(--black-2); color: var(--white); }    /* tonal contrast section */
.section--accent-soft{ background: var(--black-2); }                          /* same — STAY-style mono */
.section--pink       { background: var(--pink); color: var(--white); }        /* iconic pink moment */
.section--black      { background: var(--black); color: var(--white); }
.section--pink .eyebrow,
.section--black .eyebrow,
.section--accent .eyebrow { color: var(--white); }
/* Pink section inverts em color so it stays readable */
.section--pink em { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.45); text-underline-offset: 4px; }

/* ====== BUTTONS ======
   Hover effect (yellow = LOGO color, used ONLY here):
   1. Magnetic pull (button shifts toward cursor) — JS
   2. Yellow halo bloom (concentric soft glow expanding outward)
   3. Yellow underline draws under text from left to right
   4. Inner radial highlight follows cursor (white)
   5. Click → yellow ripple from click point
*/
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s cubic-bezier(.2,.8,.2,1),
              background .25s ease,
              color .25s ease,
              letter-spacing .25s ease;
  border: 2px solid transparent;
  white-space: nowrap;
  overflow: visible;
  isolation: isolate;
  will-change: transform;
}
/* Yellow underline draws on hover */
.btn::before {
  content: "";
  position: absolute;
  left: 28px; right: 28px;
  bottom: 10px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 2;
}
/* Cursor-follow radial highlight (white, subtle) */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.btn:hover { transform: translateY(-3px) scale(1.03); letter-spacing: 0.015em; }
.btn:hover::after { opacity: 1; }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(-1px) scale(.99); }

/* Pink primary button — yellow halo bloom on hover */
.btn--primary  { background: var(--pink); color: var(--white); }
.btn--primary:hover {
  background: var(--pink);
  box-shadow:
    0 0 0 3px var(--accent),                                /* tight yellow ring */
    0 0 0 10px rgba(240, 216, 80, 0.20),                    /* soft expanding ring */
    0 16px 40px -10px var(--accent-glow),                   /* yellow halo glow downward */
    0 0 60px -10px rgba(247, 39, 152, 0.45);                /* pink ambient */
}
/* Yellow accent button (rare — secondary CTA) — pink halo on hover */
.btn--accent     {
  background: transparent;
  color: var(--white);
  border-color: var(--accent);
}
.btn--accent:hover {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--pink),
    0 0 0 10px rgba(247, 39, 152, 0.18),
    0 16px 40px -10px rgba(247, 39, 152, 0.55);
}
/* Ghost button — yellow halo */
.btn--ghost    { border-color: currentColor; }
.btn--ghost:hover {
  background: rgba(255,255,255,0.05);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 0 10px rgba(240, 216, 80, 0.15),
    0 16px 40px -10px var(--accent-glow);
}

/* Click ripple — yellow */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(240, 216, 80, 0.65);
  pointer-events: none;
  animation: rippleOut .6s ease-out forwards;
  z-index: 0;
}
@keyframes rippleOut {
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* ====== NAV ====== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
.nav.is-scrolled {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav__links a, .nav__logo img { transition: color .25s ease, transform .35s ease; }
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo img { height: 120px; width: auto; transition: transform .35s ease, height .35s ease; }
.nav__logo:hover img { transform: scale(1.04) rotate(-2deg); }
/* Shrink slightly when scrolled (hero passed) so logo doesn't dominate inner pages */
.nav.is-scrolled .nav__logo img { height: 72px; }
/* Homepage gets a bigger brand-statement logo at the top of the hero. After
   scroll it shrinks to the same size as the rest of the site so the nav
   stays compact on inner sections. */
.is-home .nav__logo img            { height: 180px; }
.is-home .nav.is-scrolled .nav__logo img { height: 72px; }
@media (max-width: 720px) {
  .nav__logo img { height: 80px; }
  .nav.is-scrolled .nav__logo img { height: 56px; }
  .is-home .nav__logo img { height: 110px; }
  .is-home .nav.is-scrolled .nav__logo img { height: 56px; }
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav__links a {
  font-weight: 600;
  font-size: 0.96rem;
  position: relative;
  color: var(--white);
}
.nav__links a:hover { color: var(--pink); }
.nav__cta { display: flex; gap: 12px; align-items: center; }

@media (max-width: 880px) {
  .nav__links { display: none; }
}

/* ====== HERO ====== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url("https://picsum.photos/seed/pmddive-hero/2000/1200") center/cover no-repeat;
  z-index: 0;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.85) 75%,
    rgba(0,0,0,1.00) 100%);
}
/* Soft fade-to-black on the video itself — kills the hard bottom edge */
.hero__video, .detail-hero .hero__video {
  filter: brightness(0.78) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 65%,
    rgba(0,0,0,0.6) 85%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0%,
    #000 65%,
    rgba(0,0,0,0.6) 85%,
    transparent 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
}
.hero__chip {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  font-family: var(--font-meta);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero__chip::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--pink);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.hero h1 { color: var(--white); margin-bottom: 1rem; max-width: 12ch; }
.hero__sub { font-size: 1.2rem; max-width: 56ch; margin-bottom: 2rem; opacity: 0.95; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ====== SECTION HEAD ====== */
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ====== INTRO ABOUT ====== */
.intro-about {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.intro-about__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: url("https://picsum.photos/seed/pmd-intro/900/1100") center/cover;
}
@media (max-width: 880px) {
  .intro-about { grid-template-columns: 1fr; gap: 32px; }
  .intro-about__media { aspect-ratio: 4/3; }
}

/* ====== DESTINATION CARDS ====== */
.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .destinations-grid { grid-template-columns: 1fr; } }

.dest-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  aspect-ratio: 4/5;
  display: flex;
  align-items: flex-end;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s ease;
  will-change: transform;
}
.dest-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55),
              0 0 0 1px rgba(125,236,247,0.25);
}
.dest-card.is-tilting { transition: transform .12s ease-out, box-shadow .25s ease; }
.dest-card__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s ease;
}
.dest-card:hover .dest-card__img { transform: scale(1.05); }
.dest-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
}
.dest-card__inner {
  position: relative; z-index: 1;
  padding: 28px;
  width: 100%;
}
.dest-card__price {
  display: inline-block;
  background: var(--pink);
  color: var(--white);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-funny);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  transform: rotate(-2deg);
}
.dest-card__title { color: var(--white); margin-bottom: 6px; }
.dest-card__desc { font-size: 0.95rem; opacity: 0.9; margin-bottom: 14px; }
.dest-card__link { font-weight: 700; color: var(--pink); transition: color .25s ease; }
.dest-card:hover .dest-card__link { color: var(--accent); }

/* ====== LIFESTYLE / SPLIT SECTION ====== */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  aspect-ratio: 5/4;
  border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
}
@media (max-width: 880px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: 0; }
}

/* ====== TESTIMONIAL ====== */
.testimonial { text-align: center; max-width: 820px; margin: 0 auto; }
.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 24px 0 32px;
}
.testimonial__author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}
.testimonial__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--white);
  background-size: cover; background-position: center;
}

/* ====== CROSS-LINK STAY ====== */
.cross-link {
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.cross-link::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 180%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.5;
}
@media (max-width: 880px) {
  .cross-link { grid-template-columns: 1fr; padding: 32px; text-align: center; }
}
.cross-link__tag {
  display: inline-block;
  background: var(--pink);
  color: var(--white);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  margin-bottom: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ====== NEWSLETTER ====== */
.newsletter {
  text-align: center;
}
.newsletter__form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 28px auto 0;
}
.newsletter__form input {
  flex: 1;
  padding: 14px 22px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  background: rgba(255,255,255,0.05);
  color: var(--white);
}
.newsletter__form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter__form input:focus { outline: 3px solid var(--pink); outline-offset: 2px; border-color: var(--pink); }
@media (max-width: 600px) {
  .newsletter__form { flex-direction: column; }
}

/* ====== FOOTER ====== */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 52px 0 24px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 32px;
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__col h4 {
  font-family: var(--font-meta);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 10px; }
.footer__col a { opacity: 0.8; }
.footer__col a:hover { color: var(--pink); opacity: 1; }
.footer__logo img { height: 70px; width: auto; margin-bottom: 14px; }
.footer__tagline { opacity: 0.7; font-size: 0.95rem; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ====== DESTINATION DETAIL PAGE ====== */
.detail-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.detail-hero__inner { position: relative; z-index: 2; }
.detail-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.detail-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}
.detail-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 60px 24px;
}
.crumb {
  font-family: var(--font-meta);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
}
.detail-hero h1 { color: var(--white); }

.pricing-bar {
  background: var(--black);
  color: var(--white);
  padding: 32px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 24px;
  align-items: end;
  margin-top: -40px;
  position: relative;
  z-index: 2;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
@media (max-width: 880px) {
  .pricing-bar { grid-template-columns: 1fr; }
}
.pricing-bar label {
  display: block;
  font-family: var(--font-meta);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
.pricing-bar select, .pricing-bar .price-display {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  padding: 12px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
}
.price-display strong {
  font-family: var(--font-funny);
  font-size: 1.55rem;
  color: var(--pink);
  letter-spacing: 0.01em;
}

.itinerary {
  display: grid;
  gap: 16px;
}
.itinerary__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.itinerary__day {
  font-family: var(--font-funny);
  font-size: 1.35rem;
  color: var(--pink);
  letter-spacing: 0.02em;
}
.itinerary__title { font-weight: 700; margin-bottom: 4px; }

.expand-list { display: grid; gap: 12px; }
details {
  background: var(--black-2);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .25s ease;
}
details[open] { border-color: rgba(255,255,255,0.18); }
summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white);
}
summary::after { content: "+"; font-size: 1.4rem; color: var(--pink); }
details[open] summary::after { content: "−"; }
details p { padding-top: 12px; color: var(--text-muted); }

/* ====== ABOUT PAGE ====== */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 720px) { .principles-grid { grid-template-columns: 1fr; } }
.principle {
  background: var(--black-2);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
}
.principle__num {
  font-family: var(--font-funny);
  font-size: 3rem;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.principle h3 { margin-bottom: 12px; }

/* ====== UTILITY ====== */
.center-text { text-align: center; }
.mt-1 { margin-top: 24px; }
.mt-2 { margin-top: 48px; }
.divider { height: 1px; background: rgba(0,0,0,0.08); margin: 0 0; }

/* Note banner — preview-only (hidden by default for luxe feel) */
.preview-banner { display: none; }

/* ====== LOCATIONS PAGE ====== */
/* Legacy text-only loc-hero (other location pages may still use it) */
.loc-hero:not(.loc-hero--video) {
  padding-top: 200px;
  padding-bottom: 40px;
  text-align: left;
}
.loc-hero .lede { color: rgba(255,255,255,0.85); max-width: 64ch; }
.loc-hero .lede strong { color: var(--white); font-weight: 700; }
.loc-hero .lede em      { color: var(--pink); font-style: normal; font-weight: 700; }

/* Full-viewport video hero — locations.html / similar pages.
   Mirrors the .spot-hero pattern from dive-site pages: full bleed video bg,
   B&W filter (via body.hero-bw), bubbles, dark overlay, bottom fade-to-black,
   content bottom-aligned with crumb / eyebrow / h1 / lede / pitch. */
.loc-hero--video {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  overflow: hidden;
  padding: 0;
}
.loc-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.65) saturate(1.05);
  /* Soft fade-out at the bottom so video melts into the next section's black */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
}
/* Bottom fade gradient over content — same recipe as .spot-hero::after */
.loc-hero--video::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.85) 80%,
    var(--black) 100%);
  z-index: 1;
  pointer-events: none;
}
.loc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 24px 0 96px;
}
.loc-hero--video .eyebrow {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  border: 1px solid rgba(247, 39, 152, 0.45);
  background: rgba(247, 39, 152, 0.08);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.loc-hero--video h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.loc-hero--video h1 em { color: var(--pink); font-style: normal; }
.loc-hero--video .lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 64ch;
}
.loc-hero__pitch {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 60ch;
  border-left: 2px solid var(--pink);
  padding: 6px 0 6px 16px;
}
.loc-hero__pitch em { color: var(--pink); font-style: normal; font-weight: 600; }

/* Hero stats strip — 4 mini cells under the lede */
.loc-hero__stats {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 720px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 720px) {
  .loc-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .loc-hero__stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}
.loc-hero__stat {
  padding: 18px 16px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.loc-hero__stat:last-child { border-right: 0; }
.loc-hero__stat strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}
.loc-hero__stat span {
  font-family: var(--font-meta);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Map legend — bottom-left under the map */
.map-legend {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(15, 15, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.map-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}
.map-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.map-legend__item--active .map-legend__dot {
  background: var(--pink);
  box-shadow: 0 0 8px rgba(247, 39, 152, 0.7);
}
.map-legend__item--soon .map-legend__dot {
  background: rgba(255, 255, 255, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.5);
  width: 8px;
  height: 8px;
}
.map-legend__item--ref .map-legend__dot {
  background: rgba(125, 236, 247, 0.7);
}

/* Soon main spot — dimmed dashed ring */
.spot--main.is-soon .spot__ring {
  stroke-dasharray: 4 4;
  opacity: 0.4;
}
.spot--main.is-soon .spot__dot {
  opacity: 0.55;
  filter: saturate(0.5);
}
.spot--main.is-soon .spot__label--main {
  opacity: 0.55;
  letter-spacing: 0.18em;
}
.spot--main.is-soon:hover .spot__ring,
.spot--main.is-soon:hover .spot__dot,
.spot--main.is-soon:hover .spot__label--main {
  opacity: 0.85;
}

/* REGION OVERVIEW CARDS — under the map */
.loc-regions {
  padding: 80px 0 96px;
  background: var(--black);
}
.loc-regions__head { text-align: center; margin-bottom: 48px; }
.loc-regions__head .eyebrow { color: var(--pink); }
.loc-regions__head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 8px 0 16px; }
.loc-regions__head .lede { max-width: 60ch; margin: 0 auto; color: var(--text-muted); }
.loc-regions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 980px) { .loc-regions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .loc-regions__grid { grid-template-columns: 1fr; } }
.region-card {
  position: relative;
  background: var(--black-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 28px 26px 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease;
  isolation: isolate;
}
.region-card--active {
  border-color: rgba(247, 39, 152, 0.35);
}
.region-card--active:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 39, 152, 0.65);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5),
              0 0 30px -8px rgba(247, 39, 152, 0.35);
}
.region-card--soon {
  cursor: default;
  pointer-events: auto;
  opacity: 0.78;
}
.region-card--soon:hover {
  border-color: rgba(255, 255, 255, 0.18);
  opacity: 1;
}
.region-card--ref {
  background: var(--black);
  border-color: rgba(125, 236, 247, 0.18);
}
.region-card--ref:hover {
  border-color: rgba(125, 236, 247, 0.35);
  transform: translateY(-3px);
}
.region-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-meta);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
}
.region-card__badge--active {
  color: var(--pink);
  border-color: rgba(247, 39, 152, 0.5);
  background: rgba(247, 39, 152, 0.08);
}
.region-card__badge--soon {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  border-style: dashed;
  background: transparent;
}
.region-card__badge--ref {
  color: rgba(125, 236, 247, 0.85);
  border-color: rgba(125, 236, 247, 0.4);
  background: rgba(125, 236, 247, 0.06);
}
.region-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin: 0;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.region-card__title em { color: var(--pink); font-style: normal; }
.region-card--ref .region-card__title em { color: var(--accent); }
.region-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  flex: 1;
}
.region-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.region-card__stats strong { color: var(--white); font-weight: 700; }
.region-card__cta {
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pink);
  margin-top: 4px;
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
}
.region-card--active:hover .region-card__cta { transform: translateX(4px); color: var(--accent); }
.region-card--soon .region-card__cta { color: rgba(255, 255, 255, 0.4); }
.region-card--ref .region-card__cta { color: rgba(125, 236, 247, 0.85); }

.map-section {
  padding: 160px 0 96px;          /* push map well below hero so the full Bali outline (incl. Pemuteran/Tulamben markers at top) is in view */
}
.map-wrap {
  display: block;
  position: relative;
}

.map-svg-wrap {
  position: relative;
  /* No frame — sits on plain black page background */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 600px;
}
.bali-map { width: 100%; height: auto; display: block; }
.bali-outline-img { filter: invert(1) brightness(1.1); opacity: 0.92; }

/* Region labels (always visible, faint) */
.map-region {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.18em;
  fill: rgba(255,255,255,0.45);
  pointer-events: none;
}
.map-label-tiny {
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: rgba(255,255,255,0.35);
}

/* Pulsing destination clouds — all idle until hovered */
.cloud { opacity: 0.55; transition: opacity .4s ease; }

/* ===== SPOT MARKERS =====
   Two tiers:
   .spot--main  → 5 primary locations (Pemuteran/Tulamben/Padang Bai + Airport + Canggu)
                  with colored ring (red/magenta/blue) + always-visible label
   .spot--site  → 17 dive sites (subtle, pink dots) — secondary, only shine on hover */

.spot { cursor: pointer; outline: none; }

/* Common dot/halo pulse-from-center fix */
.spot__halo, .spot__dot, .spot__ring {
  transform-box: fill-box;
  transform-origin: center;
}

/* Halo (visible only on hover) */
.spot__halo {
  fill: var(--pink);
  opacity: 0;
  transition: opacity .35s ease;
}

/* Dive sites — HIDDEN, replaced by floating list card */
.spot--site { display: none; }
.spot--site .spot__dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px rgba(240, 216, 80, 0.75));
  animation: spotPulse 2.4s ease-in-out infinite;
  transition: fill .25s ease, filter .25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.spot--site .spot__label {
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: rgba(255,255,255,0.85);
  pointer-events: none;
  text-transform: uppercase;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.85);
  stroke-width: 2.5;
}

/* When parent destination is active, reveal its sites — they "pop out" from main */
.bali-map.has-active-pemuteran .spot--site[data-area="pemuteran"],
.bali-map.has-active-tulamben  .spot--site[data-area="tulamben"],
.bali-map.has-active-padangbai .spot--site[data-area="padangbai"],
.bali-map.has-active-penida    .spot--site[data-area="penida"] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
/* Stagger delay — each site appears slightly later than previous */
.spot--site:nth-child(2) { transition-delay: 0s; }
.spot--site:nth-of-type(1) { transition-delay: 0.05s; }
.spot--site:nth-of-type(2) { transition-delay: 0.10s; }
.spot--site:nth-of-type(3) { transition-delay: 0.15s; }
.spot--site:nth-of-type(4) { transition-delay: 0.20s; }
.spot--site:nth-of-type(5) { transition-delay: 0.25s; }
.spot--site:nth-of-type(6) { transition-delay: 0.30s; }
.spot--site:nth-of-type(7) { transition-delay: 0.35s; }

/* Hover individual dive site — yellow glow + halo */
.spot--site:hover .spot__halo { opacity: 0.55; }
.spot--site:hover .spot__dot {
  fill: var(--white);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.95));
}
.spot--site:hover .spot__label { fill: var(--accent); }
.spot--site.is-active .spot__halo { opacity: 0.55; }
.spot--site.is-active .spot__dot { fill: var(--white); filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)); }
.spot--site.is-active .spot__label { fill: var(--accent); }

/* Main location — invisible hit area + ring + dot */
.spot__hit {
  fill: transparent;
  cursor: pointer;
}
.spot--main .spot__ring {
  stroke-width: 3;
  fill: none;
  pointer-events: none;
  transition: stroke-width .35s ease, r .35s cubic-bezier(.2,.8,.2,1);
  animation: ringPulse 3s ease-in-out infinite;
}
.spot--main .spot__dot { pointer-events: none; }
.spot--main .spot__label { pointer-events: none; }
.spot--main .spot__dot {
  filter: drop-shadow(0 0 8px currentColor);
  transition: r .25s ease;
}
.spot--main .spot__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--white);
  pointer-events: none;
  transition: fill .25s ease, font-size .25s ease;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.85);
  stroke-width: 3;
}
.spot--main:hover .spot__ring { stroke-width: 4; }
.spot--main:hover .spot__dot { /* dot grows slightly */ }
.spot--main:hover .spot__label { font-size: 15px; }

/* Color variants */
.spot--main--red    .spot__ring { stroke: #FF2E4C; }
.spot--main--red    .spot__dot  { fill: #FF2E4C; color: #FF2E4C; }
.spot--main--red:hover .spot__label { fill: #FF2E4C; }

.spot--main--magenta .spot__ring { stroke: #FF3FB8; }
.spot--main--magenta .spot__dot  { fill: #FF3FB8; color: #FF3FB8; }
.spot--main--magenta:hover .spot__label { fill: #FF3FB8; }

.spot--main--blue    .spot__ring { stroke: #18C6F0; }
.spot--main--blue    .spot__dot  { fill: #18C6F0; color: #18C6F0; }
.spot--main--blue:hover .spot__label { fill: #18C6F0; }

@keyframes spotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.30); }
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.7; }
}

/* When hovering an area's spot, that area's cloud brightens */
.bali-map.has-active-pemuteran .cloud--pemuteran,
.bali-map.has-active-tulamben .cloud--tulamben,
.bali-map.has-active-padangbai .cloud--padangbai,
.bali-map.has-active-airport .cloud--airport,
.bali-map.has-active-canggu .cloud--canggu,
.bali-map.has-active-penida .cloud--penida { opacity: 1; }

/* (Old tooltip + side panel CSS removed — hologram card replaces them.) */

/* ====== HOLOGRAM DIVE LIST CARD — 3D-tilted floating card with scan lines ====== */
.dive-list {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(440px, 64%, 760px);
  background:
    linear-gradient(135deg,
      rgba(247, 39, 152, 0.10) 0%,
      rgba(10, 10, 10, 0.68) 35%,
      rgba(10, 10, 10, 0.68) 65%,
      rgba(240, 216, 80, 0.10) 100%);
  backdrop-filter: blur(34px) saturate(160%);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 30px 34px;
  visibility: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(247, 39, 152, 0.25),
    0 0 60px -20px rgba(247, 39, 152, 0.30),
    0 0 100px -30px rgba(240, 216, 80, 0.20),
    inset 0 0 60px -20px rgba(247, 39, 152, 0.10);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  /* HIDDEN: at main marker's pixel position, tiny + blurred + heavily tilted */
  transform:
    translate(calc(-50% + var(--start-x, 0px)), calc(-50% + var(--start-y, 0px)))
    perspective(1200px) rotateY(-15deg) rotateX(10deg)
    scale(0.04);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  filter: blur(10px);
  transition:
    opacity .5s ease,
    transform .75s cubic-bezier(.32, 1.2, .35, 1),
    filter .5s ease;
  isolation: isolate;
}
.dive-list.is-visible {
  opacity: 1;
  /* VISIBLE: at center, full size, gentle hologram tilt */
  transform:
    translate(-50%, -50%)
    perspective(1200px) rotateY(-7deg) rotateX(3deg)
    scale(1);
  pointer-events: auto;
  filter: blur(0);
  visibility: visible;
  /* Hologram drifts subtly in 3D space — feels alive, not pinned */
  animation: hologramFloat 7.2s ease-in-out 0.75s infinite;
}
@keyframes hologramFloat {
  0%, 100% {
    transform:
      translate(-50%, -50%)
      perspective(1200px) rotateY(-7deg) rotateX(3deg)
      translate3d(0, 0, 0)
      scale(1);
  }
  25% {
    transform:
      translate(-50%, -50%)
      perspective(1200px) rotateY(-9deg) rotateX(5deg)
      translate3d(-3px, -6px, 0)
      scale(1.005);
  }
  50% {
    transform:
      translate(-50%, -50%)
      perspective(1200px) rotateY(-5deg) rotateX(4deg)
      translate3d(2px, -10px, 0)
      scale(1.008);
  }
  75% {
    transform:
      translate(-50%, -50%)
      perspective(1200px) rotateY(-8deg) rotateX(2deg)
      translate3d(4px, -4px, 0)
      scale(1.005);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dive-list.is-visible { animation: none; }
}
/* Scan-line overlay for hologram feel */
.dive-list::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px);
  pointer-events: none;
  z-index: 1;
}
/* (Top-edge gradient line removed per request) */
.dive-list > * { position: relative; z-index: 2; }
/* Subtle source-pulse on the active main marker — visual cue: this is where the card came from */
.spot--main.is-source .spot__ring {
  animation: sourcePulse 1.2s ease-out 1;
}
@keyframes sourcePulse {
  0%   { stroke-width: 3; opacity: 1; }
  35%  { stroke-width: 14; opacity: 0.35; }
  100% { stroke-width: 3; opacity: 1; }
}
.dive-list__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dive-list__eyebrow {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
}
.dive-list__count {
  font-family: var(--font-meta);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.dive-list__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 18px;
  line-height: 1.05;
}
.dive-list__items {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}
.dive-list__items li {
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 720px) {
  .dive-list { width: clamp(280px, 92%, 460px); padding: 22px 24px; }
  .dive-list__items { grid-template-columns: 1fr; column-gap: 0; }
}
/* Each li now wraps a real <a> link → click navigates to detail page */
.dive-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
  transition: padding .25s ease, color .25s ease;
}
.dive-list__link:hover {
  padding-left: 8px;
  color: var(--accent);
}
.dive-list__link:hover .dive-list__dot { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.dive-list__link:focus-visible {
  outline: 1px solid rgba(247, 39, 152, 0.6);
  outline-offset: 4px;
}
.dive-list__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}
.dive-list__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
  transition: background .25s ease, box-shadow .25s ease;
}
.dive-list__meta {
  font-family: var(--font-meta);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Difficulty stars — pink, with sequential pop animation on hover */
.dive-list__stars {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}
.dive-list__stars .star {
  color: var(--pink);
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(247, 39, 152, 0.45));
  transition: transform .25s cubic-bezier(.34, 1.4, .35, 1);
  transform-origin: center;
}
.dive-list__items li:hover .star,
.dive-list__link:hover .star {
  animation: starPop .55s cubic-bezier(.34, 1.6, .35, 1) both;
  animation-delay: calc(var(--star-i, 0) * 0.10s);
}
@keyframes starPop {
  0%   { transform: scale(1) translateY(0); color: var(--pink); }
  35%  { transform: scale(1.7) translateY(-3px); color: #FFFFFF; filter: drop-shadow(0 0 10px var(--pink)); }
  100% { transform: scale(1) translateY(0); color: var(--pink); }
}
.dive-list__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 700;
  cursor: pointer;
  transition: gap .25s ease, color .25s ease;
}
.dive-list__cta:hover { gap: 12px; color: var(--accent); }
.dive-list--empty .dive-list__items,
.dive-list--empty .dive-list__cta { display: none; }
.dive-list--empty .dive-list__desc { margin-bottom: 0; }

/* ====== INSTAGRAM FEED — modern tile look ======
   Each tile: dark glass card + rotating pink↔yellow gradient ring on hover.
   Always-visible bottom metadata bar with date/location/likes.
*/
.ig-feed { background: var(--black); }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 520px) { .ig-grid { grid-template-columns: 1fr; } }

.ig-tile {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 18px;
  display: block;
  background: var(--black);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
}
.ig-tile.is-tilting { transition: transform .12s ease-out, box-shadow .25s ease; }
/* Inner clip layer (so the gradient border stays outside the rounded mask) */
.ig-tile__inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  background: var(--black);
}
.ig-tile img,
.ig-tile video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
/* Subtle vignette for cinematic feel — always on */
.ig-tile__inner::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity .35s ease;
}

/* Bioluminescent hover glow — yellow primary + pink ambient underneath.
   The tile lifts and tilts (3D, via JS) like the rest of the site's cards. */
.ig-tile:hover {
  transform: translateY(-10px);
  box-shadow:
    0 0 0 1px rgba(240, 216, 80, 0.35),                  /* tight yellow rim */
    0 25px 50px -10px rgba(240, 216, 80, 0.55),          /* yellow drop glow underneath */
    0 40px 90px -20px rgba(247, 39, 152, 0.40),          /* pink ambient deeper down */
    0 8px 20px -8px rgba(0, 0, 0, 0.7);                  /* depth shadow for grounding */
}
.ig-tile:hover img { transform: scale(1.08); filter: brightness(1.1); }
.ig-tile:hover video { transform: scale(1.05); }
.ig-tile:hover .ig-tile__meta { transform: translateY(0); opacity: 1; }
.ig-tile:hover .ig-tile__type { background: var(--pink); color: var(--white); }

/* Top-right type badge (REEL / POST) */
.ig-tile__type {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: var(--white);
  padding: 5px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .3s ease, color .3s ease;
}

/* Bottom metadata bar — always visible, becomes more opaque on hover */
.ig-tile__meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 70%);
  color: var(--white);
  pointer-events: none;
  font-family: var(--font-meta);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
  transform: translateY(2px);
  opacity: 0.85;
  transition: transform .35s ease, opacity .35s ease;
}
.ig-tile__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-weight: 700;
}
.ig-tile__loc::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.ig-tile__likes { opacity: 0.75; font-size: 0.6rem; }
.ig-tile__icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity .25s ease, transform .25s ease;
}
.ig-tile:hover .ig-tile__icon { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }

/* IG icon link (nav + footer) */
.ig-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: inherit;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ig-icon:hover { background: var(--pink); color: var(--white); border-color: var(--pink); transform: scale(1.08) rotate(-4deg); }
.ig-icon svg { width: 18px; height: 18px; }

/* Color picker (preview-only — to be removed in production) */
.color-picker {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.4);
}
.color-picker__label { padding-right: 6px; border-right: 1px solid rgba(255,255,255,0.18); margin-right: 2px; }
.color-picker__swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.color-picker__swatch:hover { transform: scale(1.1); }
.color-picker__swatch.is-active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.2); }
.color-picker__hex {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  opacity: 0.7;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.18);
  margin-left: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.color-picker__label { line-height: 1.1; }

/* Palette picker variant */
.color-picker--palettes { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; max-width: 220px; }
.color-picker--palettes .color-picker__label { padding: 0 0 6px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); margin-right: 0; margin-bottom: 4px; }
.color-picker__palette {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.color-picker__palette:hover { background: rgba(255,255,255,0.1); transform: translateX(-2px); }
.color-picker__palette.is-active { background: rgba(255,255,255,0.15); border-color: #fff; }
.color-picker__stack { display: flex; gap: 0; flex-shrink: 0; }
.color-picker__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.4);
  margin-left: -6px;
}
.color-picker__dot:first-child { margin-left: 0; }
.color-picker__tag {
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: 0.08em;
}
.color-picker--palettes .color-picker__hex {
  border-left: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 8px 0 0;
  margin: 4px 0 0;
  font-size: 0.62rem;
  text-transform: none;
  letter-spacing: 0.02em;
  text-align: left;
  line-height: 1.3;
  white-space: normal;
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

/* ----- Water caustic shimmer on hero ----- */
.hero__water {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(125,236,247,0.55), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(125,236,247,0.40), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.25), transparent 65%);
  filter: blur(40px);
  animation: causticDrift 14s ease-in-out infinite alternate;
}
.hero__water::before,
.hero__water::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.49 0 0 0 0 0.93 0 0 0 0 0.97 0 0 0 0.55 0'/></filter><rect width='600' height='600' filter='url(%23n)'/></svg>") center/cover;
  opacity: 0.45;
  mix-blend-mode: screen;
  animation: shimmer 18s linear infinite;
}
.hero__water::after {
  animation-duration: 26s;
  animation-direction: reverse;
  opacity: 0.30;
  filter: blur(2px);
}
@keyframes causticDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-2%, 1%) scale(1.05); }
  100% { transform: translate(2%, -1%) scale(1.02); }
}
@keyframes shimmer {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(-3%, -2%, 0) rotate(2deg); }
}

/* ----- Floating bubbles ----- */
.bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bubble {
  position: absolute;
  bottom: -120px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(125,236,247,0.35) 60%, rgba(125,236,247,0) 100%);
  box-shadow: inset 0 0 4px rgba(255,255,255,0.5);
  animation: floatUp linear infinite;
  opacity: 0;
}
@keyframes floatUp {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate3d(20px, -45vh, 0) scale(1); opacity: 0.7; }
  100% { transform: translate3d(-15px, -110vh, 0) scale(0.4); opacity: 0; }
}

/* ----- Levitate utility for any card ----- */
.levitate {
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s ease;
  will-change: transform;
  transform-style: preserve-3d;
}
.levitate:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.25),
              0 0 0 1px rgba(125,236,247,0.3);
}
.levitate.is-tilting { transition: transform .12s ease-out, box-shadow .25s ease; }

/* ----- Principle card lift ----- */
.principle {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.principle:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.18);
}

/* ----- Scroll reveal ----- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .hero__water, .hero__water::before, .hero__water::after, .bubble { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .levitate, .principle, .dest-card { transition: none !important; }
}

/* ============================================
   LOCATION DETAIL PAGE (pemuteran.html, tulamben.html, …)
   ============================================ */

/* Hero — full-bleed photo with overlay, larger than detail-hero */
.loc-hero-detail {
  position: relative;
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* push content block to lower portion */
  color: var(--white);
  overflow: hidden;
  padding-bottom: 6vh; /* small gap from very bottom */
}
.loc-hero-detail .loc-hero-detail__inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
/* Stats bar sits DIRECTLY UNDER hero content block (not pinned to absolute bottom) */
.loc-hero-detail > .spot-hero__stats-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 32px;  /* breathing space between subtitle and stats */
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.loc-hero-detail__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: brightness(0.78) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
}
.loc-hero-detail__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
}
.loc-hero-detail h1 { color: var(--white); font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 1rem; }
.loc-hero-detail .crumb { font-family: var(--font-meta); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin-bottom: 16px; }
.loc-hero-detail .crumb a { color: var(--accent); text-decoration: none; }
.loc-hero-detail .crumb a:hover { color: var(--pink); }

/* Stats strip — between hero and intro */
.loc-stats-section { padding: 0; }
.loc-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0;
  perspective: 1200px;
}
.loc-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 12px;
  cursor: default;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), background .4s ease;
  will-change: transform;
  transform-style: preserve-3d;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.loc-stat:last-child { border-right: 0; }
/* Pink radial glow on hover */
.loc-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              rgba(247,39,152,0.25) 0%,
              rgba(247,39,152,0.08) 40%,
              transparent 75%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
.loc-stat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  transform: translateX(-50%);
  transition: width .55s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.loc-stat > * { position: relative; z-index: 2; }
.loc-stat:hover, .loc-stat.is-tilting { background: rgba(255,255,255,0.015); }
.loc-stat:hover::before, .loc-stat.is-tilting::before { opacity: 1; }
.loc-stat:hover::after, .loc-stat.is-tilting::after { width: 70%; }
.loc-stat:hover span, .loc-stat.is-tilting span { color: var(--pink); }
.loc-stat:hover strong, .loc-stat.is-tilting strong {
  color: var(--white);
  text-shadow: 0 0 18px rgba(247,39,152,0.55), 0 0 36px rgba(247,39,152,0.25);
}
.loc-stat span {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .35s ease;
}
.loc-stat strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--white);
  transition: text-shadow .45s ease, color .35s ease;
}
@media (max-width: 980px) {
  .loc-stats { grid-template-columns: repeat(3, 1fr); }
  .loc-stat:nth-child(3n) { border-right: 0; }
  .loc-stat:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 540px) {
  .loc-stats { grid-template-columns: repeat(2, 1fr); }
  .loc-stat { border-right: 1px solid rgba(255,255,255,0.06); }
  .loc-stat:nth-child(2n) { border-right: 0; }
  .loc-stat:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* Intro — 2-col split */
.loc-intro { padding: 96px 0; }
.loc-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) {
  .loc-intro__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Dive sites sections */
.loc-sites { padding: 96px 0; }
.loc-sites__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 32px;
}
@media (max-width: 880px) {
  .loc-sites__head { grid-template-columns: 1fr; gap: 16px; }
}

/* Difficulty section variants */
.loc-sites--easy     {}
.loc-sites--medium   { background: var(--black-2); }
.loc-sites--advanced {}

/* Dive grid — 2 columns desktop (STAY-style typographic cards), 1 mobile */
.dive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .dive-grid { grid-template-columns: 1fr; } }

/* Featured grid — same 2 cols, just different padding for big spots */
.dive-grid--featured { gap: 24px; }

/* DIVE CARD — STAY-style typographic ON photo background.
   Photo sits behind a black overlay; text reads cleanly on top.
   Hover: overlay fades, hologram glow + 3D tilt. */
.dive-card {
  position: relative;
  background-color: var(--black);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  padding: 32px 36px 30px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  overflow: hidden;
  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              box-shadow .55s ease,
              border-color .55s ease;
  will-change: transform;
  transform-style: preserve-3d;
  isolation: isolate;
}
/* Dark overlay over photo — keeps text readable */
.dive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.92) 50%,
      rgba(0,0,0,0.95) 100%);
  z-index: 0;
  transition: background .55s ease, opacity .55s ease;
  pointer-events: none;
}
/* HOVER → HOLOGRAM: photo shows through more, 3D tilt, gradient corners, glow */
.dive-card:hover {
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(-6px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(247, 39, 152, 0.30),
    0 0 50px -12px rgba(247, 39, 152, 0.35),
    0 30px 60px -20px rgba(240, 216, 80, 0.25),
    0 10px 24px -8px rgba(0, 0, 0, 0.6);
}
.dive-card:hover::after {
  background:
    linear-gradient(135deg,
      rgba(247, 39, 152, 0.20) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.55) 65%,
      rgba(240, 216, 80, 0.20) 100%);
}
/* Scan-line overlay shows on hover for hologram feel */
.dive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 3px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .45s ease;
}
.dive-card:hover::before { opacity: 1; }
.dive-card > *:not(.dive-card__media):not(.dive-card__type) { position: relative; z-index: 2; }
.dive-card.is-tilting { transition: transform .12s ease-out, box-shadow .25s ease; }

/* Big number top-left — STAY-style */
.dive-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 10px rgba(247,39,152,0.35));
}
/* Title */
.dive-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 4px;
}
/* Tagline (the "italic accent line" right under title) */
.dive-card__tagline {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dive-card__tagline .stars {
  display: inline-flex;
  gap: 1px;
}
.dive-card__tagline .star {
  color: var(--pink);
  font-size: 0.85rem;
  filter: drop-shadow(0 0 4px rgba(247,39,152,0.45));
}
.dive-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Featured (3★) — slightly bigger padding, larger number */
.dive-card--featured { padding: 40px 44px 36px; }
.dive-card--featured .dive-card__num { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.dive-card--featured h3 { font-size: 1.25rem; }

/* Bottom CTA */
/* Founder quote — visually separated from surrounding sections via accent frame.
   Slight tinted backdrop + horizontal accent lines top/bottom. Editorial pull-out feel. */
.spot-quote {
  padding: 96px 0;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      rgba(247,39,152,0.06) 0%,
      transparent 60%),
    var(--black);
}
body.snap-page .spot-quote {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Top + bottom accent lines (pink → yellow gradient) — visually frame the quote */
.spot-quote::before,
.spot-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 40%, 520px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(247,39,152,0.6) 30%,
    rgba(240,216,80,0.6) 70%,
    transparent 100%);
}
.spot-quote::before { top: 18%; }
.spot-quote::after  { bottom: 18%; }

.spot-quote__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
/* Decorative quotation marks above the quote — subtle yellow */
.spot-quote__inner::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 18px;
  opacity: 0.7;
}
.spot-quote__inner p {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 36px;
  font-weight: 600;
}
.spot-quote__inner em {
  color: var(--pink);
  font-style: italic;
  font-weight: 700;
}
.spot-quote__inner footer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.spot-quote__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spot-quote__role {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.loc-cta { padding: 96px 0; text-align: center; }
.loc-cta__inner { max-width: 680px; margin: 0 auto; }
.loc-cta h2 { margin-bottom: 12px; }
.loc-cta .hero__actions { justify-content: center; display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================
   DIVE SITE DETAIL PAGE (dive-anchor-wreck.html, dive-*.html)
   ============================================ */

/* Hero — full viewport, photo backdrop, content + stats strip arranged inside */
.spot-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--white);
  overflow: hidden;
}
/* Bottom fade — photo melts into the black of the next section, no hard cut */
.spot-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.85) 80%,
    var(--black) 100%);
  z-index: 1;
  pointer-events: none;
}
.spot-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: brightness(0.65) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.6) 88%, transparent 100%);
}
.spot-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 24px 48px;
  /* Push content to bottom of available hero space, just above the stats bar */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Scroll hint — small "Story ↓" anchor at bottom-center of hero */
.spot-hero__scroll-hint {
  position: absolute;
  bottom: 132px; /* sits just above the stats bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 12px;
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  animation: scrollHintFadeIn 1.2s cubic-bezier(.2,.8,.2,1) 1.6s forwards;
  transition: color .25s ease;
}
.spot-hero__scroll-hint:hover { color: var(--white); }
.scroll-hint__chevron {
  display: inline-block;
  width: 20px;
  height: 20px;
  animation: scrollHintBounce 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
.scroll-hint__chevron svg { width: 100%; height: 100%; display: block; }
@keyframes scrollHintFadeIn {
  to { opacity: 1; }
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spot-hero__scroll-hint { animation: none; opacity: 1; }
  .scroll-hint__chevron { animation: none; }
}

/* Tiny photo-credit attribution — required by CC BY-SA, kept subtle */
.spot-hero__credit {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: right center;
  z-index: 3;
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.spot-hero__credit:hover { color: rgba(255,255,255,0.85); }

/* Stats bar pinned to bottom of hero — glass overlay */
.spot-hero__stats-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.spot-hero h1 {
  color: var(--white);
  font-size: clamp(3rem, 8vw, 6.5rem);
  margin-bottom: 1.25rem;
  letter-spacing: -0.04em;
}
/* Hero eyebrow — yellow accent (matches the disclaimer labels), breaks the all-pink monotony */
.spot-hero .eyebrow {
  color: var(--accent);
}
/* Breadcrumb — glass pill that stays readable over any busy photo background */
.spot-hero .crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-meta);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 1;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  width: fit-content;
}
.spot-hero .crumb a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease;
}
.spot-hero .crumb a:hover { color: var(--white); }
/* Tiny separator dots between crumb items — subtle */
.spot-hero .crumb { letter-spacing: 0.2em; }
.spot-hero__alias {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 60ch;
}
.spot-hero__alias span {
  font-family: var(--font-meta);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
/* Subtle "alive" timestamp line below alias — meta info, restrained */
.spot-hero__logged {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px rgba(247,39,152,0.7);
  animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.spot-hero__alias strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* ============ SCROLL-SNAP "FULLPAGE" LAYOUT (dive-anchor-wreck.html etc.) ============
   Each major section is min 100vh and snaps to viewport top.
   Proximity snap = gentle, allows slow scrolling without forced jumps. */
body.snap-page {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  /* Offset snap so the fixed nav doesn't cover section content. Nav is ~70px on desktop. */
  scroll-padding-top: 0;
}
html:has(body.snap-page) {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

/* ---- Section nav dots — vertical column on LEFT edge, yellow accent ---- */
.section-dots {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
}
.section-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(240,216,80,0.32);
  border: 1px solid rgba(240,216,80,0.5);
  text-decoration: none;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.section-dot:hover {
  background: rgba(240,216,80,0.7);
  transform: scale(1.4);
}
.section-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(240,216,80,0.75);
  transform: scale(1.4);
}
/* Label flips to right side (since dots are now on left) */
.section-dot__label {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  white-space: nowrap;
  font-family: var(--font-meta);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240,216,80,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.section-dot:hover .section-dot__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 768px) {
  .section-dots { display: none; }
}

/* ---- Sticky "Plan Your Trip" floating CTA — bottom-right glass pill ---- */
.sticky-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 22px;
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(247,39,152,0.55),
              0 0 0 1px rgba(255,255,255,0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta:hover {
  box-shadow: 0 18px 40px -8px rgba(247,39,152,0.7),
              0 0 0 1px rgba(255,255,255,0.2);
}
.sticky-cta svg { width: 14px; height: 14px; }

/* ---- Topography marker tooltip — hovering anchor/wreck markers in the SVG ---- */
.topo-tip {
  position: fixed;
  z-index: 70;
  background: rgba(15,15,17,0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--white);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55);
  max-width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-4px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.topo-tip.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-12px);
}
.topo-tip strong {
  color: var(--pink);
  font-family: var(--font-meta);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* Scroll progress bar — fixed at very top of viewport, grows with scroll position */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--accent) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(247,39,152,0.55);
}
body.snap-page .spot-hero,
body.snap-page .spot-story,
body.snap-page .spot-topo,
body.snap-page .spot-life,
body.snap-page .spot-practical,
body.snap-page .loc-cta {
  scroll-snap-align: start;
  min-height: 100vh;
  box-sizing: border-box;
}

/* generic snap rules moved to end of file */
/* Center content vertically inside the 100vh sections (hero handled separately).
   Override the 96px top/bottom padding on snap pages so content fits viewport. */
body.snap-page .spot-story,
body.snap-page .spot-topo,
body.snap-page .spot-life,
body.snap-page .spot-practical,
body.snap-page .loc-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
}
/* Topo chart: shrink padding inside chart card on snap pages so it fits 100vh */
body.snap-page .topo-chart { padding: 0; }
body.snap-page .topo-note { margin-top: 24px; }
/* Practical can exceed 100vh if needed (6 cards). Allow it to grow. */
body.snap-page .spot-practical { padding-top: 64px; padding-bottom: 64px; }

/* ============ SPOT DETAIL — MAGAZINE LAYOUT ============
   Two section archetypes:
   1) "Reading" sections (story) → narrow LEFT-aligned column ~640px, magazine-style
   2) "Visual" sections (topo, life, practical) → short centered intro + full-width visual content below
   Uniform 96px vertical rhythm between sections, line-height 1.7 for body text. */

/* ----- Quick stats strip (6 cells) — pinned inside hero as glass overlay ----- */
.spot-stats-section { padding: 0; }
.spot-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 0;
  perspective: 1200px;
}
.spot-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 16px;
  cursor: default;
  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              background .4s ease;
  will-change: transform;
  transform-style: preserve-3d;
  /* Vertical separators between cells */
  border-right: 1px solid rgba(255,255,255,0.06);
}
.spot-stat:last-child { border-right: 0; }
/* Pink radial glow that fades in on hover */
.spot-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              rgba(247,39,152,0.25) 0%,
              rgba(247,39,152,0.08) 40%,
              transparent 75%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
/* Bottom underline that draws in from center */
.spot-stat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  transform: translateX(-50%);
  transition: width .55s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.spot-stat > * { position: relative; z-index: 2; }
.spot-stat:hover, .spot-stat.is-tilting { background: rgba(255,255,255,0.015); }
.spot-stat:hover::before, .spot-stat.is-tilting::before { opacity: 1; }
.spot-stat:hover::after, .spot-stat.is-tilting::after { width: 70%; }
.spot-stat:hover span, .spot-stat.is-tilting span { color: var(--pink); }
.spot-stat:hover strong, .spot-stat.is-tilting strong {
  color: var(--white);
  text-shadow: 0 0 18px rgba(247,39,152,0.55),
               0 0 36px rgba(247,39,152,0.25);
}
.spot-stat span {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color .35s ease;
}
.spot-stat strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
  letter-spacing: -0.01em;
  color: var(--white);
  transition: text-shadow .45s ease, color .35s ease;
  /* Keep the difficulty value (★ ★ Intermediate) on a single line — same
     font-size and weight as every other stat, just protected from
     wrapping at the space between stars and label. */
  white-space: nowrap;
}
@media (max-width: 980px) {
  .spot-stats { grid-template-columns: repeat(3, 1fr); }
  .spot-stat:nth-child(3n) { border-right: 0; }
  .spot-stat:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 540px) {
  .spot-stats { grid-template-columns: repeat(2, 1fr); }
  .spot-stat { border-right: 1px solid rgba(255,255,255,0.06); }
  .spot-stat:nth-child(2n) { border-right: 0; }
  .spot-stat:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* ----- "Visual" section heads (topo / life / practical) — centered, compact intro ----- */
.spot-section-head,
.spot-topo .loc-sites__head,
.spot-life .loc-sites__head,
.spot-practical .loc-sites__head {
  display: block;
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.spot-section-head .eyebrow,
.spot-topo .loc-sites__head .eyebrow,
.spot-life .loc-sites__head .eyebrow,
.spot-practical .loc-sites__head .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.spot-section-head h2,
.spot-topo .loc-sites__head h2,
.spot-life .loc-sites__head h2,
.spot-practical .loc-sites__head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.spot-section-head__sub,
.spot-topo .loc-sites__head .lede,
.spot-life .loc-sites__head .lede,
.spot-practical .loc-sites__head .lede {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch !important;
  margin: 0 auto;
}

/* ----- "Reading" Story section — wide editorial, centered alignment ----- */
.spot-story { padding: 96px 0; }
.spot-story__grid {
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.spot-story__grid > div:first-child {
  margin-bottom: 36px;
}
.spot-story__grid .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
}
.spot-story__grid h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  white-space: nowrap;
}
.spot-story__grid .lede {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--white);
  margin: 0 auto;
  max-width: 72ch;
}
.spot-story__grid p + p { margin-top: 24px; }
.spot-story__grid p:not(.lede) {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}
/* Pull quote — magazine-style, breaks the wall of text */
.spot-story__grid .story-pull {
  margin: 44px auto;
  padding: 28px 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--white);
  text-align: center;
  position: relative;
  border-top: 1px solid rgba(247,39,152,0.35);
  border-bottom: 1px solid rgba(247,39,152,0.35);
}
.spot-story__grid .story-pull em {
  color: var(--pink);
  font-style: italic;
  font-weight: 700;
}
.spot-story__grid .story-pull span {
  color: var(--accent);
  font-size: 1.4em;
  vertical-align: -0.15em;
  font-weight: 800;
  margin: 0 4px;
}
/* When pull quote is present, paragraph after it gets a bit more breathing room */
.spot-story__grid .story-pull + p { margin-top: 28px; }
@media (max-width: 1080px) {
  .spot-story__grid h2 { white-space: normal; }
}

/* Marine life disclaimer — two-line layout, label above text, centered block */
.life-disclaimer {
  margin: 40px auto 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  text-align: center;
}
@media (max-width: 640px) {
  .life-disclaimer { grid-template-columns: 1fr; gap: 24px; }
}
.life-disclaimer p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.5;
}
.life-disclaimer strong {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Disclaimer label colors match the stamp legend: pink=resident/always, yellow=visitor/sometimes */
.life-disclaimer--resident strong { color: var(--pink); }
.life-disclaimer--visitor strong { color: var(--accent); }
.life-disclaimer span {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Topography (SVG depth chart) — frameless, fades into black background */
.spot-topo { padding: 96px 0; overflow: hidden; }
.topo-chart {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 1500px;
  width: 100%;
  /* No edge fade — chart sits cleanly on the page */
}
.topo-chart svg { width: 100%; height: auto; display: block; }
/* Allow the topo chart to break out of the .container max-width for a wider canvas */
.spot-topo .container { max-width: 1500px; }
.spot-topo .topo-chart { max-width: none; }
.topo-label {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.topo-marker { transition: opacity .3s ease; }
/* No hover-scale on topo markers — the transform-box approach flickered.
   Markers stay static; the chart is informational, not interactive. */
.topo-note {
  text-align: center;
  margin: 36px auto 0;
  max-width: 70ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.topo-note strong { color: var(--white); font-weight: 700; }

/* Photo break — cinematic visual breather between Topography and Marine Life */
.spot-photobreak {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: var(--white);
}
.spot-photobreak__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.65) saturate(1.1);
  z-index: 0;
}
.spot-photobreak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.spot-photobreak__caption {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 96px;
  width: 100%;
}
.spot-photobreak__caption .eyebrow {
  color: var(--accent);
  margin-bottom: 14px;
  display: inline-block;
}
.spot-photobreak__caption p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 26ch;
  margin: 0 0 18px;
  color: var(--white);
}
.spot-photobreak__credit {
  font-family: var(--font-meta);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color .25s ease;
}
.spot-photobreak__credit:hover { color: rgba(255,255,255,0.85); }

/* ============================================================
   DIVE PAGE NEW SECTIONS — number badge, hero punch line, fit gate,
   gallery, testimonials, sticky CTA, difficulty tooltip
   ============================================================ */

/* Hero number badge — small "01 / 16" in the corner.
   Sits well below the nav (and the Plan Your Trip button) so they don't visually clash. */
.spot-hero__num {
  position: absolute;
  top: 160px;
  right: 36px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--pink);
  text-shadow: 0 0 20px rgba(247, 39, 152, 0.45);
  z-index: 4;
  line-height: 1;
}
.spot-hero__num-suffix {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}
@media (max-width: 800px) {
  .spot-hero__num { top: 130px; right: 16px; font-size: 1.6rem; }
}

/* "Why dive here" punch line under the alias row */
.spot-hero__pitch {
  margin-top: 18px;
  max-width: 60ch;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  border-left: 2px solid var(--pink);
  padding: 6px 0 6px 16px;
}
.spot-hero__pitch em { color: var(--pink); font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em; margin-right: 4px; }
.spot-hero__pitch strong { color: var(--white); font-weight: 700; }

/* Difficulty tooltip on hover/focus — pure CSS via data-tooltip attr */
.spot-stat[data-tooltip] {
  position: relative;
  cursor: help;
}
.spot-stat[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(15, 15, 20, 0.96);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(247, 39, 152, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 24px rgba(247, 39, 152, 0.12);
  white-space: normal;
  width: 280px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10;
}
.spot-stat[data-tooltip]:hover::after,
.spot-stat[data-tooltip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* "Is this dive for you?" gate — 3-column responsive grid of cards */
.spot-fit { padding: 96px 0; background: var(--black); }
.spot-fit__head { text-align: center; margin-bottom: 48px; }
.spot-fit__head .eyebrow { color: var(--pink); }
.spot-fit__head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0 0; }
.spot-fit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) { .spot-fit__grid { grid-template-columns: 1fr; } }
.fit-card {
  background: var(--black-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  position: relative;
  transition: border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.fit-card:hover { transform: translateY(-3px); }
.fit-card--ok       { border-top: 3px solid #6BCB6B; }
.fit-card--ok:hover { border-color: rgba(107, 203, 107, 0.4); }
.fit-card--required       { border-top: 3px solid var(--accent); }
.fit-card--required:hover { border-color: rgba(240, 216, 80, 0.4); }
.fit-card--no       { border-top: 3px solid var(--pink); }
.fit-card--no:hover { border-color: rgba(247, 39, 152, 0.4); }
.fit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.fit-card--ok .fit-card__icon       { background: rgba(107, 203, 107, 0.15); color: #6BCB6B; }
.fit-card--required .fit-card__icon { background: rgba(240, 216, 80, 0.15);  color: var(--accent); }
.fit-card--no .fit-card__icon       { background: rgba(247, 39, 152, 0.15);  color: var(--pink); }
.fit-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: var(--white);
}
.fit-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}
.fit-card__list li { padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.fit-card__list li:first-child { border-top: 0; padding-top: 0; }
.fit-card__list strong { color: var(--white); font-weight: 700; }
.fit-card__list a { color: var(--pink); text-decoration: none; border-bottom: 1px solid rgba(247, 39, 152, 0.4); transition: border-color .25s ease; }
.fit-card__list a:hover { border-color: var(--pink); }

/* PHOTO GALLERY — masonry-style grid, hologram-tinted hover */
.spot-gallery { padding: 96px 0; background: var(--black-2); }
.spot-gallery__head { text-align: center; margin-bottom: 40px; }
.spot-gallery__head .eyebrow { color: var(--pink); }
.spot-gallery__head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0 8px; }
.spot-gallery__sub { color: rgba(255, 255, 255, 0.6); max-width: 56ch; margin: 0 auto; font-size: 0.95rem; }
.spot-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 800px) { .spot-gallery__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .spot-gallery__grid { grid-template-columns: 1fr; } }
.gallery-tile {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.gallery-tile--wide { grid-column: span 2; }
@media (max-width: 540px) { .gallery-tile--wide { grid-column: span 1; } }
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  filter: brightness(0.85);
}
.gallery-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 39, 152, 0.45);
  box-shadow: 0 0 0 1px rgba(247, 39, 152, 0.35),
              0 24px 48px -16px rgba(0, 0, 0, 0.5),
              0 0 60px -16px rgba(247, 39, 152, 0.35);
}
.gallery-tile:hover img { transform: scale(1.05); filter: brightness(1); }
.gallery-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 70%);
  color: var(--white);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  z-index: 2;
}
.spot-gallery__note {
  text-align: center;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  font-style: italic;
}

/* TESTIMONIALS — 3 quote cards */
.spot-quotes { padding: 96px 0; background: var(--black); }
.spot-quotes__head { text-align: center; margin-bottom: 40px; }
.spot-quotes__head .eyebrow { color: var(--pink); }
.spot-quotes__head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0 0; }
.spot-quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) { .spot-quotes__grid { grid-template-columns: 1fr; } }
.quote-card {
  background: var(--black-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  margin: 0;
  position: relative;
  transition: border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.quote-card::before {
  content: "“";
  position: absolute;
  top: 4px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: rgba(247, 39, 152, 0.18);
  font-weight: 800;
}
.quote-card:hover {
  transform: translateY(-3px);
  border-color: rgba(247, 39, 152, 0.3);
}
.quote-card blockquote {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 1;
}
.quote-card blockquote em { color: var(--pink); font-style: italic; font-weight: 700; }
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}
.quote-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--accent));
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quote-card figcaption strong {
  display: block;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: -0.005em;
}
.quote-card__meta {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* STICKY MOBILE CTA — bottom-right pill, only visible on mobile + after scroll */
.sticky-cta {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--pink);
  color: var(--white);
  padding: 14px 20px;
  border-radius: 999px;
  font-family: var(--font-meta);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(247, 39, 152, 0.45),
              0 0 24px rgba(247, 39, 152, 0.35);
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s ease;
  animation: stickyCtaIn .5s cubic-bezier(.42,0,.58,1) both;
}
.sticky-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 40px rgba(247, 39, 152, 0.55),
              0 0 36px rgba(247, 39, 152, 0.45);
}
.sticky-cta__icon {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .25s ease;
}
.sticky-cta:hover .sticky-cta__icon { transform: translateX(3px); }
@keyframes stickyCtaIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
/* Show only on mobile + after a bit of scroll. JS toggles a body class. */
@media (max-width: 800px) {
  body.scrolled-past-hero .sticky-cta { display: inline-flex; }
}

/* MARINE LIFE POPUP — loading skeleton (pulsing placeholder while species data loads) */
.ml-popup__photo-wrap.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(247, 39, 152, 0.08) 50%,
    rgba(255, 255, 255, 0.02) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Marine life popup arrow nav hints — small ←/→ pills on the photo edges */
.ml-popup__nav {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid rgba(247, 39, 152, 0.4);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ml-popup__nav:hover {
  background: rgba(247, 39, 152, 0.25);
  border-color: var(--pink);
  transform: translateY(-50%) scale(1.08);
}
.ml-popup__nav--prev { left: -18px;  transform: translateY(-50%); }
.ml-popup__nav--next { right: -18px; transform: translateY(-50%); }
@media (max-width: 800px) {
  .ml-popup__nav--prev { left: 8px; }
  .ml-popup__nav--next { right: 8px; }
}

/* Marine life tags */

/* Marine life entries — animated probability bars.
   Each entry has --chance: 0-100. Bar in background fills to chance% on scroll-in.
   Color interpolates: 0% = yellow (lucky sighting) → 100% = pink (always there). */
.life-entries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 18px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) { .life-entries { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .life-entries { grid-template-columns: repeat(2, 1fr); } }

.life-entry {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "tag pct"
    "name name";
  gap: 6px 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  cursor: default;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease;
  /* Color = interpolated yellow → pink based on chance.
     color-mix has good support (Chrome 111+, Safari 16.4+, FF 113+). */
  --bar-color: color-mix(in oklab,
    var(--accent) calc((100 - var(--chance)) * 1%),
    var(--pink) calc(var(--chance) * 1%));
}
/* The animated bar — width driven by --fill (0→1), set via JS during scroll-in */
.life-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--chance, 0) * var(--fill, 0) * 1%);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--bar-color) 35%, transparent),
    color-mix(in oklab, var(--bar-color) 8%, transparent));
  z-index: 0;
  pointer-events: none;
}
/* Right edge accent line — same interpolated color, more visible */
.life-entry::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bar-color);
  box-shadow: 0 0 12px var(--bar-color);
  opacity: 0.85;
  transition: width 1.6s cubic-bezier(.2,.8,.2,1) 0.2s;
  z-index: 1;
  pointer-events: none;
}
.life-entry > * {
  position: relative;
  z-index: 2;
}
/* (Bars + numbers animate via JS — see initLifeChances() in main.js) */
.life-entry__tag {
  grid-area: tag;
  font-family: var(--font-meta);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bar-color);
  opacity: 0.95;
  align-self: center;
}
.life-entry__name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--white);
  text-transform: uppercase;
}
.life-entry__pct {
  grid-area: pct;
  font-family: var(--font-meta);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  align-self: center;
  text-shadow: 0 0 8px var(--bar-color);
}
.life-entry:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--bar-color) 50%, transparent);
}
.life-entry:hover .life-entry__name {
  text-shadow: 0 0 14px var(--bar-color);
}
/* Clickable variant — adds a subtle "[+]" affordance and pointer cursor */
.life-entry--clickable {
  cursor: pointer;
}
.life-entry--clickable::after {
  content: '';
}
.life-entry--clickable .life-entry__name::after {
  content: '↗';
  margin-left: 8px;
  color: rgba(125,236,247,0.6);
  font-weight: 400;
  transition: transform .25s ease, color .25s ease;
  display: inline-block;
}
.life-entry--clickable:hover .life-entry__name::after {
  color: rgba(125,236,247,1);
  transform: translate(2px, -2px);
}
.life-entry--clickable:focus-visible {
  outline: 1px solid rgba(125,236,247,0.7);
  outline-offset: 4px;
}

/* ============================================================
   MARINE LIFE — HOLOGRAM POPUP (pink + yellow PMD palette)
   Click a clickable .life-entry → popup opens. Photo card matches the
   .dive-card hover hologram look: pink glow, yellow accent corners,
   scanline overlay, soft 3D tilt levitation. No projection plinth/beam.
   Closes on backdrop click, the X button, or ESC.
   ============================================================ */
.ml-popup {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
}
.ml-popup[aria-hidden="false"] {
  display: flex;
  animation: mlPopupFadeIn 0.4s cubic-bezier(.42, 0, .58, 1) both;
}
.ml-popup__backdrop {
  position: absolute;
  inset: 0;
  /* Near-opaque black blanket — page behind is fully obscured.
     Center is slightly less black so the hologram glow can bloom into it,
     but it's still 96%+ everywhere — no readable text bleeds through. */
  background:
    radial-gradient(ellipse at center,
      rgba(6, 2, 4, 0.96) 0%,
      rgba(0, 0, 0, 0.995) 60%,
      #000 100%);
  backdrop-filter: blur(36px) saturate(0.4) brightness(0.25);
  -webkit-backdrop-filter: blur(36px) saturate(0.4) brightness(0.25);
  cursor: pointer;
}
.ml-popup__stage {
  position: relative;
  /* GRID: hologram column is sized by aspect-ratio + the row height; info column
     is fixed 380px. align-items: stretch (default) makes the hologram column's
     height equal the info column's content height — no JS measurement needed. */
  display: grid;
  grid-template-columns: auto 380px;
  align-items: stretch;
  gap: 48px;
  max-width: 1100px;
  width: 100%;
  padding: 48px;
  perspective: 1200px;
  animation: mlPopupRise 0.7s cubic-bezier(.42, 0, .58, 1) both;
}
@media (max-width: 800px) {
  .ml-popup__stage { grid-template-columns: 1fr; align-items: stretch; gap: 28px; padding: 32px 16px; }
}
.ml-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(247, 39, 152, 0.4);
  color: rgba(247, 39, 152, 0.95);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ml-popup__close:hover {
  background: rgba(247, 39, 152, 0.12);
  border-color: rgba(247, 39, 152, 0.85);
  transform: scale(1.06);
}

/* HOLOGRAM stage — left side. Uses the SAME autonomous 3D drift as the
   .dive-list hologram card on the Bali map (locations.html). The whole frame
   (photo + corner brackets + scanlines) levitates as one unit, drifting in
   3D space on a 7.2s loop. No mouse interaction.

   FIXED LANDSCAPE 4/3 — most underwater wildlife photos are landscape, so we
   commit to one orientation for visual consistency. HEIGHT is matched to the
   info panel height by JS (initMarineLifePopup), and the WIDTH follows from
   aspect-ratio. The portrait outliers (pygmy seahorse, soft coral) get a
   centred crop — animal still recognisable. */
.ml-popup__hologram {
  position: relative;
  aspect-ratio: 4 / 3;
  /* In grid with align-items: stretch, height: 100% resolves to the info
     column's content height. Width then derives from aspect-ratio (4:3 landscape). */
  height: 100%;
  max-height: 75vh;
  /* Fallback in case the grid stretch doesn't kick in (very old browsers) */
  min-height: 280px;
  transform-style: preserve-3d;
  will-change: transform;
  animation: mlHologramFloat 7.2s ease-in-out 0.4s infinite;
}
@media (max-width: 800px) {
  .ml-popup__hologram { width: 100%; aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}
/* Plinth + beam are LEGACY (kept invisible — the design moved away from the
   "projection" trope per user feedback). Hidden but kept in DOM in case we
   ever want to re-introduce the projection look. */
.ml-popup__plinth,
.ml-popup__beam {
  display: none;
}
/* Photo wrapper sits inside the tilt-target hologram and inherits the tilt. */
.ml-popup__photo-wrap {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(247, 39, 152, 0.45),
    0 0 50px -10px rgba(247, 39, 152, 0.55),
    0 30px 70px -18px rgba(240, 216, 80, 0.30),
    0 12px 30px -8px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(247, 39, 152, 0.45);
}
.ml-popup__photo {
  width: 100%;
  height: 100%;
  /* `contain` guarantees the WHOLE animal is always visible — no head/tail
     clipping. Photos with a different aspect than 4:3 get small black bars
     (top/bottom for very wide photos, sides for portrait) that blend with the
     near-black popup backdrop, so the bars don't read visually as "letterbox". */
  object-fit: contain;
  object-position: center;
  display: block;
  background: #000;
  filter: brightness(0.95) contrast(1.08) saturate(1.05);
}
/* Pink-to-yellow corner gradient overlay matches dive-card hologram tint */
.ml-popup__photo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(247, 39, 152, 0.20) 0%,
    rgba(0, 0, 0, 0.10) 35%,
    rgba(0, 0, 0, 0.10) 65%,
    rgba(240, 216, 80, 0.18) 100%);
  pointer-events: none;
  z-index: 2;
}
.ml-popup__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.06) 2px,
    rgba(255, 255, 255, 0.06) 3px
  );
  animation: mlScanlines 6s linear infinite;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
}
.ml-popup__glitch {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(247, 39, 152, 0.7) 30%,
    rgba(240, 216, 80, 0.85) 50%,
    rgba(247, 39, 152, 0.7) 70%,
    transparent 100%);
  animation: mlGlitchSweep 4.6s cubic-bezier(.42, 0, .58, 1) infinite;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}
/* Corner brackets — pink, sci-fi targeting frame */
.ml-popup__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ml-popup__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(247, 39, 152, 0.95);
  filter: drop-shadow(0 0 6px rgba(247, 39, 152, 0.6));
}
.ml-popup__corner--tl { top: -8px;    left: -8px;    border-right: 0; border-bottom: 0; }
.ml-popup__corner--tr { top: -8px;    right: -8px;   border-left: 0;  border-bottom: 0; }
.ml-popup__corner--bl { bottom: -8px; left: -8px;    border-right: 0; border-top: 0;    }
.ml-popup__corner--br { bottom: -8px; right: -8px;   border-left: 0;  border-top: 0;    }

/* INFO panel — right side */
.ml-popup__info {
  color: var(--white);
  font-family: var(--font-sans);
  position: relative;
}
/* Tag pill — colour matches the .life-entry colour scheme:
   Resident (high sighting odds) = YELLOW (var(--accent))
   Visitor (low/transient odds) = PINK (var(--pink))
   Class is added by JS based on data.tag. */
.ml-popup__tag {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
  border: 1px solid;
}
.ml-popup__tag--visitor {
  color: var(--accent);
  border-color: rgba(240, 216, 80, 0.45);
  background: rgba(240, 216, 80, 0.08);
  text-shadow: 0 0 10px rgba(240, 216, 80, 0.4);
}
.ml-popup__tag--resident {
  color: var(--pink);
  border-color: rgba(247, 39, 152, 0.5);
  background: rgba(247, 39, 152, 0.08);
  text-shadow: 0 0 10px rgba(247, 39, 152, 0.45);
}
.ml-popup__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
/* "em" inside the name uses brand pink (consistent with rest of site) */
.ml-popup__name em { color: var(--pink); font-style: normal; }
/* Latin name — yellow italic, like a museum-card scientific name */
.ml-popup__latin {
  font-style: italic;
  color: var(--accent);
  opacity: 0.95;
  margin: 0 0 24px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.ml-popup__desc {
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 44ch;
  font-size: 0.98rem;
}
/* Pink emphasis inside body text */
.ml-popup__desc em,
.ml-popup__desc strong { color: var(--pink); font-style: normal; font-weight: 700; }
.ml-popup__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  border-top: 1px solid rgba(247, 39, 152, 0.18);
  padding-top: 24px;
}
.ml-popup__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-popup__stats .ml-popup__stat-label {
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(247, 39, 152, 0.85);
  text-transform: uppercase;
  font-weight: 700;
}
.ml-popup__stats .ml-popup__stat-value {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--white);
}

/* Animations */
@keyframes mlPopupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mlPopupRise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
/* Autonomous 3D drift — copied from .dive-list `hologramFloat` (Bali map card)
   but without the `translate(-50%, -50%)` prefix used to absolutely center the
   dive-list. Same rotateY / rotateX / translate3d / scale curves so the popup
   levitates with the same character. */
@keyframes mlHologramFloat {
  0%, 100% {
    transform:
      perspective(1200px) rotateY(-7deg) rotateX(3deg)
      translate3d(0, 0, 0)
      scale(1);
  }
  25% {
    transform:
      perspective(1200px) rotateY(-9deg) rotateX(5deg)
      translate3d(-3px, -6px, 0)
      scale(1.005);
  }
  50% {
    transform:
      perspective(1200px) rotateY(-5deg) rotateX(4deg)
      translate3d(2px, -10px, 0)
      scale(1.008);
  }
  75% {
    transform:
      perspective(1200px) rotateY(-8deg) rotateX(2deg)
      translate3d(4px, -4px, 0)
      scale(1.005);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ml-popup__hologram { animation: none; }
}
@keyframes mlScanlines {
  from { transform: translateY(0); }
  to   { transform: translateY(-30px); }
}
@keyframes mlGlitchSweep {
  0%   { top: -10%; opacity: 0;  }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { top: 110%; opacity: 0; }
}

/* Body lock when popup is open */
body.ml-popup-open {
  overflow: hidden;
}

/* Practical info grid — clean cards, max-width container, generous internal spacing */
.spot-practical { padding: 96px 0; }
.practical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) { .practical-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .practical-grid { grid-template-columns: 1fr; } }
.practical-grid {
  perspective: 1200px;
  transition: filter .35s ease;
}
/* Spotlight: when one card is hovered, others fade slightly. Subtle, not theatrical. */
.practical-grid:has(.practical-card:hover) .practical-card:not(:hover) {
  opacity: 0.55;
}
.practical-card {
  position: relative;
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              background .4s ease,
              border-color .4s ease,
              opacity .35s ease;
  will-change: transform;
  transform-style: preserve-3d;
  overflow: hidden;
}
/* Pink radial glow that fades in on hover (matches stat cells) */
.practical-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right,
              rgba(247,39,152,0.22) 0%,
              rgba(247,39,152,0.06) 40%,
              transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.practical-card > * { position: relative; z-index: 1; }
.practical-card:hover, .practical-card.is-tilting {
  border-color: rgba(247,39,152,0.4);
  background: rgba(20,20,22,0.95);
}
.practical-card:hover::before, .practical-card.is-tilting::before {
  opacity: 1;
}
.practical-card:hover .practical-card__num,
.practical-card.is-tilting .practical-card__num {
  color: var(--white);
  text-shadow: 0 0 12px rgba(247,39,152,0.55);
}
.practical-card__num {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
  transition: color .3s ease, text-shadow .4s ease;
}
.practical-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.practical-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Single all-sites section with difficulty filter */
.loc-sites-all { padding: 96px 0; }

/* Difficulty filter buttons (ALL / star / 2-star / 3-star) */
.site-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 48px;
  max-width: 760px;
}
.site-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--white);
  font-family: var(--font-meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.site-filter__btn:hover {
  background: rgba(247,39,152,0.1);
  border-color: rgba(247,39,152,0.4);
  transform: translateY(-2px);
}
.site-filter__btn.is-active {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
  box-shadow: 0 8px 24px -8px rgba(247,39,152,0.6);
}
.site-filter__stars {
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.site-filter__btn.is-active .site-filter__stars { color: var(--white); }
.site-filter__count {
  font-size: 0.6rem;
  opacity: 0.7;
  background: rgba(255,255,255,0.12);
  padding: 3px 8px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}
.site-filter__btn.is-active .site-filter__count {
  background: rgba(255,255,255,0.25);
  opacity: 1;
}

/* Compact dive cards (mini list view) */
.dive-grid--compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 980px) { .dive-grid--compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .dive-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dive-grid--compact { grid-template-columns: 1fr; } }

.dive-card-mini {
  display: block;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: var(--white);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.dive-card-mini:hover {
  transform: translateY(-4px);
  background: rgba(247,39,152,0.06);
  border-color: rgba(247,39,152,0.3);
}
.dive-card-mini::after {
  content: "->";
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--pink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
  font-size: 1.05rem;
  font-weight: 700;
}
.dive-card-mini:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.dive-card-mini__stars {
  display: block;
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.dive-card-mini h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.dive-card-mini p {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.dive-card-mini--featured {
  background: linear-gradient(135deg, rgba(247,39,152,0.08) 0%, rgba(255,255,255,0.025) 100%);
  border-color: rgba(247,39,152,0.25);
}
.dive-card-mini--featured .dive-card-mini__stars { color: var(--pink); }

/* Filter visibility — when grid has data-filter set, hide non-matching cards */
.dive-grid--compact[data-filter="1"] .dive-card-mini:not([data-stars="1"]) { display: none; }
.dive-grid--compact[data-filter="2"] .dive-card-mini:not([data-stars="2"]) { display: none; }
.dive-grid--compact[data-filter="3"] .dive-card-mini:not([data-stars="3"]) { display: none; }

/* Photo variant of mini cards — photo backdrop, constant dark overlay,
   subtle hover (no dramatic shift). Levitate + pink glow like hologram card. */
.dive-card-mini--photo {
  background-size: cover;
  background-position: center;
  position: relative;
  border-color: rgba(255,255,255,0.14);
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .55s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease,
              border-color .35s ease,
              background-color .25s ease;
}
.dive-card-mini--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
  z-index: -1;
  transition: background .35s ease;
}
/* Hover: photo fades to near-black so the focus shifts to the card itself + glow */
.dive-card-mini--photo:hover::before,
.dive-card-mini--photo.is-tilting::before {
  background: linear-gradient(135deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.98) 100%);
}
.dive-card-mini--photo > * { position: relative; z-index: 1; }
/* Override the base lift transform — JS tilt handles 3D motion. Add pink glow shadow. */
.dive-card-mini--photo:hover,
.dive-card-mini--photo.is-tilting {
  background-color: transparent;
  border-color: rgba(247,39,152,0.4);
  box-shadow:
    0 14px 36px -10px rgba(0,0,0,0.55),
    0 0 0 1px rgba(247,39,152,0.28),
    0 0 26px -4px rgba(247,39,152,0.45),
    0 0 60px -16px rgba(240,216,80,0.2);
}

/* ============================================
   ANCHOR WRECK TOPO ANIMATIONS — Sprint A polish
   Sequential reveal + dive path drawing on scroll-into-view
   ============================================ */

/* All animated elements start hidden */
.topo-anchor-svg .topo-fx {
  opacity: 0;
}
/* Markers that "pop" need their own transform-origin so they scale around themselves
   and not the SVG (0,0) origin. fill-box uses each element's bounding box center. */
.topo-anchor-svg .topo-fx-anchor1,
.topo-anchor-svg .topo-fx-anchor2,
.topo-anchor-svg .topo-fx-wreck-1,
.topo-anchor-svg .topo-fx-wreck-2,
.topo-anchor-svg .topo-fx-wreck-3,
.topo-anchor-svg .topo-fx-wreck-4,
.topo-anchor-svg .topo-fx-safetystop {
  transform-box: fill-box;
  transform-origin: center;
}

/* When the parent .topo-chart enters the .reveal.is-visible state, sequence animations.
   All animations use ease-in-out timing (cubic-bezier(.42,0,.58,1)) for smooth, soft easing
   on both ends — no sharp starts or stops. Pop animations keep the bouncy overshoot. */
.topo-chart.is-visible .topo-anchor-svg .topo-fx-slope {
  animation: topoFxFade 1.2s cubic-bezier(.42,0,.58,1) 0.1s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-dots {
  animation: topoFxFade 0.8s cubic-bezier(.42,0,.58,1) 0.9s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-boat {
  animation: topoFxOpacityOnly 0.6s cubic-bezier(.42,0,.58,1) 1.2s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-anchor1 {
  animation: topoFxPop 1s cubic-bezier(.34,1.4,.64,1) 1.5s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-chain {
  /* Animated draw of the chain link, sub-tle */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 1;
  animation: topoFxDrawPath 1.1s cubic-bezier(.42,0,.58,1) 1.9s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-anchor2 {
  animation: topoFxPop 1s cubic-bezier(.34,1.4,.64,1) 2.3s forwards;
}
/* Wreck markers stagger one-by-one along the wreck line */
.topo-chart.is-visible .topo-anchor-svg .topo-fx-wreck-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 1;
  animation: topoFxDrawPath 0.8s cubic-bezier(.42,0,.58,1) 2.7s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-wreck-1 {
  animation: topoFxPop 0.8s cubic-bezier(.34,1.4,.64,1) 2.9s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-wreck-2 {
  animation: topoFxPop 0.8s cubic-bezier(.34,1.4,.64,1) 3.1s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-wreck-3 {
  animation: topoFxPop 0.8s cubic-bezier(.34,1.4,.64,1) 3.3s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-wreck-4 {
  animation: topoFxPop 0.8s cubic-bezier(.34,1.4,.64,1) 3.5s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-safety {
  animation: topoFxFade 0.6s cubic-bezier(.42,0,.58,1) 0.4s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-safetystop {
  animation: topoFxPop 1s cubic-bezier(.34,1.4,.64,1) 7.3s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-divepath {
  /* Use stroke-dashoffset to "draw" the path. pathLength=100 set in SVG. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 1;
  animation: topoFxDrawPath 3.5s cubic-bezier(.42,0,.58,1) 4s forwards;
}
/* Arrow tip fades in only when the path finishes drawing — no longer "floating" at the end */
.topo-chart.is-visible .topo-anchor-svg .topo-fx-arrow {
  animation: topoFxOpacityOnly 0.5s cubic-bezier(.42,0,.58,1) 7.5s forwards;
}
/* DIVE PATH label (textPath along line) fades in once the line draw passes the label area */
.topo-chart.is-visible .topo-anchor-svg .topo-fx-divepath-label {
  animation: topoFxOpacityOnly 0.7s cubic-bezier(.42,0,.58,1) 6.5s forwards;
}
.topo-chart.is-visible .topo-anchor-svg .topo-fx-boat-exit {
  animation: topoFxOpacityOnly 0.6s cubic-bezier(.42,0,.58,1) 7.9s forwards;
}

@keyframes topoFxFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes topoFxOpacityOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes topoFxScale {
  0%   { opacity: 0; transform: scale(0.4); transform-origin: center; }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
/* Pop animation — small, scales from element's own center (paired with transform-box: fill-box).
   Pops slightly above 1.0 then settles back to 1.0. */
@keyframes topoFxPop {
  0%   { opacity: 0; transform: scale(0.6); }
  55%  { opacity: 1; transform: scale(1.25); }
  78%  { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes topoFxDrawPath {
  from { stroke-dashoffset: 100; opacity: 0.85; }
  to   { stroke-dashoffset: 0;   opacity: 0.85; }
}

/* Reduced motion: skip all animations, show end state */
@media (prefers-reduced-motion: reduce) {
  .topo-anchor-svg .topo-fx { opacity: 1; }
  .topo-anchor-svg .topo-fx-divepath { stroke-dashoffset: 0; }
}

/* B&W hero variant — applied via body.hero-bw class.
   Targets photo backgrounds (.spot-hero__bg, .hero__bg, .loc-hero-detail__bg) AND video heroes (.hero__video). */
body.hero-bw .spot-hero__bg,
body.hero-bw .hero__bg,
body.hero-bw .loc-hero-detail__bg {
  filter: grayscale(100%) brightness(0.55) contrast(1.1);
}
body.hero-bw .hero__video,
body.hero-bw .loc-hero__video {
  filter: grayscale(100%) brightness(0.7) contrast(1.05) saturate(0);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, rgba(0,0,0,0.6) 85%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 65%, rgba(0,0,0,0.6) 85%, transparent 100%);
}

/* Pemuteran intro body paragraph (replaces inline style) */
.loc-intro__body {
  margin-top: 16px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* "Coming soon" disabled footer links */
.link-soon {
  pointer-events: none;
  color: var(--text-muted) !important;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-soon__tag {
  font-family: var(--font-meta);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent);
}

/* Travel logistics section */
.loc-travel { padding: 96px 0; }
body.snap-page > .loc-travel { scroll-snap-align: start; }
.travel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) { .travel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .travel-grid { grid-template-columns: 1fr; } }
.travel-card {
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
  position: relative;
}
.travel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(247,39,152,0.3);
}
.travel-card__num {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.travel-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  line-height: 1.3;
}
.travel-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.travel-card__meta {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
  border-top: 1px solid rgba(247,39,152,0.18);
  padding-top: 10px;
  margin-top: 4px;
}

/* GPS / Area / Aliases meta line under stats strip on dive detail pages */
.spot-hero__gps-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  padding: 14px 0 4px;
  font-family: var(--font-meta);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: -1px;
}
.spot-hero__gps-line .gps-label {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.spot-hero__gps-line .gps-value {
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 0.7rem;
}
.spot-hero__gps-line .gps-divider {
  opacity: 0.3;
  font-size: 0.85rem;
}
@media (max-width: 720px) {
  .spot-hero__gps-line { padding: 10px 0; gap: 8px 12px; }
  .spot-hero__gps-line .gps-value { font-size: 0.62rem; }
}

/* ============================================
   SECTION DIVIDERS — luxury minimalist
   Style #3: section number/label
   Style #4: subtle gradient fade between sections
   ============================================ */

.section-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.section-divider__num {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.section-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(240,216,80,0.3) 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.04) 100%);
}
.section-divider__label {
  font-family: var(--font-meta);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Subtle gradient fade between adjacent sections — applied via top/bottom shadow on sections */
body.snap-page > .loc-intro,
body.snap-page > .loc-sites-all,
body.snap-page > .loc-travel,
body.snap-page > .loc-cta {
  position: relative;
}
body.snap-page > .loc-intro::before,
body.snap-page > .loc-sites-all::before,
body.snap-page > .loc-travel::before,
body.snap-page > .loc-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.5) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}