/* ============================================================
   ELITE ISLAND RESORTS — Stylesheet
   Fonts: Rufina (titles) · Figtree (body/menus)
   Colors: One & Only Aesthesis palette
   ============================================================ */

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

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  --navy:       #111111;
  --navy-mid:   #2A2A2A;
  --navy-soft:  #444444;
  --gold:       #5B9CBD;
  --gold-light: #89B8D4;
  --sky:        #D5EDF9;
  --gold-pale:  #C5DFF0;
  --amber:      #C9933F;
  --cream:      #f3f3f3;
  --cream-dark: #e8e8e8;
  --white:      #FFFFFF;
  --charcoal:   #1A1A1A;
  --gray:       #666666;
  --gray-light: #DEDEDE;

  /* Side gutter for centred content columns. Referenced by page-level
     styles (.offers-intro-inner and friends) that previously had no value
     to resolve against, so the padding was silently dropped. */
  --gutter:     1.5rem;

  --font-title: 'Cinzel', Georgia, serif;
  --font-body:  'Figtree', -apple-system, sans-serif;

  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --t:          0.3s;
  --t-slow:     0.6s;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x también en html, no sólo en body: html es la caja que desplaza,
   así que el documento crecía a lo ancho (469px en Resorts dentro de una
   pantalla de 390) y la cabecera fija, que se mide contra el viewport de
   maquetación, se estiraba con él. De ahí que Search saliera recortado. */
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { font-family: var(--font-body); color: var(--charcoal); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; }


/* Visually hidden, still read by screen readers. Defined here once: it was
   previously inlined on some pages only, so headings like the footer's
   "Site Footer" were showing as visible text on the rest. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ─── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; line-height: 1.2; letter-spacing: 0.12em; }
h1 { font-size: clamp(1.8rem, 3.8vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.55rem); }
h4 { font-size: clamp(0.9rem, 1.4vw, 1.1rem); }
h5 { font-size: 0.85rem; }
p  { font-size: 1rem; line-height: 1.85; color: var(--charcoal); }

/* ─── Utilities ──────────────────────────────────────────── */
.container { max-width: 1380px; margin: 0 auto; padding: 0 2.5rem; }
.text-center  { text-align: center; }
.text-white   { color: var(--white) !important; }
.text-navy    { color: var(--navy) !important; }
.text-gold    { color: var(--gold) !important; }
.bg-navy      { background-color: var(--navy); }
.bg-cream     { background-color: var(--cream); }
.bg-white     { background-color: var(--white); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 1.5rem 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2.6rem;
  border-radius: 1px;
  border: 1px solid transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-navy    { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-navy:hover { background: var(--gold); border-color: var(--gold); }
.btn-gold    { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-gold:hover { background: var(--navy); border-color: var(--navy); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); }
.btn-outline-white:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-outline-gold  { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline-gold:hover  { background: var(--gold); color: var(--white); }
.btn-outline-navy  { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover  { background: var(--navy); color: var(--white); }

/* ─── Scroll Animations ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.from-left  { transform: translateX(-40px); }
.reveal.from-right { transform: translateX( 40px); }
.reveal.visible    { opacity: 1; transform: translate(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: box-shadow var(--t) var(--ease);
}
/* Solid once the hero is behind us. Translucent black works over the hero
   photograph and nowhere else: over a white section it turns into a grey
   veil you can read the page through, and the white logo lands on light
   grey with almost no contrast. */
.site-header.scrolled .main-nav {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 18px rgba(0,0,0,0.18);
}
.site-header.scrolled .nav-logo img { filter: brightness(0) invert(1); }
.site-header.scrolled .nav-links > li > a,
.site-header.scrolled .nav-links > li > button { color: var(--white); }

/* Utility bar */
.utility-bar {
  background: var(--navy);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  padding: 0.45rem 2.5rem;
}
.utility-bar a,
.utility-bar button {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: none;
  border: none;
  transition: color var(--t);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.utility-bar a:hover,
.utility-bar button:hover { color: var(--gold-light); }
.utility-bar svg { width: 14px; height: 14px; }

/* Main nav */
.main-nav {
  background: rgba(15,15,15,0.42);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 70px;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.nav-logo img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.4s ease;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-links > li { position: relative; }

.nav-links > li > a,
.nav-links > li > button {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0 0.9rem;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  white-space: nowrap;
  transition: color var(--t);
  position: relative;
}
.nav-links > li > a::after,
.nav-links > li > button::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0.9rem; right: 0.9rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t) var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li > button:hover,
.nav-links > li.open > button {
  color: var(--gold);
}
.nav-links > li > a:hover::after,
.nav-links > li > button:hover::after,
.nav-links > li.open > button::after {
  transform: scaleX(1);
}

.nav-arrow {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t);
  display: inline-block;
}
.nav-links > li.open .nav-arrow { transform: rotate(-135deg) translateY(-2px); }

/* Phone CTA */
/* The reservations number sits above the Book Now button, per the 9.30 audit.
   Same place on every page. */
.utility-phone {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--white) !important;
  text-transform: none !important;
}
.utility-phone:hover { color: var(--gold-light) !important; }
@media (max-width: 760px) {
  .utility-phone { font-size: 0.72rem !important; }
}
/* A 390px la barra medía 406px de contenido: Search quedaba cortado por la
   izquierda y "For Travel Advisors" caía a dos líneas. Esos dos enlaces pasan
   al panel de la hamburguesa y aquí quedan los tres que sí caben. */
@media (max-width: 560px) {
  .utility-bar {
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
  }
  .utility-bar a,
  .utility-bar button { font-size: 0.6rem; letter-spacing: 0.08em; white-space: nowrap; }
  .utility-bar .utility-hide-sm { display: none; }
  .utility-phone { font-size: 0.68rem !important; }
  .utility-bar svg { width: 12px; height: 12px; }
}

.nav-phone {
  background: var(--gold) !important;
  color: var(--white) !important;
  padding: 0 1.4rem !important;
  /* .nav-links > li > a sets height:70px and outranks a single class, which
     is why the other properties here carry !important too. A contained
     rectangle inside the bar rather than a full-height slab. */
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  align-self: center;
  border: none;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  transition: background var(--t) !important;
  margin-left: 0.5rem;
}
.nav-phone:hover { background: var(--navy) !important; }
.nav-phone::after { display: none !important; }

/* ─── Destinations Mega Panel ────────────────────────────── */
.destinations-mega {
  position: fixed;
  top: 108px; /* utility + nav height */
  left: 0; right: 0;
  background: var(--navy);
  z-index: 899;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease);
  pointer-events: none;
}
.destinations-mega.open {
  max-height: 520px;
  opacity: 1;
  pointer-events: all;
}
.destinations-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2.5rem 3rem;
  max-width: 1380px;
  margin: 0 auto;
}
.dest-card {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  cursor: pointer;
  display: block;
}
.dest-card img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow);
  filter: brightness(0.65);
}
.dest-card:hover img { transform: scale(1.05); filter: brightness(0.8); }
.dest-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,27,45,0.85) 0%, transparent 60%);
}
.dest-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.75rem;
  color: var(--white);
}
.dest-card-body h3 { color: var(--white); font-size: 1.75rem; margin-bottom: 0.35rem; }
.dest-card-body p  { font-size: 0.8rem; color: rgba(255,255,255,0.75); margin-bottom: 1.1rem; line-height: 1.5; }
.dest-card-link {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(15,27,45,0.25);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}
.dest-card:hover .dest-card-link { color: var(--gold-pale); border-color: rgba(15,27,45,0.4); }

/* ─── Simple Dropdown (Resorts / Request Info) ───────────── */
.nav-dropdown {
  position: absolute;
  top: 100%; left: 0;
  min-width: 230px;
  background: var(--white);
  border-top: 2px solid var(--gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  z-index: 800;
}
.nav-links > li:hover .nav-dropdown,
.nav-links > li.open .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.nav-dropdown a {
  display: block;
  padding: 0.9rem 1.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--gray-light);
  transition: background var(--t), color var(--t), padding-left var(--t);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: var(--cream); color: var(--gold); padding-left: 2rem; }

/* Groups y For Travel Advisors viven sólo en la barra superior, que no cabe
   en un teléfono. Ahí se esconden de la barra y aparecen en el panel. */
.nav-mobile-only { display: none; }

/* Mobile hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
/* Blancas, no navy: la barra de navegación es oscura sobre la foto y sólida
   en navy al bajar, así que unas barras de #111 desaparecían en ambos casos. */
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  transition: transform var(--t), opacity var(--t);
  border-radius: 1px;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HOME PAGE HERO
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-parallax-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero-parallax-bg img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center 30%;
  margin-top: -7.5%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(15,27,45,0.25) 0%,
    rgba(15,27,45,0.45) 55%,
    rgba(15,27,45,0.72) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: 0 2rem;
  max-width: 920px;
}
.hero-content .eyebrow { color: var(--gold-pale); letter-spacing: 0.4em; }
.hero-content h1 { color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,0.35); margin-bottom: 1.5rem; }
.hero-content > p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  max-width: 620px;
  margin: 0 auto 2.5rem;
}

/* Hero search bar */
.hero-search {
  display: flex;
  background: rgba(255,255,255,0.96);
  border-radius: 2px;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.hero-search select,
.hero-search input {
  flex: 1;
  padding: 1rem 1.25rem;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--charcoal);
  outline: none;
  border-right: 1px solid var(--gray-light);
  min-width: 0;
}
.hero-search button {
  padding: 1rem 2rem;
  background: var(--navy);
  color: var(--white);
  border: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background var(--t);
  white-space: nowrap;
}
.hero-search button:hover { background: var(--gold); }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   DESTINATIONS STRIP (homepage)
   ============================================================ */

.destinations-strip {
  background: var(--white);
  padding: 5rem 2.5rem;
}
.destinations-strip-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.destinations-strip-header h2 { color: var(--navy); }
.destinations-strip-header .rule--center { background: var(--gold); }

.dest-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1380px;
  margin: 0 auto;
}
.dest-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.dest-tile-img {
  overflow: hidden;
}
.dest-tile-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: brightness(1);
  transition: transform 0.7s var(--ease);
  display: block;
}
.dest-tile:hover .dest-tile-img img { transform: scale(1.04); }
.dest-tile-body {
  padding: 1.5rem 0.25rem 0.75rem;
  text-align: center;
  background: var(--white);
}
.dest-tile-body h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: 0.4rem; letter-spacing: 0.15em; }
.dest-tile-body p  { font-size: 0.82rem; color: var(--gray); margin-bottom: 1rem; line-height: 1.6; }
.dest-tile-cta {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(15,27,45,0.25);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}
.dest-tile:hover .dest-tile-cta { border-color: var(--gold); }

/* ============================================================
   BRAND INTRO (homepage)
   ============================================================ */

.brand-intro {
  background: var(--cream);
  padding: 7rem 2.5rem;
}
.brand-intro-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.brand-intro-text h2 { color: var(--navy); margin-bottom: 1.5rem; }
.brand-intro-text p  { margin-bottom: 1.5rem; font-size: 1.05rem; }
.brand-intro-media {
  position: relative;
}
.brand-intro-media img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: 1px;
}
.brand-intro-media::before {
  content: '';
  position: absolute;
  top: -18px; left: -18px;
  right: 18px; bottom: 18px;
  border: 1px solid var(--gold);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}
.brand-intro-media img { position: relative; z-index: 1; }

/* ============================================================
   RESORTS CAROUSEL (homepage)
   ============================================================ */

.resorts-section {
  padding: 7rem 0;
  background: var(--white);
  overflow: hidden;
}
.resorts-header {
  text-align: center;
  padding: 0 2.5rem;
  margin-bottom: 3.5rem;
}
.resorts-header h2 { color: var(--navy); }

.resorts-track-wrap { position: relative; }
.resorts-track {
  display: flex;
  gap: 1.75rem;
  padding: 0 2.5rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.resorts-track::-webkit-scrollbar { display: none; }
.resorts-track::-webkit-scrollbar { display: none; }

.resort-card {
  flex: 0 0 365px;
  height: 520px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  background: var(--navy);
  cursor: pointer;
}
.resort-card img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow);
  filter: brightness(0.88);
}
.resort-card:hover img { transform: scale(1.06); filter: brightness(0.72); }
.resort-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  /* Tall enough to cover the three-line hierarchy (tag / line / name), not
     just the name and description, so nothing sits on bare photo. */
  height: 330px;
  background: linear-gradient(transparent 0%, rgba(15,27,45,0.52) 38%, rgba(15,27,45,0.97) 100%);
  z-index: 1;
  pointer-events: none;
}
.resort-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.25rem 1.75rem;
  background: transparent;
  color: var(--white);
  z-index: 2;
  transition: padding-bottom var(--t) var(--ease);
}
/* The hierarchy the mailer uses: where the resort is and who it is for,
   then the resort, then its line. The name sits in the middle and has to
   carry the card, so it is the only one of the three set at any size. */
.resort-card-tag {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: block;
  margin-bottom: 0.45rem;
}
.resort-card-body h3 {
  color: var(--white);
  font-size: 1.12rem; letter-spacing: 0.06em; line-height: 1.25;
  margin-bottom: 0.35rem;
}
/* The line carried over from the direct mail, under the name. */
.resort-card-line {
  display: block;
  font-family: var(--font-title);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-pale);
  line-height: 1.35;
  margin-bottom: 0.55rem;
}
.resort-card-body p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease), opacity 0.4s;
  opacity: 0;
  margin-bottom: 0;
}
.resort-card:hover .resort-card-body p { max-height: 120px; opacity: 1; margin-bottom: 1.1rem; }
.resort-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
}
.resort-card:hover .resort-card-arrow { opacity: 1; transform: translateY(0); }

/* Distintivos de consorcio sobre la foto de la tarjeta (portal de agentes).
   En blanco y directamente sobre la imagen: una pastilla o una sombra los
   convertía en un parche. Lado a lado y centrados, igualados por la altura
   porque Signature es un logotipo ancho y Virtuoso un escudo alto. */
/* El degradado vive en la propia barra de marcas, no en la tarjeta: así sólo
   aparece donde hay logotipos y las otras cinco tarjetas quedan limpias. El
   relleno inferior es lo que deja que se desvanezca bajo ellos. */
.rc-marks {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
  padding: 1.35rem 1.25rem 2.3rem;
  background: linear-gradient(180deg, rgba(10,18,30,0.58) 0%, rgba(10,18,30,0.30) 52%, rgba(10,18,30,0) 100%);
  pointer-events: none;
}
.rc-mark { display: block; }
.rc-mark img {
  display: block;
  width: auto;
  height: 42px;
  filter: none;
  transition: none;
}
/* Signature es un logotipo ancho y Virtuoso un escudo alto: a la misma altura
   el primero pesaba el doble. */
.rc-mark img[src*="signature"] { height: 34px; }
.resort-card:hover .rc-mark img { transform: none; filter: none; }

/* Carousel controls */
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: 2.25rem;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
.carousel-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}
.carousel-btn:hover { background: var(--navy); color: var(--white); }

/* ============================================================
   ALL-INCLUSIVE (homepage)
   ============================================================ */

.all-inclusive {
  padding: 7rem 2.5rem;
  background: var(--white);
}
.all-inclusive-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  /* stretch, not center: the photo should run the full height of the copy
     beside it now that the inclusions are a nine-icon grid */
  align-items: stretch;
}
.all-inclusive-text h2 { color: var(--navy); margin-bottom: 1.5rem; }
.all-inclusive-text p  { color: var(--charcoal); margin-bottom: 1.5rem; font-size: 1.02rem; }
/* The nine inclusions from the printed planner, with its own icons. */
.inclusions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 1rem;
  margin-top: 2.25rem;
  list-style: none;
  padding: 0;
}
.inclusions-grid li { text-align: center; }
.inclusions-grid img {
  height: 46px;
  /* In their own blue. The artwork was always this colour; it was being
     greyed out in CSS. */
  width: auto;
  margin: 0 auto 0.65rem;
  display: block;
}
.inclusions-grid .inc-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.3;
}
.inclusions-grid .inc-desc {
  display: block;
  font-size: 0.68rem;
  color: var(--gray);
  line-height: 1.45;
  margin-top: 0.25rem;
}
@media (max-width: 560px) {
  .inclusions-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0.8rem; }
  .inclusions-grid img { height: 40px; }
}

.inclusions-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2rem;
}
.inclusions-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: 0.88rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.inclusions-list li:last-child,
.inclusions-list li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.inclusions-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: var(--gold);
  margin-top: 0.55em;
}
.all-inclusive-media {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  min-height: 100%;
}
.ai-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  border-radius: 1px;
}
.ai-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.ai-slide.active { opacity: 1; }
.ai-slider::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(transparent, rgba(0,0,0,0.38));
  z-index: 4;
  pointer-events: none;
}
.ai-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-controls {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}
.ai-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  color: var(--white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t);
  border-radius: 1px;
}
.ai-btn:hover { background: rgba(255,255,255,0.35); }
.ai-dots {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  z-index: 5;
}
.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.ai-dot.active { background: var(--gold); transform: scale(1.3); }

/* ============================================================
   PARALLAX BAND
   ============================================================ */

.parallax-band {
  position: relative;
  height: 55vh;
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
}
.parallax-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.parallax-band-bg img {
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: center 72%;
  will-change: transform;
}
.parallax-band-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15,27,45,0.58);
}
.parallax-band-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
  max-width: 800px;
  color: var(--white);
}
.parallax-band-content h2 { color: var(--white); margin-bottom: 1.25rem; }
.parallax-band-content p  { color: rgba(255,255,255,0.84); font-size: 1.05rem; margin-bottom: 2rem; }
.parallax-band-content p:last-child { margin-bottom: 0; }

/* ============================================================
   PICKLEBALL SECTION (homepage)
   ============================================================ */

.pickleball-section {
  padding: 7rem 2.5rem;
  background: #f3f3f3;
}
.pickleball-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.pickleball-media {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.pickleball-media img { width: 100%; height: 520px; object-fit: cover; }
.pickleball-text h2 { color: var(--navy); margin-bottom: 1.25rem; }
.pickleball-text p  { margin-bottom: 1.25rem; }
.icon-list { margin: 1.75rem 0; }
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: 0.9rem;
  color: var(--charcoal);
}
.icon-list li:last-child { border-bottom: none; }
.icon-list li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 1px;
  background: var(--gold);
  margin-top: 0.55em;
}
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ============================================================
   WELLNESS / SPA SECTION (homepage)
   ============================================================ */

.wellness-section {
  padding: 7rem 2.5rem;
  background: var(--white);
}
.wellness-inner {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.wellness-text h2 { color: var(--navy); margin-bottom: 0.5rem; }
.wellness-text .subtitle {
  font-family: var(--font-title);
  font-style: italic;
  color: var(--gold);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 1.5rem;
}
.wellness-text p  { margin-bottom: 1.25rem; }
.wellness-media { position: relative; }
.wellness-media img { width: 100%; height: 620px; object-fit: cover; border-radius: 1px; }
.wellness-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--navy);
  color: var(--white);
  padding: 1.75rem 2rem;
  border-radius: 1px;
  z-index: 2;
  max-width: 220px;
}
.wellness-badge h5 {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  font-weight: 400;
}
.wellness-badge p { font-size: 0.75rem; color: rgba(255,255,255,0.65); line-height: 1.5; }

/* ============================================================
   GROUPS BAND (homepage)
   ============================================================ */

.groups-band {
  height: 600px;
  overflow: hidden;
}
.groups-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   SITE FOOTER
   Rebuilt to the 9.30 audit sketch: call bar, follow row, five
   link columns, the seven resort marks, then the legal line.
   ============================================================ */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.72); padding: 0 0 2rem; }

/* Call bar */
/* The number sits in a blue band across the top of the footer rather than
   in the black with a hairline under it — the one thing in the footer we
   actually want people to act on. */
.footer-call {
  display: flex; align-items: baseline; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap;
  background: var(--navy);
  padding: 1.75rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-call-label {
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-light);
}
/* White, because the bar went black — the number was navy while the bar
   was blue, and navy on navy is nothing at all. */
.footer-call-number {
  font-family: var(--font-title); font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--white); letter-spacing: 0.04em;
}
.footer-call-number:hover { color: var(--gold-light); }
.footer-call-note { font-size: 0.74rem; color: rgba(255,255,255,0.5); }

/* Follow us */
/* A blue rule opens the closing run of the footer — social, then the resort
   marks. Same width and inset as the hairline under it, so the two line up;
   the colour is what tells them apart, not the weight. */
.footer-follow {
  text-align: center; padding: 2.25rem 2.5rem 2rem;
  max-width: 1380px; margin: 0 auto;
  border-top: 1px solid var(--gold);
}
.footer-follow-label {
  display: block; font-size: 0.64rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.9rem;
}
.footer-social { display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.85);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
/* 17px, not 15: at the smaller size the marks stop being recognisable. */
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* Link columns */
.footer-cols {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2rem 1.6rem;
  max-width: 1380px; margin: 0 auto; padding: 2.75rem 2.5rem 2.25rem;
}
.footer-col h4 {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
  margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { font-size: 0.78rem; color: rgba(255,255,255,0.68); transition: color var(--t); }
.footer-col a:hover { color: var(--gold-light); }

/* El pie del portal de agentes lleva tres columnas, no cinco: los enlaces de
   agente y las dos oficinas, como en eliteislandresorts.com/travel-advisor. */
.footer-cols--agent { grid-template-columns: 1.2fr 1fr 1fr; max-width: 1100px; }
.footer-cols--agent .footer-col li { font-size: 0.78rem; color: rgba(255,255,255,0.68); line-height: 1.6; }
.footer-cols--agent .footer-col li a { font-size: inherit; }
@media (max-width: 760px) {
  .footer-cols--agent { grid-template-columns: 1fr; }
}

/* The seven marks. Sized one by one: a 5.6:1 wordmark and a 0.78:1
   crest at the same height do not carry the same optical weight. */
.footer-marks {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.4rem, 3vw, 3rem); flex-wrap: wrap;
  padding: 2.25rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  max-width: 1380px; margin: 0 auto;
}
.fm { width: auto; opacity: 0.82; transition: opacity var(--t); }
.fm:hover { opacity: 1; }
.fm--hammock   { height: 20px; }
.fm--verandah  { height: 30px; }
.fm--pineapple { height: 34px; }
.fm--stjames   { height: 38px; }
.fm--club      { height: 40px; }
.fm--establos  { height: 46px; }
.fm--galley    { height: 52px; }

/* Legal line */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  max-width: 1380px; margin: 0 auto; padding: 1.9rem 2.5rem 0;
}
.footer-brand img { height: 30px; width: auto; display: block; opacity: 0.9; }
.footer-copy { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin: 0; }
.footer-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-legal a { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
.footer-legal a:hover { color: var(--gold-light); }

@media (max-width: 1000px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  {
  .footer-cols { grid-template-columns: repeat(2, 1fr); padding-inline: 1.5rem; }
  .footer-call, .footer-follow, .footer-marks, .footer-bottom { padding-inline: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-marks { gap: 1.4rem 2rem; }
}

/* ============================================================
   ALL-INCLUSIVE INCLUSION CARDS
   ============================================================ */

@keyframes kenburns {
  0%   { transform: scale(1)    translate(0,    0   ); }
  33%  { transform: scale(1.08) translate(-2%, -1.5%); }
  66%  { transform: scale(1.06) translate(1.5%, -1%); }
  100% { transform: scale(1)    translate(0,    0   ); }
}
.inclusion-card {
  position: relative;
  overflow: hidden;
  height: 290px;
  text-decoration: none;
  display: block;
}
.inclusion-card-img { position: absolute; inset: 0; }
.inclusion-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 16s ease-in-out infinite;
  will-change: transform;
}
.inclusion-card:nth-child(2) .inclusion-card-img img { animation-delay: -2s; }
.inclusion-card:nth-child(3) .inclusion-card-img img { animation-delay: -4s; }
.inclusion-card:nth-child(4) .inclusion-card-img img { animation-delay: -6s; }
.inclusion-card:nth-child(5) .inclusion-card-img img { animation-delay: -8s; }
.inclusion-card:nth-child(6) .inclusion-card-img img { animation-delay: -10s; }
.inclusion-card:nth-child(7) .inclusion-card-img img { animation-delay: -12s; }
.inclusion-card:nth-child(8) .inclusion-card-img img { animation-delay: -1s; }
.inclusion-card:nth-child(9) .inclusion-card-img img { animation-delay: -3s; }
.inclusion-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,12,24,0.88) 0%, rgba(5,12,24,0.28) 60%, rgba(5,12,24,0.1) 100%);
}
.inclusion-card-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem 1.75rem;
}
.inclusion-card-rule {
  width: 26px; height: 2px;
  background: var(--gold);
  margin-bottom: 0.65rem;
}
.inclusion-card-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0;
}
.inclusion-card-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin-top: 0.6rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.35s ease;
}
.inclusion-card:hover .inclusion-card-desc {
  max-height: 120px;
  opacity: 1;
}

/* ============================================================
   SPA RESORT CAROUSEL (wellness.html)
   ============================================================ */

.spa-carousel {
  overflow-x: auto;
  scrollbar-width: none;
}
.spa-carousel::-webkit-scrollbar { display: none; }
.spa-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  margin: 0 auto;
  padding: 0.5rem 4rem 1.5rem;
}
.spa-card {
  flex: 0 0 300px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  display: flex;
  flex-direction: column;
}
.spa-card-img { height: 210px; overflow: hidden; }
.spa-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); display: block; }
.spa-card:hover .spa-card-img img { transform: scale(1.05); }
.spa-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.spa-card-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.4rem;
}
.spa-card-name {
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.07em;
  margin: 0;
}
.spa-card-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.8;
  flex: 1;
  margin: 0;
}
.spa-card-hours {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-top: 1rem;
}

/* ============================================================
   INTERIOR PAGE COMPONENTS
   ============================================================ */

/* Page offset for fixed header */
.header-offset { margin-top: 108px; }

/* ============================================================
   DESTINATION PAGES
   ============================================================ */

/* Intro text */
.dest-intro { background: var(--white); padding: 5.5rem 2rem; text-align: center; }
.dest-intro-inner { max-width: 760px; margin: 0 auto; }
.dest-intro-inner p { font-size: 1.1rem; line-height: 2; color: var(--gray); }

/* Resort list — alternating split panels */
.dest-resort-list { }
.dest-resort-item {
  display: flex;
  min-height: 480px;
}
.dest-resort-item:nth-child(even) { flex-direction: row-reverse; }
.dest-resort-img { flex: 0 0 55%; overflow: hidden; }
.dest-resort-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.dest-resort-item:hover .dest-resort-img img { transform: scale(1.04); }
.dest-resort-body {
  flex: 1;
  padding: 4rem 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
}
.dest-resort-item:nth-child(even) .dest-resort-body { background: var(--cream); }
/* Jerarquía del impreso, la misma que llevan las tarjetas y la página de
   Resorts: dónde está y para quién es, el nombre, las estrellas debajo y la
   línea del DM. Las antiguas .dest-resort-badges ya no se usan. */
.dest-resort-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.dest-resort-stars { color: var(--amber); font-size: 1rem; letter-spacing: 0.05em; margin: 0.15rem 0 0.5rem; }
.dest-resort-line {
  font-family: var(--font-title);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 1.6rem;
}
.star-half {
  display: inline-block;
  background: linear-gradient(90deg, var(--amber) 50%, rgba(201,147,63,0.25) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dest-resort-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.dest-resort-badge {
  font-size: 0.62rem; font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray);
  border: 1px solid var(--gray-light); padding: 0.3rem 0.85rem; border-radius: 2px;
}
.dest-resort-body h2 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  color: var(--navy); margin-bottom: 0.5rem; text-align: left;
}
.dest-resort-tagline {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-family: var(--font-body); font-weight: 600; margin-bottom: 1.5rem;
}
.dest-resort-body > p { color: var(--gray); line-height: 1.9; margin-bottom: 2rem; max-width: 460px; }
.dest-resort-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-family: var(--font-body); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid rgba(15,27,45,0.25); padding-bottom: 0.2rem;
  text-decoration: none; transition: color var(--t);
  align-self: flex-start;
}
.dest-resort-cta:hover { color: var(--gold); }

/* En el teléfono la pieza era una columna de texto de 170px al lado de la
   foto, dos o tres palabras por línea. Aquí se apila: foto arriba, texto
   debajo, a todo el ancho. */
@media (max-width: 900px) {
  .dest-resort-item,
  .dest-resort-item:nth-child(even) { flex-direction: column; min-height: 0; }
  .dest-resort-img { flex: none; width: 100%; }
  .dest-resort-img img { height: 260px; }
  .dest-resort-body { padding: 2.75rem 2rem 3rem; }
  .dest-resort-body > p { max-width: none; }
}
@media (max-width: 560px) {
  .dest-resort-img img { height: 210px; }
  .dest-resort-body { padding: 2.25rem 1.5rem 2.75rem; }
}

/* Discover section */
.discover-section { background: var(--navy); padding: 6rem 2rem; color: var(--white); text-align: center; }
.discover-section .section-header h2 { color: var(--white); }
.discover-section .section-header p { color: rgba(255,255,255,0.7); }
.discover-section .rule { background: var(--gold); }
.discover-grid {
  max-width: 1280px; margin: 3.5rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left;
}
.discover-item { overflow: hidden; }
.discover-item-img { height: 240px; overflow: hidden; }
.discover-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.discover-item:hover .discover-item-img img { transform: scale(1.05); }
.discover-item-body { padding: 1.5rem 0.25rem; }
.discover-item-body h3 { font-size: 0.9rem; letter-spacing: 0.12em; color: var(--white); margin-bottom: 0.65rem; }
.discover-item-body p { font-size: 0.86rem; color: rgba(255,255,255,0.65); line-height: 1.8; }

/* Page Hero (interior) */
.page-hero {
  position: relative;
  height: 62vh;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 4.5rem;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
}
.page-hero-bg img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  will-change: transform;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,27,45,0.12) 0%, rgba(15,27,45,0.72) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 4rem;
  color: var(--white);
}
.page-hero-content .eyebrow { color: var(--gold-light); }
.page-hero-content h1 { color: var(--white); margin-bottom: 0.75rem; }
.page-hero-content p  { color: rgba(255,255,255,0.82); font-size: 1.1rem; max-width: 580px; }

/* Sticky Resort Sub-Nav */
.sub-nav {
  position: sticky;
  top: 108px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  z-index: 200;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav-inner {
  display: flex;
  padding: 0 2.5rem;
  gap: 0;
  min-width: max-content;
}
.sub-nav a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 1.25rem 1.2rem;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.sub-nav a:hover,
.sub-nav a.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Content sections (interior pages) */
.content-sec { padding: 5.5rem 4rem; max-width: 1380px; margin: 0 auto; }
.content-sec-full { padding: 5.5rem 4rem; }

.split-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.5rem;
  align-items: center;
}
.split-media-text.reverse { direction: rtl; }
.split-media-text.reverse > * { direction: ltr; }
.split-media-text img { width: 100%; height: 520px; object-fit: cover; border-radius: 1px; }
.split-text h2 { color: var(--navy); margin-bottom: 1.25rem; }
.split-text h3 { color: var(--navy); margin-bottom: 1rem; }
.split-text p   { margin-bottom: 1.25rem; }

/* Cards grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.card {
  border-radius: 1px;
  overflow: hidden;
  border: 1px solid var(--gray-light);
  transition: box-shadow var(--t), transform var(--t);
  background: var(--white);
}
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-4px); }
.card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.card-body { padding: 1.75rem; }
.card-tag { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.5rem; }
.card-body h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 0.75rem; }
.card-body p   { font-size: 0.87rem; color: var(--gray); line-height: 1.7; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 0.85rem;
}
.gallery-item { overflow: hidden; border-radius: 1px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.span-2 { grid-column: span 2; }
.gallery-item.span-2-row { grid-row: span 2; }

/* Feature list (icon) */
/* Resort panel: star rating + DM line under the name, numeric grid for facts */
.resort-rating {
  display: flex;
  align-items: center;
  margin: -0.2rem 0 0.6rem;
}
/* Star ratings are drawn, not spelled out: a 4.5 shows four stars and one
   painted half way, which is how the DM sets them. */
.rs { height: 15px; width: auto; display: block; color: var(--amber); overflow: visible; }
.pk-modal-stars { margin-bottom: 0.65rem; }
.pk-modal-stars .rs { height: 16px; }
.resort-line {
  display: block;
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.resort-line + .rule { margin-top: 1rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
}
.stat-num {
  display: block;
  font-family: var(--font-title);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--navy);
}
.stat-lbl {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}
@media (max-width: 680px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
}

/* Rejilla EXPERIENCE MORE, tomada de las dobles páginas de resort del DM:
   número grande en azul pálido, etiqueta en versalitas y una línea de apoyo,
   separados por filetes que arrancan bajo el número, como en el impreso. */
.dm-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--gray-light);
}
.dm-cell {
  position: relative;
  padding: 0 1.5rem;
  text-align: center;
}
.dm-cell + .dm-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3.9rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--gold-pale);
}
.dm-num {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold-pale);
}
.dm-lbl {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.dm-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gray);
}
@media (max-width: 1000px) {
  .dm-cell { padding: 0 1rem; }
  .dm-num { font-size: 2.8rem; }
  .dm-cell + .dm-cell::before { top: 3.2rem; }
}
@media (max-width: 760px) {
  .dm-grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 0; padding-top: 2rem; }
  .dm-cell + .dm-cell::before { display: none; }
  .dm-cell { padding: 0 0.75rem; }
  .dm-cell:nth-child(odd) { border-right: 1px solid var(--gold-pale); }
  .dm-cell:last-child:nth-child(odd) { border-right: none; grid-column: 1 / -1; }
}

.feature-list { list-style: none; margin: 1.75rem 0; }
.feature-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: 0.9rem;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 1px;
  background: var(--gold);
  margin-top: 0.55em;
}

/* Section header centered */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}
.section-header h2 { color: var(--navy); }
.section-header p  { font-size: 1.02rem; margin-top: 1.25rem; }

/* Quote / pull quote */
.pull-quote {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 2rem 2.5rem;
  margin: 2.5rem 0;
  border-radius: 1px;
}
.pull-quote p {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
}

/* Full-width CTA band */
.cta-band {
  background: var(--navy);
  padding: 5rem 2.5rem;
  text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: 1rem; }
.cta-band p  { color: rgba(255,255,255,0.75); margin-bottom: 2.25rem; font-size: 1.02rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-band .btn-group { justify-content: center; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gray);
  padding: 1rem 2.5rem;
  border-bottom: 1px solid var(--gray-light);
}
.breadcrumb a { color: var(--gray); transition: color var(--t); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--charcoal); }
.breadcrumb .sep { color: var(--gray-light); }

/* ============================================================
   PICKLEBALL PAGE SPECIFIC
   ============================================================ */

.pickleball-hero-banner {
  background: var(--navy);
  padding: 4rem 2.5rem 0;
}
.court-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.court-card {
  background: var(--cream);
  padding: 2rem;
  border-radius: 1px;
  border-top: 2px solid var(--gold);
}
.court-card h4 { color: var(--navy); margin-bottom: 0.75rem; }
.court-card p  { font-size: 0.88rem; color: var(--gray); }

/* ============================================================
   OFFERS PAGE
   ============================================================ */

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.offer-card {
  border-radius: 1px;
  overflow: hidden;
  border: 1px solid var(--gray-light);
  transition: box-shadow var(--t), transform var(--t);
}
.offer-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-4px); }
.offer-card img { width: 100%; height: 240px; object-fit: cover; }
.offer-card-body { padding: 1.75rem; }
.offer-tag { display: inline-block; background: var(--gold); color: var(--white); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.3rem 0.75rem; margin-bottom: 0.85rem; border-radius: 1px; }
.offer-card-body h3 { color: var(--navy); font-size: 1.25rem; margin-bottom: 0.75rem; }
.offer-card-body p   { font-size: 0.87rem; color: var(--gray); margin-bottom: 1.25rem; }

/* ============================================================
   HERO VIDEO BACKGROUND
   ============================================================ */

.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.35);
}

/* ============================================================
   AWARDS SECTION
   ============================================================ */

.awards-section {
  padding: 3.5rem 2.5rem;
  background: var(--white);
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}
.awards-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
/* Awards are shown grayscale per the 9.30 audit; the files stay full colour
   so the treatment can be lifted again without re-exporting anything. */
.awards-title {
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy);
  text-align: center;
  margin: 0 0 2rem;
}
/* While the badges were placeholders, a rule matched their fpo- filenames and
   switched this treatment off so they read clearly. The real logos are in, so
   it is gone and they take the normal treatment like any other mark. */
.awards-logos img { opacity: 0.92; transition: opacity var(--t); }
.awards-logos img:hover { opacity: 1; }

/* Follow us */
.follow-module {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--gray-light);
  text-align: center;
}
.follow-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.follow-icons { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.follow-icons a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-light);
  border-radius: 50%;
  color: var(--navy);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.follow-icons a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.follow-icons svg { width: 17px; height: 17px; fill: currentColor; }

.awards-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.award-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* In colour, not grey. These badges are the point of the section, and
   greyed out they read as decoration. */
.award-logo-item img {
  height: 96px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s;
}
.award-logo-item img:hover { opacity: 1; }
/* A wordmark set to the badges' height takes twice their width and pulls the
   row off balance. Matched on weight instead. */
.award-logo-item img[src*="travvy"] { height: auto; max-height: 56px; max-width: 170px; }

/* ============================================================
   HERO CAROUSEL
   ============================================================ */

.hc-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  overflow: hidden;
}
.hc-slide.hc-slide--active { opacity: 1; }
.hc-slide img,
.hc-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hc-dots {
  position: absolute;
  bottom: 6.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.6rem;
}
.hc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.35s, transform 0.35s;
}
.hc-dot.hc-dot--active {
  background: var(--gold);
  transform: scale(1.25);
}

/* ============================================================
   WELLNESS — no-media (single-column centred)
   ============================================================ */

.wellness-inner--solo {
  grid-template-columns: 1fr;
  max-width: 780px;
  gap: 0;
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */

.newsletter-section {
  padding: 4rem 2.5rem;
  background: var(--cream);
  text-align: center;
}
.newsletter-section--photo {
  position: relative;
  background: url('../Images/Homepage/TheClub-SunsetShotwithSailboat.jpg') center 65%/cover no-repeat;
  padding: 5rem 2.5rem;
}
.newsletter-section--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 45, 0.50);
}
.newsletter-section--photo .newsletter-inner {
  position: relative;
  z-index: 1;
}
.newsletter-section--photo .eyebrow { color: var(--gold-light); }
.newsletter-section--photo .newsletter-inner h2 { color: var(--white); }
.newsletter-section--photo .rule--center { background: var(--gold-light); }
.newsletter-section--photo .newsletter-inner > p { color: rgba(255,255,255,0.82); }

/* ── Simple newsletter (all pages except home) ──────────────── */
.newsletter-section--simple {
  background: #ebebeb;
  padding: 4rem 2rem;
  text-align: center;
}
.newsletter-simple-inner {
  max-width: 900px;
  margin: 0 auto;
}
.newsletter-simple-inner h2 {
  font-family: var(--font-title);
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 400;
  margin: 0 0 2rem;
}
.newsletter-simple-form {
  display: flex;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
}
.newsletter-simple-form input {
  flex: 1;
  padding: 0.9rem 1.25rem;
  border: 1px solid rgba(15,27,45,0.2);
  border-right: none;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--navy);
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
}
.newsletter-simple-form input::placeholder { color: rgba(15,27,45,0.35); }
.newsletter-simple-form input:focus { border-color: var(--gold); }
.newsletter-simple-form input + input { border-left: none; border-right: none; }
.newsletter-simple-form button {
  padding: 0.9rem 2rem;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.newsletter-simple-form button:hover { background: var(--gold); color: var(--navy); }
@media (max-width: 600px) {
  .newsletter-simple-form { flex-direction: column; }
  .newsletter-simple-form input,
  .newsletter-simple-form input + input { border-right: 1px solid rgba(15,27,45,0.2); border-bottom: none; }
  .newsletter-simple-form button { padding: 1rem; }
}
.newsletter-inner {
  max-width: 600px;
  margin: 0 auto;
}
.newsletter-inner h2 {
  color: var(--navy);
  margin-bottom: 1rem;
}
.newsletter-inner > p {
  color: var(--gray);
  font-size: 0.97rem;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}
.newsletter-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gray-light);
  border-right: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal);
  background: var(--white);
  outline: none;
  border-radius: 0;
}
.newsletter-form input[type="email"]::placeholder { color: var(--gray); }
.newsletter-form input[type="email"]:focus { border-color: var(--gold); }
.newsletter-form button {
  padding: 1rem 1.75rem;
  background: var(--navy);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t);
  white-space: nowrap;
}
.newsletter-form button:hover { background: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .footer-top { gap: 2.5rem; }
  .footer-left { flex: 0 0 260px; }
  .cards-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .brand-intro-inner,
  .all-inclusive-inner,
  .pickleball-inner,
  .wellness-inner,
  .split-media-text {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .split-media-text.reverse { direction: ltr; }
  .destinations-mega-inner { grid-template-columns: 1fr; }
  .dest-tiles   { grid-template-columns: 1fr 1fr; }
  .dest-tiles .dest-tile:last-child { grid-column: span 2; }
  .dest-card img, .dest-tile-img img { height: 280px; }
  .wellness-badge { right: 0; bottom: 0; }
}

/* ============================================================
   RESORTS COLLECTION PAGE
   ============================================================ */

.resorts-collection-intro {
  background: var(--white);
  padding: 5.5rem 2rem;
  text-align: center;
}
.resorts-collection-intro-inner {
  max-width: 720px;
  margin: 0 auto;
}
.resorts-collection-intro-inner p {
  font-size: 1.1rem;
  line-height: 2;
  color: var(--gray);
  font-weight: 300;
}

.resorts-collection-grid-section {
  background: var(--navy);
  padding: 5rem 2rem 6rem;
}
.resorts-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
}
.resort-coll-card {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
}
.resort-coll-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.resort-coll-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.resort-coll-card:hover .resort-coll-card-img img {
  transform: scale(1.05);
}
.resort-coll-body {
  padding: 1.75rem 1.5rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.resort-coll-tag {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.65rem;
}
.resort-coll-body h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 0.9rem;
  line-height: 1.3;
}
.resort-coll-body p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  font-weight: 300;
  flex: 1;
  margin-bottom: 1.5rem;
}
.resort-coll-link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.3s;
}
.resort-coll-link:hover { color: var(--white); }

.resorts-dest-label {
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  padding: 2.5rem 0 1rem;
  grid-column: 1 / -1;
}
.resorts-dest-label:first-child { padding-top: 0; }

@media (max-width: 1100px) {
  .resorts-collection-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .resorts-collection-grid { grid-template-columns: 1fr; gap: 1px; }
  .resorts-collection-grid-section { padding: 3rem 1rem 4rem; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* El panel abierto. Navy, como la cabecera que lo abre: los enlaces ya son
     blancos en los dos estados del encabezado, así que no hay que recolorear
     nada y no queda ningún selector olvidado en blanco sobre blanco. */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy);
    border-top: 2px solid var(--gold);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 1.25rem;
    z-index: 100;
  }
  .nav-links.open > li { width: 100%; }
  .nav-links.open > li > a,
  .nav-links.open > li > button {
    width: 100%;
    height: auto;
    padding: 1rem 1.75rem;
    justify-content: space-between;
    font-size: 0.74rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links.open > li > a::after,
  .nav-links.open > li > button::after { display: none; }
  .nav-mobile-only { display: block; }
  /* Un respiro antes de los dos que suben de la barra superior, para que no se
     lean como parte del menú principal. :first-of-type no sirve aquí: contaría
     el primer <li> de la lista, no el primero con esta clase. */
  .nav-links.open > li:not(.nav-mobile-only) + li.nav-mobile-only > a {
    margin-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  /* El desplegable deja de ser una tarjeta blanca flotante y pasa a ser una
     sublista sangrada sobre el mismo navy. El :hover se desactiva aquí: en
     táctil abría al primer roce. */
  .nav-links.open .nav-dropdown {
    position: static;
    min-width: 0;
    background: rgba(255,255,255,0.05);
    border-top: none;
    box-shadow: none;
    transform: none;
    display: none;
  }
  .nav-links.open > li:hover .nav-dropdown { display: none; }
  .nav-links.open > li.open .nav-dropdown { display: block; opacity: 1; pointer-events: all; }
  .nav-links.open .nav-dropdown a {
    color: rgba(255,255,255,0.78);
    padding: 0.85rem 1.75rem 0.85rem 2.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.7rem;
  }
  .nav-links.open .nav-dropdown a:hover { background: none; color: var(--gold-light); padding-left: 2.75rem; }

  .nav-links.open .nav-phone {
    margin: 1.25rem 1.75rem 0;
    width: calc(100% - 3.5rem);
    justify-content: center;
    border-bottom: none !important;
  }

  /* El panel de destinos se abre bajo la barra, en fijo: a 520px recortaba
     dos de las tres islas. En el teléfono la tarjeta pierde el párrafo y se
     queda en nombre y enlace, que es lo que hace falta para navegar. */
  .destinations-mega.open { max-height: calc(100vh - 108px); overflow-y: auto; }
  .destinations-mega-inner { padding: 1.25rem 1.25rem 1.75rem; gap: 0.9rem; }
  .destinations-mega .dest-card img { height: 110px; }
  .destinations-mega .dest-card-body { padding: 0 1.1rem 0.9rem; }
  .destinations-mega .dest-card-body h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
  .destinations-mega .dest-card-body p { display: none; }
  .section-padding { padding: 4rem 1.5rem; }
  .brand-intro, .pickleball-section, .wellness-section, .all-inclusive { padding: 4rem 1.5rem; }
  .content-sec, .content-sec-full { padding: 4rem 1.5rem; }
  .dest-tiles  { grid-template-columns: 1fr; }
  .dest-tiles .dest-tile:last-child { grid-column: span 1; }
  .footer-top { flex-direction: column; padding: 3rem 1.5rem; gap: 2.5rem; }
  .footer-left { flex: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { padding: 2rem 1.5rem; }
  .page-hero-content { padding: 0 1.5rem; }
  .cards-grid, .offers-grid, .court-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input[type="email"] { border-right: 1px solid var(--gray-light); border-bottom: none; }
}

/* ============================================================
   REQUEST A QUOTE — MODAL
   ============================================================ */
.quote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 25, 0.75);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.quote-overlay.open {
  opacity: 1;
  visibility: visible;
}
.quote-modal {
  background: var(--white);
  display: flex;
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  overflow: hidden;
  position: relative;
  transform: translateY(24px);
  transition: transform 0.35s ease;
}
.quote-overlay.open .quote-modal {
  transform: translateY(0);
}
.quote-modal-img {
  flex: 0 0 38%;
  overflow: hidden;
  position: relative;
}
.quote-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote-modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,15,25,0.55) 0%, transparent 60%);
}
.quote-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 2.75rem 2.5rem 2.5rem;
  position: relative;
}
.quote-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  opacity: 0.45;
  transition: opacity 0.2s;
  z-index: 2;
}
.quote-modal-close:hover { opacity: 1; }
.quote-modal-heading {
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.quote-modal-sub {
  font-size: 0.8rem;
  color: rgba(15,27,45,0.5);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.quote-rule {
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.75rem;
}
.qf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.qf-row.full { grid-template-columns: 1fr; }
.qf-group { display: flex; flex-direction: column; gap: 0.3rem; }
.qf-group label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15,27,45,0.5);
}
.qf-group input,
.qf-group select,
.qf-group textarea {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid #D8D2C8;
  padding: 0.6rem 0.8rem;
  outline: none;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.qf-group input:focus,
.qf-group select:focus,
.qf-group textarea:focus { border-color: var(--navy); }
.qf-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%230F1B2D' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}
.qf-group textarea { resize: vertical; min-height: 80px; }
.qf-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.75rem 0 1.5rem;
}
.qf-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--navy);
  cursor: pointer;
}
.qf-check label {
  font-size: 0.76rem;
  color: rgba(15,27,45,0.6);
  line-height: 1.55;
  cursor: pointer;
}
.qf-check label a { color: var(--navy); text-decoration: underline; }
.qf-submit {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 0.95rem 1rem;
  font-family: var(--font-title);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.qf-submit:hover { background: var(--gold); color: var(--navy); }
.quote-success {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
}
.quote-success.visible { display: block; }
.quote-success h3 {
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.quote-success p { font-size: 0.88rem; color: rgba(15,27,45,0.65); line-height: 1.7; }
.quote-success .quote-rule { margin: 1.25rem auto; }

@media (max-width: 768px) {
  .quote-modal { flex-direction: column; max-height: 95vh; }
  .quote-modal-img { flex: 0 0 180px; }
  .quote-modal-body { padding: 2rem 1.5rem; }
  .qf-row { grid-template-columns: 1fr; }
}

/* ── Resort fact sheets & maps ───────────────────────────── */
.legal-body-inner--wide { max-width: 1180px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.25rem;
  margin-top: 2.5rem;
}
/* Seven resorts across three columns leaves one on a row of its own, and a
   grid would strand it against the left edge. Flex-wrap centres that row. */
.fs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem;
  margin-top: 2.5rem;
}
.fs-item { flex: 1 1 300px; max-width: 353px; }
.fs-item h3 {
  font-family: var(--font-title); font-size: 1rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy);
  margin: 0 0 0.9rem;
}
/* The resort maps range from 1.22 to 2.50 in aspect, so letting each keep its
   own shape gave every card a different height and a ragged grid. They are
   cropped to one shape here and the whole map opens on click. */
.fs-map {
  border: 1px solid var(--cream-dark); background: var(--cream); overflow: hidden;
  position: relative; aspect-ratio: 4 / 3; cursor: zoom-in;
}
.fs-map img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease);
}
.fs-map:hover img, .fs-map:focus-visible img { transform: scale(1.04); }
.fs-map:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* Says the picture goes bigger — without it the crop reads as the whole thing.
   The wording comes from the card, because Los Establos has no map and shows
   the resort instead. */
.fs-map::after {
  content: attr(data-zoom);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.75rem 0.9rem 0.6rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white); text-align: center;
  background: linear-gradient(to top, rgba(15,27,45,0.78), rgba(15,27,45,0));
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.fs-map:hover::after, .fs-map:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fs-map img { transition: none; }
  .fs-map:hover img { transform: none; }
}
.fs-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.62rem; }
.fs-pending { font-size: 0.74rem; color: var(--gray); align-self: center; font-style: italic; }

/* ── Inspired Itineraries ─────────────────────────────────── */
.itin-section { padding: 4.5rem 0 6rem; background: var(--white); }
.itin-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: 4.5rem; }

/* The picture sits inside the card rather than bleeding edge to edge, so a
   portrait subject is not cropped down to a hat. */
.itc-stage { position: relative; overflow: hidden; border-radius: 1px; background: var(--cream); }
.itc-track { display: flex; transition: transform 0.55s var(--ease); }
/* The source photos are 1.81:1 — a wider frame would crop the subject,
   which is how the first version showed only a hat. */
.itc-slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; }
.itc-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; }
/* The source clip is vertical; it was cropped to this 16:9 band on the way in,
   so the couple and the picnic stay in frame rather than open water. */

.itc-place {
  font-family: var(--font-title); font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--white); margin: 0; letter-spacing: 0.04em;
  /* it was inheriting the body's loose leading, and long labels dropped a
     single word onto the second line; balance evens the lines out. */
  line-height: 1.22;
  text-wrap: balance;
}

/* Slide 3: the resort note sits in a panel, as in the reference. */
.itc-note {
  position: absolute; left: clamp(1.25rem, 3vw, 2.4rem); top: 12%;
  width: min(42%, 420px); background: rgba(27,74,110,0.86);
  padding: 1.5rem 1.6rem; border-radius: 1px;
}
.itc-veil--left { background: linear-gradient(to right, rgba(10,16,26,0.34) 0%, rgba(10,16,26,0.08) 55%, rgba(10,16,26,0) 80%); }
.itc-veil { position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,16,26,0.45) 0%, rgba(10,16,26,0.22) 45%, rgba(10,16,26,0.03) 72%); }
.itc-cap { position: absolute; left: 0; bottom: 0; max-width: 56%;
  padding: clamp(1.25rem, 3vw, 2.4rem); }
.itc-cap h2 {
  font-family: var(--font-title); font-weight: 400; color: var(--white);
  font-size: clamp(1.15rem, 2.5vw, 2rem); line-height: 1.2; margin: 0;
}
.itc-by {
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.03em;
  margin: 1rem 0 0;
}
.itc-kick { display: block; font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.6rem; }
.itc-rname { font-family: var(--font-title); font-weight: 400; color: var(--white);
  font-size: clamp(1rem, 2vw, 1.5rem); margin: 0 0 0.7rem; }
.itc-rtext { font-size: 0.82rem; line-height: 1.75; color: rgba(255,255,255,0.82); margin: 0; }

.itc-dots { position: absolute; left: clamp(1.25rem, 3vw, 2.4rem); bottom: 1rem;
  display: flex; gap: 0.5rem; }
.itc-dot { width: 26px; height: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.4); transition: background var(--t); }
.itc-dot.is-on { background: var(--white); }
.itc-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.itc-next { position: absolute; right: 1.1rem; bottom: 1.1rem;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.14);
  color: var(--white); display: grid; place-items: center;
  transition: background var(--t), border-color var(--t); }
.itc-next svg { width: 17px; height: 17px; }
.itc-next:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* The two panels, in our blue — the PDF's arrangement, our palette. */
.itc-panels { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.1rem; margin-top: 1.1rem; }
.itc-meet { background: var(--cream); padding: 1.8rem 1.7rem; border-radius: 1px; }
.itc-list { background: var(--gold); padding: 1.8rem 1.7rem; border-radius: 1px; }
.itc-meet h3, .itc-list h3 {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.9rem;
}
.itc-meet h3 { color: var(--gold); }
.itc-list h3 { color: var(--white); }
.itc-meet p { font-size: 0.82rem; line-height: 1.8; color: var(--gray); margin: 0; }
.itc-resort-link { margin-top: 1rem !important; }
.itc-resort-link a { font-family: var(--font-title); font-size: 0.92rem;
  letter-spacing: 0.05em; color: var(--navy); text-decoration: none; }
.itc-resort-link a:hover { color: var(--gold); }
.itc-list ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem; }
.itc-list li {
  font-size: 0.76rem; color: var(--white);
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
  border-radius: 1px; padding: 0.42rem 0.9rem; line-height: 1.3;
}

@media (max-width: 820px) {
  .itc-panels { grid-template-columns: 1fr; }
  .itc-note { width: min(66%, 340px); padding: 1rem 1.1rem; top: 8%; }
  .itc-rtext { font-size: 0.74rem; }
  .itc-slide { aspect-ratio: 4 / 3; }
  .itc-cap { max-width: 78%; }
  .itin-wrap { gap: 3rem; }
}

/* ── National parks map, on the Book Now blue ─────────────── */
/* The blue runs up behind the fixed header, so the translucent nav tints it
   the way it tints a hero photo. A margin here instead left the nav sitting
   on white, which read as a grey band. */
.pk-section {
  background: #ADCEDE;   /* el azul de Book Now, 50% hacia el blanco */
  margin-top: 0;
  padding: calc(100px + 4.5rem) 0 4rem;
}
@media (max-width: 860px) { .pk-section { padding-top: calc(100px + 2.5rem); } }
.pk-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.pk-head { text-align: center; max-width: 680px; margin: 0 auto 2.25rem; }
.pk-head .eyebrow { color: rgba(17,17,17,0.6); }
.pk-head h1 {
  font-family: var(--font-title); font-weight: 400; color: var(--navy);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0.5rem 0 0; line-height: 1.15;
}
.pk-head .rule { margin: 1.25rem auto; background: rgba(17,17,17,0.3); }
.pk-head p { font-size: 0.92rem; line-height: 1.85; color: rgba(17,17,17,0.72); margin: 0; }
.pk-figure { margin: 0 auto; max-width: 1180px; }
.pk-map { width: 100%; height: auto; display: block; }
.pk-land { fill: #f7fbfd; stroke: rgba(17,17,17,0.3); stroke-width: 1.6; stroke-linejoin: round; }
.pk-island { font-family: var(--font-title); font-size: 34px;
  letter-spacing: 0.28em; fill: #7d9bab; text-anchor: middle; }
.pk-island--sm { font-size: 21px; letter-spacing: 0.2em; }
.pk-leader { stroke: rgba(17,17,17,0.5); stroke-width: 1.4; fill: none; }
.pk-dot { fill: #eaf2f6; stroke: var(--navy); stroke-width: 3; }
.pk-lbl { font-family: var(--font-body); font-size: 18px; fill: var(--white); }
.pk-pin { fill: var(--gold); transition: fill var(--t) var(--ease); }
.pk-eye { fill: #eaf2f6; }
.pk-rlbl { font-family: var(--font-body); font-size: 18px; font-weight: 600;
  fill: var(--navy); letter-spacing: 0.04em; }
.pk-site { transition: opacity var(--t) var(--ease); }
.pk-halo { fill: var(--navy); opacity: 0; transition: opacity var(--t) var(--ease); }
.pk-site.is-on .pk-halo { opacity: 0.22; }
.pk-site.is-on .pk-dot { fill: var(--navy); stroke: var(--white); }
.pk-site:hover .pk-halo { opacity: 0.14; }

.pk-aside { max-width: 900px; margin: 2.25rem auto 0; text-align: center; }
.pk-list-h { font-family: var(--font-body); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(17,17,17,0.6); margin: 0 0 0.9rem; }
.pk-btns { list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.5rem; }
.pk-btn { font-family: var(--font-body); font-size: 0.8rem;
  color: var(--navy); background: rgba(255,255,255,0.45);
  border: 1px solid rgba(17,17,17,0.25); border-radius: 1px;
  padding: 0.42rem 0.9rem; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t); }
.pk-btn:hover { background: var(--white); border-color: var(--navy); }
.pk-btn.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }
.pk-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Park detail opens over the page, with the aerial from the original map. */
.pk-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); }
.pk-modal[hidden] { display: none; }
.pk-modal-scrim {
  position: absolute; inset: 0; background: rgba(10,14,20,0.72);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.pk-modal-box {
  position: relative; background: var(--white); max-width: 560px; width: 100%;
  max-height: 88vh; overflow: auto; border-radius: 1px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(18px) scale(0.985);
  transition: opacity 0.36s var(--ease), transform 0.46s var(--ease);
}
/* .is-open is set one frame after the dialog is shown, so the browser has a
   start value to animate from. */
.pk-modal.is-open .pk-modal-scrim { opacity: 1; }
.pk-modal.is-open .pk-modal-box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pk-modal-scrim, .pk-modal-box { transition: none; }
}
.pk-modal-x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: rgba(255,255,255,0.9); color: var(--navy); border-radius: 50%;
}
.pk-modal-x:hover { background: var(--white); }
.pk-modal-img { aspect-ratio: 7 / 4; background: var(--cream); }
.pk-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-modal-body { padding: 1.75rem 1.9rem 2rem; }
.pk-modal-kick { display: block; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.pk-modal-h { font-family: var(--font-title); font-weight: 400; font-size: 1.4rem;
  letter-spacing: 0.05em; color: var(--navy); margin: 0 0 0.9rem; }
.pk-modal-p { font-size: 0.9rem; line-height: 1.85; color: var(--gray); margin: 0; }
/* The resort layout matches the homepage card: tag, line, name, blurb, link. */
.pk-modal-line {
  display: block; font-family: var(--font-title);
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.45rem;
}
.pk-modal-line[hidden] { display: none; }
.pk-modal-cta {
  display: inline-block; margin-top: 1.4rem;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--gray-light); padding-bottom: 0.3rem;
  transition: color var(--t), border-color var(--t);
}
.pk-modal-cta:hover { color: var(--gold); border-color: var(--gold); }
.pk-modal-cta[hidden] { display: none; }
.pk-resort { cursor: pointer; }
/* Blue at rest, dark on hover. Every pin sits on the pale island, so both
   states read against it. */
.pk-resort:hover .pk-pin { fill: var(--navy); }

/* The film plays in place rather than sending people off to YouTube. */
.pk-film-box { max-width: 960px; background: #000; }
.pk-film-frame { aspect-ratio: 16 / 9; }
.pk-film-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pk-modal--film .pk-modal-x { background: rgba(255,255,255,0.92); }

.pk-foot { display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.pk-key { display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(17,17,17,0.72); }
.pk-key-pin { width: 11px; height: 14px; background: var(--gold);
  clip-path: path("M5.5,14 C1.6,8.8 0,6.8 0,4.8 A5.5,5.5 0 1 1 11,4.8 C11,6.8 9.4,8.8 5.5,14Z"); }
.pk-key-dot { width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--navy); background: #eaf2f6; }
.pk-foot .btn-navy { background: var(--navy); }

@media (max-width: 900px) {
  .pk-lbl, .pk-rlbl, .pk-leader { display: none; }
  .pk-dot { r: 13; }
  .pk-halo { r: 34; }
}
@media (max-width: 680px) {
  .pk-section { padding: 3.25rem 0 2.75rem; }
  .pk-foot { gap: 1rem; }
}

/* ── TV & Film ────────────────────────────────────────────── */
.tvf-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.tvf-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.tvf-head h2 {
  font-family: var(--font-title); font-weight: 400; color: var(--navy);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: 0.5rem 0 0; line-height: 1.2;
}
.tvf-head p { font-size: 0.92rem; line-height: 1.9; color: var(--gray); margin: 1.25rem 0 0; }
/* The divider is a block of fixed width: inside a centred head it needs auto
   margins or it hangs off to the left of everything above it. */
.tvf-head .rule, .tvf-lede-inner .rule { margin-left: auto; margin-right: auto; }

.tvf-lede { padding: 5rem 0 1rem; background: var(--white); }
.tvf-lede-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.tvf-lede-inner h2 {
  font-family: var(--font-title); font-weight: 400; color: var(--navy);
  font-size: clamp(1.3rem, 2.4vw, 1.95rem); line-height: 1.3; margin: 0;
}
.tvf-lede-inner .rule { margin: 1.5rem auto; }
.tvf-lede-inner p { font-size: 0.95rem; line-height: 1.95; color: var(--gray); margin: 0 0 1.1rem; }

/* The original ran all twenty points as one flat list; they belong in the
   four groups the live page sets them in. */
.tvf-why { padding: 4.5rem 0 5rem; background: var(--cream); }
/* One group at a time. As four columns the groups ran six, six, three and
   five points and left a ragged block with a lot of white under the short
   one. */
.tvf-tablist {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.5rem;
  border-bottom: 1px solid var(--gray-light); margin-bottom: 2.5rem;
}
.tvf-tab {
  background: none; border: 0; cursor: pointer;
  padding: 0.9rem 0.1rem; margin-bottom: -1px;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray);
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.tvf-tab:hover { color: var(--navy); }
.tvf-tab[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.tvf-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* One column, not two: the points are a sentence or less each, and at the
   full width of the section they sat too far apart to read as one list. */
.tvf-panel { max-width: 580px; margin: 0 auto; }
/* Until the script runs the four panels are simply stacked, each under its
   own heading. Once it does, the tab is the heading. */
.tvf-tabs.is-ready .tvf-panel h3 { display: none; }
.tvf-panel h3 {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 1.1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--gray-light);
}
.tvf-panel ul { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.tvf-tabs.is-ready .tvf-panel ul { margin-bottom: 0; }
.tvf-panel li {
  position: relative; padding-left: 1.05rem; margin-bottom: 0.85rem;
  font-size: 0.9rem; line-height: 1.65; color: var(--charcoal);
}
.tvf-panel li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 11px; height: 1px; background: var(--gold);
}

.tvf-locations { padding: 5rem 0; background: var(--white); }
.tvf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tvf-shot { position: relative; margin: 0; overflow: hidden; border-radius: 1px; }
.tvf-shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease);
}
.tvf-shot:hover img { transform: scale(1.05); }
.tvf-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 0.9rem 0.7rem;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  background: linear-gradient(to top, rgba(10,16,26,0.72), rgba(10,16,26,0));
}

.tvf-credits { padding: 5rem 0; background: var(--cream); }
.tvf-credit-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.tvf-credit h3 {
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray);
  margin: 0 0 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--gray-light);
}
.tvf-credit ul { list-style: none; margin: 0; padding: 0; }
.tvf-credit li {
  font-family: var(--font-title); font-size: 0.98rem; letter-spacing: 0.05em;
  color: var(--navy); padding: 0.5rem 0; line-height: 1.35;
}

/* The seven resorts ride the home page's own row — .resorts-track-wrap and
   .resorts-track, same card, same scroll, same snap. Seven across would be
   150px columns and wrapping four then three left the row lopsided; one row
   you push sideways takes any number of resorts. overflow keeps the track
   from widening the page. */
.tvf-stay { padding: 5rem 0 5.5rem; background: var(--white); overflow: hidden; }

@media (max-width: 1000px) {
  .tvf-credit-cols { grid-template-columns: 1fr 1fr; }
  .tvf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .tvf-credit-cols, .tvf-grid { grid-template-columns: 1fr; }
  .tvf-tablist { gap: 0 1.4rem; }
  .tvf-tab { font-size: 0.64rem; letter-spacing: 0.14em; }
  .tvf-lede { padding-top: 3.5rem; }
  .tvf-why, .tvf-locations, .tvf-credits, .tvf-stay { padding: 3.5rem 0; }
}

/* Music videos, film posters and the lightbox they open in */
.tvf-screen { padding: 5rem 0; background: var(--cream); }
.tvf-sub {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray);
  margin: 3.5rem 0 1.5rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--gray-light);
}
.tvf-sub:first-of-type { margin-top: 0; }
.tvf-vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tvf-vid {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: var(--navy); cursor: pointer; overflow: hidden;
  border-radius: 1px; text-align: left;
}
.tvf-vid img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  opacity: 0.88; transition: opacity var(--t), transform var(--t-slow) var(--ease);
}
.tvf-vid:hover img { opacity: 1; transform: scale(1.04); }
.tvf-vid:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tvf-play {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.92); pointer-events: none;
}
.tvf-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-left: 16px solid var(--navy);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.tvf-vid-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 1rem 0.85rem; color: var(--white); font-size: 0.86rem;
  background: linear-gradient(to top, rgba(10,16,26,0.86), rgba(10,16,26,0));
}
.tvf-vid-cap em {
  display: block; font-style: normal; font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 0.25rem;
}
.tvf-short { margin-top: 1.2rem; }
/* The poster frame carries the film's title near the top. Cropped to 21:9 it
   lost a quarter of its height and the title with it, so it keeps the 16:9
   the thumbnail actually is. */

.tvf-posters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.tvf-poster { margin: 0; }
.tvf-poster img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: 1px; box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}
.tvf-poster figcaption {
  font-family: var(--font-title); font-size: 0.86rem; letter-spacing: 0.06em;
  color: var(--navy); margin-top: 0.8rem; text-align: center;
}
/* Eight networks have shot here, which is the strongest thing on this page
   for a location scout. Sharing the cream with everything above it, the list
   read as a caption to the video; a black band of its own, running the full
   width of the page, makes it a section. */
.tvf-tv-band { background: var(--navy); padding: 4.5rem 0 4rem; }
.tvf-tv-band .tvf-sub {
  text-align: center; color: var(--gold);
  margin: 0 0 2.5rem; padding-bottom: 0; border-bottom: 0;
}
.tvf-tv { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem 1.75rem; }
.tvf-tv li {
  font-family: var(--font-title); font-size: 1.15rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--white);
  padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.tvf-shot { cursor: zoom-in; }
.tvf-shot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); }
.lb[hidden] { display: none; }
.lb-scrim { position: absolute; inset: 0; background: rgba(8,12,18,0.88);
  opacity: 0; transition: opacity 0.3s var(--ease); }
.lb-box { position: relative; width: min(1100px, 94vw);
  opacity: 0; transform: scale(0.985); transition: opacity 0.32s var(--ease), transform 0.4s var(--ease); }
.lb.is-open .lb-scrim { opacity: 1; }
.lb.is-open .lb-box { opacity: 1; transform: none; }
.lb-stage img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; }
.lb-stage iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.lb-cap { color: rgba(255,255,255,0.86); font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center; margin: 1rem 0 0; }
.lb-x { position: absolute; top: -46px; right: 0; width: 36px; height: 36px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: rgba(255,255,255,0.92); color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .lb-scrim, .lb-box { transition: none; }
}

@media (max-width: 1000px) {
  .tvf-vids { grid-template-columns: repeat(2, 1fr); }
  .tvf-posters { grid-template-columns: repeat(3, 1fr); }
  .tvf-tv { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .tvf-vids, .tvf-tv { grid-template-columns: 1fr; }
  .tvf-tv-band { padding: 3.25rem 0 2.75rem; }
  .tvf-posters { grid-template-columns: repeat(2, 1fr); }
  .tvf-screen { padding: 3.5rem 0; }
}

/* ── Group sales contact, on the Groups CTA ──────────────── */
.group-contact {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem; flex-wrap: wrap; text-align: left;
  margin: 2.25rem auto 2rem; max-width: 560px;
}
.group-contact-photo { width: 104px; height: 104px; border-radius: 50%; display: block; flex-shrink: 0; }
.group-contact-label {
  display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 0.5rem;
}
/* .cta-band p sets its own margins, so these need to win */
.cta-band .group-contact-name {
  font-family: var(--font-title); font-size: 1.15rem; color: var(--white);
  margin: 0 0 0.2rem; letter-spacing: 0.04em; line-height: 1.2;
}
.cta-band .group-contact-role {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin: 0 0 0.7rem; line-height: 1.3;
}
.group-contact-phone { display: block; font-family: var(--font-title); font-size: 1.1rem; color: var(--white); }
.group-contact-phone:hover { color: var(--gold-light); }
.group-contact-email { display: block; font-size: 0.78rem; color: var(--gold-light); margin-top: 0.2rem; }
@media (max-width: 520px) {
  .group-contact { flex-direction: column; text-align: center; gap: 1.1rem; }
}

/* ============================================================
   JOURNAL — index and posts
   An editorial treatment: a full-bleed lead image carries the
   title, and the reading column stays narrow.
   ============================================================ */

/* Post body */
.jr-article { padding: 4.5rem 0 5rem; }
.jr-article-inner { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.jr-article p { font-size: 1.04rem; line-height: 1.9; color: var(--charcoal); margin: 0 0 1.5rem; }
.jr-article p.jr-standfirst {
  font-size: 1.22rem; line-height: 1.75; color: var(--navy);
  margin-bottom: 2.25rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--cream-dark);
}
/* The headings carry the page: they are what you read when you skim it. In
   the site's blue and a size up they announce each section instead of
   blending into the body copy. 1.75rem is 28px, which keeps the blue above
   the AA contrast floor for large text. */
.jr-article h2 {
  font-family: var(--font-title); font-size: 1.75rem; font-weight: 400; color: var(--gold);
  text-transform: none; letter-spacing: 0.02em; line-height: 1.3; margin: 3rem 0 1.1rem;
}
.jr-article h3 {
  font-family: var(--font-title); font-size: 1.3rem; font-weight: 400; color: var(--gold);
  text-transform: none; letter-spacing: 0.02em; line-height: 1.35; margin: 2.25rem 0 0.9rem;
}
/* The line a resort's marks hang under — centred with them, not with the
   text column, so the three read as one block. */
.jr-article p.jr-eyebrow {
  text-align: center; margin-bottom: 0.4rem;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
}
/* the global reset removes markers; article prose needs them back */
.jr-article ul { margin: 0 0 1.5rem; padding-left: 1.3rem; list-style: disc; }
.jr-article ul li::marker { color: var(--gold); }
.jr-article li { font-size: 1.02rem; line-height: 1.85; color: var(--charcoal); margin-bottom: 0.6rem; }
/* Pictures sit a little wider than the 680px text column so they have some
   presence, without breaking the article into separate pieces. max-width,
   never width: a star rating is 197px across and setting a width stretched it
   to the full measure, five times its size and badly blurred. */
.jr-figure { margin: 2.75rem auto; width: 100%; max-width: min(820px, 92vw); }
.jr-figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* Pictures that ran one after another used to stack as a wall of slabs — over
   half of every post's pictures sit in runs like that, one of them six long.
   Side by side they read as a set. Each cell is cropped to the same shape so
   the rows line up; letting each keep its own proportions left ragged edges
   wherever a portrait met a landscape, which happened in eight runs. */
/* Resort wordmarks and star ratings. Shown at the width of a photograph a
   197px rating became five times its size and a logo a stamp adrift in white
   space — and one logo ended up cropped inside a photo grid, reading "RAND".
   They sit together in a small centred row at their own scale. */
.jr-marks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.1rem 1.6rem;
  margin: 2.25rem auto 2rem;
  max-width: min(680px, 92vw);
}
/* Capping only the height left these uneven: the wordmark canvases run from
   square to three-to-one, so the widest came out twice the size of the
   narrowest. Capping the width instead evens them up, and the rating sits
   smaller than the wordmark it belongs to rather than shouting over it. */
.jr-marks img { display: block; width: auto; height: auto; }
.jr-marks img[src*="-logo"]   { max-width: 150px; max-height: 64px; }
.jr-marks img[src*="-rating"] { max-width: 112px; }

.jr-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin: 2.5rem auto 0.5rem;
  max-width: min(680px, 92vw);
}
.jr-cta {
  flex: 0 1 auto;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--navy);
  color: var(--navy); background: transparent;
  font-family: var(--font-title); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transition: background var(--t), color var(--t);
}
.jr-cta:hover { background: var(--navy); color: var(--white); }

.jr-gallery {
  display: grid;
  gap: 0.75rem;
  margin: 2.75rem auto;
  width: 100%;
  max-width: min(820px, 92vw);
}
.jr-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.jr-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.jr-gallery .jr-figure { margin: 0; width: auto; max-width: none; aspect-ratio: 4 / 3; }
.jr-gallery .jr-figure img { width: 100%; height: 100%; object-fit: cover; }
.jr-gallery .jr-figure figcaption { padding: 2rem 0.7rem 0.6rem; font-size: 0.66rem; }
@media (max-width: 680px) {
  /* Three across at phone width is a row of thumbnails; two still reads. */
  .jr-gallery--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .jr-gallery--2, .jr-gallery--3 { grid-template-columns: 1fr; }
  .jr-gallery .jr-figure { aspect-ratio: 3 / 2; }
}
/* The caption sits on the picture rather than under it, so the credit travels
   with the image and the column of text is not broken up by grey lines. The
   gradient is what keeps it readable over a bright sky or dark water. */
/* One width for every picture in the article, and the picture fills it. The
   caption is pinned to the figure's edges, so the two have to be the same
   size or it runs out past the photograph as a grey band on white — which is
   why this was fit-content for a while. The cost of that: a figure measures
   nothing until its picture has loaded, so a page of lazy pictures jumped
   about as you scrolled, and one 720px original came out narrower than all
   the rest. A fixed width settles both. */
.jr-figure { position: relative; width: min(820px, 92vw); margin-left: auto; margin-right: auto; }
.jr-figure > img { width: 100%; }
.jr-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.75rem 1.1rem 0.9rem;
  font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.94);
  background: linear-gradient(to top, rgba(10,16,26,0.78), rgba(10,16,26,0.42) 45%, rgba(10,16,26,0));
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}
.jr-figure figcaption a { color: inherit; border-bottom: 1px solid rgba(255,255,255,0.5); pointer-events: auto; }
/* A rating mark or badge is only 35px tall — an overlay would bury it, so
   below the picture is the only place a caption can go on something small. */
@media (max-width: 520px) {
  .jr-figure figcaption { font-size: 0.68rem; padding: 2.25rem 0.85rem 0.75rem; }
}
.jr-back {
  max-width: 680px; margin: 0 auto; padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--cream-dark);
}
.jr-back a { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 640px) {
  .jr-lead { min-height: 62vh; }
  .jr-lead-inner { padding: 0 1.5rem 3rem; }
  .jr-inner { padding: 0 1.5rem; }
  .jr-article-inner, .jr-back { padding-inline: 1.5rem; }
}

/* ============================================================
   JOURNAL — option B
   No full-bleed hero. A split lead on a sand ground, then the
   remaining stories as a contents list ruled by hairlines.
   ============================================================ */
/* The site header is position:fixed, so a page that opens on white has to
   clear it rather than slide underneath. */
.jb-head { max-width: 1180px; margin: 0 auto; padding: 10rem 2.5rem 0; }
.jb-head .eyebrow { margin-bottom: 0.9rem; }
.jb-head h1 {
  font-family: var(--font-title); font-weight: 400; color: var(--navy);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 0.9rem;
}
.jb-head p { font-size: 0.98rem; color: var(--gray); max-width: 52ch; margin: 0; line-height: 1.8; }

/* Split lead */
.jb-lead {
  max-width: 1180px; margin: 3.5rem auto 0; padding: 0 2.5rem;
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 0;
  align-items: stretch;
}
.jb-lead-img { overflow: hidden; }
.jb-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.jb-lead:hover .jb-lead-img img { transform: scale(1.04); }
.jb-lead-text {
  background: var(--cream); padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.jb-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem;
}
.jb-tag .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.jb-lead-text h2 {
  font-family: var(--font-title); font-weight: 400; color: var(--navy);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.2; letter-spacing: 0.02em;
  text-transform: none; margin: 0 0 1rem; text-wrap: balance;
}
.jb-lead-text p { font-size: 0.95rem; line-height: 1.85; color: var(--gray); margin: 0 0 1.75rem; }
.jb-more {
  align-self: flex-start; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--gold); padding-bottom: 0.35rem; transition: color var(--t);
}
.jb-more:hover { color: var(--gold); }

/* Contents list */
.jb-list { max-width: 1180px; margin: 5rem auto 6rem; padding: 0 2.5rem; }
.jb-list-head {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--navy);
}
.jb-list-head h2 {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--navy); margin: 0;
}
.jb-list-head span { font-size: 0.7rem; color: var(--gray); letter-spacing: 0.1em; }
.jb-row {
  display: grid; grid-template-columns: 2.5rem 108px 1fr auto;
  gap: 1.75rem; align-items: center;
  padding: 1.9rem 0; border-bottom: 1px solid var(--cream-dark);
  transition: background var(--t);
}
.jb-row:hover { background: var(--cream); }
.jb-num {
  font-family: var(--font-title); font-size: 0.9rem; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.jb-row-img { aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.jb-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.jb-row:hover .jb-row-img img { transform: scale(1.06); }
.jb-row h3 {
  font-family: var(--font-title); font-size: 1.15rem; font-weight: 400; line-height: 1.3;
  letter-spacing: 0.02em; color: var(--navy); text-transform: none; margin: 0.4rem 0 0.5rem;
}
.jb-row p { font-size: 0.84rem; line-height: 1.7; color: var(--gray); margin: 0; max-width: 62ch; }
.jb-arrow { font-size: 1.1rem; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity var(--t), transform var(--t); }
.jb-row:hover .jb-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 860px) {
  .jb-lead { grid-template-columns: 1fr; }
  .jb-lead-img { aspect-ratio: 3/2; }
}
@media (max-width: 640px) {
  .jb-head, .jb-lead, .jb-list { padding-inline: 1.5rem; }
  .jb-row { grid-template-columns: 76px 1fr; gap: 1.1rem; }
  .jb-num, .jb-arrow { display: none; }
}

/* Post header, matching the Journal index: type on white, image after */
.jb-post-head {
  max-width: 820px; margin: 0 auto;
  padding: 10rem 2.5rem 0; text-align: center;
}
.jb-post-head .jb-tag { justify-content: center; }
.jb-post-head h1 {
  font-family: var(--font-title); font-weight: 400; color: var(--navy);
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.18; letter-spacing: 0.02em;
  text-transform: none; margin: 0 auto; max-width: 20ch; text-wrap: balance;
}
.jb-post-lede {
  font-size: 1.1rem; line-height: 1.8; color: var(--gray);
  max-width: 60ch; margin: 1.5rem auto 0;
}
.jb-post-img { margin: 3.5rem auto 0; max-width: 1180px; padding: 0 2.5rem; }
.jb-post-img img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .jb-post-head { padding: 8rem 1.5rem 0; }
  .jb-post-img { padding-inline: 1.5rem; margin-top: 2.5rem; }
}

/* A description we have not been given yet. Marked so it cannot be
   mistaken for finished copy. */
/* Links in an article column were the same muted navy as the text around
   them, with no underline — nothing marked them as clickable. The pages
   using this column are the legal ones and Know Before You Go, where the
   links are the useful part: an entry form, an insurer, the FAQs. */
/* ...pero no los botones: la regla les estaba poniendo el texto en azul y
   subrayado por encima de su propio estilo, en Fact Sheets & Maps, TV & Film
   y Wishing Well. */
.legal-body-inner a:not(.btn),
.legal-body-section a:not(.btn) {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t);
}
.legal-body-inner a:not(.btn):hover,
.legal-body-section a:not(.btn):hover { color: var(--navy); }

/* The spa and fitness rows name a resort on every card but led nowhere —
   the whole Wellness page never once took you to a resort. The card is now
   the link. */
.spa-card-a {
  display: flex; flex-direction: column; flex: 1;
  text-decoration: none; color: inherit;
}
.spa-card-img { overflow: hidden; }
.spa-card-img img { transition: transform var(--t-slow) var(--ease); }
.spa-card-a:hover .spa-card-img img { transform: scale(1.05); }
.spa-card-link {
  display: block; margin-top: 1.1rem;
  font-family: var(--font-title); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  transition: color var(--t);
}
.spa-card-a:hover .spa-card-link { color: var(--white); }
.spa-card-a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* ============================================================
   NARRATED TRAINING — sample page for one resort
   Alternating photograph and text, one audio element driving six
   buttons, and a knowledge check at the end.
   ============================================================ */
.tr-flag {
  background: var(--navy);
  color: rgba(255,255,255,0.78);
  padding: 1.1rem 2rem;
  font-size: 0.86rem;
  text-align: center;
}
.tr-flag p { max-width: 70ch; margin: 0 auto; color: rgba(255,255,255,0.78); }
.tr-flag strong { color: var(--white); }
.tr-flag a { color: var(--gold-light); border-bottom: 1px solid currentColor; }

.tr-intro { padding: 4.5rem 2rem 1rem; }
.tr-intro-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.tr-intro-inner p { font-size: 1rem; color: var(--navy-mid); line-height: 1.9; }

.tr-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.tr-sec:nth-of-type(even) { direction: rtl; }
.tr-sec:nth-of-type(even) > * { direction: ltr; }
.tr-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 1px;
  display: block;
}
.tr-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.tr-body h2 {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 1.1rem;
}
.tr-script {
  font-size: 0.92rem;
  line-height: 1.95;
  color: var(--gray);
  margin: 0 0 1.4rem;
}
.tr-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-light); }
.tr-facts li {
  font-size: 0.84rem;
  color: var(--navy);
  padding: 0.55rem 0 0.55rem 1.1rem;
  border-bottom: 1px solid var(--gray-light);
  position: relative;
}
.tr-facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.15rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* El botón de audio */
.tr-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gold);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0.6rem 1.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
  transition: background var(--t), border-color var(--t);
}
.tr-play:hover { background: var(--navy); border-color: var(--navy); }
.tr-play-icon {
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.tr-play[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.tr-play[aria-pressed="true"] .tr-play-icon {
  width: 8px; height: 10px;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.tr-play-time { opacity: 0.7; font-weight: 500; letter-spacing: 0.08em; }
.tr-sec.is-playing .tr-media img { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Prueba de conocimiento */
.tr-quiz { background: var(--cream); padding: 5rem 2rem 5.5rem; }
.tr-quiz-inner { max-width: 760px; margin: 0 auto; }
.tr-quiz-inner > .eyebrow { color: var(--gold); }
.tr-quiz-inner h2 {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--navy);
  margin: 0.5rem 0 0.4rem;
}
.tr-quiz-sub { font-size: 0.9rem; color: var(--gray); margin: 0 0 2.25rem; }
.tr-qs { list-style: none; margin: 0; padding: 0; }
.tr-q { margin-bottom: 2rem; }
.tr-q-text {
  display: flex;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.75rem;
}
.tr-q-text span {
  font-family: var(--font-body);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.tr-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tr-opt {
  background: var(--white);
  color: var(--navy-mid);
  border: 1px solid var(--gray-light);
  border-radius: 2px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.tr-opt:hover { border-color: var(--gold); color: var(--navy); }
.tr-opt.is-picked { border-color: var(--navy); background: var(--navy); color: var(--white); }
.tr-opt.is-right { border-color: #2f7a56; background: #2f7a56; color: var(--white); }
.tr-opt.is-wrong { border-color: #b0533a; background: #b0533a; color: var(--white); }
.tr-q-mark { margin: 0.55rem 0 0; font-size: 0.8rem; color: #b0533a; }

.tr-quiz-foot { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.tr-score { margin: 0; font-size: 0.95rem; font-weight: 600; }
.tr-score.is-pass { color: #2f7a56; }
.tr-score.is-fail { color: #b0533a; }
.tr-next {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-dark);
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--gray);
}
.tr-next strong { color: var(--navy); }

@media (max-width: 900px) {
  .tr-sec, .tr-sec:nth-of-type(even) { grid-template-columns: 1fr; direction: ltr; gap: 1.5rem; padding: 2.5rem 1.5rem; }
  .tr-media img { height: 240px; }
}
@media (max-width: 560px) {
  .tr-intro { padding: 3rem 1.5rem 0.5rem; }
  .tr-quiz { padding: 3.5rem 1.5rem 4rem; }
  .tr-opts { flex-direction: column; align-items: stretch; }
  .tr-opt { text-align: left; }
}


/* ============================================================
   NARRATED DECK — EIR's own slides with a voice over them
   ============================================================ */
.dk-flag {
  background: var(--navy);
  padding: 1.1rem 2rem;
  font-size: 0.86rem;
  text-align: center;
  /* El encabezado fijo mide 99px, no 108: con margin quedaba una franja blanca
     entre los dos. El navy sube hasta arriba y el encabezado se apoya sobre él. */
  padding-top: calc(99px + 1.1rem);
}
.dk-flag p { max-width: 74ch; margin: 0 auto; color: rgba(255,255,255,0.78); }
.dk-flag strong { color: var(--white); }
.dk-flag a { color: var(--gold-light); border-bottom: 1px solid currentColor; }

.dk-stage { background: #0d1218; padding: 2.25rem 2rem 2.5rem; }
.dk-frame {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.dk-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.16); }
.dk-bar-fill { height: 100%; width: 0; background: var(--gold); transition: width 0.25s linear; }

.dk-controls {
  max-width: 1120px;
  margin: 1.1rem auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}
.dk-btn {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 2px;
  padding: 0.55rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--t), border-color var(--t);
}
.dk-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.dk-btn--play { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--gold); border-color: var(--gold); }
.dk-btn--play:hover { background: var(--gold-light); border-color: var(--gold-light); }
.dk-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.dk-icon.is-pause { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.dk-count, .dk-time {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}
.dk-count b { color: var(--white); font-weight: 600; }
.dk-time { margin-left: auto; }

.dk-caption { max-width: 1120px; margin: 1.6rem auto 0; }
.dk-caption h2 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 0.5rem;
}
.dk-caption p { font-size: 0.9rem; line-height: 1.8; color: rgba(255,255,255,0.62); margin: 0; max-width: 72ch; }

.dk-thumbs {
  max-width: 1120px;
  margin: 1.75rem auto 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.dk-thumb {
  position: relative;
  flex: 0 0 104px;
  background: none;
  border: 2px solid transparent;
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
  opacity: 0.45;
  transition: opacity var(--t), border-color var(--t);
}
.dk-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.dk-thumb span {
  position: absolute; left: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  color: var(--white);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.3rem;
}
.dk-thumb:hover { opacity: 0.85; }
.dk-thumb.is-on { opacity: 1; border-color: var(--gold); }

.dk-note { padding: 3rem 2rem 4rem; }
.dk-note p {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--gray);
}
.dk-note strong { color: var(--navy); }
.dk-note a { color: var(--gold); border-bottom: 1px solid currentColor; }

@media (max-width: 760px) {
  .dk-flag { padding: 1rem 1.25rem; }
  .dk-stage { padding: 1.5rem 1rem 2rem; }
  .dk-time { margin-left: 0; width: 100%; }
  .dk-thumb { flex-basis: 84px; }
  .dk-note { padding: 2.5rem 1.5rem 3rem; }
}

/* Diapositiva aún sin locución: se avisa en lugar de dejar un botón muerto. */
.dk-unvoiced {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Banda de la propuesta: dice qué es esto y quién lo hizo. El relleno superior
   lleva la altura real del encabezado fijo (99px), no los 108 de .header-offset,
   que dejaban una franja blanca entre el menú y el navy. */
.pr-band {
  background: var(--navy);
  padding: calc(99px + 1.1rem) 2rem 1.1rem;
  text-align: center;
}
.pr-band p { max-width: 76ch; margin: 0 auto; font-size: 0.84rem; line-height: 1.7; color: rgba(255,255,255,0.72); }
.pr-band strong { color: var(--white); }