/* ==========================================================================
   Traville Travel — pages.css
   Section layouts: hero, destinations grid, why, packages, tours, reviews,
   blog, CTA banner, inner-page hero, and page-specific blocks
   ========================================================================== */

/* ---------- Homepage hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(10,61,61,0.92), rgba(11,110,110,0.88) 55%, rgba(26,144,144,0.82)),
    url('https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
  color: #fff;
  padding: 60px 0;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  /* Living shoreline: an extremely subtle, slow "swell" on the blended ocean
     overlay so the scene feels alive rather than looking animated. The overlay
     is the SAME photo as the base layer; drifting it a few pixels against the
     static base makes the water shimmer like a gentle wash in and out. Compositor
     only — transform + opacity, so no repaint, no layout shift, and the dark teal
     gradient above keeps text contrast constant. No zoom/pan of the composition.
     scale(1.06) is just headroom so the drift never exposes an edge. */
  transform: scale(1.06) translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: heroSwell 9s ease-in-out infinite;
  /* Confine the motion to the WATER only. In this aerial shot the ocean fills the
     lower-left and the sand + green foliage sit in the top-right, with the foam
     line on the diagonal. This mask keeps the animated overlay at full strength
     over the ocean/waves (bottom-left) and fades it to nothing over the dry sand
     and foliage (top-right), so the land stays perfectly static while the water
     shimmers. The soft transition sits just past the foam, hiding any seam. The
     base image underneath is unchanged, so the composition is preserved. */
  -webkit-mask-image: linear-gradient(to top right, #000 0%, #000 55%, transparent 72%);
          mask-image: linear-gradient(to top right, #000 0%, #000 55%, transparent 72%);
}
@keyframes heroSwell {
  0%,
  100% { transform: scale(1.06) translate3d(0, 0.8%, 0);  opacity: 0.18; }
  50%  { transform: scale(1.06) translate3d(0, -0.8%, 0); opacity: 0.27; }
}
/* Honour users who ask for less motion: a completely static hero. */
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; transform: none; }
}
.hero .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

/* Owner hero photo */
.hero__photo {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 380px;
}
.hero__photo img {
  width: 100%;
  max-width: 520px;
  max-height: 620px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.38);
}
.hero__photo-tag {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--gold);
  color: #2a2208;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Placeholder shown until images/hero-conrad.jpg exists (img onerror) */
.hero__photo.is-empty::before {
  content: '📷  Add your photo here\A images/hero-conrad.jpg';
  white-space: pre;
  text-align: center;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(255,255,255,0.55);
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.7;
  padding: 24px;
}
.hero__photo.is-empty .hero__photo-tag { display: none; }

.hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  border: 1px solid rgba(196,154,60,0.6);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin-bottom: 24px;
}
.hero h1 { color: #fff; max-width: 12ch; }
.hero h1 em { color: var(--gold-light); font-style: italic; }
.hero__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.86);
  max-width: 52ch;
  margin-top: 20px;
}
.hero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
/* Hero stat figures: Inter semibold instead of the light Cormorant serif.
   Same 34px size and gold colour — the swap is purely about legibility over
   the hero photo. Tabular figures keep 10+/1900+/30+/100% optically aligned. */
.hero-stats .stat strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 34px;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}
/* Labels drop a tier below the figures: same 12.5px, but semibold small-caps
   styling so they read as captions rather than competing with the numbers. */
.hero-stats .stat span {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 56px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__photo { min-height: 320px; order: 2; }
  .hero__photo img { max-width: 420px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ---------- Destinations grid ---------- */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 340px 240px;
  gap: 18px;
}
.dest-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s ease;
}
.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
  z-index: -1;
}
.dest-card:hover img { transform: scale(1.06); }
.dest-card__body { padding: 22px 24px; width: 100%; }
.dest-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dest-card__name .arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dest-card:hover .dest-card__name .arrow { opacity: 1; transform: translateX(0); }
.dest-card__desc { font-size: 13.5px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.dest-card__tag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
}
.dest-card--wide { grid-column: span 2; }

@media (max-width: 900px) {
  .dest-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .dest-card { min-height: 240px; }
  .dest-card--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .dest-grid { grid-template-columns: 1fr; }
  .dest-card--wide { grid-column: span 1; }
}

/* ---------- Why Traville ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.why-media { position: relative; }
.why-media img { border-radius: 16px; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.why-badge {
  position: absolute;
  bottom: -22px; right: -10px;
  background: var(--teal);
  color: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  max-width: 230px;
  box-shadow: var(--shadow-md);
}
.why-badge strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.why-badge span { font-size: 12.5px; color: rgba(255,255,255,0.85); }

.feature-list { display: grid; gap: 22px; margin-top: 26px; }
.feature {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
}
.feature__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--teal-pale);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 18px; font-weight: 600; font-family: var(--font-body); color: var(--text); margin-bottom: 2px; }
.feature p { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .why-badge { right: 16px; }
}

/* ---------- Featured packages ---------- */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pkg-card .card__body { display: flex; flex-direction: column; gap: 8px; }
.pkg-card .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards-3 { grid-template-columns: 1fr; } }

/* ---------- Europamundo dark section ---------- */
.tours-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: start;
}
.region-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.region-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 18px 18px;
  color: #e6e6e6;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.region-btn:hover {
  border-color: var(--gold);
  background: rgba(196,154,60,0.10);
  color: #fff;
  transform: translateY(-2px);
}
.region-btn .arrow { color: var(--gold-light); }

.tours-embed-col { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 900px) {
  .tours-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
  .region-grid { grid-template-columns: 1fr; }
}

/* ---------- Reviews ---------- */
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin: 0 auto 36px;
}
.google-badge .stars { color: var(--gold); letter-spacing: 1px; }

/* Facebook records a recommendation, not a score out of five, so these cards
   carry a Recommends pill rather than stars — five gold stars would be a
   rating the source never gave. Same green tick as the credentials panel. */
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #17795A;
}
.review-badge__tick,
.google-badge .review-badge__tick {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #17795A;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.review-badge__tick svg {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

/* Discreet review-platform links. Lived in v2.css until the reviews section
   moved to the About page, which does not load that homepage-only sheet — the
   line rendered unstyled there until these came across. */
.review-links {
  margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--muted);
}
.review-links a { color: var(--teal); font-weight: 600; text-decoration: none; }
.review-links a:hover { text-decoration: underline; }
/* an ampersand reads as a word, so it carries more weight than the old middot */
.review-links .rl-sep { margin: 0 8px; opacity: 0.7; }

.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px;
}
.review-card .stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.review-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
  margin: 14px 0 20px;
}
.review-card .reviewer { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.review-card .reviewer strong { display: block; font-size: 14px; color: var(--text); }
/* :not(.review-avatar) matters. This rule is meant for the source/date meta line,
   but a bare `.reviewer span` also matched the avatar — and at (0,2,1) it beat
   .review-avatar's own (0,1,0), repainting the initials muted grey on the teal
   disc (1.14:1, effectively invisible) and shrinking them to 12.5px. Excluding
   the avatar restores its intended white 14px without touching the meta line. */
.review-card .reviewer span:not(.review-avatar) { font-size: 12.5px; color: var(--muted); }

/* ---------- Blog ---------- */
.blog-card .card__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  color: var(--teal);
  margin: 10px 0 6px;
}
.blog-card .excerpt { font-size: 14px; color: var(--muted); }
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .blog-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-list { grid-template-columns: 1fr; } .section-head-row { flex-direction: column; align-items: flex-start; } }

/* ---- Headless WordPress blog (states, cards, article) ------------------- */
.blog-card__meta { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.card__media-fallback { display: block; width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--teal-pale), #dbeceb); }
/* Loading / empty / error states share one centred, understated block. */
.blog-state { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--muted); }
.blog-state__title { font-family: var(--font-display); font-size: 22px; color: var(--teal); margin: 0 0 6px; }
.blog-state__msg { font-size: 15px; line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.blog-state__msg a { color: var(--teal); text-decoration: underline; }
.blog-spinner { display: inline-block; width: 26px; height: 26px; margin-bottom: 14px; border: 2.5px solid var(--teal-pale); border-top-color: var(--teal); border-radius: 50%; animation: blog-spin 0.7s linear infinite; }
@keyframes blog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .blog-spinner { animation: none; } }
.blog-more { text-align: center; margin-top: 34px; }

/* Article page */
.blog-article__back { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 14px; }
.blog-article__back:hover { color: var(--teal); }
.blog-article__head { margin-bottom: 22px; }
.blog-article__head h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; margin: 12px 0 10px; }
.blog-article__meta { font-size: 13.5px; color: var(--muted); margin: 0; }
.blog-article__hero { margin: 0 0 26px; }
.blog-article__hero img { width: 100%; height: auto; border-radius: 16px; display: block; }
.blog-article__body { font-size: 16.5px; }
.blog-article__body img { border-radius: 12px; margin: 22px 0; }
.blog-article__foot { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(0,0,0,0.08); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, #0a3d3d, var(--teal) 55%, var(--teal-light));
  color: #fff;
  text-align: center;
  /* #7 Shares the large-band token with .section, so the CTA strip keeps one
     rhythm with content sections at every breakpoint (84/64/52px). */
  padding: var(--band-py) 0;
}
.cta-banner h2 { color: #fff; }
.cta-banner h2 em { color: var(--gold-light); }
.cta-banner p { color: rgba(255,255,255,0.86); max-width: 52ch; margin: 14px auto 0; }
.cta-banner__btns { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Inner-page hero ---------- */
.page-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 80px 0;
  background:
    linear-gradient(120deg, rgba(10,61,61,0.86), rgba(11,110,110,0.78)),
    var(--page-hero-img, url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80')) center/cover no-repeat;
}
.page-hero__inner { max-width: 760px; position: relative; z-index: 2; }
.page-hero h1 { color: #fff; }
.page-hero h1 em { color: var(--gold-light); }
.page-hero__intro { font-size: 18px; color: rgba(255,255,255,0.88); margin-top: 18px; max-width: 60ch; }
.page-hero__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

.breadcrumb { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-bottom: 16px; }

/* ---- About hero "living map" aircraft (driven by js/map-trace.js) ------------
   A slice-aligned SVG overlay (viewBox matches the photo) so the five flight
   paths stay correctly placed in the composition at every breakpoint. A small
   gold jet flies one route at a time via SVG <animateMotion rotate="auto">, then
   a different route is chosen. Sits above the teal wash, below the hero text. */
.map-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.mt-route { fill: none; stroke: none; }          /* routes are motion guides only */
.map-trace__craft {
  fill: #E9CB84;                                 /* soft warm gold, flat — no glow */
}
/* Mobile only: the craft is drawn tiny against the 1920-unit viewBox, so on a
   phone it can read as a barely-visible speck. Double its size (~200%) on mobile
   without touching desktop, the trajectory, timing or behaviour. The path is
   defined symmetric about the SVG user-space origin (0,0) and SVG's default
   transform-origin is 0 0, so a plain scale() enlarges it about its own centre —
   it stays on the flight path. The scale lives on the <path>, while the SMIL
   <animateMotion> drives the parent <g>, so the two never conflict. */
@media (max-width: 900px) {
  .map-trace__craft { transform: scale(2); }
}
/* Reduced-motion: a completely static map (no aircraft). */
@media (prefers-reduced-motion: reduce) {
  .map-trace { display: none; }
}
.breadcrumb a { color: var(--gold-light); }
.breadcrumb span { margin: 0 6px; opacity: 0.6; }

/* ---------- Inner content helpers ---------- */
.prose { max-width: 760px; }
.prose p { margin-bottom: 18px; }
.prose h2 { margin: 36px 0 14px; }
.prose h3 { margin: 28px 0 10px; color: var(--text); font-weight: 600; font-family: var(--font-body); font-size: 19px; }
.prose ul { display: grid; gap: 10px; margin: 0 0 18px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
/* height:auto for the same reason as .brand-tile img — see the note there. */
.split img { border-radius: 16px; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 30px; } }

/* info blocks / tier cards */
/* ===== Beachcomber / partner offers feed (live specials cards) =====
   Cards render as direct children of .offers-feed, which is already a
   responsive repeat(3->2->1, 1fr) grid — no extra grid wrapper. */
.offer-card { min-width: 0; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.offer-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--teal-pale); overflow: hidden; }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.offer-card:hover .offer-card__media img { transform: scale(1.05); }
.offer-card__badge { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--teal); box-shadow: var(--shadow-sm); }
.offer-card__badge--honeymoon { background: var(--gold); color: #2a2208; }
.offer-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.offer-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.offer-card__head h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--teal); margin: 0; }
.offer-card__star { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold); }
.offer-card__room { font-size: 13.5px; color: var(--text); margin: 6px 0 0; }
.offer-card__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; }
.offer-card__meta span { font-size: 11.5px; font-weight: 600; color: var(--teal); background: var(--teal-pale); padding: 3px 10px; border-radius: 999px; }
.offer-card__meta .offer-card__air { color: #2a2208; background: rgba(196,154,60,0.18); }
.offer-card__incl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.offer-card__incl li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.offer-card__incl li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.offer-card__price { margin: 16px 0 0; color: var(--text); }
.offer-card__price .offer-card__from { font-size: 12px; color: var(--muted); }
.offer-card__price strong { font-family: var(--font-display); font-size: 26px; color: var(--teal); font-weight: 600; }
.offer-card__price .offer-card__pp { font-size: 12px; color: var(--muted); }
.offer-card__dates { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.offer-card__cta { margin-top: auto; }
.offer-card__body > .offer-card__cta { margin-top: 18px; }
/* Promotional / bonus-offer note (e.g. Holiday Factory honeymoon perks). Gold-
   tinted so it reads as a perk without competing with the price. */
.offer-card__promo {
  margin: 14px 0 0; padding: 9px 11px; border-radius: 10px;
  font-size: 12px; line-height: 1.45; color: var(--gold-ink);
  background: rgba(196,154,60,0.10); border: 1px solid rgba(196,154,60,0.22);
}
/* "Load more" row for the partner-offers feed. A direct child of .offers-feed,
   so it spans every column and centres the button beneath the grid. */
.offers-more { grid-column: 1 / -1; }
.offers-more:empty { display: none; }
.offers-more { display: flex; justify-content: center; margin-top: 6px; }
.offers-more__btn { min-width: 220px; }

/* ===== Beachcomber Live Quotation Engine ===== */
.bcq { position: relative; }
.bcq__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.35fr); gap: 26px; align-items: start; }
.bcq__panel { min-width: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 26px 26px 24px; }
.bcq__search { position: sticky; top: 88px; }
.bcq__panel-head { margin-bottom: 16px; }
.bcq__panel-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--teal); margin: 4px 0 0; }
.bcq__field { min-width: 0; display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.bcq__field > span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bcq__field input, .bcq__field select { width: 100%; min-width: 0; box-sizing: border-box; font-family: var(--font-body); font-size: 16px; color: var(--text); padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.bcq__field input:focus, .bcq__field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11,110,110,0.12); }
.bcq__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bcq__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bcq__field--sm > span { font-size: 10.5px; }
.bcq__los { margin: -4px 0 12px; font-size: 12.5px; font-weight: 600; color: var(--teal); background: var(--teal-pale); padding: 6px 12px; border-radius: 8px; }
.bcq__childages { margin-bottom: 6px; }
.bcq__childages-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bcq__childages-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.bcq__error { margin: 0 0 12px; font-size: 13px; color: #b3261e; background: rgba(179,38,30,0.08); border: 1px solid rgba(179,38,30,0.2); border-radius: 8px; padding: 10px 12px; }
.bcq__hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
#bcq-generate.is-loading { opacity: 0.75; pointer-events: none; }

.bcq__results { min-height: 460px; display: flex; flex-direction: column; }
.bcq__empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; }
.bcq__empty-icon { font-size: 40px; }
.bcq__empty p { margin: 0; color: var(--text); font-size: 16px; }
.bcq__loading { margin: auto; text-align: center; padding: 40px 20px; width: 100%; }
.bcq__spinner { width: 40px; height: 40px; margin: 0 auto 16px; border: 3px solid var(--teal-pale); border-top-color: var(--teal); border-radius: 50%; animation: bcqSpin 0.8s linear infinite; }
@keyframes bcqSpin { to { transform: rotate(360deg); } }
.bcq__loading p { color: var(--teal); font-weight: 600; margin: 0 0 20px; }
.bcq__skeleton { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.bcq__skeleton span { height: 16px; border-radius: 8px; background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%; animation: bcqShimmer 1.4s ease infinite; }
.bcq__skeleton span:first-child { height: 120px; }
.bcq__skeleton span:nth-child(3) { width: 60%; }
@keyframes bcqShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.bcq-resort__media { position: relative; aspect-ratio: 16 / 7; border-radius: 12px; overflow: hidden; background: var(--teal) center/cover no-repeat; }
.bcq-resort__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.62)); }
.bcq-resort__titles h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: #fff; margin: 0; }
.bcq-resort__titles p { margin: 2px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.05em; }
.bcq-badge { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.bcq-badge--ok { background: #1f9d55; }
.bcq-badge--req { background: var(--gold); color: #2a2208; }
.bcq-badge--wait { background: #d98324; }
.bcq-badge--no { background: #b3261e; }
.bcq-gallery { display: flex; gap: 8px; margin-top: 10px; }
.bcq-thumb { flex: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 3/2; }
.bcq-thumb[aria-current="true"] { border-color: var(--gold); }
.bcq-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcq-incl { margin-top: 16px; }
.bcq-incl h4, .bcq-config h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.bcq-incl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.bcq-incl li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--text); line-height: 1.4; }
.bcq-incl li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.bcq-resort__link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--teal); }

.bcq-config { margin-top: 22px; }
.bcq-config h4 { margin-top: 18px; }
/* Room cards: image-led, equal-height, text always full-width (no cramping). */
.bcq-rooms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: stretch; }
.bcq-room { display: flex; flex-direction: column; min-width: 0; text-align: left; padding: 0; overflow: hidden; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.bcq-room:hover { border-color: var(--teal); transform: translateY(-2px); }
.bcq-room:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11,110,110,0.2); }
.bcq-room.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(11,110,110,0.14); }
/* media: fixed aspect ratio => consistent cropping + zero layout shift */
.bcq-room__media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--teal-pale); overflow: hidden; }
.bcq-room__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #eef4f4 25%, #f8fbfb 37%, #eef4f4 63%); background-size: 400% 100%; animation: bcqShimmer 1.4s ease infinite; }
.bcq-room__media.is-loaded::before, .bcq-room__media.is-failed::before { display: none; }
.bcq-room__media.is-failed { background: linear-gradient(135deg, var(--teal-pale), #dcebea); }
.bcq-room__media.is-failed::after { content: "🏝"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: 0.45; }
/* Fail-safe: the image is VISIBLE by default. It is never hidden behind a class that
   JS must add, so a failed listener / stalled transition can't leave it invisible.
   The shimmer sits behind it and is simply covered once the image paints; the
   fade-in is a pure progressive enhancement. */
.bcq-room__img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.bcq-room__img.is-loaded { animation: bcqFadeIn 0.45s ease; }
@keyframes bcqFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bcq-room:hover .bcq-room__img { transform: scale(1.04); }
/* body: flex:1 so text uses the FULL card width and cards stay equal height */
.bcq-room__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 13px 13px; }
.bcq-room__name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.bcq-room__meta { font-size: 11px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.bcq-room__from { font-size: 13.5px; font-weight: 700; color: var(--teal); margin-top: auto; padding-top: 5px; }
.bcq-meals { display: flex; flex-wrap: wrap; gap: 8px; }
.bcq-meal { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; color: var(--text); transition: border-color 0.2s ease; }
.bcq-meal span { font-size: 12px; font-weight: 700; color: var(--teal); }
.bcq-meal:hover { border-color: var(--teal); }
.bcq-meal.is-active { border-color: var(--teal); background: var(--teal-pale); }

.bcq-price { margin-top: 22px; background: var(--cream, #FBF8F1); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.bcq-price__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bcq-price__label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bcq-price__grand { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--teal); line-height: 1.1; }
.bcq-price__pps { display: block; font-size: 12.5px; color: var(--muted); }
.bcq-price__save { background: var(--gold); color: #2a2208; font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; }
.bcq-indicative { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #2a2208; background: rgba(196,154,60,0.22); padding: 2px 7px; border-radius: 6px; vertical-align: middle; cursor: help; }
.bcq-breakdown { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 6px; }
.bcq-breakdown summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--teal); padding: 8px 0; list-style: none; }
.bcq-breakdown summary::-webkit-details-marker { display: none; }
.bcq-breakdown summary::before { content: "▸ "; }
.bcq-breakdown[open] summary::before { content: "▾ "; }
.bcq-breakdown dl { margin: 6px 0 0; }
.bcq-breakdown dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; color: var(--text); }
.bcq-breakdown dt { color: var(--muted); }
.bcq-breakdown__promo dd { color: #1f9d55; font-weight: 600; }
.bcq-breakdown__total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px !important; font-weight: 700; }
.bcq-breakdown__total dt, .bcq-breakdown__total dd { color: var(--text); font-weight: 700; }
.bcq-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.bcq-actions .btn { padding: 11px 12px; font-size: 13px; }
.bcq-actions .btn:first-child { grid-column: 1 / -1; }
.bcq-price__foot { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* Email-quote form (primary action) */
.bcq-email { margin-top: 18px; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.bcq-email h4 { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--teal); margin: 0; }
.bcq-email__sub { margin: 4px 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.bcq-email__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bcq-email__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.bcq-email__actions .btn { padding: 11px 20px; font-size: 13.5px; }
.bcq-email__done { margin-top: 18px; }
.bcq-email__ok { padding: 20px; border: 1px solid rgba(31,157,85,0.35); background: rgba(31,157,85,0.07); border-radius: 12px; text-align: center; }
.bcq-email__ok-icon { font-size: 28px; }
.bcq-email__ok h4 { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--text); margin: 6px 0 6px; }
.bcq-email__ok p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
@media (max-width: 560px) { .bcq-email__row { grid-template-columns: 1fr; } }

/* Download PDF = print the quotation cleanly (no API PDF endpoint exists) */
@media print {
  body * { visibility: hidden !important; }
  #engine-beachcomber, #engine-beachcomber * { visibility: visible !important; }
  #engine-beachcomber { position: absolute; left: 0; top: 0; width: 100%; }
  .bcq__search, .bcq-actions, .bcq-email, .bcq-email__done, .bcq-gallery,
  .bcq-config, .bcq__loading, .bcq__empty, .bcq-toast, .bcq-resort__link { display: none !important; }
  .bcq__grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .bcq__panel { box-shadow: none !important; border: none !important; padding: 0 !important; }
  .bcq-resort__media { aspect-ratio: 16/6 !important; }
  .bcq-price { border: 1px solid #ddd !important; background: #fff !important; break-inside: avoid; }
  /* force the breakdown open in print */
  .bcq-breakdown summary { display: none !important; }
  .bcq-breakdown > dl { display: block !important; }
  details:not([open]) > *:not(summary) { display: block !important; }
}

.bcq-err { margin: auto; text-align: center; padding: 34px 22px; max-width: 460px; }
.bcq-err__icon { font-size: 34px; }
.bcq-err h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--text); margin: 10px 0 6px; }
.bcq-err p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.bcq-err__alts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.bcq-alt, .bcq-code { font-size: 12.5px; font-weight: 600; color: var(--teal); background: var(--teal-pale); border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.bcq-alt:hover { background: var(--teal); color: #fff; }

.bcq-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--charcoal, #1C1C1C); color: #fff; font-size: 13.5px; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-md); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 2000; }
.bcq-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .bcq__grid { grid-template-columns: 1fr; gap: 20px; }
  .bcq__search { position: static; }
  .bcq-incl ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bcq__row3 { grid-template-columns: 1fr 1fr 1fr; }
  .bcq__childages-row { grid-template-columns: 1fr 1fr; }
  .bcq-rooms { grid-template-columns: 1fr; }
  .bcq-actions { grid-template-columns: 1fr 1fr; }
  .bcq-price__grand { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .bcq__spinner, .bcq__skeleton span { animation: none; }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* ===== Suppliers & support (about page) =====
   Three milestone cards on the sand section — the card-on-sand relationship the
   quote grid and mega menus use — under a rail carrying the numbered nodes.
   The single 900px panel this replaced forced the copy into 232px columns at
   34 characters a line, well under the 45-75 comfort band; letting the cards
   take the full container is what buys the line length back. */
.supplier-intro {
  /* was running to 84 characters a line, above the comfort ceiling */
  max-width: 65ch;
  margin-inline: auto;
}
.supplier-cta { margin: 24px 0 0; text-align: center; }

/* ---- Trust & credentials panel ------------------------------------------
   Same construction as the mega-menu and quote cards — white face, hairline
   border, --shadow-sm, --radius-card, and the shared --accent-rule across the
   top — so it reads as an accreditation panel in the site's own language
   rather than a new box. Anchors the bottom of the section. */
.creds {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin: 30px auto 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.creds::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-rule);
  opacity: 0.7;
}
.creds:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.creds__list { list-style: none; margin: 0; padding: 0; }
.creds__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.creds__list li:last-child { padding-bottom: 0; }
/* the verified rail — joins the ticks so they read as one chain of proof
   rather than three loose statements */
.creds__list li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px; top: 22px; bottom: 0;
  width: 2px;
  background: rgba(23,121,90,0.22);
}
.creds__tick {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #17795A;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease;
}
.creds__tick svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.creds:hover .creds__tick { transform: scale(1.08); }
.creds__list strong { font-weight: 600; color: var(--teal); }
.creds__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}
@media (max-width: 560px) {
  .creds { padding: 24px 20px 22px; }
}

/* Each milestone is its own card, reusing the .info-card values so it reads as
   native rather than a new component. Tops align and heights match: the earlier
   staggered version left the three headings at three different heights, which
   breaks the horizontal scan line the eye uses to compare them. Progression is
   carried by the rail, the numbers and the card order instead. */
.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.journey__step {
  position: relative;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 30px 24px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Centred header lockup: the logo and company name sit on the card's centre
     axis (the logo is the eye's first anchor), while the description below stays
     left-aligned for readability. Equal top padding + identical logo dimensions
     line the three logos up perfectly across the row. */
  text-align: center;
}
.journey__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Numbers live on the rail at this width; the in-column badges would duplicate
   them. They come back when the rail is dropped on mobile. */
.journey__num {
  display: none;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(11,110,110,0.28);
}

/* ---- Progression rail ---------------------------------------------------
   Replaces the 208px ascending wedge. It says the same thing in 44px, and
   because it sits level it can carry the milestone numbers directly above the
   cards they belong to rather than floating above the whole block. Nodes sit
   at the card centres: 1/6, 1/2, 5/6. */
.rail { position: relative; height: 44px; margin: 30px 0 18px; }
/* A wedge rather than a rule: ~1.7px at the left, 14px at the right, so the
   arrow itself thickens as the journey progresses. clip-path does the taper in
   one declaration and stays smooth at any width — no SVG, no fixed geometry.
   Turquoise deepening left to right doubles the same idea in colour. */
.rail__line {
  position: absolute;
  left: 0; right: -6px; top: 50%;
  height: 14px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(11,110,110,0.26), var(--teal));
  clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
}
/* overshoots the third card, so the journey reads as still running */
.rail__tip {
  position: absolute;
  right: -20px; top: 50%;
  width: 0; height: 0;
  border-left: 16px solid var(--teal);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateY(-50%);
}
.rail__node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1.5px solid rgba(196,154,60,0.6);
  color: var(--teal);
  font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 7px rgba(11,110,110,0.14);
}
/* Not a flat 1/6 and 5/6: the grid gap shifts the outer cards' centres inward,
   and the shift works out to exactly gap/3 in px regardless of width (the gap
   is fixed while the columns flex), so this stays true at every viewport. */
.rail__node--1 { left: calc(16.6667% - 6.667px); }
.rail__node--2 { left: 50%; }
.rail__node--3 { left: calc(83.3333% + 6.667px); }

/* Brand logo leads each journey card (card-header position): logo → title →
   copy. On the rail layout the milestone number sits on the rail above, so the
   logo is the card's first visible element; when the rail is dropped (≤900px)
   the numbered badge returns above it. Left-aligned to the card's copy; the
   16px gap keeps the section's vertical rhythm. */
.journey__step .brand-logo { margin: 0 auto 18px; }

.journey__title {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700; line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--teal);
  text-align: center;
  margin: 0 0 10px;
}
/* 15px/1.7 in --text, up from 12.8px/1.62 in --muted: this is the section's
   primary story and it was set smaller than everything around it. Left-aligned
   (against the card's centred header) so multi-line copy stays easy to read. */
.journey p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; text-align: left; }
.journey strong { font-weight: 600; color: var(--teal); }

@media (max-width: 900px) {
  /* Stacked: the rail needs three cards side by side, so it is dropped and the
     numbered badges return to the cards. */
  .rail { display: none; }
  .journey { grid-template-columns: 1fr; gap: 14px; }
  /* Badge sits above the title rather than in a left gutter. As a gutter it cost
     54px of an already narrow card and pushed the copy down to 33 characters a
     line; stacked, the text keeps the card's full width. */
  .journey__num { display: flex; position: static; margin: 0 auto 12px; }
}
@media (max-width: 560px) {
  .journey__step { padding: 22px 20px 24px; }
}

/* Sand-faced variant: the same --sand as .section--sand, so a run of cards can
   sit on a white section and still tie to a sand section adjoining it. A
   modifier rather than a change to .info-card, which is shared site-wide (the
   quote cards extend it). */
.info-card--sand { background: var(--sand); }
.info-card .label-gold { margin-bottom: 8px; display: block; }
.info-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--teal); margin-bottom: 8px; }
.info-card p { font-size: 14px; color: var(--muted); }
.info-card ul { margin-top: 12px; display: grid; gap: 8px; }
.info-card ul li { font-size: 13.5px; color: var(--text); padding-left: 20px; position: relative; }
.info-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }

/* ===== Journey infographic (.flow) — reusable, self-contained =====
   A numbered 5-step horizontal flow: soft circular illustration + gold accents,
   joined by dotted gold arrows. Every step is a self-contained .flow__step, so
   steps can be added, removed, reordered or relabelled without touching layout.
   Desktop = 5 across; wraps to 3 / 2 / 1 with the numbers carrying the sequence. */

/* gold sprig rule under the heading */
.flow-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 18px; max-width: 420px; }
.flow-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,154,60,0.55), transparent); }
.flow-rule svg { flex: none; width: 26px; height: 26px; }

.flow { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; align-items: start; }
.flow__step { position: relative; min-width: 0; text-align: center; padding-top: 20px; }
/* numbered badge sits over the top of the circle */
.flow__num { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(11,110,110,0.28); }
/* large soft circle holding the illustration */
.flow__art { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 152px; aspect-ratio: 1; margin: 0 auto 18px; border-radius: 50%; background: #F1F7F7; transition: transform 0.3s ease, background 0.3s ease; }
.flow__art svg { width: 62%; height: 62%; overflow: visible; }
.flow__step:hover .flow__art { transform: translateY(-4px); background: #E7F1F1; }
.flow__title { font-family: var(--font-body); font-size: 14.5px; font-weight: 700; color: var(--teal); line-height: 1.35; margin: 0 0 8px; }
.flow__text { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* illustration ink */
.flow__art .ln { fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flow__art .fl { fill: #DCEBEA; stroke: none; }
.flow__art .au { fill: none; stroke: var(--gold); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.flow__art .aud { fill: var(--gold); stroke: none; }
.flow__art .ck { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow__art .pin { fill: #fff; stroke: none; }
.flow__art .dot { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 4; }
.flow__art .tx { fill: var(--teal); font-family: var(--font-body); font-size: 5.4px; font-weight: 700; text-anchor: middle; }
.flow-rule .au { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.flow-rule .aud { fill: var(--gold); stroke: none; }

/* dotted gold arrow between steps, aligned to the circle's centre line */
.flow__step:not(:last-child)::before { content: ""; position: absolute; top: 20px; left: calc(50% + 84px); right: -22px; height: 76px; border-bottom: 2px dotted rgba(196,154,60,0.7); }
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 92px; right: -24px; width: 6px; height: 6px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); }

/* closing note band */
.flow-note { display: flex; align-items: center; gap: 22px; margin-top: 38px; padding: 18px 26px; border: 1px solid var(--border); border-radius: 14px; background: #F7FBFB; }
.flow-note__leaf { flex: none; width: 54px; height: 54px; }
.flow-note__leaf svg { width: 100%; height: 100%; }
.flow-note__leaf .ln { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.flow-note__text { flex: 1; margin: 0; text-align: center; font-size: 15px; color: var(--text); line-height: 1.6; border-left: 1px solid var(--border); padding-left: 22px; }
.flow-note__text em { display: block; font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--teal); margin-top: 2px; }
.flow-note__plane { flex: none; width: 140px; height: 40px; }
.flow-note__plane svg { width: 100%; height: 100%; }
.flow-note__plane .dot { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 5; opacity: 0.6; }
.flow-note__plane .ln { fill: var(--teal); stroke: var(--teal); stroke-width: 1.2; stroke-linejoin: round; }

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 38px; }
  /* arrows only make sense on a single unbroken row */
  .flow__step::before, .flow__step::after { display: none; }
}
@media (max-width: 820px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-note { flex-direction: column; gap: 12px; text-align: center; padding: 22px; }
  .flow-note__text { border-left: 0; padding-left: 0; }
  .flow-note__plane { width: 120px; }
}
@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; row-gap: 34px; }
  .flow__art { max-width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__art { transition: none; }
  .flow__step:hover .flow__art { transform: none; }
}

/* ===== Online Quotes landing — booking-engine cards =====
   Reuses .info-card (shell) and .plan-seal (the gold medallion icon system from the
   destination pages), so this page inherits the same design language. */
.quote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
.quote-card { position: relative; overflow: hidden; min-width: 0; display: flex; flex-direction: column; text-align: center; padding-top: 30px; }
/* subtle premium accent: teal->gold hairline + a whisper of gold behind the seal */
.quote-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-rule); opacity: 0.7; transition: opacity 0.25s ease; }
.quote-card::after { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 104px; background: linear-gradient(180deg, rgba(196,154,60,0.08), rgba(196,154,60,0)); pointer-events: none; }
.quote-card:hover::before { opacity: 1; }
.quote-card > * { position: relative; z-index: 1; }
.quote-card .eyebrow { margin-bottom: 4px; }
.quote-card h3 { font-size: 20px; margin-bottom: 8px; }
.quote-card > p { font-size: 13.5px; line-height: 1.6; margin: 0; }
/* concise, scannable feature list */
.quote-card ul { text-align: left; display: grid; gap: 6px; margin: 16px 0 20px; }
.quote-card ul li { font-size: 12.5px; line-height: 1.45; }
.quote-card__note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
/* compact, centred action button (was oversized full-width) */
.quote-card__cta { margin-top: auto; align-self: center; padding: 10px 24px; font-size: 13px; }
@media (max-width: 1040px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .quote-grid { grid-template-columns: 1fr; } }

/* fact strip */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--teal-pale);
  border-radius: var(--radius-card);
  padding: 30px;
}
/* Typography mirrors the homepage hero stats (.hero-stats, above) so the same
   figures read identically on both pages. Same reasoning as there: the light
   Cormorant serif this previously used has hairline strokes that read faintly
   at a glance, and these are numbers people scan rather than read. Inter 600
   with tabular figures and tight tracking makes them scannable, and the labels
   drop to semibold uppercase so the numbers clearly lead.

   COLOURS ARE DELIBERATELY NOT COPIED. The hero sits on a dark photo and uses
   gold on white-ish; this strip sits on --teal-pale, so it keeps its own teal
   and muted tokens. Only the type treatment is shared. */
.fact-strip .fact strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 34px;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}
.fact-strip .fact span {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 600px) { .fact-strip { grid-template-columns: 1fr 1fr; } }

/* two-column form layout for inner pages */
.form-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .form-section { grid-template-columns: 1fr; gap: 32px; } }

/* contact info list */
.contact-list { display: grid; gap: 18px; margin-top: 24px; }
.contact-list .row { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.contact-list .row .ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--teal-pale); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.contact-list .row .ic svg { width: 20px; height: 20px; }
.contact-list .row strong { font-size: 13px; color: var(--text); display: block; }
.contact-list .row a, .contact-list .row p { font-size: 14px; color: var(--muted); }

/* tours landing region cards (light) */
.region-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.region-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.region-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s ease; }
.region-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1)); z-index: -1; }
.region-card:hover img { transform: scale(1.06); }
.region-card span { padding: 18px; font-family: var(--font-display); font-size: 21px; }
@media (max-width: 900px) { .region-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .region-cards { grid-template-columns: 1fr; } }

/* tall iframe embed area */
.embed-tall { min-height: 640px; }

/* blog post body */
.post-body { max-width: 740px; margin: 0 auto; }
.post-body img { border-radius: 14px; margin: 26px 0; }
.post-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.post-hero-img { width: 100%; height: auto; aspect-ratio: 16/7; object-fit: cover; border-radius: 16px; margin-bottom: 36px; }

/* reviews page grid */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr; } }

/* best-time icon cards */
.info-card .feature__icon { margin-bottom: 14px; }

/* coast section — decorative compass to the right of the title, above the table */
.coast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}
.coast-head .section-head { max-width: 640px; }
.coast-compass { display: flex; justify-content: center; flex-shrink: 0; }
.coast-compass svg { width: 132px; height: auto; }
@media (max-width: 760px) {
  .coast-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .coast-compass svg { width: 104px; }
}

/* experience gallery tiles (image-ready) */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* homepage featured holidays — 3 image tiles */
.feature-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-tiles .exp-tile { aspect-ratio: 3 / 2; }
.feature-tiles .exp-tile h3 { font-size: 22px; }
@media (max-width: 900px) { .feature-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-tiles { grid-template-columns: 1fr; } }
.exp-tile {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 170px;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  background: linear-gradient(155deg, #0a3d3d 0%, #0B6E6E 55%, #1A9090 100%);
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.exp-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.05) 70%);
  z-index: -1;
}
.exp-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.exp-tile .exp-body { padding: 16px 18px; }
.exp-tile h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: #fff;
  line-height: 1.15;
}
.exp-tile p { font-size: 12.5px; color: rgba(255,255,255,0.85); margin-top: 4px; }
@media (max-width: 900px) { .exp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .exp-grid { grid-template-columns: 1fr; } }

/* tours hub — featured destination cards (2-up) */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.tour-card .card__body { padding: 24px; }
.tour-card .card__body p.overview { font-size: 14.5px; color: var(--text); margin: 8px 0 14px; }
.tour-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-card .tour-highlights { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.tour-card .tour-highlights strong { color: var(--teal); }
@media (max-width: 760px) { .tour-grid { grid-template-columns: 1fr; } }

/* operator / tour-style cards */
.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .style-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .style-grid { grid-template-columns: 1fr; } }

/* visa resource link cards */
.link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.link-card { display: block; }
.link-card .arrow-link { margin-top: 12px; }
@media (max-width: 600px) { .link-grid { grid-template-columns: 1fr; } }

/* ---- Offers feed (API-ready container) ---------------------------------
   Holds the "coming soon" placeholder now; future offer cards injected into
   this same container flow into a responsive 1/2/3-column grid with no
   structural change. The placeholder spans the full width until replaced. */
.offers-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.offers-feed > .offers-placeholder { grid-column: 1 / -1; }
@media (max-width: 900px) { .offers-feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .offers-feed { grid-template-columns: 1fr; } }

/* ---- Display tiles (brands / experiences — informational, not clickable) */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
  /* Cards keep their own height rather than stretching to the tallest in the
     row. The artwork varies slightly in ratio, and stretching leaves dead space
     below the shorter ones instead of just ending the card. */
  align-items: start;
}
.brand-tile {
  margin: 0;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Supplier cards are portrait artwork with the branding built in, so they are
   shown whole — no aspect-ratio and no object-fit, or the crop eats the logo.
   height:auto is load-bearing: an <img> with width/height attributes gets those
   as presentational hints, and without an author height the pixel height wins
   and the image renders stretched. */
.brand-tile img { width: 100%; height: auto; display: block; }
/* Square variant — photographic tiles rather than supplier logo cards, so a
   crop is safe here and consistency matters more than showing the whole frame.
   Without it each tile takes its source image's own ratio: the About page's
   experience photos run 640x960 and 640x1034 portrait against 640x427
   landscape, so two tiles rendered at roughly twice the height of the others.
   height:auto stays declared — aspect-ratio is only honoured when a dimension
   is auto, and the height attribute would otherwise win. */
.brand-grid--square .brand-tile img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.brand-tile figcaption {
  padding: 13px 14px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
  text-align: center;
}
.brand-tile figcaption small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .brand-grid { grid-template-columns: 1fr; } }

/* Layout for the square variant. This lived in an inline style, which outranked
   the 520px rule above and left the tiles stuck two-up at 158px on a phone;
   holding it here lets the breakpoint through. Declared after those rules
   because the class ties with .brand-grid on specificity.
   Unlike the supplier cards these tiles are all exactly as tall as each other,
   so stretching is safe and only the caption varies — the flexed caption
   absorbs a wrapped line and keeps the bottom edges aligned. */
.brand-grid--square {
  grid-template-columns: repeat(2, 1fr);
  max-width: 620px;
  margin-inline: auto;
  align-items: stretch;
}
.brand-grid--square .brand-tile { display: flex; flex-direction: column; }
.brand-grid--square .brand-tile figcaption {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
@media (max-width: 520px) { .brand-grid--square { grid-template-columns: 1fr; max-width: 340px; } }

/* ===== Styles of Touring — three-tier operator collection =====================
   One curated component, three levels (Entry-Level -> Mid-Range -> Luxury). Tiers
   are visually distinct via a per-tier accent (teal / gold / navy) but share one
   card design so it reads as a single collection. Uniform media (fixed ratio,
   cover, top-anchored) keeps every card the same height. */
.tier-stack { display: grid; gap: 38px; margin-top: 8px; }
.tier__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.tier__rank {
  font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1;
  color: var(--teal); white-space: nowrap;
}
.tier__line { flex: 0 0 30px; height: 3px; border-radius: 2px; background: var(--teal); }
.tier__note { font-size: 13.5px; color: var(--muted); }
/* Text uses --gold-ink; the rule beneath stays full --gold. The tier heading is
   21px at weight 600, which is not "large text" under WCAG (that needs 24px, or
   18.66px at 700), so it must clear 4.5:1 — plain --gold gives 2.32:1 on the
   pale teal band this tier sits on. The rule is a graphic, not text, so it keeps
   the brand gold and the two still read as one colour. */
.tier--mid .tier__rank { color: var(--gold-ink); }
.tier--mid .tier__line { background: var(--gold); }
.tier--luxury .tier__rank { color: #1c2c4c; }
.tier--luxury .tier__line { background: #1c2c4c; }

.op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.op-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: 0 6px 18px rgba(11,110,110,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.op-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.op-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.op-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.op-card__body { display: flex; flex-direction: column; gap: 5px; padding: 15px 17px 17px; flex: 1; }
.op-card__tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
}
/* 10.5px uppercase — the smallest text on the page, so it needs the text-safe
   gold most of all (--gold gives 2.61:1 on the white card). */
.tier--mid .op-card__tier { color: var(--gold-ink); }
.tier--luxury .op-card__tier { color: #1c2c4c; }
.op-card__name { font-family: var(--font-display); font-weight: 500; font-size: 18.5px; color: var(--text); margin: 0; line-height: 1.15; }
.op-card__desc { font-size: 12.75px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ---- Reusable image flip (front photo -> official logo on white) ------------
   ONE shared implementation (this CSS + js/op-flip.js). Only the 4:5 media flips;
   the description beneath stays static. Each card just supplies a front image and
   a logo. Triggers: hover (desktop), focus-within (keyboard, link cards), or
   .is-flipped (touch tap, added by the script). */
.op-card--flip .op-card__media { perspective: 1100px; background: transparent; }
.op-card--flip .op-flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.op-card--flip:hover .op-flip,
.op-card--flip:focus-within .op-flip,
.op-card--flip.is-flipped .op-flip { transform: rotateY(180deg); }
.op-flip__face {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.op-flip__face--back {
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
  padding: 14%; background: var(--white);
}
/* Logo sizing must out-specify the front-image rule (.op-card__media img), which
   is object-fit:cover — that was cropping the logos. Here each logo scales to its
   own intrinsic aspect (contain, auto), capped by per-logo max-width/height vars
   so wide and compact marks are each sized appropriately and never clipped. */
.op-flip__face--back .op-flip__logo {
  width: var(--op-logo-w, 82%);
  height: var(--op-logo-h, 46%);
  object-fit: contain; object-position: center;
  display: block;
}
/* Reduced motion: no 3D spin — crossfade the logo panel in instead. */
@media (prefers-reduced-motion: reduce) {
  .op-card--flip .op-flip { transition: none; transform: none !important; }
  .op-flip__face--back {
    transform: none; opacity: 0;
    -webkit-backface-visibility: visible; backface-visibility: visible;
    transition: opacity 0.3s ease;
  }
  .op-card--flip:hover .op-flip__face--back,
  .op-card--flip:focus-within .op-flip__face--back,
  .op-card--flip.is-flipped .op-flip__face--back { opacity: 1; }
}
/* Placeholder — obviously not an active supplier, but visually consistent. */
.op-card--soon { border-style: dashed; box-shadow: none; background: var(--sand); }
.op-card--soon:hover { transform: none; box-shadow: none; }
.op-card__media--soon {
  display: flex; align-items: center; justify-content: center; background: transparent;
  background-image: repeating-linear-gradient(135deg, rgba(11,110,110,0.05) 0 11px, transparent 11px 22px);
}
.op-card__soon {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  border: 1.5px dashed var(--border); border-radius: 999px; padding: 8px 18px; background: var(--white);
}
@media (max-width: 900px) { .op-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .op-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .tier__rank { font-size: 19px; }
}
/* Clickable operator card (Europamundo -> its online-tours page). The name is the
   real link; a stretched ::after makes the WHOLE card the hit target, so there is
   one accessible link and full keyboard/screen-reader support. */
.op-card--link { position: relative; }
.op-card__link { color: inherit; text-decoration: none; }
.op-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.op-card--link:hover .op-card__name { color: var(--teal); }
.op-card--link:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-card); }
.op-card__link:focus { outline: none; }        /* focus ring moves to the whole card */
/* Anchor landing offsets for the sticky header (matches the site's 92px convention). */
#europamundo-tours, #styles-of-touring, #engine { scroll-margin-top: 92px; }
/* Deep-link targets for the offers cross-links (sticky-header offset): the
   Featured Offers section on the Other Offers page, and the Beachcomber offers
   section the "Back to Beachcomber" pill returns to. */
#featured-offers, #offers { scroll-margin-top: 92px; }

/* ===== Popular tours — plain two-column name list (Europamundo page) =====
   Deliberately NOT cards: no box, border, background or link — just six tour
   names, elegant and scannable. grid-auto-flow:column + three rows fills the left
   column (items 1-3) before the right (items 4-6). Collapses to one column on
   phones. A small gold marker keeps it reading as a list, not prose. */
.pop-list {
  list-style: none; margin: 12px auto 0; padding: 0; max-width: 720px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: clamp(24px, 6vw, 72px); row-gap: 2px;
}
.pop-list li {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.35; color: var(--teal);
  padding: 13px 2px;
}
.pop-list li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); transform: translateY(-0.35em);
}
@media (max-width: 560px) {
  .pop-list { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; max-width: 360px; }
}

/* ===== Disclosure (Expand / Minimize) — Featured tour destinations ===========
   Heading + intro stay visible; a teal CTA reveals the grid. Height animates via
   grid-template-rows (0fr<->1fr) with the content in .disclosure__inner (overflow
   clipped). Default open for no-JS/SEO; js/disclosure.js collapses on load. */
.disclosure__cta { text-align: center; margin: 22px 0 0; }
/* Disclosure control: plain text label + gold chevron, no box/card. The chevron
   flips (points down when collapsed, up when expanded via aria-expanded). Whole
   control is the button; padding keeps a comfortable touch target. */
.disclosure__more {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--teal); background: transparent;
  border: 0; border-radius: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.disclosure__more:hover { color: var(--teal-deep, var(--teal)); }
.disclosure__more:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.disclosure__more-text { letter-spacing: 0.01em; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.disclosure__more-icon { display: inline-flex; color: var(--gold); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
[data-disclosure-btn][aria-expanded="true"] .disclosure__more-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .disclosure__more, .disclosure__more-icon { transition: none; } }
/* Height is driven explicitly by js/disclosure.js (0 <-> content, then auto).
   Default (no JS) is open. */
.disclosure__panel { overflow: hidden; transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.disclosure__body { padding-top: 34px; }
@media (prefers-reduced-motion: reduce) { .disclosure__panel { transition: none; } }

/* ---- Responsive 16:9 video embed ---- */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 26px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Sample itinerary tiles (two side by side, reuse .exp-tile look) ---- */
.itin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.itin-grid .exp-tile { aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .itin-grid { grid-template-columns: 1fr; } }

/* ---- "Beyond the Big Five" wildlife feature cards ---- */
.wild-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 8px;
}
.wild-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wild-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.wild-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.wild-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.wild-card:hover .wild-card__media img { transform: scale(1.06); }
.wild-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,61,61,0.4), rgba(10,61,61,0) 55%);
}
.wild-card__icon {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; background: rgba(255,255,255,0.92); box-shadow: var(--shadow-sm);
}
.wild-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.wild-card__body h3 { font-family: var(--font-display); font-size: 23px; margin: 0 0 8px; color: var(--text); }
.wild-card__body > p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.62; }
.wild-card__list { list-style: none; margin: 0; padding: 0; }
.wild-card__list li { position: relative; padding-left: 20px; margin: 7px 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.wild-card__list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* Compact "Before You Fly" pre-departure forms hub (visa page) */
.prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 14px; }
.prep-card { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.prep-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-pale); }
.prep-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--teal); }
.prep-card__dest { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.prep-card__form { font-family: var(--font-display); font-size: 17px; line-height: 1.22; color: var(--text); }
.prep-card__when { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.prep-card__when strong { color: var(--text); font-weight: 600; }
.prep-card__link { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--teal); }

/* ===== Interactive region explorer — shared across destination pages ===== */
.region-explorer { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 34px; align-items: center; margin-top: 12px; }
.region-map { position: relative; }

/* The canvas holds an optional background map image + the interactive SVG overlay */
.region-canvas { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.region-canvas__img { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 116% 110% at 50% 46%, #000 74%, transparent 100%); mask-image: radial-gradient(ellipse 116% 110% at 50% 46%, #000 74%, transparent 100%); }
.region-canvas__overlay { display: block; width: 100%; height: auto; }

/* Shared region interaction */
.region-shape { cursor: pointer; outline: none; transition: opacity 0.3s ease, fill 0.3s ease, stroke 0.3s ease; }

/* Photo mode — overlay sits over the image; regions are transparent hotspots that veil when another is picked */
.region-canvas--map .region-canvas__overlay { position: absolute; inset: 0; height: 100%; }
.region-canvas--map .region-shape { fill: #ffffff; opacity: 0; }
.region-canvas--map .region-shape.is-veiled { opacity: 0.55; }
.region-canvas--map .region-shape.is-active { opacity: 0; }
.region-canvas--map .region-shape:focus-visible { fill: var(--gold); opacity: 0.22; }
/* "Chip" hotspots represent a concept, not a landmass (e.g. Outer Islands) — there's no island photography to reveal on hover, so the hotspot shows its own soft highlight instead, using the same veil colour, opacity and timing as the other regions */
/* Beachcomber chips are small markers on illustrated art, not landmasses to
   reveal — so a hover must spotlight only the chosen resort and leave the rest of
   the collection fully visible (no white veil dimming the whole map). Emphasis
   rides on the hovered/selected chip alone: a soft teal wash inside a clean gold
   ring, driven by fill/stroke-opacity so element opacity never muddies it. The
   others stay transparent; the underlying map artwork is never touched. */
.region-canvas--map .region-shape--chip {
  fill: var(--teal); stroke: var(--gold); stroke-width: 5;
  fill-opacity: 0; stroke-opacity: 0; opacity: 1;
  transition: fill-opacity 0.25s ease, stroke-opacity 0.25s ease;
}
.region-canvas--map .region-shape--chip.is-veiled { opacity: 1; fill-opacity: 0; stroke-opacity: 0; }
.region-canvas--map .region-shape--chip.is-active,
.region-canvas--map .region-shape--chip:hover { opacity: 1; fill-opacity: 0.15; stroke-opacity: 0.95; }
.region-canvas--map .region-shape--chip:focus-visible { opacity: 1; fill-opacity: 0.18; stroke-opacity: 1; stroke: var(--teal); }
/* Safari map (--flat) uses the same fix as the Beachcomber chips: spotlight only
   the hovered region and never veil/dim the rest. Scoped to --flat so the island
   maps keep their existing reveal-on-hover behaviour. The hovered region gets a
   soft teal tint (its pin already turns teal); the others stay fully visible. */
.region-canvas--flat .region-shape {
  fill: var(--teal); opacity: 1; fill-opacity: 0;
  transition: fill-opacity 0.25s ease;
}
.region-canvas--flat .region-shape.is-veiled { opacity: 1; fill-opacity: 0; }
.region-canvas--flat .region-shape.is-active,
.region-canvas--flat .region-shape:hover { opacity: 1; fill-opacity: 0.12; }
.region-canvas--flat .region-shape:focus-visible { opacity: 1; fill-opacity: 0.16; }
.region-canvas--flat .region-pin.is-dim { opacity: 1; }

/* Portrait / archipelago maps (e.g. Seychelles) — a touch narrower so the tall map balances beside the card */
.region-canvas--portrait { max-width: 500px; }

/* Flat / landscape infographic maps (e.g. South Africa) — a rectangular illustration with
   content to the edges, so drop the island edge-fade mask and allow a wider frame */
.region-canvas--flat { max-width: 620px; }
.region-canvas--flat .region-canvas__img { -webkit-mask-image: none; mask-image: none; }

/* Placeholder mode — no map yet; show stylised, visible region shapes (swap to --map + add an image later) */
.region-canvas--placeholder { max-width: 430px; }
.region-canvas--placeholder .region-canvas__overlay { overflow: visible; }
.region-canvas--placeholder .region-shape { fill: var(--teal-pale); stroke: #7FC3BF; stroke-width: 2; stroke-linejoin: round; }
.region-canvas--placeholder .region-shape:hover,
.region-canvas--placeholder .region-shape.is-active { fill: var(--teal); stroke: #ffffff; }
.region-canvas--placeholder .region-shape.is-veiled { opacity: 0.5; }
.region-canvas--placeholder .region-shape:focus-visible { stroke: var(--gold); stroke-width: 3.5; }
.region-canvas__caption { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
/* Small map-accuracy disclaimer above the caption — ~half the caption size, muted
   and understated, centred to align with the instruction line beneath it. */
.region-canvas__disclaimer { margin: 10px 0 0; text-align: center; font-size: 11px; line-height: 1.4; letter-spacing: 0.01em; color: var(--muted); opacity: 0.9; }
.region-canvas__disclaimer + .region-canvas__caption { margin-top: 3px; }

/* SVG region labels (used in placeholder mode) */
.region-label { font-family: var(--font-body); font-size: 17px; font-weight: 600; fill: var(--teal); text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; transition: fill 0.3s ease, opacity 0.3s ease; }
.region-label.is-active { fill: #fff; stroke: var(--teal); stroke-width: 2.5px; }
.region-label.is-dim { opacity: 0.4; }

/* Region name pills placed over each coast */
.region-pin { position: absolute; transform: translate(-50%, -50%); padding: 5px 13px; border-radius: 999px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); background: rgba(255,255,255,0.92); box-shadow: var(--shadow-sm); pointer-events: none; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; }
.region-pin--north { top: 20%; left: 49%; }
.region-pin--east  { top: 45%; left: 64%; }
.region-pin--south { top: 70%; left: 43%; }
.region-pin--west  { top: 49%; left: 28%; }
.region-pin.is-active { background: var(--teal); color: #fff; box-shadow: 0 4px 14px rgba(11,110,110,0.4); }
.region-pin.is-dim { opacity: 0.42; }

.region-panel { position: relative; }
.region-hint[hidden], .rgx-card[hidden] { display: none; }
.region-hint { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 34px 26px; border: 1px dashed var(--border); border-radius: var(--radius-card); background: linear-gradient(180deg, #ffffff, #F7FBFB); }
.region-hint__icon { font-size: 34px; }
.region-hint p { margin: 0; color: var(--text); font-size: 16px; max-width: 34ch; }
.region-hint__sub { font-size: 13px; color: var(--muted); }

.rgx-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 26px 28px; }
.rgx-card.is-in { animation: rcIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes rcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rc-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--teal); margin: 0; }
.rc-tag { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.rc-desc { font-size: 14.5px; color: var(--muted); line-height: 1.62; margin: 0 0 14px; }
/* Badge row under the resort name: prominent star rating, plus any subtle
   secondary indicator (e.g. marine park) sitting quietly alongside it. */
.rc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.rc-rating { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); }
.rc-rating__stars { font-size: 13px; letter-spacing: 1px; }
.rc-soft { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); background: var(--teal-pale); padding: 3px 10px; border-radius: 999px; }
/* Persistent "return to the collection overview" control. It sits OUTSIDE the
   resort card, as a header row spanning the top of the whole explorer grid so it
   anchors level with the top edge of the map and reads as a control for the
   entire interactive experience (not another line inside the card). Centred at
   its natural width; outline treatment keeps it clear of the primary CTAs. */
.bcx-collection-btn { grid-column: 1 / -1; justify-self: center; margin: 0 0 4px; font-size: 13px; padding: 12px 24px; }
@media (max-width: 768px) { .bcx-collection-btn { margin-bottom: 8px; } }
.rc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rc-chip { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--teal-pale); border-radius: 10px; font-size: 18px; }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 18px; }
.rc-row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; }
.rc-row .rc-ico { grid-row: 1 / span 2; font-size: 16px; line-height: 1.2; }
.rc-row dt { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.rc-row dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.42; }
.rc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.rc-lists h4 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }
.rc-pros ul, .rc-cons ul { list-style: none; margin: 0; padding: 0; }
.rc-pros li, .rc-cons li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.45; margin: 6px 0; color: var(--text); }
.rc-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.rc-cons li::before { content: "•"; position: absolute; left: 5px; color: var(--gold); font-weight: 700; }

@media (max-width: 860px) {
  .region-explorer { grid-template-columns: 1fr; gap: 22px; }
  .region-canvas { max-width: 440px; }
  .region-canvas--placeholder { max-width: 360px; }
  .region-canvas--portrait { max-width: 380px; }
  .region-panel { min-height: 0; }
}
@media (max-width: 520px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-lists { grid-template-columns: 1fr; gap: 14px; }
  .rgx-card { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rgx-card.is-in { animation: none; }
  .region-shape, .region-label, .region-canvas--map .region-shape--chip { transition: none; }
}

/* ===== Beachcomber Resort Explorer =====
   Rides on .region-explorer / .region-canvas / .region-shape for the map so the
   interaction matches the other destination maps; these rules only add the
   richer resort card that sits beside it. */
.bcx-card { align-self: start; }
.bcx-grid { grid-template-columns: 1fr 1fr; }
.bcx-block { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.bcx-block h4 { margin: 0 0 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); }

.bcx-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bcx-tags li { font-size: 12px; font-weight: 600; color: var(--teal); background: var(--teal-pale); border-radius: 999px; padding: 5px 12px; }

.bcx-near { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; }
.bcx-near li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.45; color: var(--text); }
.bcx-near li::before { content: "◆"; position: absolute; left: 0; top: 2px; font-size: 8px; color: var(--gold); }

.bcx-weather { margin: 0; display: grid; gap: 7px; }
.bcx-weather > div { display: grid; grid-template-columns: 122px 1fr; gap: 12px; align-items: baseline; }
.bcx-weather dt { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--teal); }
.bcx-weather dd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.bcx-note { margin: 14px 0 0; font-size: 12px; font-style: italic; color: var(--muted); }

@media (max-width: 520px) {
  .bcx-grid { grid-template-columns: 1fr; }
  .bcx-near { grid-template-columns: 1fr; }
  .bcx-weather > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== Live rates CTA — bridges the explorer and the offers sections =====
   Zero-height wrapper so it costs no layout space; the inner block is pulled up
   half the pill's height so the pill sits centred on the seam between the two
   section backgrounds. */
/* align-items:flex-start is load-bearing: the wrapper is height:0, and the
   default `stretch` would collapse the inner to 0 too, making its percentage
   translate resolve to 0px and drop the pill below the seam. */
.rate-bridge { position: relative; z-index: 4; height: 0; display: flex; justify-content: center; align-items: flex-start; }
.rate-bridge__inner { transform: translateY(-50%); max-width: calc(100% - 32px); }
.rate-bridge__btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 26px 12px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #2a2208;
  box-shadow: 0 16px 38px rgba(196,154,60,0.40), 0 3px 10px rgba(0,0,0,0.10);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.rate-bridge__btn:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(196,154,60,0.50), 0 4px 12px rgba(0,0,0,0.12); color: #2a2208; }
.rate-bridge__btn:active { transform: translateY(-1px); }
.rate-bridge__btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.rate-bridge__ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FBF8F1;
  box-shadow: inset 0 0 0 1px rgba(196,154,60,0.55);
}
.rate-bridge__ico svg { width: 19px; height: 19px; fill: var(--gold); }
.rate-bridge__txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.rate-bridge__txt strong { font-size: 16.5px; font-weight: 700; letter-spacing: 0.01em; }
.rate-bridge__txt small { font-size: 11.5px; opacity: 0.78; margin-top: 2px; }
.rate-bridge__arw { flex: none; font-size: 17px; transition: transform 0.28s ease; }
.rate-bridge__btn:hover .rate-bridge__arw { transform: translateX(4px); }

/* Two-button stack (gold live-rates pill + teal Other Mauritius Offers pill)
   sharing the seam-straddle: centred, with consistent spacing between them. */
.rate-bridge__stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Teal variant of the bridge pill — identical size, radius, typography and
   motion to the gold pill, in the brand teal. Reused by "Other Mauritius Offers"
   and "Back to Beachcomber". White text on teal clears AA. */
.rate-bridge__btn--teal {
  background: linear-gradient(180deg, #0E8C8C, var(--teal));
  color: #ffffff;
  box-shadow: 0 16px 38px rgba(11,110,110,0.34), 0 3px 10px rgba(0,0,0,0.10);
}
.rate-bridge__btn--teal:hover { color: #ffffff; box-shadow: 0 24px 50px rgba(11,110,110,0.44), 0 4px 12px rgba(0,0,0,0.12); }
.rate-bridge__btn--teal:focus-visible { outline-color: var(--gold); }
.rate-bridge__btn--teal .rate-bridge__ico { background: #EAF6F5; box-shadow: inset 0 0 0 1px rgba(11,110,110,0.5); }
.rate-bridge__btn--teal .rate-bridge__ico svg { fill: var(--teal); }
/* "Back" variant: the icon already points the way, so there is no trailing arrow;
   trim the right padding it used to occupy so the pill stays balanced. */
.rate-bridge__btn--back { padding-right: 22px; }

@media (max-width: 520px) {
  .rate-bridge__btn { gap: 10px; padding: 10px 18px 10px 10px; }
  .rate-bridge__ico { width: 34px; height: 34px; }
  .rate-bridge__ico svg { width: 16px; height: 16px; }
  .rate-bridge__txt strong { font-size: 15px; }
  .rate-bridge__txt small { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rate-bridge__btn, .rate-bridge__arw { transition: none; }
  .rate-bridge__btn:hover { transform: none; }
  .rate-bridge__btn:hover .rate-bridge__arw { transform: none; }
}

/* ===== Reusable "invitation" CTA for beneath a destination map =====
   Styled as an editorial invitation rather than a navigation control. Generic on
   purpose: no Mauritius-specific values, so the same block can bridge any
   destination map into its resort collection. */
.map-invite {
  position: relative;
  display: block;
  max-width: 680px;
  margin: 54px auto 0;
  padding: 40px 44px 44px;
  text-align: center;
  border-radius: 22px;
  overflow: hidden;
  /* Two-layer paint: the card surface clipped to the padding box, and a brushed
     gold gradient clipped to the border box — a 1px metallic edge without an
     extra wrapper element. */
  border: 1px solid transparent;
  background-image:
    linear-gradient(168deg, #F4FBFA 0%, #E4F3F1 46%, #F7F2E4 100%),
    linear-gradient(140deg, rgba(196,154,60,0.85), rgba(196,154,60,0.25) 38%, rgba(196,154,60,0.75));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 22px 54px rgba(11,110,110,0.16), 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.3s ease;
}
/* Soft tropical depth — the same turbulence trick as the cork board, kept very
   low so it reads as paper grain rather than texture. */
.map-invite::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
/* Shimmer sweeps once per cycle rather than running continuously — the pause is
   most of the animation, so it reads as an occasional catch of light. */
.map-invite::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(104deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: inviteShimmer 10s ease-in-out infinite;
}
@keyframes inviteShimmer {
  0%, 86%   { transform: translateX(-130%); }
  97%, 100% { transform: translateX(130%); }
}
.map-invite:hover { transform: translateY(-4px); box-shadow: 0 30px 66px rgba(11,110,110,0.22), 0 4px 12px rgba(0,0,0,0.07); }

/* ocean divider bridging the map into the card */
.map-invite__divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.map-invite__divider i { display: block; width: 68px; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,154,60,0.7)); }
.map-invite__divider i:last-child { background: linear-gradient(90deg, rgba(196,154,60,0.7), transparent); }
.map-invite__divider svg { width: 13px; height: 13px; fill: var(--gold); flex: none; }

.map-invite__badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 16px; padding: 6px 15px 6px 11px;
  border-radius: 999px; border: 1px solid rgba(196,154,60,0.45);
  background: rgba(255,255,255,0.6);
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #8a6410;
}
.map-invite__badge svg { width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 1.6; }

.map-invite__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 4vw, 40px); line-height: 1.14;
  color: var(--text); margin: 0 auto 16px; max-width: 18ch;
}
.map-invite__title em { font-style: italic; color: var(--teal); }
.map-invite__text {
  margin: 0 auto 30px; max-width: 52ch;
  font-size: 15.5px; line-height: 1.75; color: var(--muted);
}

.map-invite__btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 16px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #23A8A0 0%, var(--teal) 54%, #08525C 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(11,110,110,0.34), inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.28s ease;
}
.map-invite__btn:hover {
  transform: scale(1.035); color: #fff;
  /* gold illumination rather than a heavier teal shadow */
  box-shadow: 0 18px 40px rgba(11,110,110,0.38), 0 0 0 2px rgba(196,154,60,0.85), 0 0 26px rgba(196,154,60,0.42);
}
.map-invite__btn:active { transform: scale(1.01); }
.map-invite__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.map-invite__label { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.map-invite__arw { flex: none; font-size: 17px; transition: transform 0.28s ease; }
.map-invite__btn:hover .map-invite__arw { transform: translateX(5px); }

/* Scroll-in reveal. Visible by default — js/reveal.js only ADDS the animation
   class and strips it again once finished, so a failed script leaves the card
   readable rather than stranded at opacity 0. */
[data-reveal].is-revealing { animation: mapInviteIn 0.45s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes mapInviteIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .map-invite { margin-top: 40px; padding: 30px 20px 32px; border-radius: 18px; }
  .map-invite__divider i { width: 46px; }
  .map-invite__text { font-size: 15px; margin-bottom: 26px; }
  /* full-width tap target on mobile */
  .map-invite__btn { display: flex; width: 100%; padding: 16px 18px; gap: 9px; }
  .map-invite__label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-invite, .map-invite__btn, .map-invite__arw { transition: none; }
  .map-invite::after { animation: none; }
  .map-invite:hover, .map-invite__btn:hover { transform: none; }
  .map-invite__btn:hover .map-invite__arw { transform: none; }
  [data-reveal].is-revealing { animation: none; }
}

/* ===== Custom motorcycle tours — photo with an illustrated route ===== */
.moto-shot {
  position: relative; margin: 0;
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.moto-shot img { display: block; width: 100%; height: auto; }
/* preserveAspectRatio="none" is safe here: the image keeps its own ratio via
   height:auto, so the overlay stretches by an equal factor on both axes and the
   labels are never distorted. */
.moto-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mr-line {
  fill: none; stroke: #FFFFFF; stroke-width: 3.5;
  stroke-linecap: round; stroke-dasharray: 1 13;
  opacity: 0.85;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.mr-stop circle { fill: #FFFFFF; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.mr-stop text {
  fill: #FFFFFF; font-family: var(--font-body);
  font-size: 21px; font-weight: 600; letter-spacing: 0.04em;
  text-anchor: middle;
  paint-order: stroke; stroke: rgba(4,20,30,0.55); stroke-width: 4px;
}
.mr-pin { fill: var(--gold); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.mr-pin__dot { fill: #08202F; }

@media (max-width: 900px) {
  /* the labels would crowd once the photo drops below ~420px wide */
  .mr-stop text { font-size: 26px; }
  .mr-line { stroke-width: 4.5; }
}

/* ===== Notice panel — high-visibility guidance, reusable ===== */
.notice {
  display: flex; align-items: flex-start; gap: 18px;
  max-width: 760px; margin: 30px auto 0;
  padding: 24px 26px;
  border-radius: var(--radius-card);
  text-align: left;
}
.notice--warn {
  background: linear-gradient(180deg, #FFFCF3 0%, #FDF6E3 100%);
  border: 1px solid rgba(196,154,60,0.45);
  border-left: 4px solid var(--gold);
  box-shadow: 0 8px 24px rgba(140,102,20,0.10);
}
.notice__icon { flex: none; width: 30px; height: 30px; color: #A8791B; margin-top: 2px; }
.notice__icon svg { width: 100%; height: 100%; }
.notice__body { min-width: 0; }
.notice__title {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 21px; line-height: 1.25; color: #6E4E0C;
}
/* #4A4235 on this cream ground clears AA comfortably; the muted grey used
   elsewhere would not against a tinted background. */
.notice__body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.68; color: #4A4235; }
.notice__body p:last-child { margin-bottom: 0; }
.notice__body strong { color: #5C4409; font-weight: 700; }
.notice__action {
  margin-top: 14px !important; padding-top: 14px;
  border-top: 1px solid rgba(196,154,60,0.35);
}

@media (max-width: 620px) {
  .notice { flex-direction: column; gap: 12px; padding: 20px 18px; margin-top: 24px; }
  .notice__icon { width: 26px; height: 26px; }
  .notice__title { font-size: 19px; }
  .notice__body p { font-size: 14px; }
}

/* ===== Other Destinations — world wonders feature ===== */
.wonders { position: relative; margin: 0 auto 44px; max-width: 720px; }
.wonders__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(11,110,110,0.18), 0 3px 10px rgba(0,0,0,0.07);
}
/* The globe clip sits exactly over the static image (same square, so no
   distortion and no layout shift — the image below keeps driving the height).
   It stays hidden until playback actually reveals it, so there is never a blank
   or black frame; the image simply shows through until the crossfade completes.
   js/globe-video.js plays it once on hover / scroll-into-view, then removes
   .is-playing to fade cleanly back to the image. */
.wonders__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  opacity: 0; visibility: hidden;
  transition: opacity 340ms ease;
  pointer-events: none;
}
.wonders.is-playing .wonders__video { opacity: 1; visibility: visible; }
/* Mute/unmute control — unobtrusive, inside the globe area, only while playing. */
.wonders__mute {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(15, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease, background 160ms ease;
}
.wonders.is-playing .wonders__mute { opacity: 1; visibility: visible; transform: none; }
.wonders__mute:hover { background: rgba(15, 20, 20, 0.72); }
.wonders__mute:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wonders__mute svg { width: 18px; height: 18px; display: block; pointer-events: none; }
.wonders__mute .wonders__mi--off { display: none; }
.wonders__mute.is-muted .wonders__mi--on { display: none; }
.wonders__mute.is-muted .wonders__mi--off { display: block; }
/* Body copy is left-aligned in a centred measure: a 180-word paragraph set
   centred is noticeably harder to read than the heading above it. */
.wonders-copy { max-width: 68ch; margin-inline: auto; }
.wonders-copy p { font-size: 16px; line-height: 1.75; color: var(--muted); margin-bottom: 18px; }
/* Scoped under .wonders-copy so it outranks `.wonders-copy p`, which would
   otherwise win on specificity and render this as plain grey body text. */
.wonders-copy .wonders-close {
  margin: 28px 0 0; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display); font-style: italic;
  font-size: 23px; line-height: 1.5; color: var(--teal); text-align: center;
}
.wonders-copy .wonders-cta { margin: 28px 0 0; text-align: center; }

@media (max-width: 620px) {
  .wonders { margin-bottom: 32px; }
  .wonders-copy p { font-size: 15.5px; }
  .wonders-copy .wonders-close { font-size: 20px; padding-top: 20px; }
}

/* ===== (DBC&TDH) — the hidden memory board =====
   CSS columns rather than a JS masonry: the mix of portrait, landscape and
   square photos supplies the size variety on its own, at zero scripting cost.
   The scatter (rotation, nudge, spacing) is set per photo from build-pages.ps1
   as custom properties, so it is fixed rather than random — the board looks the
   same on every build and on every visit. */
.egg { background: var(--sand); }
.egg-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
/* The monogram — the payoff for finding the footer trigger, so it is sized to be
   seen. Scoped to this page: .eyebrow is shared by every section head on the
   site and must keep its 11px elsewhere. clamp() keeps it inside a 375px screen. */
.egg-head .eyebrow { font-size: clamp(26px, 3.6vw, 44px); margin-bottom: 18px; }
.egg-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 5.6vw, 66px); line-height: 1.04;
  color: var(--teal); margin: 0 0 20px;
}
.egg-sub { max-width: 60ch; margin: 0 auto; font-size: 16px; line-height: 1.72; color: var(--muted); }

/* --- the board itself: a framed cork panel, not a page background ---
   Cork is generated from two SVG turbulence layers (fine grain + coarse
   granules) over a warm base, so it is a couple of hundred bytes rather than a
   texture download, and it never shows a tiling seam at any width. */
.egg-board {
  padding: 14px;
  border-radius: 10px;
  background:
    linear-gradient(158deg, #8a6039 0%, #6a4728 42%, #7d5732 72%, #5c3d21 100%);
  box-shadow:
    0 26px 60px rgba(0,0,0,0.34),
    0 3px 10px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.16);
}
.egg-cork {
  position: relative;
  padding: 40px 30px 34px;
  border-radius: 4px;
  background-color: #c19563;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.40'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.14' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 90% at 50% 30%, rgba(255,226,178,0.16), transparent 72%);
  box-shadow:
    inset 0 0 90px rgba(84,50,16,0.40),
    inset 0 2px 5px rgba(60,35,10,0.45);
}

.egg-grid { column-count: 4; column-gap: 22px; }

/* --- each photo as a print pinned to the board ---
   The white surround is padding on the figure rather than a border on the img,
   so the drop shadow falls from the paper edge the way a real print's would. */
.egg-item {
  break-inside: avoid;
  position: relative;
  margin: 0 0 var(--gap, 26px);
  padding: 9px;
  background: linear-gradient(178deg, #fffefa, #f6f1e6);
  border-radius: 2px;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.34),
    0 2px 6px rgba(0,0,0,0.24);
  /* --tilt scales the lean per breakpoint. Overriding one custom property is
     more reliable than restating the whole transform in each media block, and
     keeps the rotate/translate pair defined in exactly one place. */
  --tilt: 1;
  transform: rotate(calc(var(--rot, 0deg) * var(--tilt))) translateX(calc(var(--dx, 0px) * var(--tilt)));
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.38s ease;
}
.egg-item img { display: block; width: 100%; height: auto; border-radius: 1px; }
/* classic print vs polaroid — the deeper base gives the wall depth variation */
.egg-item--polaroid { padding: 10px 10px 30px; }

/* Pins and tape sit above their own photo but below a lifted neighbour. */
.egg-item--pin::before {
  content: ""; position: absolute; z-index: 2;
  top: -8px; left: 50%; margin-left: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9b86 0%, #d2453a 55%, #86211a 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,0.45), inset 0 -1px 2px rgba(0,0,0,0.3);
}
.egg-item--tape::after {
  content: ""; position: absolute; z-index: 2;
  top: -13px; left: -16px;
  width: 78px; height: 25px;
  transform: rotate(-38deg);
  background: linear-gradient(180deg, rgba(255,251,225,0.74), rgba(233,226,192,0.60));
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}

/* Lift straightens the photo and raises it clear of its neighbours. */
.egg-item:hover, .egg-item:focus-within {
  transform: rotate(0deg) translateX(0) scale(1.045);
  box-shadow: 0 26px 52px rgba(0,0,0,0.42), 0 4px 10px rgba(0,0,0,0.26);
  z-index: 3;
}

.egg-foot {
  margin: 44px auto 0; text-align: center;
  font-family: var(--font-display); font-style: italic;
  /* 600 is the heaviest italic loaded for Cormorant Garamond — going higher
     would silently synthesise a faux-bold and lose the letterforms. */
  font-weight: 600;
  font-size: clamp(21px, 2.9vw, 31px);
  line-height: 1.4;
  color: var(--teal);
}

/* Tilt is eased back as the columns narrow. A 9° lean that reads as scatter in a
   280px column starts overhanging the board edge in a 200px one, so each step
   down scales it rather than waiting for the mobile breakpoint. */
@media (max-width: 1000px) {
  .egg-grid { column-count: 3; }
  .egg-cork { padding: 32px 26px 26px; }
  .egg-item { --tilt: 0.66; }
}
@media (max-width: 700px) {
  .egg-grid { column-count: 2; column-gap: 16px; }
  .egg-cork { padding: 24px 18px 18px; }
  .egg-board { padding: 10px; }
  .egg-item { --tilt: 0.5; padding: 7px; }
  .egg-item--polaroid { padding: 7px 7px 20px; }
}
@media (max-width: 430px) {
  /* Single column: the photo is nearly as wide as the board, so even a small
     lean pushes its corners past the cork edge. */
  .egg-grid { column-count: 1; }
  .egg-item { --tilt: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
  .egg-item { transition: none; }
  .egg-item:hover, .egg-item:focus-within { transform: rotate(var(--rot, 0deg)); }
}

/* ===== the pinned launch-offer poster + its lightbox =====
   Only this one tile opens anything; every other photo stays a plain image. */
.egg-promo {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative; border-radius: 1px;
}
.egg-promo img { display: block; width: 100%; height: auto; border-radius: 1px; }
.egg-promo__hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(11,29,45,0.88); color: #fff;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.3s ease;
}
.egg-item--promo:hover .egg-promo__hint,
.egg-promo:focus-visible .egg-promo__hint { opacity: 1; }
.egg-promo:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.egg-lb[hidden] { display: none; }
.egg-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,20,32,0.86);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow-y: auto; padding: 26px 16px;
  display: flex; align-items: flex-start; justify-content: center;
}
/* The sheet's width is derived from the viewport height and the poster's 2:3
   ratio, so the image fills it exactly — no letterbox bars — and the panel
   beneath lines up with the image edges instead of overhanging them. */
.egg-lb__sheet {
  position: relative; width: 100%; margin: auto;
  max-width: min(560px, 100%, max(300px, 66vh * 0.667));
}
.egg-lb__close {
  position: sticky; top: 0; float: right;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.92); color: #11202e;
  font-size: 24px; line-height: 1; z-index: 3;
}
.egg-lb__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* No max-height or object-fit needed: the sheet is already sized so the poster
   at 100% width lands inside the viewport at its true aspect ratio. */
.egg-lb__img {
  display: block; width: 100%; height: auto;
  border-radius: 10px 10px 0 0; background: #fff;
}
.egg-lb__panel {
  background: #fff; border-radius: 0 0 12px 12px;
  padding: 30px 30px 32px; text-align: center;
}
.egg-lb__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 4.4vw, 32px); line-height: 1.15;
  color: var(--teal); margin: 0 0 12px;
}
.egg-lb__lead { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.egg-lb__body { margin: 0 0 24px; font-size: 14.5px; line-height: 1.68; color: var(--muted); }
.egg-lb__act { margin: 0 0 20px; }
/* The dominant element in the panel. */
.egg-lb__cta {
  display: inline-block; padding: 17px 40px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #2a2208; font-size: 17px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 14px 30px rgba(196,154,60,0.42);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.egg-lb__cta:hover { transform: translateY(-2px); color: #2a2208; box-shadow: 0 20px 40px rgba(196,154,60,0.5); }
.egg-lb__cta:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.egg-lb__ref[hidden] { display: none; }
.egg-lb__ref, .egg-lb__code {
  margin: 0 auto 16px; padding: 14px 18px; max-width: 420px;
  border-radius: 12px; background: var(--teal-pale);
}
.egg-lb__code { background: #FBF6EA; border: 1px dashed rgba(196,154,60,0.65); }
.egg-lb__reflabel, .egg-lb__codelabel {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.egg-lb__refno, .egg-lb__codeno {
  display: block; font-size: 19px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--teal); word-break: break-all;
}
.egg-lb__codeno { color: #8a6410; }
.egg-lb__steps { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); text-align: left; }
.egg-lb__steps p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.egg-lb__steps ul { list-style: none; margin: 0 0 12px; padding: 0; }
.egg-lb__steps li {
  position: relative; padding-left: 20px; margin: 6px 0;
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.egg-lb__steps li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.egg-lb__fine { font-size: 12.5px; font-style: italic; }

/* the strip shown on the Europamundo quotes page once a reference is held */
.egg-refnote {
  margin: 0 0 30px; padding: 14px 20px;
  border-radius: 12px; border: 1px dashed rgba(196,154,60,0.7);
  background: #FBF6EA; text-align: center;
  font-size: 14px; line-height: 1.6; color: var(--text);
}
.egg-refnote b { color: #8a6410; letter-spacing: 0.03em; }

@media (max-width: 560px) {
  .egg-lb { padding: 12px 10px; }
  .egg-lb__panel { padding: 24px 20px 26px; }
  .egg-lb__cta { display: block; padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .egg-lb__cta, .egg-promo__hint { transition: none; }
  .egg-lb__cta:hover { transform: none; }
}

/* simple two-col feature row for value props */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.value-grid .feature { grid-template-columns: 1fr; }
.value-grid .feature__icon { margin-bottom: 10px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }

/* ===== Gilded Seal icons — Mauritius "Plan It Right" tiles only ===== */
.plan-seal .info-card { text-align: center; }
.plan-seal .info-card .feature__icon {
  width: 62px; height: 62px; border-radius: 50%;
  margin: 0 auto 16px;
  background: #FBF8F1;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px #FBF8F1, inset 0 0 0 5px rgba(196,154,60,0.4);
}
.plan-seal .feature__icon svg { width: 27px; height: 27px; }
.plan-seal .feature__icon .fl { fill: var(--teal-pale); stroke: none; }
.plan-seal .feature__icon .ln { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-seal .feature__icon .au { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan-seal .feature__icon .aud { fill: var(--gold); stroke: none; }

/* =====================================================================
   Static blog (generated from content/blog/*.md by blog-lib.ps1)
   Namespaced classes; reuses the site tokens/fonts. No dependency on the
   retired headless-WordPress .blog-list / .blog-state rules above.
   ===================================================================== */

/* ---- Listing grid + cards ---- */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-cards--index { margin-top: 8px; }
@media (max-width: 900px) { .blog-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-cards { grid-template-columns: 1fr; } }

.blog-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0,0,0,0.16); }
.blog-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.blog-card__media { aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--teal-pale), #dbeceb); overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__cluster { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.blog-card__title { font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1.15; color: var(--teal); margin: 0; }
.blog-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.blog-card__more { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--gold-ink); }
.blog-empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.blog-empty a { color: var(--teal); text-decoration: underline; }

/* ---- Article layout ---- */
.container--article { max-width: 1080px; }
.article { padding: 40px 0 8px; }
.article__header { max-width: 760px; margin: 0 auto; }
.article__cluster { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; margin: 0 0 10px; }
.article__header h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 0; color: var(--text); text-wrap: balance; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.article__meta .article__author { color: var(--text); font-weight: 600; }
.article__updated { color: var(--gold-ink); }

/* Breadcrumb (visible on articles only) */
.breadcrumb-nav { max-width: 760px; margin: 0 auto 22px; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: 13px; color: var(--muted); }
.crumbs li { display: flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--border); }
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--muted); }

/* Hero */
.article__hero { margin: 26px auto 0; max-width: 1080px; }
.article__hero picture, .article__hero img { display: block; width: 100%; border-radius: var(--radius-card); }
.article__hero img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }

/* Two-column body + TOC */
.article__layout { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 760px; margin: 34px auto 0; }
@media (min-width: 1000px) {
  .article__layout { grid-template-columns: 220px minmax(0, 1fr); max-width: 1000px; gap: 56px; }
  .article-toc { order: -1; }
}
.article__body { min-width: 0; }

/* TOC */
.article-toc { align-self: start; }
@media (min-width: 1000px) { .article-toc { position: sticky; top: 96px; } }
.article-toc__title { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 12px; }
.article-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; border-left: 2px solid var(--border); }
.article-toc a { display: block; padding-left: 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s; }
.article-toc a:hover { color: var(--teal); }
.article-toc a.is-current { color: var(--teal); border-left-color: var(--gold); font-weight: 600; }

/* Article prose */
.article__body > h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.15; color: var(--text); margin: 44px 0 14px; scroll-margin-top: 96px; }
.article__body > h3 { font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--text); margin: 30px 0 10px; }
.article__body > h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--gold-ink); margin: 24px 0 8px; }
.article__body p { font-size: 17px; line-height: 1.75; color: var(--text); margin: 0 0 18px; }
.article__body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.article__body ul, .article__body ol { margin: 0 0 20px; padding-left: 0; display: grid; gap: 10px; }
.article__body ul li { position: relative; list-style: none; padding-left: 26px; font-size: 17px; line-height: 1.7; color: var(--text); }
.article__body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.article__body ol { padding-left: 22px; }
.article__body ol li { list-style: decimal; font-size: 17px; line-height: 1.7; color: var(--text); padding-left: 6px; }
.article__body blockquote { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-size: 22px; line-height: 1.4; color: var(--teal); }
.article__body blockquote p { font-size: inherit; color: inherit; margin: 0; }
/* Inline figures — editorial, magazine-style layout.
   Default = a medium, centred image (not full-column) with a tight rhythm.
   Modifier classes (set from the markdown {left|right|small|feature} token and
   the image's real orientation) turn images into floats that the text wraps
   around on tablet/desktop; everything unfloats and stacks on mobile.
   height:auto is explicit so a constrained width can never stretch an image. */
.article__figure { margin: 20px auto; max-width: 560px; }
.article__figure img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.article__figure figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }

/* Supporting shot: smaller centred image. */
.article__figure--small { max-width: 360px; }

/* Feature: prominent. Landscape runs the full column; a portrait feature stays
   large and centred but is capped so it doesn't dominate the page. */
.article__figure--feature { max-width: 100%; margin: 30px auto; }
.article__figure--feature.article__figure--portrait { max-width: 470px; }

/* Floated figures — text wraps alongside. */
.article__figure--left, .article__figure--right {
  max-width: none; width: clamp(240px, 44%, 340px);
  margin-top: 6px; margin-bottom: 20px;
}
.article__figure--left  { float: left;  margin-right: 32px; }
.article__figure--right { float: right; margin-left: 32px; }
.article__figure--left.article__figure--small,
.article__figure--right.article__figure--small { width: clamp(190px, 34%, 250px); }
.article__figure--left figcaption, .article__figure--right figcaption { text-align: left; }

/* Floats must never bleed across a section or block boundary. */
.article__body > h2, .article__body > h3, .article__body > hr,
.article-cta, .faq, .article-share, .related { clear: both; }

/* Tablet: keep the side-by-side composition, give the prose a touch more room. */
@media (max-width: 900px) {
  .article__figure--left, .article__figure--right { width: clamp(220px, 42%, 300px); }
  .article__figure--left  { margin-right: 24px; }
  .article__figure--right { margin-left: 24px; }
}
/* Mobile: unfloat and stack, but keep a size hierarchy rather than blowing every
   image up to full-width (which would re-create a very long scroll on a phone).
   Feature and medium frames get the room; supporting (small) shots stay compact
   and centred so the page scrolls far less while the prose stays full-width and
   readable. The smallest WebP renditions load via the sizes hint. */
@media (max-width: 620px) {
  .article__figure { max-width: 100%; margin: 16px auto; }
  .article__figure--left, .article__figure--right { float: none; width: auto; margin: 16px auto; }
  .article__figure--small,
  .article__figure--left.article__figure--small,
  .article__figure--right.article__figure--small {
    float: none; width: 70%; max-width: 70%; margin: 16px auto;
  }
  .article__figure--feature.article__figure--portrait { max-width: 84%; }
  .article__figure--left figcaption, .article__figure--right figcaption { text-align: center; }
}
/* Very narrow phones: give supporting shots a touch more size so they stay legible. */
@media (max-width: 380px) {
  .article__figure--small,
  .article__figure--left.article__figure--small,
  .article__figure--right.article__figure--small { width: 78%; max-width: 78%; }
}
.article__body hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }

/* Tables (Markdown pipe tables) — scroll horizontally on narrow screens */
.article-table__scroll { overflow-x: auto; margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius-card); -webkit-overflow-scrolling: touch; }
.article-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; background: var(--white); }
.article-table th, .article-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.article-table thead th { background: var(--teal-pale); color: var(--teal); font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; }
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sand) 45%, var(--white)); }
.article-table td:first-child { font-weight: 600; color: var(--text); }

/* FAQ */
.faq { margin: 44px 0 8px; }
.faq > h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.55rem, 3vw, 2rem); color: var(--text); margin: 0 0 18px; scroll-margin-top: 96px; }
.faq__item { border-top: 1px solid var(--border); padding: 18px 0; }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__q { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--text); margin: 0 0 8px; }
.faq__a p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }

/* In-article CTA */
.article-cta { margin: 40px 0; border-radius: var(--radius-card); background: var(--teal); color: #fff; padding: 34px 32px; }
.article-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: #fff; margin: 0 0 8px; }
.article-cta p { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.65; margin: 0 0 20px; max-width: 56ch; }
.article-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.article-cta .btn--outline-teal { border-color: rgba(255,255,255,0.7); color: #fff; }
.article-cta .btn--outline-teal:hover { background: rgba(255,255,255,0.12); }

/* Master social-share component (blog-lib New-ShareBlock) — rendered BELOW the
   article content, centred, with platform-branded icon buttons. Same on every post. */
.article-share {
  max-width: 760px; margin: 40px auto 8px; padding-top: 30px;
  border-top: 1px solid var(--border); text-align: center;
}
.article-share__label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 16px;
}
.article-share__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; color: #fff; background: var(--muted);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: var(--shadow-sm);
}
.share-btn svg { width: 24px; height: 24px; display: block; }
.share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.share-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.share-btn--whatsapp { background: #25D366; }
.share-btn--facebook { background: #1877F2; }
.share-btn--x        { background: #000; }
.share-btn--copy     { background: var(--teal); }
.share-btn--copy svg { width: 21px; height: 21px; }
.share-btn.is-copied { background: var(--good, #2E7D5B); }
@media (max-width: 480px) { .share-btn { width: 46px; height: 46px; } .article-share__btns { gap: 12px; } }

/* <picture> wrappers fill their media box (cards / figures / hero) */
.blog-card__media picture, .article__figure picture { display: block; width: 100%; height: 100%; }
.article__figure picture img { border-radius: var(--radius-card); }

/* Related */
.related { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 36px; }
.related__title { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--text); margin: 0 0 22px; }

/* =====================================================================
   Holiday Factory offers — custom search & filter bar (js/offers-search.js)
   Instant client-side filtering over the cached JSON; renders into the
   existing .offer-card grid, so the cards themselves are unchanged.
   ===================================================================== */
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.offers-filter {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 18px;
  display: grid; gap: 14px;
}
.offers-filter__search { position: relative; display: flex; align-items: center; }
.offers-filter__ico { position: absolute; left: 15px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.offers-filter__search input {
  width: 100%; font: inherit; font-size: 16px; padding: 13px 16px 13px 44px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--sand);
  color: var(--text); transition: border-color .15s, background .15s;
}
.offers-filter__search input:focus { outline: none; border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 3px var(--teal-pale); }
.offers-filter__facets { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.offers-filter__field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 130px; }
.offers-filter__field label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.offers-filter__field select {
  font: inherit; font-size: 14.5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--white); color: var(--text); cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.offers-filter__field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-pale); }
.offers-filter__check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); cursor: pointer; padding-bottom: 10px; flex: 0 0 auto; }
.offers-filter__check input { width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; }
.offers-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.offers-count { font-size: 14px; color: var(--muted); margin: 0; font-weight: 500; }
.offers-reset {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--teal); background: none; border: none;
  cursor: pointer; padding: 4px 6px; border-radius: 6px; text-decoration: underline; text-underline-offset: 2px;
}
.offers-reset:hover { color: var(--teal-light); }
@media (max-width: 560px) {
  .offers-filter__field { flex-basis: calc(50% - 8px); min-width: 0; }
  .offers-toolbar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* YouTube facade (js/blog-youtube.js): reserves 16:9 up front => no CLS; loads
   nothing from YouTube until the visitor presses play. */
.yt-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 26px 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(26, 144, 144, 0.35), transparent 60%),
    linear-gradient(135deg, var(--teal-deep, #0A4F49), #0b6e6e);
}
.yt-embed__btn {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 100%;
  border: 0; margin: 0; padding: 20px;
  background: transparent; color: #fff; cursor: pointer;
  font: inherit;
  transition: background 0.2s ease;
}
.yt-embed__btn:hover { background: rgba(0, 0, 0, 0.12); }
.yt-embed__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.yt-embed__play { width: 74px; height: 52px; display: block; transition: transform 0.2s ease; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); }
.yt-embed__btn:hover .yt-embed__play { transform: scale(1.06); }
.yt-embed__bg { fill: #E5443F; }                 /* on-brand red, not YouTube red */
.yt-embed__tri { fill: #fff; }
.yt-embed__label {
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25;
  text-align: center; max-width: 30ch; text-wrap: balance;
}
.yt-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .yt-embed__play, .yt-embed__btn:hover .yt-embed__play { transition: none; transform: none; }
}

/* =====================================================================
   Visa & Entry "living passport" - destination stamps around the header
   (js/visa-stamps.js). Overlay sits above the teal wash, below the hero
   text (z-index:1 vs .page-hero__inner z-index:2), so the heading is never
   obscured. Absolute + pointer-events:none => no layout impact, no CLS.
   ===================================================================== */
.stamp-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;          /* clip stamps to the hero; never spill onto nav/content */
  pointer-events: none;
  contain: strict;           /* isolate paint/layout for performance */
}
.stamp {
  position: absolute;
  opacity: 0;                /* WAAPI drives the press-in / fade-out */
  will-change: transform, opacity;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
  mix-blend-mode: normal;
}
.stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Reduced motion: the script renders a single faint static stamp and never
   animates; make doubly sure nothing here transitions. */
@media (prefers-reduced-motion: reduce) {
  .stamp { transition: none !important; animation: none !important; }
}