/* ============================================================
   TOUR Z PALAWAN — REDESIGNED STYLESHEET
   Inspired by: Harmont (framed hero) + Voices United (bold cards)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300&display=swap');

/* === VARIABLES === */
:root {
  --primary:      #002c40;
  --accent:       #fa3d1b;
  --white:        #ffffff;
  --cream:        #f0eeeb;
  --off-white:    #f7f6f3;
  --border:       rgba(0, 44, 64, 0.10);
  --border-dark:  rgba(255, 255, 255, 0.12);
  --muted:        #355464;
  --font:         'Nunito', system-ui, sans-serif;
  --h1:           clamp(40px, 7vw, 86px);
  --h2:           clamp(30px, 4.5vw, 54px);
  --h3:           clamp(18px, 2.5vw, 26px);
  --section-py:   clamp(72px, 10vw, 128px);
  --container:    1200px;
  --gutter:       clamp(20px, 5vw, 80px);
  --radius-lg:    24px;
  --radius:       16px;
  --radius-pill:  999px;
  --shadow:       0 4px 24px rgba(0, 44, 64, 0.08);
  --shadow-md:    0 8px 40px rgba(0, 44, 64, 0.14);
  --shadow-lg:    0 16px 60px rgba(0, 44, 64, 0.20);
  --transition:   0.24s ease;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  color: var(--primary);
  background: var(--cream); /* warm cream — shows around framed hero */
  font-size: 18px;
  line-height: 1.72;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.1; }
h1 { font-size: var(--h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: var(--h3); font-weight: 700; }
p { max-width: 65ch; }
p + p { margin-top: 1em; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c42a12;
  margin-bottom: 14px;
}

.text-accent { color: var(--accent); }

.hero .eyebrow,
.cta-section .eyebrow,
.live-update__intro .eyebrow {
  color: #ffc4b5;
}

/* === LAYOUT === */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--section-py) 0; background: var(--white); }
.section--cream { background: var(--cream); }
.section--dark  { background: var(--primary); color: var(--white); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(250, 61, 27, 0.32);
}
.btn--primary:hover { box-shadow: 0 8px 28px rgba(250, 61, 27, 0.46); }

.btn--dark {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(0, 44, 64, 0.22);
}
.btn--dark:hover { background: #003a54; }

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.60);
}
.btn--outline-white:hover { background: rgba(255,255,255,0.10); border-color: var(--white); }

.btn--outline-dark {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn--outline-dark:hover { background: var(--primary); color: var(--white); }

/* === NAV — transparent at top, frosted white on scroll === */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 88px;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: transparent;
  transition: background 0.38s ease, box-shadow 0.38s ease, height 0.38s ease;
}

/* Scrolled: floating pill */
.nav.scrolled {
  left: 14px;
  right: 14px;
  top: 8px;
  border-radius: 18px;
  padding: 0 24px;
  height: 72px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 2px 24px rgba(0, 44, 64, 0.12), 0 0 0 1px rgba(0, 44, 64, 0.08);
}

/* Horizontal brand mark: use the tightly cropped source at its natural ratio. */
.nav__logo {
  justify-self: start;
  display: flex;
  align-items: center;
  width: 150px;
  height: 60px;
  flex-shrink: 0;
}
.nav__logo .logo--light,
.nav__logo .logo--dark {
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* Toggle: show white on dark bg, dark on frosted white */
.logo--dark { display: none; }
.nav.scrolled .logo--light { display: none; }
.nav.scrolled .logo--dark  { display: block; }

/* Links — center column */
.nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Right column: CTA + hamburger */
.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__links a {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.nav__links a:hover { color: var(--white); }
.nav.scrolled .nav__links a       { color: var(--primary); }
.nav.scrolled .nav__links a:hover { color: var(--accent); }

/* Language selector in the top bar */
.nav-language {
  position: relative;
  z-index: 205;
  flex-shrink: 0;
}
.nav-language__details { position: relative; }
.nav-language__summary {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  color: var(--white);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.nav-language__summary::-webkit-details-marker { display: none; }
.nav-language__summary:hover,
.nav-language__details[open] .nav-language__summary {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.58);
}
.nav-language__word {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-language__code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.nav.scrolled .nav-language__summary,
.nav--home .nav-language__summary {
  color: var(--primary);
  background: rgba(0,44,64,0.04);
  border-color: rgba(0,44,64,0.14);
}
.nav.scrolled .nav-language__summary:hover,
.nav.scrolled .nav-language__details[open] .nav-language__summary,
.nav--home .nav-language__summary:hover,
.nav--home .nav-language__details[open] .nav-language__summary {
  background: rgba(0,44,64,0.08);
  border-color: rgba(0,44,64,0.24);
}
.nav-language__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(0,44,64,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 16px 48px rgba(0,44,64,0.18);
  display: grid;
  gap: 4px;
}
.nav-language__menu a,
.nav-language__menu > span {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 14px;
}
.nav-language__menu a:hover,
.nav-language__menu a[aria-current="true"] {
  background: var(--off-white);
}
.nav-language__menu strong {
  font-size: 14px;
  font-weight: 800;
}
.nav-language__menu small {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
}
.nav-language__menu > span {
  opacity: 0.42;
  cursor: not-allowed;
}

/* CTA pill */
.nav__cta {
  background: var(--accent) !important;
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(250,61,27,0.32);
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.nav__cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(250,61,27,0.46) !important; }

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  z-index: 201;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav.scrolled .nav__hamburger span { background: var(--primary); }
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === HOME PAGE NAV — hidden until scrolled past hero === */
.nav--home {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.nav--home .nav__logo  { justify-self: start; }
.nav--home .nav__links { justify-self: center; }
.nav--home .nav__right { justify-self: end; }
.nav--home .nav__links a       { color: var(--primary); }
.nav--home .nav__links a:hover { color: var(--accent); }
.nav--home .nav__hamburger span { background: var(--primary); }
.nav--home.scrolled {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  left: 14px;
  right: 14px;
  top: 8px;
  border-radius: 18px;
  padding: 0 24px;
  height: 68px;
  box-shadow: 0 2px 24px rgba(0, 44, 64, 0.12), 0 0 0 1px rgba(0, 44, 64, 0.08);
}

/* Mobile overlay */
.nav__mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--primary);
  z-index: 199;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.nav__mobile-overlay.open { opacity: 1; pointer-events: all; }
.nav__mobile-overlay a { color: var(--white); font-size: 26px; font-weight: 700; opacity: 0.82; }
.nav__mobile-overlay a:hover { opacity: 1; }
.nav__mobile-overlay .btn--primary { font-size: 18px; padding: 16px 40px; margin-top: 12px; opacity: 1 !important; }

/* === HERO NAV — transparent, inside framed hero card (home page only) === */
.hero-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.hero-nav__logo {
  justify-self: start;
  display: flex;
  align-items: center;
  width: 150px;
  height: 60px;
  flex-shrink: 0;
}
.hero-nav__logo img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.hero-nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 24px;
}
.hero-nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-nav__link {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.hero-nav__link:hover { color: var(--white); }
.hero-nav__cta {
  background: var(--accent);
  color: var(--white);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(250,61,27,0.32);
}
.hero-nav__cta:hover { background: #e0340f; transform: translateY(-1px); }
.hero-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
  position: relative;
  z-index: 201;
}
.hero-nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}
.hero-nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hero-nav__hamburger.open span:nth-child(2) { opacity: 0; }
.hero-nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === HERO — BASE (inner pages: full bleed behind nav) === */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--white);
  text-align: center;
}
.hero--medium { min-height: 68vh; }
.hero--short  { min-height: 50vh; }

/* Blog hero — solid brand colour, no background image */
.hero--blog {
  min-height: 34vh;
  background: var(--primary);
  justify-content: center;
}
.hero--blog .hero__content {
  padding: 110px var(--gutter) 56px;
}
.hero--blog .hero__content h1 {
  font-size: clamp(21px, 3vw, 40px);
  line-height: 1.15;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--primary); /* shows if image missing */
}
.hero__bg img,
.hero__bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* A flat 60% tint hid the photograph, so the hero read as a dark panel on
     phones. This is bottom-weighted instead: light enough at the top for the
     animal to come through, heavier where the headline and buttons sit. */
  background: linear-gradient(
    to bottom,
    rgba(0, 44, 64, 0.30) 0%,
    rgba(0, 44, 64, 0.48) 42%,
    rgba(0, 44, 64, 0.62) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 96px var(--gutter);
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.hero__content h1 {
  color: var(--white);
  margin-bottom: 18px;
  font-size: clamp(32px, 4vw, 58px);
  /* Buys back the contrast lost by lightening the overlay, without darkening
     the photograph again. */
  text-shadow: 0 2px 18px rgba(0, 22, 33, 0.55);
}
.hero__title-line { display: block; }

.hero__sub {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  margin: 0 auto 28px;
  max-width: 500px;
  text-shadow: 0 1px 12px rgba(0, 22, 33, 0.5);
}

.freshness-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(244, 248, 248, 0.16);
  border: 1px solid rgba(244, 248, 248, 0.34);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 800;
}

.hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Booking bar — bottom of hero */
.hero__booking-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 0 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.booking-bar {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(0,0,0,0.24);
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 4px;
  max-width: 780px;
  width: 100%;
}
.booking-bar__item {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 10px;
  transition: background var(--transition);
}
.booking-bar__item:hover { background: var(--off-white); }
.booking-bar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.booking-bar__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}
.booking-bar__divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}
.booking-bar .btn { padding: 11px 20px; font-size: 14px; margin-left: 4px; flex-shrink: 0; }

/* Sold-out party sizes. A disabled option defaults to a grey barely different
   from the enabled ones. Desktop browsers honour this red; mobile pickers do
   not, which is why main.js also appends the word to the option text. */
.booking-bar__value option:disabled,
.booking-bar__value option.is-unavailable {
  color: #b3261e;
}

/* .booking-bar__value is styled for static text; these reset the native
   chrome browsers add once it is a <select>, <input type="date"> or the
   <button> that JS swaps in to open the availability calendar. */
select.booking-bar__value,
input.booking-bar__value,
button.booking-bar__value {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  line-height: 1.4;
  color: var(--primary);
  cursor: pointer;
}
select.booking-bar__value {
  padding-right: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23002c40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 7px;
  text-overflow: ellipsis;
}
select.booking-bar__value option { color: var(--primary); }
input.booking-bar__value::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.booking-bar__item:focus-within { background: var(--off-white); }
.booking-bar__value:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.booking-bar__note {
  margin: 0;
  max-width: 780px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: rgba(255,255,255,0.90);
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

/* Live status under the bar: spots left, sold out, clamped party size */
.booking-bar__status {
  margin: 0;
  max-width: 780px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.92);
}
.booking-bar__status[data-tone="good"] { color: #8ef0b0; }
.booking-bar__status[data-tone="warn"] { color: #ffd479; }
.booking-bar__status[data-tone="bad"]  { color: #ff9c8a; }

/* === HERO BOOKING BAR — AVAILABILITY CALENDAR === */
.booking-bar__item--date { position: relative; }
.booking-bar__date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  text-align: left;
  white-space: nowrap;
}
.booking-bar__date-trigger.is-empty { color: rgba(0, 44, 64, 0.42); }
.booking-bar__date-trigger::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23002c40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Opens upward: the bar sits at the bottom of the hero */
.booking-cal {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 300px;
  padding: 12px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.32);
  cursor: default;
}
.booking-cal[hidden] { display: none; }

.booking-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.booking-cal__month {
  font-size: 13.5px;
  font-weight: 900;
  color: var(--primary);
}
/* Intl returns lowercase month names in several locales; capitalize would also
   raise words like the Spanish "de", so only lift the first letter. */
.booking-cal__month::first-letter { text-transform: uppercase; }
.booking-cal__nav {
  padding: 3px 9px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  color: var(--primary);
  background: var(--white);
}
.booking-cal__nav:hover:not(:disabled) { background: var(--off-white); }
.booking-cal__nav:disabled { opacity: 0.32; cursor: not-allowed; }

.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.booking-cal__dow {
  padding: 2px 0;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(0,44,64,0.34);
}
.booking-cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 1px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  font-family: inherit;
}
.booking-cal__day small { font-size: 8px; font-weight: 900; opacity: 0.85; }
.booking-cal__day.is-open    { background: #dcfce7; color: #15803d; }
.booking-cal__day.is-some    { background: #fef3c7; color: #b45309; }
.booking-cal__day.is-unknown { background: var(--off-white); color: var(--primary); }
.booking-cal__day.is-full    { background: #fee2e2; color: #dc2626; cursor: not-allowed; }
.booking-cal__day.is-full span { text-decoration: line-through; }
.booking-cal__day.is-out     { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.booking-cal__day.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  font-weight: 900;
}
.booking-cal__day:not(:disabled):hover { border-color: var(--accent); }
.booking-cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.booking-cal__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(0, 44, 64, 0.55);
}
.booking-cal__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: -1px;
}
.booking-cal__swatch.is-open { background: #dcfce7; }
.booking-cal__swatch.is-some { background: #fef3c7; }
.booking-cal__swatch.is-full { background: #fee2e2; }

/* === HERO — FRAMED VARIANT (home page) === */
.hero--framed {
  margin: 16px;
  border-radius: var(--radius-lg);
  min-height: calc(100vh - 32px);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25), 0 24px 80px rgba(0,0,0,0.18);
  justify-content: center;
}
.hero--framed .hero__content {
  padding-top: 56px;
  padding-bottom: 72px;
}
.hero--framed .hero__content h1 { font-size: clamp(32px, 4vw, 58px); }

/* Floating badge pills — sit over the hero image */
.hero__badges {
  position: absolute;
  bottom: 160px;
  left: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.hero__badge {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--white);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Floating rating — top right of hero */
.hero__rating {
  position: absolute;
  bottom: 160px;
  right: 40px;
  z-index: 3;
  text-align: right;
  color: var(--white);
}
.hero__rating-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
}
.hero__rating-star {
  font-size: 22px;
  color: #f5a623;
  line-height: 1;
}
.hero__rating-num {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__rating-from {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}

/* === TRUST STRIP === */
.trust-strip {
  background: var(--primary);
  overflow: hidden;
  padding: 12px 0;
}
.trust-strip__track {
  display: flex;
  gap: 24px;
  align-items: center;
  width: max-content;
  animation: marquee 34s linear infinite;
  white-space: nowrap;
}
.trust-strip__track span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.72);
}
.trust-strip__dot { color: var(--accent) !important; font-size: 18px !important; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === STATS PILLS === */
.stats-pills-section {
  background: var(--white);
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.stats-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stat-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--cream);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.stat-pill__num {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.stat-pill__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* === SECTION HEADER === */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h2 { margin-bottom: 14px; }
.section-header > p {
  font-size: 17px;
  color: var(--muted);
  margin: 0 auto;
  max-width: 560px;
}
.section-header--white .eyebrow { color: #ffc4b5; }
.section-header--white h2  { color: var(--white); }
.section-header--white > p { color: rgba(255,255,255,0.82); }

/* === TOUR CARDS V2 — full-height image overlay (Voices United style) === */
.tour-card-v2 {
  display: block;
  position: relative;
  height: 580px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  transition: transform var(--transition);
}
.tour-card-v2:hover { transform: translateY(-4px); }

.tour-card-v2__bg {
  position: absolute;
  inset: 0;
  background: var(--primary); /* dark teal fallback — looks good without image */
}
.tour-card-v2__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.tour-card-v2:hover .tour-card-v2__bg img { transform: scale(1.05); }

.tour-card-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 20, 32, 0.92) 0%,
    rgba(0, 20, 32, 0.50) 40%,
    rgba(0, 20, 32, 0.10) 70%,
    transparent 100%
  );
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Arrow icon top-right */
.tour-card-v2__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--white);
  transition: background var(--transition);
}
.tour-card-v2:hover .tour-card-v2__arrow {
  background: var(--accent);
  border-color: var(--accent);
}

.tour-card-v2__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}

.tour-card-v2__title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 18px;
}

.tour-card-v2__meta {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.tour-card-v2__meta-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  margin-bottom: 2px;
}
.tour-card-v2__meta-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}

.tour-card-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--white);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  width: fit-content;
  box-shadow: 0 4px 16px rgba(250,61,27,0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tour-card-v2:hover .tour-card-v2__cta {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(250,61,27,0.48);
}

/* === BOLD STATEMENT SECTION (dark, editorial) === */
.bold-section {
  background: var(--primary);
  color: var(--white);
  padding: var(--section-py) 0;
  text-align: center;
}
.bold-section h2 {
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.bold-section .eyebrow { color: #ffc4b5; }
.bold-section p {
  font-size: 18px;
  color: rgba(255,255,255,0.84);
  max-width: 500px;
  margin: 0 auto 36px;
}

/* === HOMEPAGE CREW AUTHORITY === */
.home-crew-section {
  background: var(--cream);
  padding: clamp(56px, 8vw, 96px) 0;
}
.home-crew {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.home-crew__copy h2 {
  max-width: 760px;
  margin-bottom: 20px;
}
.home-crew__copy p {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 28px;
}
.home-crew__proof {
  display: grid;
  gap: 14px;
}
.home-crew__proof div {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.home-crew__proof strong {
  display: block;
  color: var(--accent);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 8px;
}
.home-crew__proof span {
  display: block;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

/* === TESTIMONIALS (minimal, editorial) === */
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}
.testimonial-card__stars { color: #f5a623; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card__text {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0,44,64,0.75);
  font-style: italic;
  flex: 1;
  margin-bottom: 0;
}
.testimonial-card__author { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.testimonial-card__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.testimonial-card__name     { font-weight: 700; font-size: 15px; }
.testimonial-card__location { font-size: 13px; color: var(--muted); }
.review-source-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -16px auto 28px;
  color: rgba(0,44,64,0.62);
  font-size: 14px;
  font-weight: 700;
}
.review-source-links a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === HOMEPAGE FAQ === */
.home-faq-section {
  background: var(--white);
}
.home-faq-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.home-faq-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.home-faq-card h3 {
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.home-faq-card p {
  max-width: none;
  color: rgba(0,44,64,0.68);
  font-size: 15px;
  line-height: 1.62;
}

/* === BLOG CARDS === */
.blog-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
  color: var(--primary);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.blog-card__img { height: 200px; overflow: hidden; }
.blog-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.blog-card__title { font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.blog-card__excerpt { font-size: 14px; color: var(--muted); flex: 1; max-width: none; }
.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

/* === FEATURE SECTION (two-col image + text) === */
.feature-section { padding: var(--section-py) 0; }
.feature-section--dark { background: var(--primary); color: var(--white); }
.feature-section--cream { background: var(--cream); }

.feature-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.feature-section__inner--reversed { direction: rtl; }
.feature-section__inner--reversed > * { direction: ltr; }

.feature-section__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.feature-section__img img { width: 100%; height: 100%; object-fit: cover; }

.feature-section__text h2 { margin-bottom: 18px; }
.feature-section__text p  { color: var(--muted); margin-bottom: 14px; }
.feature-section--dark .feature-section__text p { color: rgba(255,255,255,0.65); }
.feature-section__text .btn { margin-top: 10px; }

/* === STAT ITEMS (about page dark section) === */
.stat-item { text-align: center; }
.stat-item__number {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-item__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
}

/* === STATS BAR (tour page hero bottom) === */
.stats-bar {
  background: var(--primary);
  color: var(--white);
  padding: 20px var(--gutter);
}
.stats-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.stats-bar__item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stats-bar__value { font-size: 20px; font-weight: 800; color: var(--accent); }
.stats-bar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}

/* === TIMELINE === */
.timeline { padding: var(--section-py) 0; background: var(--cream); }
.timeline__list {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.timeline__list::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) + 19px);
  top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline__item {
  display: flex;
  gap: 24px;
  padding-bottom: 36px;
  position: relative;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.timeline__time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.timeline__content h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.timeline__content p  { font-size: 15px; color: var(--muted); max-width: none; }

/* === INCLUSIONS GRID === */
.inclusions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.inclusion-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.inclusion-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inclusion-text strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.inclusion-text span   { font-size: 13px; color: var(--muted); }

/* === GUARANTEE SECTION === */
.guarantee-section { background: var(--primary); color: var(--white); padding: var(--section-py) 0; }
.guarantee-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.guarantee-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
}
.guarantee-card__emoji { font-size: 36px; margin-bottom: 14px; }
.guarantee-card__title { font-size: 17px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.guarantee-card__desc  { font-size: 14px; color: rgba(255,255,255,0.60); max-width: none; }

/* === STOPS GRID (Port Barton) === */
.stops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stop-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stop-card__img { height: 180px; overflow: hidden; position: relative; }
.stop-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.stop-card:hover .stop-card__img img { transform: scale(1.06); }
.stop-card__number {
  position: absolute; top: 12px; left: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.stop-card__body { padding: 18px; }
.stop-card__name { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.stop-card__desc { font-size: 13px; color: var(--muted); max-width: none; }

/* === FAQ === */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  gap: 16px;
  user-select: none;
}
.faq-item__question::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--transition);
  line-height: 1;
}
.faq-item.open .faq-item__question::after { transform: rotate(45deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.38s ease; }
.faq-item.open .faq-item__answer { max-height: 600px; padding-bottom: 22px; }
.faq-item__answer p { font-size: 16px; color: var(--muted); max-width: none; line-height: 1.75; }

/* === BOOKING WIDGET SECTION === */
.booking-section { padding: clamp(36px, 5vw, 64px) 0 var(--section-py); background: var(--cream); }
.booking-section__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.booking-section__widget {
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.booking-frame {
  width: 100%;
  /* Deliberately low. The widget posts its real height on load and the parent
     grows the frame to fit, so a tall floor only ever produced dead space. */
  min-height: 560px;
  border: 0;
  display: block;
  background: var(--white);
  border-radius: var(--radius);
}
.booking-direct-fallback {
  margin: 14px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.booking-direct-fallback a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === COMPARISON TABLE === */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.comparison-table th {
  padding: 14px 18px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--primary);
  color: rgba(255,255,255,0.55);
}
.comparison-table th.comparison-table__us { color: var(--accent); }
.comparison-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  color: rgba(0,44,64,0.80);
  vertical-align: top;
}
.comparison-table td.comparison-table__us { color: var(--primary); font-weight: 600; }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--off-white); }

.tour-summary-section {
  padding: clamp(36px, 6vw, 64px) 0;
  background: var(--white);
}
.tour-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 28px;
  align-items: start;
}
.tour-summary__answer {
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius);
  background: #f4f8f8;
  border: 1px solid rgba(17, 96, 109, 0.18);
}
.tour-summary__answer h2 {
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 14px;
}
.tour-summary__answer p,
.quick-facts span,
.operator-note p {
  color: var(--muted);
  max-width: none;
}
.quick-facts {
  display: grid;
  gap: 10px;
}
.quick-facts div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.quick-facts strong {
  color: #082f38;
  font-size: 14px;
}
.quick-facts span {
  font-size: 15px;
  line-height: 1.5;
}
.rating-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 28px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: #f4f8f8;
  border: 1px solid rgba(17, 96, 109, 0.18);
  box-shadow: var(--shadow);
}
.rating-banner strong {
  display: block;
  color: #082f38;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.15;
}
.rating-banner p {
  color: #11606d;
  font-weight: 800;
  max-width: 360px;
}
.rating-banner__stars { display: block; color: #f5a623; letter-spacing: 2px; font-size: 18px; margin-bottom: 6px; }
.review-highlight {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #f4f8f8;
  color: #11606d;
  font-size: 12px;
  letter-spacing: 0;
  vertical-align: middle;
}
.story-panel {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.story-panel p { max-width: none; color: rgba(0, 44, 64, 0.72); }
.tour-timeline-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
}
.tour-timeline-summary li {
  padding: 16px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.tour-timeline-summary strong {
  display: block;
  color: #11606d;
  font-size: 14px;
  margin-bottom: 6px;
}
.tour-timeline-summary span {
  display: block;
  color: rgba(0, 44, 64, 0.72);
  font-size: 14px;
  line-height: 1.45;
}
.section-note {
  margin: 28px auto 0;
  text-align: center;
  color: var(--muted);
  max-width: none;
  font-size: 15px;
}
.operator-note {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius);
  background: #f4f8f8;
  border: 1px solid rgba(17, 96, 109, 0.18);
}
.operator-note h2 {
  font-size: clamp(24px, 3vw, 38px);
}
.content-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 34px;
}
.content-columns h3 { color: #082f38; margin-bottom: 12px; }
.content-columns p { color: rgba(0, 44, 64, 0.72); max-width: none; }

/* === SEASON GRID === */
.season-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.season-item {
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.season-item--peak { background: rgba(250, 61, 27, 0.04); border-color: rgba(250, 61, 27, 0.20); }
.season-item--good { background: var(--cream); }
.season-item--off  { background: var(--white); }
.season-item__label {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}
.season-item__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.season-item--peak .season-item__tag { color: var(--accent); }
.season-item p { font-size: 14px; color: var(--muted); max-width: none; }

/* === CTA SECTION === */
.cta-section {
  background: var(--primary);
  color: var(--white);
  padding: 96px 0;
  text-align: center;
}
.cta-section h2 { margin-bottom: 14px; }
.cta-section > .container > p { color: rgba(255,255,255,0.84); font-size: 18px; margin: 0 auto 36px; }
.cta-section__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* === ETHICS BOX === */
.ethics-box {
  background: rgba(250,61,27,0.05);
  border: 1px solid rgba(250,61,27,0.18);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-top: 32px;
}
.ethics-box ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.ethics-box li {
  font-size: 15px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ethics-box li::before { content: '✓'; color: var(--accent); font-weight: 800; flex-shrink: 0; }

/* === VALUES GRID === */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-item {
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}
.value-item__icon { font-size: 38px; margin-bottom: 14px; }
.value-item h3    { font-size: 18px; margin-bottom: 10px; }
.value-item p     { font-size: 15px; color: var(--muted); max-width: none; }

/* === CONTACT === */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-method {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  transition: transform var(--transition);
}
.contact-method:hover { transform: translateY(-2px); }
.contact-method__icon { font-size: 26px; flex-shrink: 0; }
.contact-method h3    { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.contact-method a     { color: var(--accent); font-weight: 600; font-size: 16px; }
.contact-method p     { font-size: 14px; color: var(--muted); max-width: none; }

.meeting-point {
  background: rgba(0,44,64,0.04);
  border-left: 4px solid var(--accent);
  padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 14px;
}
.meeting-point h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin-bottom: 5px;
}
.meeting-point p { font-size: 15px; max-width: none; }

/* === PRACTICAL INFO CARDS (Port Barton Before You Book) === */
.info-alert {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
  background: rgba(250, 61, 27, 0.05);
  border: 1.5px solid rgba(250, 61, 27, 0.22);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.info-alert__icon { font-size: 22px; flex-shrink: 0; line-height: 1.5; }
.info-alert__content strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 5px; color: var(--primary); }
.info-alert__content p { font-size: 15px; color: var(--muted); max-width: none; }

.practical-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.practical-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--border);
}
.practical-card--dark {
  background: var(--primary);
  border-color: transparent;
}
.practical-card__emoji {
  font-size: 26px;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.practical-card h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.practical-card__headline {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 16px;
  max-width: none;
  color: var(--primary);
}
.practical-card--dark .practical-card__headline { color: var(--white); }
.practical-card__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.practical-card__list span {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.practical-card__list span::before {
  content: '—';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.practical-card--dark .practical-card__list span { color: rgba(255,255,255,0.60); }

/* === TRUST SECTION (About page) === */
.trust-section {
  background: var(--primary);
  padding: var(--section-py) 0;
  text-align: center;
}
.trust-section .section-header { margin-bottom: 48px; }
.trust-section .section-header h2 { color: var(--white); }
.trust-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.trust-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 36px 20px 28px;
  text-align: center;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.trust-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}
.trust-card__number {
  font-size: clamp(30px, 3.5vw, 46px);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.trust-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 14px;
}
.trust-card__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.58);
  line-height: 1.68;
  max-width: none;
}
.trust-section__foot {
  font-size: 13px;
  color: rgba(255,255,255,0.28);
  text-align: center;
  margin: 0 auto;
  max-width: none;
}

/* === BLOG LIST === */
.blog-grid-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* === ARTICLE === */
.article-layout {
  max-width: 700px;
  margin: 0 auto;
  padding: calc(72px + var(--section-py)) var(--gutter) var(--section-py);
}
.article-layout h1 { font-size: clamp(28px, 4.5vw, 50px); line-height: 1.15; margin-bottom: 18px; }
.article-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}
.article-content h2 { font-size: clamp(22px, 3vw, 32px); margin: 48px 0 14px; }
.article-content h3 { font-size: 20px; margin: 32px 0 10px; }
.article-content p  { font-size: 17px; line-height: 1.82; color: rgba(0,44,64,0.82); margin-bottom: 18px; max-width: none; }
.article-content ul,
.article-content ol { padding-left: 24px; margin-bottom: 18px; list-style: disc; }
.article-content li { font-size: 17px; line-height: 1.8; margin-bottom: 7px; color: rgba(0,44,64,0.82); }
.article-content blockquote {
  border-left: 4px solid var(--accent);
  padding: 16px 22px;
  margin: 30px 0;
  background: var(--cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 19px;
  font-style: italic;
  font-weight: 300;
}

.article-glance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 40px;
}
.article-glance-card {
  min-width: 0;
  padding: 18px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
}
.article-content .article-glance-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.25;
}
.article-glance-card dl {
  display: grid;
  gap: 10px;
}
.article-glance-card dl > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.article-glance-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}
.article-glance-card dd {
  min-width: 0;
  color: var(--primary);
  font-size: 14px;
  line-height: 1.5;
}

.article-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 34px;
}
.article-decision-panel {
  min-width: 0;
  padding: 18px 18px 16px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.article-decision-panel--yes { border-top: 3px solid var(--accent); }
.article-decision-panel--alternative { border-top: 3px solid var(--primary); }
.article-content .article-decision-panel h3 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.3;
}
.article-content .article-decision-panel ul {
  margin: 0;
  padding-left: 18px;
}
.article-content .article-decision-panel li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.55;
}
.article-content .article-decision-panel li:last-child { margin-bottom: 0; }

/* === PHOTO BREAK === */
.photo-break { height: 46vh; min-height: 260px; position: relative; overflow: hidden; background: var(--primary); }
.photo-break__img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.photo-break__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,44,64,0.52);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-break__text {
  color: var(--white);
  font-size: clamp(20px, 3.5vw, 40px);
  font-weight: 300;
  font-style: italic;
  text-align: center;
  padding: 0 var(--gutter);
  max-width: 800px;
  line-height: 1.3;
}

/* === FOOTER === */
.footer { background: var(--primary); color: var(--white); padding: 80px 0 calc(28px + env(safe-area-inset-bottom)); }
.footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 1fr 0.85fr;
  gap: 40px;
  margin-bottom: 56px;
}
/* Footer uses the white horizontal mark on the dark background. */
.footer__logo-wrap {
  display: flex;
  align-items: center;
  width: 180px;
  min-height: 74px;
  margin-bottom: 20px;
}
.footer__logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.footer__tagline { font-size: 14px; color: rgba(255,255,255,0.55); max-width: 280px; margin-bottom: 22px; line-height: 1.65; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background var(--transition), border-color var(--transition);
}
.footer__social a:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }
.footer__col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 18px;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 15px; color: rgba(255,255,255,0.70); transition: color var(--transition); }
.footer__links a:hover { color: var(--white); }
.footer__contact-item { margin-bottom: 12px; }
.footer__contact-item span:first-child {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 2px;
}
.footer__contact-item a,
.footer__contact-item span:last-child { font-size: 15px; color: rgba(255,255,255,0.75); transition: color var(--transition); }
.footer__contact-item a:hover { color: var(--white); }
.language-selector__details {
  position: relative;
  max-width: 220px;
}
.language-selector__summary {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--transition), background var(--transition);
}
.language-selector__summary::-webkit-details-marker { display: none; }
.language-selector__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.language-selector__summary:hover,
.language-selector__details[open] .language-selector__summary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.34);
}
.language-selector__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.language-selector__current {
  font-size: 15px;
  color: rgba(255,255,255,0.86);
}
.language-selector__menu {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(0,44,64,0.98);
  display: grid;
  gap: 4px;
}
.language-selector__menu a,
.language-selector__menu span {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.language-selector__menu a {
  color: rgba(255,255,255,0.82);
}
.language-selector__menu a:hover,
.language-selector__menu a[aria-current="true"] {
  background: rgba(255,255,255,0.10);
  color: var(--white);
}
.language-selector__menu span {
  color: rgba(255,255,255,0.38);
  cursor: not-allowed;
}
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
  border-top: 1px solid var(--border-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.32);
}

/* === NAV BOOK DROPDOWN === */
.nav__book-dropdown { position: relative; }
.nav__book-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(0,44,64,0.20);
  min-width: 240px;
  padding: 8px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 300;
}
.nav__book-dropdown.open .nav__book-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.nav__book-menu a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--primary);
  transition: background var(--transition);
}
.nav__book-menu a:hover { background: var(--cream); }
.nav__book-menu a + a { margin-top: 2px; }
.nav__book-menu__title { font-size: 14px; font-weight: 700; }
.nav__book-menu__price { font-size: 12px; color: var(--muted); }

/* === BOOKING BAR WHATSAPP BUTTON === */
.booking-bar__whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #25d366;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
  text-decoration: none;
}
.booking-bar__whatsapp:hover { background: #1ebe5b; transform: translateY(-1px); }
.booking-bar__whatsapp span { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.booking-bar__whatsapp strong { font-size: 13px; }
.booking-bar__whatsapp small { font-size: 10px; font-weight: 600; opacity: 0.85; }

/* === BOOKING BAR TOUR BUTTONS === */
.booking-bar__actions { display: flex; gap: 8px; padding: 0 4px; flex-shrink: 0; }
.booking-bar__btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--transition);
  background: var(--accent);
  color: var(--white);
}
.booking-bar__btn:hover { background: #e0340f; }
.booking-bar__btn--alt {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--border);
}
.booking-bar__btn--alt:hover { background: var(--off-white); border-color: rgba(0,44,64,0.25); }

/* === MONTH CALENDAR (When to Visit) === */
.month-calendar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 32px; }
.month-cell {
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
  position: relative;
}
.month-cell__name { font-size: 13px; font-weight: 700; display: block; margin-bottom: 4px; }
.month-cell__label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; display: block; }
.month-cell--peak { background: var(--primary); color: var(--white); }
.month-cell--peak .month-cell__label { color: var(--accent); }
.month-cell--good { background: #e0f2f1; color: var(--primary); }
.month-cell--good .month-cell__label { color: #00796b; }
.month-cell--off  { background: #e8e8e8; color: rgba(0,44,64,0.45); }
.month-cell--off  .month-cell__label { color: rgba(0,44,64,0.4); }
@media (max-width: 600px) { .month-calendar { grid-template-columns: repeat(3, 1fr); } }

/* === MARINE LIFE BLOCKS === */
.marine-life-section {
  background: var(--white);
  padding: clamp(56px, 8vw, 104px) 0;
}
.marine-life-section--dark {
  background: var(--primary);
  color: var(--white);
}
.marine-life {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.marine-life__header {
  position: sticky;
  top: 96px;
}
.marine-life__header h2 {
  margin-bottom: 18px;
}
.marine-life-section--dark .marine-life__header h2 {
  color: var(--white);
}
.marine-life__header p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
  max-width: none;
}
.marine-life-section--dark .marine-life__header p {
  color: rgba(255,255,255,0.66);
}
.marine-life__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.marine-life-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream);
}
.marine-life-section--dark .marine-life-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.marine-life-card--hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: start;
  background: var(--primary);
  color: var(--white);
  border-color: transparent;
}
.marine-life-section--dark .marine-life-card--hero {
  background: rgba(250,61,27,0.14);
  border-color: rgba(250,61,27,0.24);
}
.marine-life-card__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(250,61,27,0.14);
  color: var(--accent);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}
.marine-life-card__icon--word {
  width: auto;
  min-width: 52px;
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.marine-life-card--hero .marine-life-card__icon {
  background: var(--accent);
  color: var(--white);
}
.marine-life-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.marine-life-section--dark .marine-life-card h3,
.marine-life-card--hero h3 {
  color: var(--white);
}
.marine-life-card h3 em {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
}
.marine-life-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.68;
  max-width: none;
}
.marine-life-section--dark .marine-life-card p,
.marine-life-card--hero p {
  color: rgba(255,255,255,0.66);
}
.marine-life-card__tag {
  align-self: start;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .marine-life {
    grid-template-columns: 1fr;
  }
  .marine-life__header {
    position: static;
  }
}

@media (max-width: 640px) {
  .marine-life-section {
    padding: 44px 0;
  }
  .marine-life__grid {
    grid-template-columns: 1fr;
  }
  .marine-life-card,
  .marine-life-card--hero {
    display: block;
    padding: 18px;
  }
  .marine-life-card__icon {
    margin-bottom: 14px;
  }
  .marine-life-card__tag {
    display: inline-flex;
    margin-top: 14px;
    white-space: normal;
  }
}

/* === WHALE SHARK LIVE UPDATE === */
.live-update-section {
  background: var(--cream);
  padding: clamp(28px, 4vw, 56px) 0;
}
.live-update {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--white);
  background: #061d28;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.live-update__media,
.live-update__media img,
.live-update__overlay {
  position: absolute;
  inset: 0;
}
.live-update__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.08);
}
.live-update__overlay {
  z-index: 1;
  background:
    radial-gradient(circle at 78% 22%, rgba(250, 61, 27, 0.22), transparent 24%),
    linear-gradient(90deg, rgba(0, 24, 34, 0.93) 0%, rgba(0, 39, 57, 0.80) 52%, rgba(0, 20, 30, 0.88) 100%);
}
.live-update__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(20px, 3.4vw, 38px);
}
.live-update__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.live-update__intro .eyebrow {
  margin-bottom: 10px;
}
.live-update__intro h2 {
  max-width: 720px;
  color: var(--white);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.08;
  margin-bottom: 10px;
}
.live-update__intro p {
  color: rgba(255,255,255,0.84);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}
.live-update__freshness {
  display: inline-flex;
  flex-shrink: 0;
  max-width: 280px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(250, 61, 27, 0.18);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.live-update__grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.live-update__metric,
.live-update__moon-card {
  min-width: 0;
  min-height: 150px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  background: rgba(255,255,255,0.095);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.live-update__weather {
  background: rgba(0, 44, 64, 0.58);
  grid-column: span 2;
  align-items: center;
}
.live-update__label {
  display: block;
  color: #ffc4b5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.live-update strong {
  display: block;
  color: var(--white);
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.live-update__metric strong,
.live-update__weather-number span {
  color: var(--accent);
}
.live-update small {
  display: block;
  color: rgba(255,255,255,0.62);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 7px;
}
.live-update__metric-body {
  min-width: 0;
  flex: 1;
}
.live-update__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(250, 61, 27, 0.18);
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.live-update__weather-number {
  min-width: 90px;
  text-align: right;
  margin-left: auto;
}
.live-update__weather-number span {
  display: block;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  line-height: 0.95;
}
.live-update__weather-number small {
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.live-update__metric--wide {
  grid-column: span 2;
}
.live-update__moon-card {
  grid-column: span 2;
  align-items: center;
}
.live-update__moon {
  --moon-fill: 50%;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.16), transparent 30%),
    #111820;
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: inset -10px 0 24px rgba(0,0,0,0.34), 0 0 28px rgba(255,255,255,0.10);
}
.live-update__moon span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--moon-fill);
  border-radius: 999px 0 0 999px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.98), rgba(236,239,231,0.90) 55%, rgba(194,204,205,0.78));
}
.live-update__moon.is-waning span {
  left: 0;
  right: auto;
  border-radius: 0 999px 999px 0;
}

@media (max-width: 980px) {
  .live-update__intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .live-update__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .live-update-section {
    padding: 22px 0 0;
  }
  .live-update-section .container {
    padding: 0;
  }
  .live-update {
    border-radius: 0;
  }
  .live-update__content {
    padding: 16px;
    gap: 12px;
  }
  .live-update__intro {
    gap: 12px;
  }
  .live-update__freshness {
    max-width: none;
  }
  .live-update__metric,
  .live-update__moon-card {
    min-height: 0;
    padding: 14px;
    border-radius: 14px;
  }
  .live-update__intro h2 {
    font-size: clamp(24px, 8vw, 34px);
  }
  .live-update__weather {
    display: grid;
    grid-template-columns: 38px 1fr;
  }
  .live-update__weather-number {
    grid-column: 1 / -1;
    margin-left: 52px;
    text-align: left;
  }
  .live-update__grid {
    grid-template-columns: 1fr;
  }
  .live-update__metric--wide,
  .live-update__moon-card {
    grid-column: auto;
  }
  .live-update__moon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

/* === AUTHOR BIO (blog single) === */
.author-bio {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 36px;
  background: var(--primary);
  border-radius: var(--radius-lg);
  margin-top: 64px;
  color: var(--white);
}
.author-bio__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.15);
}
.author-bio__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.author-bio__text { flex: 1; min-width: 0; }
.author-bio__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 3px;
}
.author-bio__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.author-bio__desc {
  font-size: 15px;
  line-height: 1.68;
  color: rgba(255,255,255,0.68);
  margin-bottom: 18px;
  max-width: none;
}
.author-bio__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  transition: background var(--transition), border-color var(--transition);
}
.author-bio__link:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); }
@media (max-width: 480px) {
  .author-bio { flex-direction: column; align-items: center; text-align: center; }
  .author-bio__role { display: block; }
}

/* === RELATED ARTICLES (card overlay style — Voices United inspired) === */
/* === CREW PAGE === */
.crew-hero .hero__overlay { background: rgba(0,28,42,0.68); }
.crew-section { background: var(--white); padding: var(--section-py) 0; }
.crew-group + .crew-group { margin-top: clamp(48px, 7vw, 84px); }
.crew-group__title { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.crew-group__title span {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--white); font-size: 13px; font-weight: 900;
}
.crew-group__title h3 { font-size: clamp(22px, 3vw, 32px); }
.crew-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.crew-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crew-card {
  min-width: 0; overflow: hidden; border-radius: 120px 120px var(--radius-lg) var(--radius-lg);
  background: var(--cream); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.crew-card--orange { background: #f7d8c5; }
.crew-card--cream { background: #f4ece7; }
.crew-card--blue { background: #dbe9f1; }
.crew-card__portrait { height: 180px; display: flex; align-items: end; justify-content: center; padding: 26px 20px 0; }
.crew-card__portrait span {
  width: 128px; height: 128px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 30%), var(--primary);
  color: var(--white); font-size: 34px; font-weight: 900;
}
.crew-card__body { padding: 0 22px 24px; }
.crew-card__role {
  display: block; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: 0.12em;
  text-align: center; text-transform: uppercase; margin-bottom: 6px;
}
.crew-card h4 { text-align: center; font-size: 24px; margin-bottom: 18px; }
.crew-card dl { display: grid; gap: 9px; }
.crew-card dl div { padding-bottom: 9px; border-bottom: 1px solid rgba(0,44,64,0.10); }
.crew-card dt { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.crew-card dd { margin-top: 2px; color: rgba(0,44,64,0.86); font-size: 14px; font-weight: 700; line-height: 1.45; }
.crew-card p { max-width: none; margin-top: 16px; color: rgba(0,44,64,0.68); font-size: 14px; line-height: 1.62; }
.crew-proof-section { background: var(--cream); padding: var(--section-py) 0; }
.crew-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.crew-proof-card {
  min-width: 0; padding: clamp(26px, 4vw, 42px); border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--border);
}
.crew-proof-card--dark { background: var(--primary); color: var(--white); }
.crew-proof-card--accent { background: var(--accent); color: var(--white); border-color: transparent; }
.crew-proof-card h2 { font-size: clamp(24px, 3vw, 38px); margin-bottom: 18px; }
.crew-proof-card--dark h2, .crew-proof-card--accent h2 { color: var(--white); }
.crew-proof-card p, .crew-proof-card li { max-width: none; color: var(--muted); font-size: 16px; line-height: 1.75; }
.crew-proof-card--dark p, .crew-proof-card--dark li, .crew-proof-card--accent p { color: rgba(255,255,255,0.72); }
.crew-proof-card ul { display: grid; gap: 9px; }
.crew-proof-card li { position: relative; padding-left: 18px; }
.crew-proof-card li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
.crew-proof-card--dark li::before { background: var(--white); }
.safety-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.safety-grid div, .observation-list div {
  padding: 24px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--border);
}
.safety-grid strong, .observation-list span {
  display: block; color: var(--primary); font-size: 16px; font-weight: 900; margin-bottom: 8px;
}
.safety-grid span, .observation-list p {
  display: block; color: var(--muted); font-size: 14px; line-height: 1.68; max-width: none;
}
.observation-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.observation-list span { color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 980px) {
  .crew-cards, .crew-cards--two, .safety-grid, .observation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .crew-cards, .crew-cards--two, .crew-proof-grid, .safety-grid, .observation-list { grid-template-columns: 1fr; }
  .crew-card { border-radius: 90px 90px var(--radius-lg) var(--radius-lg); }
  .crew-card__portrait { height: 150px; }
  .crew-card__portrait span { width: 108px; height: 108px; font-size: 28px; }
}

.related-articles { margin-top: 64px; }
.related-articles__title {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.related-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  text-decoration: none;
  background: var(--primary);
}
.related-card__img {
  position: absolute;
  inset: 0;
}
.related-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.related-card:hover .related-card__img img { transform: scale(1.06); }
.related-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,15,30,0.90) 0%, rgba(0,15,30,0.35) 55%, rgba(0,0,0,0.08) 100%);
}
.related-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 18px;
  z-index: 1;
}
.related-card__tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.related-card__title {
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  max-width: none;
}
.related-card__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--white);
  font-size: 15px;
  transition: background var(--transition), border-color var(--transition);
}
.related-card:hover .related-card__arrow { background: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) {
  .related-articles__grid { grid-template-columns: repeat(2, 1fr); }
  .related-card { aspect-ratio: 3/4; }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .grid-4           { grid-template-columns: repeat(2, 1fr); }
  .home-faq-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inclusions-grid  { grid-template-columns: repeat(2, 1fr); }
  .values-grid      { grid-template-columns: repeat(2, 1fr); }
  .stops-grid       { grid-template-columns: repeat(2, 1fr); }
  .footer__grid     { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  :root { --section-py: clamp(48px, 8vw, 80px); }

  .nav__links          { display: none; }
  .nav__hamburger      { display: flex; }
  .hero-nav__links     { display: none; }
  .hero-nav__hamburger { display: flex; }
  /* Both navs: switch to flexbox so logo+right stay left/right when links are hidden */
  .nav { display: flex; justify-content: space-between; align-items: center; }
  .nav.scrolled { left: 8px; right: 8px; height: 64px; padding: 0 12px; border-radius: 16px; }
  .nav__logo,
  .hero-nav__logo { width: 112px; height: 46px; }
  .nav__logo .logo--light,
  .nav__logo .logo--dark { width: 100%; height: auto; }
  .nav__right,
  .hero-nav__right { gap: 6px; }
  .nav-language__summary {
    min-width: 0;
    width: auto;
    height: 40px;
    padding: 0 10px;
  }
  .nav-language__word { display: none; }
  .nav-language__code { display: inline; }
  .nav-language__menu {
    right: -54px;
    min-width: min(180px, calc(100vw - 28px));
  }
  .nav__cta,
  .hero-nav__cta {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }
  .nav__hamburger,
  .hero-nav__hamburger { padding: 6px; }
  .nav__book-menu {
    min-width: min(260px, calc(100vw - 32px));
    right: -34px;
  }
  /* Transparent nav on mobile: keep hamburger white */
  .nav:not(.scrolled):not(.nav--home) .nav__hamburger span { background: var(--white); }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .inclusions-grid  { grid-template-columns: 1fr; }
  .guarantee-cards  { grid-template-columns: 1fr; }
  .stops-grid       { grid-template-columns: 1fr; }
  .values-grid      { grid-template-columns: 1fr; }
  .contact-grid     { grid-template-columns: 1fr; gap: 40px; }
  .blog-grid-main   { grid-template-columns: 1fr; }
  .footer__grid     { grid-template-columns: 1fr; gap: 28px; }
  .feature-section__inner { grid-template-columns: 1fr; gap: 36px; }
  .feature-section__inner--reversed { direction: ltr; }
  .ethics-box ul    { grid-template-columns: 1fr; }
  .home-crew        { grid-template-columns: 1fr; }
  .home-faq-grid    { grid-template-columns: 1fr; }

  /* Framed hero on mobile — remove all margins */
  .hero-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
  }

  .hero--framed { margin: 0; border-radius: 0; box-shadow: none; justify-content: flex-start; min-height: 100svh; overflow: visible; }
  .hero--framed .hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: calc(88px + env(safe-area-inset-top));
    padding-bottom: 20px;
  }
  .hero--framed .hero__content h1 {
    font-size: clamp(26px, 7.6vw, 36px);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
  }
  .hero--framed:has(.hero__booking-bar) .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 16, 26, 0.78) 0%,
      rgba(0, 36, 52, 0.42) 40%,
      rgba(0, 22, 34, 0.82) 100%
    );
  }
  .hero--framed:has(.hero__booking-bar) .hero__ctas { display: none; }
  .hero--framed:has(.hero__booking-bar) .hero__sub {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
    margin-bottom: 0;
  }

  .hero__badges  { left: 20px; bottom: 120px; }
  .hero__rating  { right: 20px; bottom: 120px; }
  .hero__rating-num { font-size: 36px; }

  /* White stacked card — label left, value right. Calendar expands in-flow
     so it cannot cover Guests / Experience. z-index keeps it above the overlay. */
  .hero__booking-bar {
    position: relative;
    z-index: 3;
    align-items: stretch;
    gap: 10px;
    padding: 0 16px 20px;
    background: transparent;
  }
  .booking-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.28);
    padding: 4px 4px 8px;
    background: var(--white);
    gap: 0;
    border-top: 0;
  }
  .booking-bar .booking-bar__label { color: var(--muted); }
  .booking-bar .booking-bar__value { color: var(--primary); }
  /* Label above a centred value. The old label-left / value-right row never
     lined up: a <select> ignores text-align on iOS while the date button
     honoured it, so the three values sat at three different positions. */
  .booking-bar__item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 16px;
    border-radius: 0;
    text-align: center;
  }
  .booking-bar__item + .booking-bar__item {
    border-top: 1px solid var(--border);
  }
  .booking-bar__item:hover,
  .booking-bar__item:focus-within { background: var(--off-white); }
  .booking-bar__label { flex-shrink: 0; text-align: center; }
  .booking-bar__value,
  select.booking-bar__value,
  button.booking-bar__value,
  input.booking-bar__value {
    width: 100%;
    flex: none;
    min-width: 0;
    text-align: center;
    /* text-align-last is the property a <select> actually honours for its
       closed-state label. */
    text-align-last: center;
  }
  .booking-bar__date-trigger { justify-content: center; }
  .booking-bar__divider { display: none; }
  .booking-bar__whatsapp { border-radius: 0; justify-content: center; padding: 16px 20px; }
  .booking-bar__item--date {
    flex-wrap: wrap;
  }
  .booking-bar__item--date .booking-cal {
    flex-basis: 100%;
    position: static;
    width: 100%;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin-top: 10px;
    padding: 8px 0 4px;
    box-shadow: none;
    border-radius: 0;
  }
  .booking-cal__day.is-open small { display: none; }
  .booking-bar .btn {
    margin: 8px 8px 4px;
    border-radius: var(--radius-pill);
    padding: 13px 20px;
    text-align: center;
    justify-content: center;
  }
  .booking-bar__note   { order: 1; }
  .booking-bar__status { order: 2; }
  .booking-bar         { order: 3; }
  .booking-bar__note { display: none; }
  .booking-bar__status {
    width: 100%;
    max-width: none;
    padding: 0 8px;
    background: transparent;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    text-align: left;
  }

  .stats-bar { padding: 24px 20px calc(56px + env(safe-area-inset-bottom)); }
  .stats-bar__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    justify-content: stretch;
  }
  .stats-bar__item { align-items: flex-start; }
  .stats-bar__value { font-size: 16px; line-height: 1.2; }
  .stats-bar__label { font-size: 10px; }

  .tour-card-v2 { height: 460px; }

  .stats-pills { gap: 8px; }
  .stat-pill   { padding: 11px 18px; }
  .stat-pill__num { font-size: 17px; }

  .footer__bottom    { flex-direction: column; text-align: center; }
  .season-grid       { grid-template-columns: 1fr; }
  .comparison-table  { font-size: 13px; }
  .tour-summary      { grid-template-columns: 1fr; }
  .tour-timeline-summary { grid-template-columns: 1fr; }
  .operator-note     { grid-template-columns: 1fr; }
  .content-columns   { grid-template-columns: 1fr; }
  .rating-banner     { flex-direction: column; align-items: flex-start; }
  .rating-banner p   { max-width: none; }
  .booking-frame { min-height: 520px; border-radius: 12px; }
  .booking-direct-fallback { font-size: 13px; padding: 0 6px; }

  .hero--blog { min-height: 26vh; }
  .hero--blog .hero__content { padding: 90px var(--gutter) 40px; }

  /* Blog article tables — scroll horizontally on mobile */
  .article-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .article-glance-grid,
  .article-decision-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nav:not(.scrolled) { height: 76px; padding: 0 14px; }
  .nav.scrolled { height: 60px; top: 6px; left: 6px; right: 6px; padding: 0 10px; }
  .nav__logo,
  .hero-nav__logo { width: 104px; height: 43px; }
  .nav__right { gap: 4px; }
  .nav-language__summary { width: auto; min-width: 0; height: 38px; padding: 0 9px; }
  .nav__cta,
  .hero-nav__cta { min-height: 38px; padding: 9px 12px; font-size: 12px; }
  .nav__hamburger span,
  .hero-nav__hamburger span { width: 22px; }
  .grid-4       { grid-template-columns: 1fr; }
  .hero__ctas   { flex-direction: column; align-items: center; }
  .cta-section__buttons { flex-direction: column; align-items: center; }
  .hero__badges { display: none; } /* too crowded on very small screens */
  .hero__rating { display: none; }
  .trust-cards  { grid-template-columns: 1fr; }
  .practical-grid { grid-template-columns: 1fr; }
  .quick-facts div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 768px) {
  .trust-cards { grid-template-columns: repeat(2, 1fr); }
  .practical-grid { grid-template-columns: 1fr; }
}

/* === SCROLL-REVEAL ANIMATIONS === */
@media (prefers-reduced-motion: no-preference) {
  .pre-reveal {
    opacity: 0;
    transform: translateY(24px);
  }
  .pre-reveal.is-in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  }
}


/* =========================================================
   GUEST REVIEWS — mosaic carousel of verified booking reviews

   Every review is rendered into the HTML, never fetched on demand, so search
   engines and AI assistants read the complete body of guest evidence. The
   carousel only controls what is on screen, not what is on the page.
   ========================================================= */

.reviews__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 auto 36px;
  padding: 16px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
}
.reviews__score {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.reviews__stars { color: #f5a623; font-size: 17px; letter-spacing: 3px; line-height: 1; margin-bottom: 4px; }
.reviews__summary p { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); max-width: none; }

/* ---- carousel shell ---- */
.reviews__carousel { position: relative; }

.reviews__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the hover lift, otherwise the shadow is clipped by the scroller. */
  padding: 6px 2px 14px;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* One slide fills the viewport and holds six cards in balanced columns.
   Columns rather than a row grid: cards then take exactly the height their
   review needs. Fixed grid rows sized cards independently of their content,
   which left a void between the text and the footer on every short review. */
.reviews__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  columns: 3;
  column-gap: 20px;
}

/* ---- card ---- */
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px 18px;
  margin: 0 0 20px;
  box-shadow: var(--shadow);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  overflow: hidden;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.review-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(250,61,27,0.28); }
.review-card:hover::before { transform: scaleY(1); }

.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.review-card__stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; }
.review-card__badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0e7c5c;
  background: rgba(14,124,92,0.10);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

.review-card__body { min-height: 0; }
.review-card__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(0,44,64,0.82);
  margin: 0;
  max-width: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
/* One clamp for every card. Long reviews stop at a readable length and offer
   the full text in a dialog; short ones simply make a shorter card. */
.review-card__text { -webkit-line-clamp: 8; line-clamp: 8; }

.review-card__more {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transition);
}
.review-card__more:hover { border-bottom-color: var(--accent); }
.review-card__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.review-card__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.review-card__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 900; color: var(--white);
  background: var(--primary); flex-shrink: 0;
}
.review-card__name { display: block; font-size: 13px; font-weight: 800; color: var(--primary); }
.review-card__date { display: block; font-size: 11px; font-weight: 600; color: rgba(0,44,64,0.45); }

/* ---- navigation ---- */
.reviews__nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.reviews__nav {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: var(--white);
  color: var(--primary);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.reviews__nav:hover:not(:disabled) { background: var(--primary); color: var(--white); }
.reviews__nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.reviews__nav:disabled { opacity: 0.3; cursor: default; }
.reviews__count { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }
.reviews__hint { display: none; }

/* ---- full review dialog ---- */
.review-dialog {
  /* The global reset on line 35 sets margin:0 on every element, which beats
     the browser default of margin:auto on a modal dialog and pins it to the
     top-left corner. Centre it explicitly. */
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 620px;
  width: calc(100% - 40px);
  max-height: min(80vh, 700px);
  box-shadow: var(--shadow-lg);
  color: var(--primary);
}
/* The close button is absolutely positioned in the top-right, so the header
   row needs to stop short of it or the badge sits underneath. */
.review-dialog .review-card__top { padding-right: 46px; }
.review-dialog::backdrop { background: rgba(0, 22, 33, 0.55); backdrop-filter: blur(3px); }
.review-dialog__inner { padding: 30px 32px 26px; }
.review-dialog__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white);
  color: var(--primary); font-size: 18px; line-height: 1; cursor: pointer;
}
.review-dialog__close:hover { background: var(--cream); }
.review-dialog__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.review-dialog__text {
  font-size: 15.5px; line-height: 1.75; color: rgba(0,44,64,0.86);
  margin: 14px 0 4px; max-width: none; white-space: pre-wrap;
  max-height: min(56vh, 460px); overflow-y: auto;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .reviews__slide { columns: 2; }
}

@media (max-width: 768px) {
  /* One card per swipe. display:contents lifts the cards out of their slide so
     they become flex items of the track and snap individually. */
  .reviews__slide { display: contents; }
  .reviews__track { gap: 14px; scroll-padding-left: var(--gutter); }
  .review-card {
    flex: 0 0 84%;
    scroll-snap-align: center;
    margin-bottom: 0;
  }
  .review-card__text { -webkit-line-clamp: 10 !important; line-clamp: 10 !important; }
  .reviews__summary { gap: 14px; padding: 14px 22px; }
  .reviews__score { font-size: 36px; }
  .reviews__nav { display: none; }
  .reviews__hint { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .review-dialog__inner { padding: 26px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track { scroll-behavior: auto; }
  .review-card:hover { transform: none; }
}