/* ============================================================
   REEL CINEMATIC EXPERIENCE — enhancement layer
   Performance rules baked in:
   - transforms + opacity only (GPU compositing, no layout thrash)
   - backdrop-filter kept ≤ 14px blur, with @supports fallback
   - heavy effects gated to (hover:hover) and (min-width:1025px)
   - respects prefers-reduced-motion
   ============================================================ */

:root {
  --reel-deep:   #0a4a66;   /* full-bright tropical palette */
  --reel-ocean:  #0e6d8e;
  --reel-bright: #128aa5;
  --reel-teal:   #14e8c8;
  --reel-aqua:   #45ecff;
  --reel-sand:   #ffd166;
  --reel-foam:   rgba(255, 255, 255, 0.1);
  --reel-glass:  rgba(13, 120, 147, 0.5);
  --reel-glass-brd: rgba(69, 236, 255, 0.3);
  --reel-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   1. SCROLL REVEAL — elements fade/rise in as they enter view.
   JS adds .reel-in; no-JS and reduced-motion stay visible.
   ------------------------------------------------------------ */
.reel-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 0.9s var(--reel-ease), transform 0.9s var(--reel-ease);
  will-change: opacity, transform;
}
.reel-reveal.reel-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reel-reveal[data-reel-delay="1"] { transition-delay: 0.12s; }
.reel-reveal[data-reel-delay="2"] { transition-delay: 0.24s; }
.reel-reveal[data-reel-delay="3"] { transition-delay: 0.36s; }

/* ------------------------------------------------------------
   2. PARALLAX LAYERS — JS drives --reel-y per layer speed.
   ------------------------------------------------------------ */
[data-reel-parallax] {
  transform: translate3d(var(--reel-mx, 0px), calc(var(--reel-y, 0) * 1px + var(--reel-my, 0px)), 0);
  will-change: transform;
  transition: transform 0.18s ease-out;
}

/* ------------------------------------------------------------
   3. CINEMATIC HERO — full-screen video with layered depth.
   JS builds this inside the existing hero section, keeping
   the Elementor content (headline/buttons) as foreground.
   ------------------------------------------------------------ */
.reel-hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.reel-hero-video video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* the hero clip is cut to 16:9 (portrait cut for phones), so the
     centre of the frame is the right thing to hold on to */
  object-position: 50% 50%;
  filter: saturate(1.12) contrast(1.04);
}
.reel-hero-video::after {           /* light cinematic grade — video stays visible */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(4, 18, 31, 0) 55%, rgba(4, 18, 31, 0.35) 100%),
    linear-gradient(180deg, rgba(4, 18, 31, 0.2) 0%, rgba(4, 18, 31, 0.06) 45%, rgba(4, 18, 31, 0.45) 100%);
}
.reel-hero-video .reel-hero-shimmer {  /* light rays on the water */
  position: absolute; inset: -20% -10%;
  background: linear-gradient(115deg, transparent 42%, rgba(53, 224, 255, 0.10) 50%, transparent 58%);
  animation: reel-shimmer 9s var(--reel-ease) infinite;
}
@keyframes reel-shimmer {
  0%, 100% { transform: translateX(-12%); opacity: 0.5; }
  50%      { transform: translateX(12%);  opacity: 1; }
}

/* Hero once video is active — full-screen, white text, readable. */
.reel-hero-target.reel-has-video {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.reel-hero-target.reel-has-video > *:not(.reel-hero-video):not(.reel-scroll-cue) {
  position: relative;
  z-index: 2;
}
body.reel-cinematic-on .reel-hero-target.reel-has-video h1,
body.reel-cinematic-on .reel-hero-target.reel-has-video p,
body.reel-cinematic-on .reel-hero-target.reel-has-video li,
body.reel-cinematic-on .reel-hero-target.reel-has-video em {
  color: #fff !important;
  text-shadow: 0 2px 22px rgba(2, 12, 22, 0.75);
}
body.reel-cinematic-on .reel-hero-target.reel-has-video [class*="eyebrow"] {
  color: var(--reel-aqua) !important;
}

/* Foreground content in the hero drifts slower than the video
   (JS assigns parallax speeds) and gets a soft entrance. */
.reel-cine-home .reel-hero-content-anim h1,
.reel-cine-home .reel-hero-content-anim .elementor-heading-title {
  animation: reel-hero-rise 1.3s var(--reel-ease) both 0.25s;
}
@keyframes reel-hero-rise {
  from { opacity: 0; transform: translate3d(0, 46px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Scroll cue */
.reel-scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  width: 26px; height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  z-index: 3;
}
.reel-scroll-cue::before {
  content: "";
  position: absolute; left: 50%; top: 7px;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px;
  background: var(--reel-aqua);
  animation: reel-cue 2s ease-in-out infinite;
}
@keyframes reel-cue {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ------------------------------------------------------------
   4. OCEAN WAVE DIVIDERS — layered SVG waves between sections.
   Two drifting layers on desktop; static single layer mobile.
   ------------------------------------------------------------ */
.reel-wave-divider {
  position: relative;
  height: 90px;
  margin-top: -90px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.reel-wave-divider span {
  position: absolute; inset: 0;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 1200px 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath d='M0 55 C 200 20 350 85 600 55 C 850 25 1000 90 1200 55 L1200 90 L0 90 Z' fill='%2304121f'/%3E%3C/svg%3E");
}
@media (min-width: 1025px) {
  .reel-wave-divider span:nth-child(2) {
    opacity: 0.5;
    animation: reel-wave-drift 14s linear infinite;
  }
  @keyframes reel-wave-drift {
    from { background-position-x: 0; }
    to   { background-position-x: 1200px; }
  }
}

/* ------------------------------------------------------------
   5. GLASS UI — nav bar, info cards, booking buttons.
   ------------------------------------------------------------ */
.reel-cinematic-on .reel-glass,
.reel-cinematic-on .reel-glass-header {
  border: 1px solid var(--reel-glass-brd) !important;
  box-shadow: 0 14px 44px rgba(2, 12, 22, 0.35);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .reel-cinematic-on .reel-glass,
  .reel-cinematic-on .reel-glass-header {
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    background: rgba(255, 255, 255, 0.72) !important;
  }
}

/* Sticky header refinement once scrolled (JS adds .reel-scrolled) */
.reel-scrolled header {
  transition: box-shadow 0.4s ease;
  box-shadow: 0 10px 34px rgba(2, 12, 22, 0.5);
}

/* ------------------------------------------------------------
   6. PREMIUM TOUR CARDS — hover lift, tilt, image zoom, glow.
   Targets Togo/Elementor trip cards without touching markup.
   ------------------------------------------------------------ */
.reel-cinematic-on article.type-trip .trip-inner {
  transition: transform 0.55s var(--reel-ease), box-shadow 0.55s var(--reel-ease);
  border-radius: 18px;
  overflow: hidden;
}
.reel-cinematic-on article.type-trip .trip-thumbnail img {
  transition: transform 1.1s var(--reel-ease);
}
@media (hover: hover) and (pointer: fine) {
  .reel-cinematic-on article.type-trip .trip-inner:hover {
    transform: translateY(-10px);
    box-shadow:
      0 24px 60px rgba(2, 12, 22, 0.45),
      0 0 0 1px var(--reel-glass-brd),
      0 0 42px rgba(15, 214, 194, 0.22);
  }
  .reel-cinematic-on article.type-trip .trip-inner:hover .trip-thumbnail img {
    transform: scale(1.07);
  }
}
/* Touch feedback on phones — quick press "sink" */
@media (hover: none) {
  .reel-cinematic-on article.type-trip .trip-inner:active {
    transform: scale(0.985);
    transition-duration: 0.18s;
  }
}

/* 3D tilt (JS-driven, desktop only) — also wins on hover */
.reel-tilt,
.reel-cinematic-on article.type-trip .trip-inner.reel-tilt:hover {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--reel-rx, 0deg)) rotateY(var(--reel-ry, 0deg)) translateY(var(--reel-lift, 0px));
}

/* ------------------------------------------------------------
   7. DESTINATION EXPLORER — [reel_destinations]
   ------------------------------------------------------------ */
.reel-dest-section {
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(20, 232, 200, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--reel-ocean) 0%, var(--reel-bright) 100%);
  padding: 90px clamp(16px, 5vw, 72px) 100px;
  overflow: hidden;
}

/* ------------------------------------------------------------
   VOYAGE MAP — scroll-driven route
   ------------------------------------------------------------ */
.reel-voyage {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(69, 236, 255, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--reel-deep) 0%, var(--reel-ocean) 100%);
  padding: 52px clamp(10px, 4vw, 60px) 110px;  /* room for the caption, no dead space */
  overflow: visible;          /* never clip the hover caption */
  position: relative;
  z-index: 1;
}
.reel-voyage .reel-dest-head { margin-bottom: 18px; }
/* Ambient layers keep their own clipping so nothing escapes. */
.reel-voyage > .reel-caustics,
.reel-voyage > .reel-bubbles { clip-path: inset(0); }
.reel-voyage-wrap { max-width: 1220px; margin: 0 auto; }
.reel-voyage svg { width: 100%; height: auto; display: block; overflow: visible; }
.reel-voyage-route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 3;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
}
.reel-voyage-trail {
  fill: none;
  stroke: var(--reel-teal);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(20, 232, 200, 0.65));
}
.reel-voyage-stop { cursor: pointer; outline: none; }
.reel-voyage-media {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.45s var(--reel-ease);
}
.reel-voyage-stop.is-hover .reel-voyage-media,
.reel-voyage-stop:focus .reel-voyage-media {
  transform: scale(2.1);
}
.reel-voyage-stop.is-hover { position: relative; }
.reel-voyage-stop.is-hover text { opacity: 0; }
.reel-voyage-stop text { transition: opacity 0.3s ease; }

/* Hover caption card under the enlarged photo */
.reel-voyage-pop {
  position: absolute;
  width: 320px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(6, 54, 77, 0.92);
  border: 1px solid var(--reel-glass-brd);
  box-shadow: 0 18px 44px rgba(2, 12, 22, 0.55);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s var(--reel-ease);
  pointer-events: none;
  z-index: 5;
}
.reel-voyage-pop.is-visible { opacity: 1; transform: translateY(0); }
.reel-voyage-pop h4 { color: #fff !important; margin: 0 0 2px; font-size: 18px; }
.reel-voyage-pop span {
  display: block;
  color: var(--reel-teal);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.reel-voyage-pop p { color: rgba(255, 255, 255, 0.88); font-size: 13.5px; line-height: 1.6; margin: 0; }
.reel-voyage-tips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 0; padding: 0;
}
.reel-voyage-tips:empty { display: none; }
.reel-voyage-tips li {
  font-size: 11px; font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  color: #eafcff;
  background: rgba(20, 232, 200, 0.16);
  border: 1px solid rgba(20, 232, 200, 0.32);
}
@media (max-width: 600px) {
  .reel-voyage-pop { width: clamp(220px, calc(100vw - 40px), 300px); }
  .reel-voyage-pop p { font-size: 13px; }
}
.reel-voyage-wrap { position: relative; }
.reel-voyage-stop image {
  filter: grayscale(55%) brightness(0.82);
  transition: filter 0.6s ease;
}
.reel-voyage-stop.is-reached image,
.reel-voyage-stop.is-active image,
.reel-voyage-stop:hover image {
  filter: none;
}
.reel-voyage-photo-ring {
  fill: rgba(6, 54, 77, 0.55);
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 3;
  transition: stroke 0.4s ease;
}
.reel-voyage-stop.is-reached .reel-voyage-photo-ring { stroke: var(--reel-teal); }
.reel-voyage-stop.is-active .reel-voyage-photo-ring {
  stroke: var(--reel-sand);
  stroke-width: 4;
}
.reel-voyage-dot {
  fill: var(--reel-sand);
  stroke: #fff;
  stroke-width: 2.5;
  transition: fill 0.4s ease;
}
.reel-voyage-ring {
  fill: none;
  stroke: var(--reel-teal);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
}
.reel-voyage-stop text {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 21px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.02em;
  transition: fill 0.4s ease;
  paint-order: stroke;
  stroke: rgba(6, 54, 77, 0.55);
  stroke-width: 4;
}
.reel-voyage-stop.is-reached .reel-voyage-dot { fill: var(--reel-teal); }
.reel-voyage-stop.is-reached text { fill: #fff; }
.reel-anim-on .reel-voyage-stop.is-reached .reel-voyage-ring {
  animation: reel-stop-ping 1.6s ease-out infinite;
}
@keyframes reel-stop-ping {
  0%   { opacity: 0.9; transform: scale(1);   transform-origin: center; transform-box: fill-box; }
  100% { opacity: 0;   transform: scale(2.6); transform-origin: center; transform-box: fill-box; }
}
.reel-voyage-boat { filter: drop-shadow(0 4px 8px rgba(2, 12, 22, 0.5)); pointer-events: none; }
@media (max-width: 700px) {
  .reel-voyage-stop text { font-size: 30px; }
}

/* Stop details panel under the map */
.reel-voyage-panel {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 720px;
  margin: 26px auto 0;
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(6, 54, 77, 0.55) !important;
}
.reel-voyage-panel__num {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--reel-aqua);
  padding-top: 5px;
}
.reel-voyage-panel h3 {
  color: #fff !important;
  margin: 0 0 4px;
  font-size: clamp(20px, 2.2vw, 27px);
}
.reel-voyage-panel__tag {
  display: block;
  color: var(--reel-teal);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.reel-voyage-panel p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.55;
}
.reel-panel-pop { animation: reel-panel-pop 0.45s var(--reel-ease); }
@keyframes reel-panel-pop {
  from { opacity: 0.4; transform: translateY(10px); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* ------------------------------------------------------------
   HERO DECLUTTER — let the video breathe. Keeps eyebrow, H1,
   rating and CTA; hides the long paragraphs (still in the DOM
   for SEO). Applies only while the hero video is active.
   ------------------------------------------------------------ */
body.reel-cinematic-on.reel-cine-home .reel-hero-target.reel-has-video .rat-home-intro__inner > p:not(.rat-home-intro__eyebrow) {
  display: none !important;
}
body.reel-cinematic-on.reel-cine-home .reel-hero-target.reel-has-video h1 {
  font-size: clamp(34px, 4.6vw, 64px);
  max-width: 15ch;
  line-height: 1.06;
  margin-bottom: 18px;
}

/* ------------------------------------------------------------
   3D BOAT SECTION
   ------------------------------------------------------------ */
.reel-boat3d-section {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 209, 102, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, var(--reel-bright) 0%, var(--reel-ocean) 100%);
  padding: 90px clamp(16px, 5vw, 72px) 100px;
  overflow: hidden;
}
.reel-boat3d { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.reel-boat3d__stage {
  height: min(62vh, 560px);
  border-radius: 24px;
  border: 1px solid var(--reel-glass-brd);
  background:
    radial-gradient(90% 70% at 50% 88%, rgba(20, 232, 200, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(6, 54, 77, 0.5));
  box-shadow: 0 24px 70px rgba(2, 12, 22, 0.4);
  overflow: hidden;
}
.reel-boat3d__stage model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
}
.reel-boat3d__hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-top: 14px;
}

/* ------------------------------------------------------------
   UNDERWATER ATMOSPHERE — caustics + bubbles
   ------------------------------------------------------------ */
.reel-caustics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 60% 40% at 24% 28%, rgba(115, 235, 255, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 36% at 76% 62%, rgba(20, 232, 200, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 46% 30% at 52% 86%, rgba(255, 255, 255, 0.3) 0%, transparent 65%);
  transition: opacity 1.2s ease;
  z-index: 1;
}
.reel-anim-on > .reel-caustics { opacity: 1; }
@media (min-width: 1025px) {
  .reel-anim-on > .reel-caustics { animation: reel-caustic-drift 13s ease-in-out infinite alternate; }
  @keyframes reel-caustic-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 60px -40px, -70px 50px, 40px -30px; }
  }
}
.reel-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.reel-bubbles i {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12) 62%);
  opacity: 0;
  animation: reel-bubble-rise 11s linear infinite;
  animation-play-state: paused;
}
.reel-anim-on > .reel-bubbles i { animation-play-state: running; }
@keyframes reel-bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  8%   { opacity: 0.75; }
  50%  { transform: translate3d(14px, -46vh, 0) scale(1); }
  92%  { opacity: 0.55; }
  100% { transform: translate3d(-10px, -92vh, 0) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-caustics, .reel-bubbles { display: none !important; }
}
.reel-dest, .reel-dest-head, .reel-voyage-wrap { position: relative; z-index: 2; }
.reel-dest-head { text-align: center; margin-bottom: 46px; }
.reel-dest-kicker {
  display: inline-block;
  color: var(--reel-teal);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.reel-dest-head h2 {
  color: #fff !important;
  font-size: clamp(28px, 4vw, 46px);
  margin: 0 0 10px;
}
.reel-dest-head p { color: rgba(255, 255, 255, 0.75); margin: 0; }

.reel-dest { --dest-h: 460px; max-width: 1280px; margin: 0 auto; }
.reel-dest__track {
  display: flex;
  gap: 14px;
  height: var(--dest-h);
}
.reel-dest__card {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--reel-glass-brd);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(4, 18, 31, 0.05) 30%, rgba(4, 18, 31, 0.85) 100%),
    var(--dest-img, linear-gradient(160deg, #0a2540, #04121f)) center / cover no-repeat;
  transition: flex 0.85s var(--reel-ease), box-shadow 0.5s ease;
}
.reel-dest__card.is-active {
  flex: 3.2;
  box-shadow: 0 22px 60px rgba(2, 12, 22, 0.6), 0 0 46px rgba(15, 214, 194, 0.15);
}
.reel-dest__depth {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 214, 194, 0.12) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.reel-dest__card.is-active .reel-dest__depth { opacity: 1; }
.reel-dest__num {
  position: absolute; top: 20px; left: 22px;
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--reel-aqua);
  opacity: 0.85;
}
.reel-dest__name {
  font-size: clamp(20px, 2.3vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: all 0.6s var(--reel-ease);
  text-shadow: 0 2px 18px rgba(2, 12, 22, 0.8);
}
.reel-dest__card.is-active .reel-dest__name {
  writing-mode: horizontal-tb;
  transform: none;
}
.reel-dest__tag {
  color: var(--reel-teal);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 10px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all 0.55s var(--reel-ease) 0.15s;
}
.reel-dest__desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
  max-width: 46ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all 0.55s var(--reel-ease) 0.2s;
}
.reel-dest__card.is-active .reel-dest__tag  { max-height: 30px;  opacity: 1; }
.reel-dest__card.is-active .reel-dest__desc { max-height: 140px; opacity: 1; }

@media (max-width: 880px) {          /* phones: vertical accordion */
  .reel-dest { --dest-h: auto; }
  .reel-dest__track { flex-direction: column; height: auto; }
  .reel-dest__card { flex: none; min-height: 74px; padding: 20px; }
  .reel-dest__card.is-active { flex: none; min-height: 300px; }
  .reel-dest__name { writing-mode: horizontal-tb; transform: none; }
}

/* ------------------------------------------------------------
   8. FLOATING BOOK NOW — always within thumb's reach.
   ------------------------------------------------------------ */
.reel-book-float {
  position: fixed;
  right: 20px; bottom: 22px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #04121f !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--reel-teal), var(--reel-aqua));
  box-shadow: 0 12px 34px rgba(15, 214, 194, 0.4);
  transform: translateY(0);
  transition: transform 0.35s var(--reel-ease), box-shadow 0.35s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.reel-book-float.is-visible { opacity: 1; pointer-events: auto; }
.reel-book-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 44px rgba(15, 214, 194, 0.55); }
.reel-book-float__pulse {
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(15, 214, 194, 0.55);
  animation: reel-pulse 2.6s ease-out infinite;
}
@keyframes reel-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 214, 194, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(15, 214, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 214, 194, 0); }
}
@media (max-width: 640px) {
  .reel-book-float { right: 14px; bottom: 16px; padding: 14px 22px; }
}
/* keep clear of the Chaty chat bubble (it sits bottom-left) */

/* ------------------------------------------------------------
   9. SECTION TRANSITIONS — gentle gradient continuity.
   ------------------------------------------------------------ */
.reel-cinematic-on .elementor-section,
.reel-cinematic-on .e-con {
  scroll-margin-top: 90px;
}

/* ------------------------------------------------------------
   LIVE URGENCY CHIP
   ------------------------------------------------------------ */
.reel-urgency {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 4px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(6, 54, 77, 0.55);
  border: 1px solid rgba(255, 209, 102, 0.45);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.reel-urgency__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--reel-sand);
  box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.6);
  animation: reel-urgency-pulse 1.8s ease-out infinite;
}
@keyframes reel-urgency-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 209, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
}

/* ------------------------------------------------------------
   OCEAN-WAVE PAGE TRANSITION OVERLAY
   ------------------------------------------------------------ */
#reel-wave-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  overflow: hidden;
}

/* --- IMPACT SPLASH: water bursts from the exact click point --- */
#reel-wave-overlay .reel-splash-fill {
  position: absolute;
  border-radius: 50%;
  /* an impact bloom, soft at the rim so it reads as water thrown up
     rather than a hard bubble sitting on the page */
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.55) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(127, 243, 234, 0.95) 0%, rgba(63, 230, 221, 0.9) 26%,
                    rgba(25, 180, 201, 0.65) 55%, rgba(14, 109, 142, 0.25) 82%, rgba(14, 109, 142, 0) 100%);
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
  -webkit-backdrop-filter: blur(2px) saturate(1.35);
  backdrop-filter: blur(2px) saturate(1.35);
}
#reel-wave-overlay.is-splash .reel-splash-fill {
  transition: transform 0.55s cubic-bezier(0.18, 0.72, 0.28, 1), opacity 0.45s ease 0.16s;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;                     /* the burst hands over to the wave */
}

/* --- THE WAVE: a swell with a foaming, undulating crest that
   rises over the page, then falls away as the new page appears --- */
#reel-wave-overlay .reel-splash-sheet {
  position: absolute;
  left: -2%; right: -2%;
  top: 0; height: 128%;
  transform: translateY(112%);          /* parked below the fold */
  will-change: transform;
  pointer-events: none;
}
#reel-wave-overlay .reel-wave-body {
  position: absolute;
  left: 0; right: 0; top: 176px; bottom: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #3fe6dd 0%, #19b4c9 26%, #0e6d8e 68%, #0a4a66 100%);
}
/* the crest sits on the leading edge, twice as wide as the screen so
   it can drift sideways and read as moving water rather than a shape */
#reel-wave-overlay .reel-wave-crest {
  position: absolute;
  left: -50%; top: 0;
  width: 220%; height: 190px;
  filter: drop-shadow(0 6px 14px rgba(3, 26, 40, 0.28));
}
#reel-wave-overlay .reel-crest-back { fill: #5ceee2; opacity: 0.75; }
#reel-wave-overlay .reel-crest-mid  { fill: #3fe6dd; }
#reel-wave-overlay .reel-crest-foam {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 7;
  stroke-linecap: round;
}
#reel-wave-overlay.is-splash .reel-crest-back,
#reel-wave-overlay.is-cover .reel-crest-back { animation: reel-crest-drift 2.6s linear infinite; }
#reel-wave-overlay.is-splash .reel-crest-mid,
#reel-wave-overlay.is-cover .reel-crest-mid  { animation: reel-crest-drift 1.9s linear infinite reverse; }
#reel-wave-overlay.is-splash .reel-crest-foam,
#reel-wave-overlay.is-cover .reel-crest-foam { animation: reel-crest-drift 1.5s linear infinite; }
@keyframes reel-crest-drift {
  0%   { transform: translateX(0)      translateY(0); }
  50%  { transform: translateX(-260px) translateY(10px); }
  100% { transform: translateX(-520px) translateY(0); }
}
/* exit: the swell rises over the page from below */
#reel-wave-overlay.is-splash .reel-splash-sheet {
  transition: transform 0.62s cubic-bezier(0.2, 0.72, 0.28, 1);
  transform: translateY(0);
}
/* arrival: already covering, then it recedes the way it came */
#reel-wave-overlay.is-cover .reel-splash-sheet { transform: translateY(0); }
#reel-wave-overlay.is-cover.is-drain .reel-splash-sheet {
  transition: transform 0.78s cubic-bezier(0.55, 0, 0.22, 1);
  transform: translateY(112%);
}

/* corona rings thrown out by the impact */
.reel-splash-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%) scale(0.12);
  opacity: 0;
  animation: reel-ring-out 0.8s cubic-bezier(0.12, 0.7, 0.3, 1) forwards;
}
@keyframes reel-ring-out {
  0%   { transform: translate(-50%, -50%) scale(0.12); opacity: 0; border-width: 5px; }
  14%  { opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 0; border-width: 1px; }
}

/* droplets flung out of the impact, arcing under gravity */
.reel-splash-drop {
  position: absolute;
  border-radius: 50% 50% 52% 52% / 60% 60% 42% 42%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.98) 0%, rgba(200, 246, 255, 0.8) 32%,
                    rgba(63, 230, 221, 0.9) 70%, rgba(14, 109, 142, 0.85) 100%);
  box-shadow: 0 2px 7px rgba(2, 12, 22, 0.32);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: reel-splash-fly;
  animation-timing-function: cubic-bezier(0.16, 0.62, 0.44, 1);
  animation-fill-mode: forwards;
}
@keyframes reel-splash-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  12%  { opacity: 1; }
  55%  { transform: translate(-50%, -50%)
                    translate(calc(var(--reel-dx, 0px) * 0.6), calc(var(--reel-dy, 0px) * 0.6))
                    scale(1.08); }
  100% { opacity: 0;
         transform: translate(-50%, -50%)
                    translate(var(--reel-dx, 0px), calc(var(--reel-dy, 0px) + var(--reel-g, 90px)))
                    scale(0.7); }
}

/* --- droplets left clinging to the screen, running down --- */
#reel-wave-overlay .reel-wave-drops { position: absolute; inset: 0; }
.reel-wave-drop {
  position: absolute;
  border-radius: 50% 50% 52% 52% / 62% 62% 40% 40%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(214, 247, 255, 0.6) 26%,
                    rgba(69, 236, 255, 0.42) 56%, rgba(10, 95, 125, 0.55) 100%);
  box-shadow:
    0 2px 5px rgba(2, 12, 22, 0.32),
    inset 0 -2px 3px rgba(255, 255, 255, 0.6),
    inset 0 2px 2px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: reel-drip-run;
  animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4);
  animation-fill-mode: forwards;
}
/* the wet streak a running droplet leaves behind it */
.reel-wave-drop::after {
  content: "";
  position: absolute;
  left: 30%; right: 30%;
  bottom: 55%;
  height: 0;
  border-radius: 40%;
  background: linear-gradient(to top, rgba(200, 244, 255, 0.55), rgba(200, 244, 255, 0));
  animation: reel-drip-trail 1.1s ease-out forwards;
}
@keyframes reel-drip-run {
  0%   { opacity: 0;   transform: translateY(0) scaleY(0.8); }
  10%  { opacity: 0.95; transform: translateY(1px) scaleY(1); }
  40%  { transform: translateY(calc(var(--reel-fall, 60vh) * 0.28)) scaleY(1.3); }
  100% { opacity: 0;   transform: translateY(var(--reel-fall, 60vh)) scaleY(1.6); }
}
@keyframes reel-drip-trail {
  0%   { height: 0; opacity: 0; }
  25%  { opacity: 0.6; }
  100% { height: 90px; opacity: 0; }
}

/* ------------------------------------------------------------
   HERO TRIPADVISOR LINK + BOUNCING HOW-TO-BOOK ARROW
   ------------------------------------------------------------ */
.reel-ta-link {
  color: var(--reel-aqua) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 700;
}
.reel-ta-link:hover { color: var(--reel-teal) !important; }

.reel-cinematic-on .rat-bs-chevron {
  display: inline-block;
  animation: reel-arrow-bounce 1.5s ease-in-out infinite;
}
@keyframes reel-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(7px); }
  45%      { transform: translateY(-3px); }
  60%      { transform: translateY(5px); }
  75%      { transform: translateY(0); }
}

/* ------------------------------------------------------------
   HOMEPAGE PHOTO BLOCKS — removed (Gallery page keeps them).
   ------------------------------------------------------------ */
body.reel-cine-home .reel-hide-block,
body.reel-cine-home .rat-himg,
body.reel-cine-home .rat-gs-wrap,
body.reel-cine-home .elementor-element-rat-gallery-scroll {
  display: none !important;
}

/* ------------------------------------------------------------
   MODERN BLOG — card-grid archive + clean reading layout.
   ------------------------------------------------------------ */
body.blog .widget-area,
body.blog #secondary,
body.single-post .widget-area,
body.single-post #secondary {
  display: none !important;
}
body.blog .content-area,
body.single-post .content-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
body.blog .togo-posts-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  body.blog .togo-posts-wrapper { grid-template-columns: 1fr; }
}
body.blog article.post {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--reel-glass-brd);
  border-radius: 20px;
  overflow: hidden;
  padding: 24px;
  margin: 0 !important;
  transition: transform 0.45s var(--reel-ease), box-shadow 0.45s ease;
  display: flex;
  flex-direction: column;
}
@media (hover: hover) {
  body.blog article.post:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 54px rgba(2, 12, 22, 0.4), 0 0 34px rgba(20, 232, 200, 0.15);
  }
}
body.blog article.post img {
  width: calc(100% + 48px);
  max-width: none;
  height: 250px;
  object-fit: cover;
  margin: -24px -24px 20px;
  border-radius: 0;
  transition: transform 0.8s var(--reel-ease);
}
body.blog article.post h2, body.blog article.post h3 { font-size: 22px; line-height: 1.25; margin: 6px 0 10px; }
body.blog article.post h2 a, body.blog article.post h3 a { color: #fff !important; }
body.blog article.post h2 a:hover, body.blog article.post h3 a:hover { color: var(--reel-aqua) !important; }
body.blog article.post p { color: rgba(255, 255, 255, 0.8); }
body.blog article.post a.reel-readmore,
body.blog article.post a.read-more,
body.blog article.post .read-more a,
body.blog article.post [class*="readmore"] {
  display: inline-block;
  margin-top: auto;
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--reel-teal), var(--reel-aqua));
  color: #04121f !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  align-self: flex-start;
  transition: transform 0.3s var(--reel-ease), box-shadow 0.3s ease;
}
body.blog article.post a.reel-readmore,
body.blog article.post a.reel-readmore * {
  color: #04121f !important;
}
body.blog article.post a.reel-readmore {
  box-shadow: 0 6px 18px rgba(2, 12, 22, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
body.blog article.post a.reel-readmore:hover,
body.blog article.post a.read-more:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 232, 200, 0.45); }
body.blog .cat-links, body.blog [class*="category"] a {
  color: var(--reel-teal) !important;
  letter-spacing: 0.12em;
  font-size: 12px;
  text-transform: uppercase;
}

/* Single post — clean centered reading column */
body.single-post .content-area { max-width: 840px !important; margin: 0 auto; float: none !important; }
body.single-post article.post { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--reel-glass-brd); border-radius: 22px; padding: clamp(22px, 4vw, 48px); }
body.single-post .entry-content p, body.single-post .post-content p { line-height: 1.85; font-size: 17px; color: rgba(255, 255, 255, 0.88); }
body.single-post .entry-content img, body.single-post .post-content img { border-radius: 16px; }
body.single-post .entry-content h2, body.single-post .entry-content h3,
body.single-post .post-content h2, body.single-post .post-content h3 { color: #fff !important; margin-top: 1.6em; }
body.single-post blockquote {
  border-left: 4px solid var(--reel-teal);
  background: rgba(20, 232, 200, 0.08);
  border-radius: 0 14px 14px 0;
  padding: 18px 24px;
  font-style: italic;
}

/* ------------------------------------------------------------
   10. ACCESSIBILITY + PERFORMANCE GUARDRAILS
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reel-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reel-parallax] { transform: none !important; }
  .reel-hero-video .reel-hero-shimmer,
  .reel-wave-divider span:nth-child(2),
  .reel-book-float__pulse,
  .rat-bs-chevron,
  .reel-scroll-cue::before { animation: none !important; }
  .reel-cine-home .reel-hero-content-anim h1 { animation: none !important; opacity: 1; }
}

/* ------------------------------------------------------------
   SEAMLESS SECTION EDGES
   The theme stacks bands of flat colour; JS (blendSeams)
   feathers their edges. These rules handle the two edges JS
   should not touch: the hero's own backdrop and the base of
   the hero video, which must melt into the ocean gradient.
   ------------------------------------------------------------ */
body.reel-cinematic-on .reel-hero-target {
  background-color: var(--reel-deep) !important;
  border-bottom: 0 !important;
}
.reel-hero-video::before {          /* video dissolves into the page below */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 24%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 74, 102, 0) 0%,
    rgba(10, 74, 102, 0.45) 58%,
    rgba(10, 74, 102, 0.96) 100%);
}
/* stacked bands never butt against each other with a hard rule */
body.reel-cinematic-on [data-reel-bg] {
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   DESTINATION CARDS — the long read under the voyage map.
   Glass over the ocean gradient, photo-led, one column on
   phones and two from tablet up. The "along the way" card
   (Atlantis) runs full width to break the rhythm.
   ------------------------------------------------------------ */
.reel-dest-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1180px;
  margin: 8px auto 0;
  padding: 0 20px;
}
@media (min-width: 860px) {
  .reel-dest-cards { grid-template-columns: 1fr 1fr; gap: 24px; }
  .reel-dest-card.is-cruise { grid-column: 1 / -1; }
}
.reel-dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px rgba(3, 26, 40, 0.28);
  transition: transform .45s var(--reel-ease), box-shadow .45s var(--reel-ease),
              border-color .45s var(--reel-ease);
  cursor: pointer;
}
@supports (backdrop-filter: blur(10px)) {
  .reel-dest-card { backdrop-filter: blur(10px) saturate(1.15); background: rgba(255, 255, 255, 0.08); }
}
.reel-dest-card:hover,
.reel-dest-card:focus-visible,
.reel-dest-card.is-active {
  transform: translateY(-6px);
  border-color: rgba(69, 236, 255, 0.55);
  box-shadow: 0 26px 60px rgba(3, 26, 40, 0.42), 0 0 0 1px rgba(69, 236, 255, 0.25) inset;
  outline: none;
}
.reel-dest-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(10, 74, 102, 0.5);
}
.reel-dest-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s var(--reel-ease);
}
.reel-dest-card:hover .reel-dest-card__media img,
.reel-dest-card.is-active .reel-dest-card__media img { transform: scale(1.08); }
.reel-dest-card__media::after {          /* photo meets text without a hard line */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 45%;
  background: linear-gradient(180deg, rgba(6, 42, 60, 0) 0%, rgba(6, 42, 60, 0.55) 100%);
  pointer-events: none;
}
.reel-dest-card.is-cruise .reel-dest-card__media { aspect-ratio: 21 / 9; }
.reel-dest-card__body { padding: 22px 24px 24px; }
.reel-dest-card__num {
  display: block;
  font-size: 12px; letter-spacing: .22em; font-weight: 700;
  color: var(--reel-aqua);
  margin-bottom: 6px;
}
.reel-dest-card h3 {
  margin: 0 0 4px;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.15;
  color: #fff;
}
.reel-dest-card__tag {
  display: block;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--reel-sand);
  margin-bottom: 12px;
}
.reel-dest-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.9);
}
.reel-dest-card__tips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0; padding: 0;
}
.reel-dest-card__tips li {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  color: #eafcff;
  background: rgba(20, 232, 200, 0.16);
  border: 1px solid rgba(20, 232, 200, 0.3);
}
@media (max-width: 600px) {
  .reel-dest-cards { padding: 0 14px; gap: 16px; }
  .reel-dest-card__body { padding: 18px 18px 20px; }
  .reel-dest-card p { font-size: 15px; }
}
@media (min-width: 860px) {
  /* A card with no photo (the departure point) reads better as a
     full-width opener than as a half-empty column. */
  .reel-dest-card.is-nomedia { grid-column: 1 / -1; }
  .reel-dest-card.is-nomedia .reel-dest-card__body { padding: 26px 30px 28px; max-width: 900px; }
}

/* Wrappers left empty after their photo grid was removed */
body.reel-cinematic-on .reel-collapsed {
  display: none !important;
}

/* ------------------------------------------------------------
   TOUR GRID — five cards in a three-wide flex row left an empty
   cell on the second row. The inquiry card grows to fill it.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .reel-cinematic-on .rat-inq-card {
    flex-grow: 1 !important;
    /* never wider than two columns, so it can't stretch edge to
       edge if the tour count ever leaves it alone on a row */
    max-width: calc(66.66% - 12px) !important;
  }
  .reel-cinematic-on .rat-inq-card .rat-inq-inner {
    width: auto !important;
    max-width: none !important;
  }
}

/* The eyebrow chip repeats the H1 word for word — drop it. */
body.reel-cinematic-on .rat-home-intro__eyebrow {
  display: none !important;
}

/* ------------------------------------------------------------
   TRUST BADGES — the strip shipped as a hard dark rectangle
   sitting on the ocean. The chips are already glass pills, so
   the box behind them is doing nothing but breaking the page.
   ------------------------------------------------------------ */
body.reel-cinematic-on #rat-trust-strip {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
body.reel-cinematic-on .rat-tb-item {
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 6px 18px rgba(3, 26, 40, 0.18);
}
@supports (backdrop-filter: blur(6px)) {
  body.reel-cinematic-on .rat-tb-item {
    backdrop-filter: blur(7px) saturate(1.2);
    background: rgba(255, 255, 255, 0.10) !important;
  }
}

/* ------------------------------------------------------------
   BLOG & POSTS — the theme's body copy is dark grey, written
   for a white page. On the ocean it has to be light.
   ------------------------------------------------------------ */
body.reel-cinematic-on.blog,
body.reel-cinematic-on.archive,
body.reel-cinematic-on.single-post,
body.reel-cinematic-on.blog .site-content,
body.reel-cinematic-on.archive .site-content,
body.reel-cinematic-on.single-post .site-content {
  color: rgba(255, 255, 255, 0.92) !important;
}
body.reel-cinematic-on.blog p,
body.reel-cinematic-on.blog li,
body.reel-cinematic-on.blog span:not([class*="icon"]),
body.reel-cinematic-on.blog div.post-excerpt,
body.reel-cinematic-on.archive p,
body.reel-cinematic-on.archive li,
body.reel-cinematic-on.single-post p,
body.reel-cinematic-on.single-post li,
body.reel-cinematic-on.single-post td,
body.reel-cinematic-on.single-post th,
body.reel-cinematic-on.single-post dd,
body.reel-cinematic-on.single-post dt {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.reel-cinematic-on.blog h1, body.reel-cinematic-on.blog h2,
body.reel-cinematic-on.blog h3, body.reel-cinematic-on.blog h4,
body.reel-cinematic-on.archive h1, body.reel-cinematic-on.archive h2,
body.reel-cinematic-on.archive h3, body.reel-cinematic-on.archive h4,
body.reel-cinematic-on.single-post h1, body.reel-cinematic-on.single-post h2,
body.reel-cinematic-on.single-post h3, body.reel-cinematic-on.single-post h4,
body.reel-cinematic-on.single-post h5, body.reel-cinematic-on.single-post h6 {
  color: #ffffff !important;
}
/* meta lines sit back a little */
body.reel-cinematic-on .post-meta,
body.reel-cinematic-on .post-date,
body.reel-cinematic-on .post-author,
body.reel-cinematic-on .entry-meta,
body.reel-cinematic-on .post-categories {
  color: rgba(255, 255, 255, 0.72) !important;
}
body.reel-cinematic-on.blog a:not(.reel-readmore):not(.button):not(.btn),
body.reel-cinematic-on.archive a:not(.reel-readmore):not(.button):not(.btn),
body.reel-cinematic-on.single-post .site-content a:not(.reel-readmore):not(.button):not(.btn) {
  color: var(--reel-aqua) !important;
  text-decoration-color: rgba(69, 236, 255, 0.5);
}
/* pull quotes: glass panel, aqua rule, white type */
body.reel-cinematic-on.single-post blockquote,
body.reel-cinematic-on.blog blockquote,
body.reel-cinematic-on .wp-block-quote {
  background: rgba(255, 255, 255, 0.10) !important;
  background-image: none !important;
  border-left: 4px solid var(--reel-teal) !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 22px 26px !important;
  box-shadow: 0 14px 34px rgba(3, 26, 40, 0.22);
}
body.reel-cinematic-on blockquote p,
body.reel-cinematic-on blockquote cite,
body.reel-cinematic-on .wp-block-quote p {
  color: #ffffff !important;
  opacity: 1 !important;
}
body.reel-cinematic-on figcaption,
body.reel-cinematic-on .wp-caption-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ------------------------------------------------------------
   MOBILE MENU — shipped as a plain white panel, which lands
   like a different website on top of this one.
   ------------------------------------------------------------ */
body.reel-cinematic-on .mobile-menu-content,
body.reel-cinematic-on .mobile-menu-top,
body.reel-cinematic-on .mobile-menu-center,
body.reel-cinematic-on .mobile-menu-bottom {
  background: linear-gradient(180deg, rgba(9, 62, 86, 0.97) 0%, rgba(6, 40, 58, 0.98) 100%) !important;
  color: #eafcff !important;
}
@supports (backdrop-filter: blur(12px)) {
  body.reel-cinematic-on .mobile-menu-content {
    backdrop-filter: blur(14px) saturate(1.2);
    background: linear-gradient(180deg, rgba(9, 62, 86, 0.9) 0%, rgba(6, 40, 58, 0.94) 100%) !important;
  }
}
body.reel-cinematic-on .mobile-menu-content a,
body.reel-cinematic-on .mb-menu a,
body.reel-cinematic-on .mobile-menu-content .menu-item > a {
  color: #eafcff !important;
}
body.reel-cinematic-on .mobile-menu-content .menu-item + .menu-item {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
body.reel-cinematic-on .mobile-menu-content .menu-item > a:hover,
body.reel-cinematic-on .mobile-menu-content .menu-item.current-menu-item > a {
  color: var(--reel-teal) !important;
}
body.reel-cinematic-on .mobile-menu-close,
body.reel-cinematic-on .mobile-menu-content svg { color: #eafcff !important; }
/* the label spans inside menu links carry their own colour */
body.reel-cinematic-on .mobile-menu-content .menu-item-title,
body.reel-cinematic-on .mobile-menu-content .menu-item span,
body.reel-cinematic-on .mb-menu .menu-item-title,
body.reel-cinematic-on .mobile-menu-content .mobile-menu-bottom span {
  color: #eafcff !important;
}
/* mini cart panel: same ocean glass, readable type */
body.reel-cinematic-on [class*="mini-cart"]:not([class*="lightbox-bg"]) {
  color: #eafcff !important;
}
body.reel-cinematic-on .mini-cart-lightbox,
body.reel-cinematic-on .mini-cart-content,
body.reel-cinematic-on .mini-cart-wrapper,
body.reel-cinematic-on .mini-cart-inner {
  background: linear-gradient(180deg, rgba(9, 62, 86, 0.97) 0%, rgba(6, 40, 58, 0.98) 100%) !important;
}
/* The theme paints the panel white through a deep wrapper chain, so
   match that depth and set the longhands rather than the shorthand. */
html body.reel-cinematic-on .canvas-menu-wrapper .mobile-menu-wrapper,
html body.reel-cinematic-on .canvas-menu-wrapper .mobile-menu-wrapper .mobile-menu-content,
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-content,
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-top,
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-center,
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-bottom {
  background-color: rgba(8, 56, 78, 0.97) !important;
  background-image: linear-gradient(180deg, rgba(9, 62, 86, 0.97) 0%, rgba(6, 40, 58, 0.99) 100%) !important;
  color: #eafcff !important;
}
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-top,
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-center,
html body.reel-cinematic-on .mobile-menu-wrapper .mobile-menu-bottom {
  background-image: none !important;      /* one panel, not three stacked */
  background-color: transparent !important;
}

/* ------------------------------------------------------------
   GALLERY PAGE — the site's Customizer CSS carries
   "#rat-gallery-wrap,#rat-gallery-grid{display:none!important}"
   under a "HP gallery" comment: it was meant to drop the photo
   strip from the homepage, but it is unscoped, so it also blanks
   the Gallery page. The homepage hiding is handled by this
   plugin (scoped to .reel-cine-home), so put the grid back
   everywhere else. Specificity beats the id rule above.
   ------------------------------------------------------------ */
body.reel-cinematic-on:not(.home):not(.reel-cine-home) #rat-gallery-wrap,
body.reel-cinematic-on:not(.home):not(.reel-cine-home) #rat-gallery-grid {
  display: block !important;
}
/* The grid sits in an Elementor flex container, so a plain
   width:100% collapses it to min-content (its images have no
   intrinsic width until they load — a chicken-and-egg that left
   the grid 36px wide). Give it a real basis and size the tiles. */
body.reel-cinematic-on #rat-gallery-grid,
body.reel-cinematic-on #rat-gallery-wrap {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body.reel-cinematic-on #rat-gallery-grid .rat-img {
  width: 100% !important;
  break-inside: avoid;
  margin-bottom: 12px;
}
body.reel-cinematic-on #rat-gallery-grid .rat-img img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 14px;
}