/* ============================================================
   site.css — SHARED, SITE-WIDE styles (every page links this).
   Edit the nav, footer, buttons, tokens or type scale HERE, once,
   and it applies to every page. Page-specific section styles live
   in each page's own stylesheet (home.css, what-we-do.css, ...).
   ============================================================ */

/* ---- DESIGN TOKENS (from figma-export.json) ---- */
:root {
  /* Brand colours */
  --navy: #506d85;
  --sand: #f8f1e7;
  --olive: #6b6b33;
  --woodfire: #af4a3f;
  --teal: #245354;
  --blood-orange: #c74a00;
  --rough-sand: #8e6f47;
  --water: #e3ebf2;
  --white: #ffffff;
  --black: #000000;

  /* Fonts */
  --serif: 'Playfair Display', serif;
  --sans: 'Rethink Sans', sans-serif;

  /* Layout (one system, site-wide) */
  --container: 1272px;
  --gutter: 120px;
  --pad: 40px;     /* full-width chrome (nav/footer) horizontal padding */

  /* Ink */
  --ink: #1a1a1a;
  --ink-soft: #1a1a1a;
  --cap: #4f4f4f;
}

/* ---- RESET / BASE ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.03em;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; font-family: var(--sans); background: none; }
a { color: inherit; text-decoration: none; }

/* ---- LAYOUT HELPERS ---- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.center { text-align: center; }

/* ---- TYPE SCALE (site-wide) ---- */
h1, h2, h3 { font-weight: 400; }
/* GLOB-02: scale stepped down from 80/68 (client: headings too large vs 16px body). */
h1 { font-family: var(--serif); font-size: 64px; line-height: 72px; letter-spacing: -0.02em; }
h2 { font-family: var(--serif); font-size: 54px; line-height: 64px; letter-spacing: -0.02em; }
.lead { font-size: 17px; line-height: 26px; max-width: 760px; margin: 0 auto; }

/* ---- BUTTONS / PILLS ---- */
.pill-navy, .pill-water, .pill-ghost,
.pill-hero-filled, .pill-hero-outline {
  font-size: 16.5px;   /* GLOB-02: CTA text up a notch (.pill-ghost re-overrides to 14px below) */
  font-weight: 500;
  letter-spacing: -0.03em;
  border-radius: 999px;
  padding: 13px 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .3s ease, color .35s ease, border-color .3s ease,
              box-shadow .35s ease, opacity .2s ease;
  white-space: nowrap;
}
.pill-navy { background: var(--navy); color: var(--white); }
.pill-navy:hover { color: var(--navy); }
.pill-water { background: var(--water); color: var(--navy); }
.pill-water:hover { color: var(--white); }
.pill-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
}
.pill-ghost strong { font-weight: 700; }
.pill-hero-filled { background: rgba(80,109,133,.85); color: var(--white); }
.pill-hero-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.7); }
.pill-hero-filled:hover { color: var(--navy); }
.pill-hero-outline:hover { border-color: var(--white); color: var(--navy); }

.caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 2px;
  vertical-align: middle;
}

/* ============================================================
   SHARED CONTENT PRIMITIVES (used across pages — one source here)
   ============================================================ */
.bg-white { background: var(--white); }
.bg-sand  { background: var(--sand); }
.band-navy { background: var(--navy); color: var(--white); }

.serif-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 54px; line-height: 64px; letter-spacing: -0.02em; color: var(--ink);
}
.dot { color: var(--teal); margin: 0 6px; }
.ext { width: 13px; height: 13px; flex: none; }

/* photo credit caption (supplier • property) */
.caption { font-size: 12px; line-height: 16px; letter-spacing: -0.02em; color: var(--cap); margin-top: 12px; }
.caption.light { color: rgba(255,255,255,.85); }
.caption.light .dot { color: rgba(255,255,255,.85); }

/* secondary "outline" buttons */
.btn-outline, .btn-outline-light {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16.5px; font-weight: 500; letter-spacing: -0.03em;   /* GLOB-02: tracks the pill CTAs */
  border-radius: 999px; padding: 13px 28px; white-space: nowrap;
  transition: background .3s ease, color .35s ease, border-color .3s ease,
              box-shadow .35s ease;
}
.btn-outline { background: transparent; color: var(--ink); border: 1px solid #cfc7b8; }
.btn-outline:hover { border-color: var(--navy); color: var(--white); }
.bg-white .btn-outline { border-color: #d7d2c8; }
.btn-outline-light { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.55); }
.btn-outline-light:hover { border-color: var(--white); color: var(--navy); }

/* ---- CTA SWEEP (the hover moment on every button) ----
   A skewed panel of the contrasting colour wipes across the button; the label
   crossfades to the arriving colour and the button blooms a soft shadow — no
   vertical movement. The ::before paints above the button's own background but
   below its text/icon (isolation + negative z-index), so no extra markup.
   Under prefers-reduced-motion the wipe becomes an instant colour swap. */
.pill-navy, .pill-water, .pill-hero-filled, .pill-hero-outline,
.btn-outline, .btn-outline-light {
  position: relative; overflow: hidden; isolation: isolate;
}
.pill-navy::before, .pill-water::before, .pill-hero-filled::before, .pill-hero-outline::before,
.btn-outline::before, .btn-outline-light::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateX(-115%) skewX(-12deg);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pill-navy::before { background: var(--water); }
.pill-water::before, .btn-outline::before { background: var(--navy); }
.pill-hero-filled::before, .pill-hero-outline::before, .btn-outline-light::before { background: var(--white); }
.pill-navy:hover::before, .pill-water:hover::before,
.pill-hero-filled:hover::before, .pill-hero-outline:hover::before,
.btn-outline:hover::before, .btn-outline-light:hover::before {
  transform: translateX(0) skewX(0);
}
.pill-navy:hover, .pill-water:hover, .pill-hero-filled:hover, .pill-hero-outline:hover,
.btn-outline:hover, .btn-outline-light:hover {
  box-shadow: 0 14px 26px -16px rgba(20, 36, 50, .5);
}
/* category chips preview their active state: the same navy sweep, label flips
   white — hovering a chip shows exactly what selecting it looks like. The
   already-active chip is navy; it gets no sweep. */
.chip { position: relative; overflow: hidden; isolation: isolate; }
.chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--navy);
  transform: translateX(-115%) skewX(-12deg);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.chip.active::before { content: none; }
.chip:not(.active):hover {
  color: var(--white);
  box-shadow: 0 10px 18px -12px rgba(20, 36, 50, .45);
}
.chip:not(.active):hover::before { transform: translateX(0) skewX(0); }

/* on navy bands the water pill's navy sweep would vanish into the section
   behind it — a white ring keeps the button's edge. An outline (not border, no
   layout shift; not inset shadow, the sweep panel would paint over it) that
   fades in timed to the panel's arrival. */
.band-navy .pill-water {
  outline: 1.5px solid transparent; outline-offset: -1.5px;
  transition: background .3s ease, color .35s ease, border-color .3s ease,
              box-shadow .35s ease, opacity .2s ease, outline-color .25s ease .15s;
}
.band-navy .pill-water:hover {
  outline-color: rgba(255, 255, 255, .85);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .55);
}
/* icons inside CTAs ride the sweep with the same nudge as read-more links */
.pill-navy .ext, .pill-water .ext, .pill-hero-filled .ext, .pill-hero-outline .ext,
.btn-outline .ext, .btn-outline-light .ext { transition: transform .3s ease; }
.pill-navy:hover .ext, .pill-water:hover .ext, .pill-hero-filled:hover .ext,
.pill-hero-outline:hover .ext, .btn-outline:hover .ext, .btn-outline-light:hover .ext {
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .pill-navy::before, .pill-water::before, .pill-hero-filled::before, .pill-hero-outline::before,
  .btn-outline::before, .btn-outline-light::before, .chip::before, .enq-badge span::before,
  .pagination .prev::before, .pagination .next::before { transition: none; }
}

/* ---- SHARED HERO (full-bleed bg photo + centred white title/subtitle/buttons) ----
   Used by What We Do, Travel journal, etc. Per-page tweaks (e.g. height) go in the
   page stylesheet; default height suits a standard hero. */
.hero { position: relative; height: 840px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* readability scrim between the photo and the white copy — slightly heavier at the
   bottom where the caption/buttons sit over the busiest part of the image */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.34) 100%);
}
.hero-content { position: relative; z-index: 2; text-align: center; color: var(--white); }
/* Small line naming the site, above the hero h1. Selector must out-specify the page
   stylesheets' `.hero-content p` (0,1,1), which sets the 20px subtitle size. */
.hero-content .hero-eyebrow {
  color: rgba(255,255,255,.82);
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .hero-content .hero-eyebrow { font-size: 10px; letter-spacing: .16em; }
}
.hero-content h1 { color: var(--white); margin-bottom: 22px; }   /* size from h1 token (64px) */
/* Safety net for long titles: if the home title's stored "\n" is ever lost, the 64px h1
   would run as ONE ~945px line. 18ch is measured, not guessed — Playfair's "0" is 0.6em,
   so 18ch = 691px at 64px: "Your Travel Means the" (611px) fits, "…the World" (788px)
   doesn't, so the natural break lands after "the". (Both the text and ch scale linearly
   with font-size, so the fit held unchanged through the GLOB-02 80px→64px step.)
   text-wrap:balance (progressive enhancement) may instead even the lines out
   ("Your Travel Means / the World to Us") — either way the title reads as two balanced
   lines, and the seeded "\n" (a <br>) still forces the canonical break wherever it
   survives. ch is font-relative, so the journal's 84px h1 scales with it; every other
   hero title is well under 18ch and unaffected.
   ≥901px only — the ≤900px h1 drops to 44px and wraps naturally. */
@media (min-width: 901px) {
  .hero-content h1 { max-width: 18ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
}
.hero-content p { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; margin-bottom: 34px; }
.hero-btns { display: flex; gap: 16px; justify-content: center; }
.hero-caption {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
  padding: 10px var(--pad) 0;
  color: var(--ink); font-size: 12px; line-height: 16px; letter-spacing: -0.02em;
}
.hero-caption .dot { color: var(--teal); }

/* ---- PAGE HERO (light pages: centred serif title + subtitle + CTA on white) ----
   Used by Pricing, Contact, etc. (pair with <body class="light-header">). */
.page-hero { text-align: center; padding: 144px 0 26px; }
.page-hero h1 { font-size: 54px; line-height: 62px; margin-bottom: 14px; }   /* page title (~54px), smaller than hero h1 */
.page-hero .page-sub { font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: var(--ink-soft); margin-bottom: 30px; }

/* ---- BLOG / POST CARDS (image + title + read-more) — shared by Travel journal,
   Inspiration "Get inspired", etc. ---- */
.read-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: -0.02em; color: var(--navy); position: relative; }
.read-more .ext { width: 11px; height: 11px; transition: transform .3s ease; }
/* the nav's wipe-through underline (in from the left, out to the right); card
   hovers draw it too, matching the .ext nudge the cards already do */
.read-more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .read-more:hover::after, .post:hover .read-more::after, .pick-card:hover .read-more::after {
    transform: scaleX(1); transform-origin: left center;
  }
}
.read-more:hover .ext { transform: translate(2px, -2px); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post img { width: 100%; aspect-ratio: 384 / 256; object-fit: cover; border-radius: 0; }
.post-title { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 16px 0 12px; }
/* numbered pagination under the journal grids (see tc_pagination()) —
   .page-numbers / .current / .dots / .prev / .next come from paginate_links() */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 34px 0 0; }
.pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-size: 15px; letter-spacing: -0.02em; color: var(--ink);
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
/* number pills tint sand — Back/Next are EXCLUDED (they share .page-numbers but
   run the navy CTA sweep; sand under white text was unreadable) */
.pagination a.page-numbers:not(.prev):not(.next):hover { background: var(--sand); }
.pagination .page-numbers.current { background: var(--navy); color: var(--white); }
.pagination .page-numbers.dots { min-width: 24px; padding: 0; color: var(--cap); }
.pagination .prev, .pagination .next {
  border: 1px solid #d7d2c8; padding: 0 20px;
  position: relative; overflow: hidden; isolation: isolate;   /* CTA sweep host */
  /* label waits for the navy panel to arrive underneath before turning white */
  transition: border-color .25s ease, color .2s ease .15s, box-shadow .35s ease;
}
.pagination .prev::before, .pagination .next::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--navy);
  transform: translateX(-115%) skewX(-12deg);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pagination .prev:hover, .pagination .next:hover { border-color: var(--navy); color: var(--white); }
.pagination .prev:hover::before, .pagination .next:hover::before { transform: translateX(0) skewX(0); }
/* mobile: arrows only (labels stay for screen readers) so the row never wraps */
@media (max-width: 560px) {
  .pagination { gap: 6px; }
  .pagination .page-numbers { min-width: 36px; height: 36px; }
  .pagination .prev, .pagination .next { padding: 0 13px; }
  .pagination .pag-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
.pag-arrow { font-size: 14px; line-height: 1; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }

/* ---- PARTNER LOGO STRIP (home + who-we-are) — shared so both pages get the marquee ----
   controller.js clones the row into `.logo-group`s and drives the transform on mobile. */
.logos { padding: 28px 0; overflow: hidden; }
.logo-track {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  flex-wrap: wrap; row-gap: 28px; /* no-JS/pre-JS: the full partner set wraps, never clips */
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);
}
.logo-track img { height: 72px; width: auto; object-fit: contain; }

/* ---- Desktop: paged carousel (controller.js groups the strip into pages of five,
   auto-advancing with dots — the live site's presentation). Only built when the
   strip holds more logos than the designed single row fits. ---- */
@media (min-width: 901px) {
  .logos.is-pager .logo-track { display: block; }
  .logos.is-pager .logo-page {
    display: none; grid-template-columns: repeat(5, 1fr);
    align-items: center; justify-items: center; gap: 40px;
  }
  .logos.is-pager .logo-page.is-active { display: grid; }
  .logos.is-pager .logo-track img { height: 72px; max-width: 100%; } /* the live files are 70px tall — render ~1:1 so they stay sharp */
}
.logo-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.logo-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 25%, transparent);
  transition: background .25s ease, scale .25s ease;
}
.logo-dot.is-active { background: var(--navy); scale: 1.2; }

/* ---- Mobile: endless marquee (controller.js clones the row and drives the transform).
   Desktop pages the strip; at phone widths pages would squeeze the logos, so ≤900px
   the row scrolls endlessly instead. `.is-marquee` is only ever added ≤900px;
   `.is-scrollable` is the reduced-motion / no-JS fallback: swipe the strip. ---- */
@media (max-width: 900px) {
  .logos.is-marquee .logo-track {
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: none; width: max-content;
    padding: 0; gap: 0;
    will-change: transform;
  }
  .logos.is-marquee .logo-group {
    display: flex; align-items: center; gap: 52px;
    padding-right: 52px; flex: none;
  }
  .logos.is-marquee .logo-track img { height: 56px; }

  .logos.is-scrollable { overflow-x: auto; scrollbar-width: none; }
  .logos.is-scrollable::-webkit-scrollbar { display: none; }
  .logos.is-scrollable .logo-track {
    justify-content: flex-start; width: max-content; max-width: none;
  }
}

/* ---- Testimonial slides (home block + what-we-do t-section share these) ----
   only the active slide shows; single-slide cards hide their arrows. Lifted from
   home.css — what-we-do reuses the markup but never loaded that sheet. */
.t-slide { display: none; }
.t-slide.is-active { display: block; }
.t-card.t-single .t-arrow { display: none; }
.t-card.t-single + .t-controls { display: none; }

/* ---- Carousel controls (shared): round navy prev/next pair UNDER the slider ----
   The destinations-carousel convention (Frame_70.svg, centred pair) reused by
   .explore-controls (home destinations) and .t-controls (every testimonial slider).
   Hover grows via the `scale` property so it composes with .ctrl-next's scaleX(-1)
   flip — `transform` would clobber it. */
.carousel-controls { display: flex; justify-content: center; gap: 14px; }
.t-controls { margin-top: 24px; }
.ctrl-arrow { background: none; transition: opacity .2s ease; }
.ctrl-arrow img { width: 36px; height: 36px; display: block; transition: scale .3s ease; }
.ctrl-next img { transform: scaleX(-1); }
.ctrl-arrow:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ctrl-arrow:not(:disabled):hover img { scale: 1.15; }
}
.ctrl-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 50%; }

/* ---- TAB NAV (shared): What We Do + Luxury Cruising panels, campaign LP anchors ----
   Lived in what-we-do.css mirrored into luxury-cruising.css; lifted here when the
   campaign LP became the third consumer (CAMP-02). Page CSS keeps only its own
   panel rules (.travel etc.). */
.tabnav { background: var(--white); border-bottom: 1px solid #e8e4dc; }
.tabnav-inner {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; justify-content: center; align-items: center; gap: 34px; flex-wrap: wrap;
}
.tabnav a {
  font-size: 15px; letter-spacing: -0.02em;
  padding: 20px 2px; position: relative; margin-bottom: -1px;
  /* hover highlights the word left-to-right: an ink layer wipes across the
     grey base, clipped to the glyphs */
  color: transparent;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(#6f6f6f, #6f6f6f);
  background-repeat: no-repeat;
  background-size: 0% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-size .45s cubic-bezier(.22, .61, .36, 1);
}
.tabnav a:hover { background-size: 100% 100%, 100% 100%; }
.tabnav a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 999px; }
/* the selected tab is a solid ink pill: the gradient-clip wipe stays on inactive
   tabs only; .active reverts background-clip to the box so the fill shows */
.tabnav a.active {
  color: var(--white);
  background: var(--ink);
  -webkit-background-clip: border-box; background-clip: border-box;
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 0;
  font-weight: 500;
}
/* the ink pill SLIDES between tabs: controller.js injects .tabnav-pill, marks the
   nav .has-pill (+ .tabnav-anim when motion allowed) and glides it to the active
   link; no JS -> the static .active pill above renders (progressive enhancement) */
.tabnav-inner { position: relative; }  /* pill coords = links' offsetLeft/Top space */
.tabnav-pill {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  background: var(--ink); border-radius: 999px;
  pointer-events: none;
}
.tabnav.has-pill a.active { background: none; }  /* the pill paints the fill */
.tabnav.tabnav-anim .tabnav-pill {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              width .35s cubic-bezier(.22, .61, .36, 1),
              height .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, width;
}
/* text flips as the pill arrives: the white fill fades in over the pill's
   final stretch (and back out to the grey clip-wipe as it leaves) */
.tabnav.tabnav-anim a {
  transition: background-size .45s cubic-bezier(.22, .61, .36, 1),
              color .18s linear .17s;
}
@media (max-width: 1024px) {
  .tabnav-inner {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* overflow-x:auto silently computes overflow-y:auto too, and the sliding
       pill hangs a few px below the row — that slack made finger-swipes wobble
       vertically (client QA). Lock the axis + the gesture. */
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    gap: 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
  }
  .tabnav-inner::-webkit-scrollbar { display: none; }   /* WebKit */
  .tabnav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- TESTIMONIAL (centered heading + Virtuoso video slot + self-contained tiles) ----
   Shared site-wide (.t-tiles) — the home block AND page-what-we-do.php emit the
   same tile markup (client QA: all testimonial sliders look the same). */
.testimonial { padding: 80px 0; }
.t-heading { color: var(--black); text-align: center; max-width: 760px; margin: 0 auto 32px; }

/* photo caption: brand • place, tiny, dark on white / white over photos (.light) */
.img-caption {
  font-size: 12px; line-height: 16px; letter-spacing: -0.02em;
  color: #6b6b6b; margin-top: 12px;
}
.img-caption span { color: #3a3a3a; } /* R2-GLOB-02: client caption style — no bolding */
.img-caption.light { color: rgba(255,255,255,.75); }
.img-caption.light span { color: #fff; }

/* Virtuoso row: optional 16:9 video panel beside the advisor CTA link.
   Without the embed (video URL arrives later) just the centered link row renders. */
.t-virtuoso { text-align: center; margin: 0 auto 48px; }
.t-virtuoso.has-video {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px; align-items: center; text-align: left; max-width: 1040px;
}
.t-video { position: relative; aspect-ratio: 16 / 9; background: var(--navy); border-radius: 20px; overflow: hidden; }
.t-video iframe, .t-video video, .t-video embed, .t-video object {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.t-advisor { margin: 0; }
.t-advisor-link {
  display: inline-block; font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
  color: var(--teal); padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* underline sweeps in underfoot — same spirit as the pill sweep, no translateY */
  .t-advisor-link { background-size: 0 1px; transition: background-size .35s ease; }
  .t-advisor-link:hover { background-size: 100% 1px; }
}

/* Each testimonial is its OWN tile: sand quote card with its photo + caption inside.
   Prev/next are the shared round navy pair (.carousel-controls.t-controls, site.css)
   sitting UNDER the card — same convention as the destinations carousel below. */
.t-tiles .t-card { max-width: 1040px; margin: 0 auto; }
.t-tiles .t-controls { max-width: 1040px; margin-left: auto; margin-right: auto; }
.t-tiles .t-slide {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--sand); border-radius: 20px; overflow: hidden;
}
.t-tiles .t-slide.is-active { display: grid; }   /* overrides site.css's display: block */
.t-tile-media { position: relative; margin: 0; }
.t-tile-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.t-tile-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
}
.t-tile-media .img-caption { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; z-index: 2; }
.t-tile-quote { padding: 44px 56px; display: flex; flex-direction: column; justify-content: center; }
.quote-icon { width: 34px; height: 34px; margin-bottom: 14px; }
.t-quote { font-weight: 700; font-size: 16px; color: #1a1a1a; margin-bottom: 16px; }
.t-text { font-size: 15px; line-height: 23px; color: #3a3a3a; margin-bottom: 18px; }
.t-author { font-weight: 700; font-size: 15px; color: #1a1a1a; }
@media (max-width: 900px) {
  /* tiles stack: photo on top, quote below (lived in home.css; sliders are site-wide) */
  .testimonial { padding: 64px 0; }
  .t-tiles .t-slide { grid-template-columns: 1fr; }
  .t-tile-media img { min-height: 0; aspect-ratio: 16 / 10; }
  .t-tile-quote { padding: 30px 26px; }
  .t-virtuoso.has-video { grid-template-columns: 1fr; gap: 24px; text-align: center; }
}

/* ---- SHARED SECTION PATTERNS (two-column, media, ready band, location cards) ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.two-col.reverse .media { order: 2; }
.two-col.reverse .content { order: 1; }
.media img { width: 100%; aspect-ratio: 600 / 719; object-fit: cover; border-radius: 0; }
/* R4-IMG-03: the activity-type tab sections (What We Do + Luxury Cruising, both .travel)
   run square frames — the client supplies square crops for these slots. */
.travel .media img { aspect-ratio: 1 / 1; }

/* navy "ready / speak to us" band: image + heading + button */
.ready { padding: 90px 0; }
.ready-grid { gap: 80px; align-items: center; }
.ready-media img { aspect-ratio: 600 / 494; }
.ready-text .serif-title { color: var(--white); font-size: 54px; line-height: 64px; margin-bottom: 22px; }
.ready-text p { color: rgba(255,255,255,.92); font-size: 16px; line-height: 24px; max-width: 420px; margin-bottom: 30px; }

/* navy "Our Location" section + location cards */
.our-loc { padding: 72px 0 46px; text-align: center; }
.our-loc .serif-title { color: var(--white); margin-bottom: 16px; }
.our-loc .loc-desc { color: rgba(255,255,255,.9); font-size: 15px; line-height: 23px; max-width: 1080px; margin: 0 auto 18px; }
.our-loc .loc-meet { color: var(--white); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; margin-bottom: 22px; }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.loc-card { position: relative; overflow: hidden; aspect-ratio: 1174 / 470; }
.loc-card img { width: 100%; height: 100%; object-fit: cover; }
.loc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45)); }
.loc-name { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: var(--white); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.loc-arrow { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.loc-arrow img { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .two-col, .ready-grid { grid-template-columns: 1fr; gap: 32px; }
  .two-col.reverse .media { order: 1; }
  .two-col.reverse .content { order: 2; }
  .ready-text .serif-title { font-size: 36px; line-height: 44px; }
}
@media (max-width: 760px) { .loc-grid { grid-template-columns: 1fr; } }

/* ---- FULL-BLEED BANNER PHOTO + caption (sits under a page hero) ---- */
.banner { padding: 0; }
.banner img { width: 100%; height: auto; display: block; object-fit: cover; }
.banner-cap {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
  padding: 10px var(--pad) 0;
  font-size: 12px; line-height: 16px; letter-spacing: -0.02em; color: var(--cap);
}
.banner-cap .dot { color: var(--teal); }

/* ============================================================
   HEADER / NAV  (shared — edit once)
   ============================================================ */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 0; }
.header-inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-left { display: flex; align-items: center; gap: 48px; }
.logo { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--white); letter-spacing: -0.01em; }
.logo span { color: #b9c4cd; font-weight: 400; }
.logo img { height: 26px; width: auto; display: block; }
/* Two logo variants live in the partial; show the one that suits the header bg.
   Default header sits over a dark hero → white logo. Light-header pages flip it.
   (Selector must out-specify `.logo img` above, hence `.logo img.logo-on-light`.) */
.logo img.logo-on-light { display: none; }
.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a {
  color: var(--white); font-size: 15px; font-weight: 400; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
/* Top-level links get a wipe-through underline; scoped to the direct links +
   the Destinations toggle so it stays off the .nav-sub dropdown items (they
   highlight with a sand fill instead). The origin swap makes the line ENTER
   from the left and EXIT to the right — it always travels through, never
   shrinks back the way it came. Hovering the menu also gently dims the other
   links so the hovered one carries the light. */
.nav-menu > a, .nav-menu > .nav-item > .nav-drop { position: relative; }
.nav-menu > a::after, .nav-menu > .nav-item > .nav-drop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  /* opacity transition lives in here so it can't fight the mobile drawer's
     GSAP stagger, which tweens these same links' opacity inline */
  .nav-menu > a, .nav-menu > .nav-item > .nav-drop { transition: opacity .3s ease; }
  .nav-menu > a:hover::after, .nav-menu > .nav-item > .nav-drop:hover::after {
    transform: scaleX(1); transform-origin: left center;
  }
  .nav-menu:hover > a:not(:hover),
  .nav-menu:hover > .nav-item:not(:hover) > .nav-drop { opacity: .45; }
}
/* NAV-02: the section you're IN keeps that underline at rest — same geometry as the
   hover wipe (same ::after, 1.5px, -6px), but persistent and static (transition off,
   so it neither wipes in on hover nor out on leave), plus a slightly firmer weight.
   currentColor keeps it legible in every header state: white over dark heroes and on
   the stuck bar, ink on light-header pages. Other links keep the full wipe untouched. */
.nav-menu > a.is-current, .nav-menu > .nav-item > .nav-drop.is-current { font-weight: 500; }
.nav-menu > a.is-current::after, .nav-menu > .nav-item > .nav-drop.is-current::after {
  transform: scaleX(1); transition: none;
}
.nav-right { display: flex; align-items: center; gap: 20px; }
.phone { color: var(--white); font-size: 14px; letter-spacing: -0.01em; }

/* Region selector — "You are at: …" dropdown */
.region { position: relative; }
.region-toggle .caret { transition: transform .2s ease; }
.region.open .region-toggle .caret { transform: rotate(180deg); }
/* Same card + item treatment as the Destinations .nav-sub panel — the two nav
   dropdowns must read as one component. (Items are <a role="option">, not buttons.) */
.region-menu {
  display: none; list-style: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 100%; padding: 10px; z-index: 200;
  background: var(--white); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}
.region.open .region-menu { display: block; }
.region-menu a, .region-menu button {
  display: block; width: 100%; text-align: left; white-space: nowrap;
  padding: 9px 14px; border-radius: 8px;
  font-size: 15px; color: var(--ink); letter-spacing: -0.02em;
  transition: background .15s ease;
}
.region-menu a:hover, .region-menu button:hover,
.region-menu a[aria-selected="true"],
.region-menu button[aria-selected="true"] { background: var(--sand); }

/* ---- SINGLE-TIER BAR (Pete's QA rolled back the utility strip) ----
   The bar carries everything: trimmed menu, region pill, then the phone stacked
   ABOVE the Connect CTA (so the number costs no extra row width), then the burger.
   The .nav-right pieces double as the MOBILE drawer footer (display:contents there
   restores the region/CTA/phone order rules). */
.drawer-extra { display: none; }   /* drawer footer only — the bar shows just the CTA pill */
@media (min-width: 961px) {
  /* CTA + burger close the bar on the right; the auto margin absorbs free space. */
  .nav-right { margin-left: auto; }
}

/* Hamburger — on desktop it sits after the CTA and opens the same drawer (NAV-01);
   ≤960px it is the only control beside the logo (see responsive) */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 30px; height: 30px; padding: 0; background: none;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--white);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.header.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.open .nav-toggle span:nth-child(2) { opacity: 0; }
.header.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* NAV-01: the hamburger shows on DESKTOP too, closing the bar after the CTA
   (must follow the base display:none above; ≤960px keeps its own rule) */
@media (min-width: 961px) {
  .nav-toggle { display: flex; margin-left: 22px; }
}

/* ---- LIGHT-HEADER VARIANT (pages whose top band is light, not a dark hero) ----
   Opt in per page with <body class="light-header">. Flips the nav ink dark and
   swaps the white logo for the dark one; the navy CTA pill is unchanged. */
body.light-header .logo img.logo-on-dark { display: none; }
body.light-header .logo img.logo-on-light { display: block; }
body.light-header .nav-menu a,
body.light-header .phone { color: var(--ink); }
body.light-header .pill-ghost { color: var(--ink); border-color: rgba(0,0,0,.22); }
body.light-header .nav-toggle span { background: var(--ink); }

/* ---- STICKY HEADER (.header--stuck, toggled by controller.js) ----
   At rest the header is transparent and absolute over the hero. Once scrolled past
   the threshold it pins to the viewport on a solid black bar and slides down in.
   The pinned bar is always dark, so a light-header page must flip BACK to the white
   logo + white ink while stuck. Those rules need to out-specify the body.light-header
   block above — adding `.header--stuck` takes them to (0,4,1) vs (0,3,1). */
.header--stuck {
  position: fixed;
  background: var(--black);
  padding: 12px 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  will-change: transform;
}
/* glass effect where the browser supports it (the drawer's own .open background
   still wins when it opens from the stuck bar) */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header--stuck:not(.open) {
    background: rgba(5, 5, 5, .78);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
/* `:not(.open)` matters: when the mobile drawer opens FROM the stuck bar the panel turns
   white, and these white-ink rules would otherwise still win (0,4,1 beats the drawer's
   0,2,1) — leaving white links on a white drawer. */
body.light-header .header--stuck:not(.open) .logo img.logo-on-dark { display: block; }
body.light-header .header--stuck:not(.open) .logo img.logo-on-light { display: none; }
body.light-header .header--stuck:not(.open) .nav-menu a,
body.light-header .header--stuck:not(.open) .phone { color: var(--white); }
body.light-header .header--stuck:not(.open) .pill-ghost { color: var(--white); border-color: rgba(255,255,255,.38); }
/* The dropdown panel is always a white card — its links stay ink in EVERY header
   state. Without this, the stuck-bar white-ink rule above reaches into the panel
   (its selector also matches .nav-sub a) and leaves white text on white. */
.header .nav-menu .nav-sub a,
body.light-header .header--stuck:not(.open) .nav-menu .nav-sub a { color: var(--ink); }
body.light-header .header--stuck:not(.open) .nav-toggle span { background: var(--white); }

/* No-JS / reduced-motion safety: the slide-in is a GSAP tween, so a header that
   never gets tweened must still be visible. Nothing to do — transform defaults to
   none — but keep anchors clear of the pinned bar. */
html { scroll-padding-top: 84px; }

/* Pinch-zoom lockout: pan gestures only. Pairs with the viewport meta (Android) and
   the gesturestart handler in controller.js (iOS Safari ignores user-scalable=no). */
html { touch-action: pan-x pan-y; }

/* With zoom locked, any element wider than the viewport would silently push the page
   into horizontal scroll (content-left / white-gutter-right). Clip instead: unlike
   `overflow-x: hidden` this doesn't create a scroll container. */
html { overflow-x: clip; }

/* ============================================================
   FOOTER  (shared — edit once)
   ============================================================ */
.footer { background: #0c0c0c; color: var(--white); padding: 56px 0 48px; }
.news-row { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-bottom: 48px; }
.news-row h2 {
  font-family: var(--sans); font-weight: 400; font-size: 30px; line-height: 38px;
  letter-spacing: -0.02em; color: var(--white); max-width: 560px;
}
/* NEWS-01 rework: the fields STACK at every width — first name, then email, then the
   button below (client feedback: "stack the form fields, not row"). Inputs fill the
   form column; hidden inputs (action + nonce fields) are display-agnostic in a column. */
.news-form { display: flex; flex-direction: column; align-items: stretch; gap: 14px; flex: 1; max-width: 480px; }
/* NEWS-01 rework2: radius matches the contact form fields (.field input, 10px), not pill. */
.news-form input:not([type=hidden]) {
  width: 100%; background: var(--white); border: none; border-radius: 10px;
  padding: 15px 22px; font-family: var(--sans); font-size: 15px; color: #1a1a1a;
}
.news-form button { align-self: flex-start; }
.news-form input::placeholder { color: #9aa0a6; }

/* R2-NAV-06: title removed, so the insta link is the only child — pin it left.
   Rework: .gallery-head and .gallery already share the container's edge; the visible
   misalignment was the 12px icon + 7px gap BEFORE the text. The icon now trails the
   text (footer.php), so the text itself starts flush with the gallery grid below. */
.gallery-head { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; }
.insta-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.insta-link img { width: 12px; height: 12px; filter: invert(1); }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 56px; }
/* each tile links out to Instagram (GLOB-04) — block display kills the inline descender gap */
.gallery a { display: block; }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }

.foot-main { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.foot-links-wrap { display: flex; gap: 72px; align-items: flex-start; }
.foot-links { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.foot-links a { font-size: 15px; }
/* same hover language as the top nav: wipe-through underline (in from the left,
   out to the right) + the other links recede while one carries the light */
.foot-links > a { position: relative; }
.foot-links > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.foot-social { display: flex; gap: 14px; margin-top: 12px; }
.foot-social img { width: 32px; height: 32px; }

.foot-locations { justify-self: end; width: 100%; max-width: 440px; }
.foot-loc-title { display: block; font-weight: 700; font-size: 14px; margin-bottom: 18px; }
.foot-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* sub-site "Explore destinations": six regions run 2 rows of 3 */
.foot-locations.is-dest { max-width: 620px; }
.foot-loc-grid.is-dest { grid-template-columns: repeat(3, 1fr); }
/* Still a single anchor (the whole card is the link) — flex column instead of block
   so any in-flow label/CTA rows stack under the photo and the CTA can pin to the
   card's bottom edge (see .floc-view margin below). With today's absolute-positioned
   label/overlay children this renders identically to the old display:block. */
.floc-card { position: relative; display: flex; flex-direction: column; border-radius: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.floc-card img { width: 100%; height: 100%; object-fit: cover; }
.floc-label { position: absolute; left: 12px; bottom: 10px; color: var(--white); font-size: 13px; font-weight: 600; z-index: 2; }
.floc-view {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: var(--white); font-size: 14px; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
/* Hover-only, and only where hover is real: on touch devices :hover latches after a tap,
   which would leave the overlay stuck over the card. (The old `.floc-hover` companion
   selector was the mockup's baked-in hover demo — removed.) */
@media (hover: hover) and (pointer: fine) {
  .floc-card:hover .floc-view { opacity: 1; transform: translateY(0); }
}
.floc-card:focus-visible .floc-view { opacity: 1; transform: translateY(0); }
/* Pin the "View location"/"View destination"/"View cruising" row to the card's
   bottom edge so the CTAs line up across a row even when the text above them
   runs to different heights (client feedback: staggered card CTAs). Inert while
   .floc-view is the absolute hover overlay above (abs children resolve auto
   margins to 0); takes effect the moment the CTA sits in flow. */
.floc-card .floc-view { margin-top: auto; }

.foot-bottom { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; border-top: 1px solid #2a2a2a; }
.foot-legal { display: flex; align-items: center; gap: 28px; }
.terms { font-size: 13px; position: relative; }
.terms::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.foot-logos { display: flex; align-items: center; gap: 48px; padding-top: 36px; border-top: 1px solid #2a2a2a; }
.foot-logos img { height: 38px; width: auto; object-fit: contain; }
.copyright { margin-left: auto; font-size: 12px; color: #8a8a8a; }

/* ============================================================
   RESPONSIVE (shared chrome + type)
   ============================================================ */
@media (max-width: 1320px) {
  :root { --gutter: 40px; }
}

/* Nav stage 1 — compaction (NAV-01 two-tier): the bar now holds logo · 5 links ·
   CTA · hamburger, with the phone and region pill on the utility tier at every
   desktop width (the old ≤1799px phone-hide and ≤1259px region-hide interim hacks
   are retired). Below ~1200px the row still needs tighter spacing to fit. */
@media (max-width: 1199px) and (min-width: 961px) {
  .nav-left { gap: 28px; }
  .nav-menu { gap: 18px; }
  .nav-menu a { font-size: 14px; }
  .nav-right { gap: 14px; }
  .nav-right .pill-navy { padding: 10px 18px; font-size: 14px; }
  .nav-toggle { margin-left: 14px; }
}

/* Nav stage 2 — mobile CLOSED bar: logo left + hamburger right (per mockup, the CTA,
   phone and region selector live INSIDE the drawer). The OPEN drawer rules follow
   below, outside this query — since NAV-01's desktop hamburger the drawer opens at
   every width, and every rule is gated on .header.open. */
@media (max-width: 960px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
  .nav-left { gap: 0; justify-self: start; }
  .nav-menu { display: none; }
  .nav-right { display: none; }
  .nav-toggle { display: flex; justify-self: end; }
}

/* ---- DRAWER (all widths — NAV-01) ----
   Open = full-screen white panel: logo + X on top, left-aligned link list with
   hairline dividers, Destinations accordion (plain region links — the image
   tiles were retired in R2-NAV-03), then the region
   selector row, full-width CTA and centred phone. The list shown is the FULL menu
   render (.nav-menu--drawer, incl. the drawer-only Our Partners + Subscribe); the
   bar's trimmed render hides while open. */
.nav-menu--drawer { display: none; }   /* drawer list only exists inside the open panel */
.header.open {
  position: fixed; inset: 0; z-index: 999;
  background: var(--white); overflow-y: auto; padding: 18px 0 30px;
}
body.nav-open { overflow: hidden; }
/* Desktop (client QA): the drawer is a mobile-width panel sliding in from the
   right, not a full-screen takeover; a scrim dims the page behind it. Mobile
   keeps the full-screen drawer. */
@media (min-width: 961px) {
  .header.open {
    left: auto; right: 0; width: min(420px, 92vw);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .18);
  }
  /* R2-NAV-02 rework (Pete's QA): the desktop drawer lists the FULL menu — the
     same client-ordered list as mobile (the old extras-only trim hid the bar's
     items here, so the client's order never showed). Destinations still arrives
     pre-expanded (controller.js); the region pill lives in the bar only. */
  .header.open .header-inner .nav-right .region { display: none; }
  /* Destinations arrives pre-expanded (controller adds .open on drawer open);
     the caret stays visible — rotated 180° by the existing .open rule — and
     still toggles the accordion on click. */
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 998;
    background: rgba(10, 12, 14, .35);
    animation: navscrim .3s ease both;
  }
  @keyframes navscrim { from { opacity: 0; } to { opacity: 1; } }
}

/* dark chrome on the white drawer — the trailing selectors out-rank the
   body.light-header .header--stuck overrides when the drawer opens while stuck */
.header.open .logo img.logo-on-dark,
body.light-header .header--stuck.open .logo img.logo-on-dark { display: none; }
.header.open .logo img.logo-on-light,
body.light-header .header--stuck.open .logo img.logo-on-light { display: block; }
.header.open .nav-toggle span,
body.light-header .header--stuck.open .nav-toggle span { background: var(--ink); }

/* re-flow: logo and toggle stay a top row; menu and extras stack full-width below.
   The toggle is last in the DOM, so pull it up beside the logo with order. */
.header.open .header-inner { display: flex; flex-wrap: wrap; align-items: center; }
.header.open .nav-left { display: contents; }
.header.open .logo { order: -2; margin-right: auto; }
.header.open .nav-toggle { order: -1; }

.header.open .nav-menu {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 100%; margin-top: 14px;
}
/* the bar's trimmed menu yields to the full drawer list (:not keeps this
   order-independent of the .header.open .nav-menu display above) */
.header.open .nav-menu:not(.nav-menu--drawer) { display: none; }
.header.open .nav-menu > a,
.header.open .nav-item > .nav-drop {
  color: var(--ink); font-size: 17px; padding: 17px 0; width: 100%;
  border-bottom: 1px solid #efece6;
}
/* the CLOSED bar's hover language must not leak into the open desktop drawer:
   the wipe underline would double the row dividers (it sits 6px under the padded
   row) and the opacity transition would fight the drawer's GSAP link stagger. */
.header.open .nav-menu > a::after,
.header.open .nav-menu > .nav-item > .nav-drop::after { display: none; }
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .header.open .nav-menu > a,
  .header.open .nav-menu > .nav-item > .nav-drop { transition: none; }
  .header.open .nav-menu:hover > a:not(:hover),
  .header.open .nav-menu:hover > .nav-item:not(:hover) > .nav-drop { opacity: 1; }
}
/* NAV-02 in the drawer: the ::after underline is retired above (full-row it would
   read as a doubled divider), so the current page marks its TEXT instead — same
   1.5px line under the label only (the caret is an atomic inline, decorations skip
   it), ink via the drawer's own color. Weight matches the closed bar's marker. */
.header.open .nav-menu > a.is-current,
.header.open .nav-menu > .nav-item > .nav-drop.is-current {
  font-weight: 500;
  text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px;
}
/* R2-NAV-02 rework: the drawer renders in the client's order server-side (the
   drawer-tier filter in inc/setup.php) — DOM order IS the order, so the old
   flex-order overrides (.nav-item--cards / a:last-child) are retired; Subscribe
   and any other drawer-only extra already follow the ordered list in the DOM. */

.header.open .nav-item { display: block; width: 100%; }
.header.open .nav-item > .nav-drop { display: flex; align-items: center; justify-content: space-between; }
.header.open .nav-item.open > .nav-drop .caret { transform: rotate(180deg); }
.header.open .nav-sub {
  position: static; display: none; min-width: 0;
  background: transparent; box-shadow: none; border-radius: 0; padding: 0;
  /* the accordion tweens height 0 -> auto; without this the links spill out mid-tween */
  overflow: hidden;
}
.header.open .nav-item.open > .nav-sub { display: block; padding: 16px 0 10px; border-bottom: 1px solid #efece6; }
/* R2-NAV-03: with the image tiles gone, the plain region links ARE the drawer
   panel — block them up so the inline anchors stack as a list. */
.header.open .nav-sub > a { display: block; }

/* drawer footer: region selector row, full-width CTA, centred phone */
/* drawer footer split: DESKTOP shows the plain Contact link (pill hidden);
   MOBILE keeps the full-width CTA pill with the phone centered under it. */
@media (min-width: 961px) {
  .header.open .nav-right .pill-navy { display: none; }
}
@media (max-width: 960px) {
  .header.open .drawer-contact { display: none; }
  .header.open .nav-right .pill-navy {
    display: block; order: 2; text-align: center; font-size: 16.5px; padding: 15px 18px;
  }
  .header.open .drawer-extra { order: 3; }
  .header.open .drawer-extra .phone {
    text-align: center; font-size: 15px; padding: 4px 0; border-bottom: 0;
  }
}
.header.open .nav-right {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  width: 100%; margin-top: 30px; margin-left: 0;
}
@media (min-width: 961px) {
  /* desktop drawer: Contact + phone continue the list rhythm seamlessly
     (the region row is bar-only there, so no gap is wanted) */
  .header.open .header-inner .nav-right { margin-top: 0; gap: 0; }
}
.header.open .region { display: block; order: 1; position: relative; }
.header.open .region-toggle {
  width: 100%; display: flex; align-items: center; gap: 6px;
  color: var(--ink); border: 1px solid #d8d2c6; border-radius: 8px; padding: 14px 16px;
  font-size: 15px;
}
/* Arrow hugs the right edge of the full-width row; the location name (when
   present — sub-sites) reads inline with the label on the left. On the main
   site the strong is hidden, so pushing IT right left the caret stranded
   beside the label (client QA). */
.header.open .region-toggle .caret { margin-left: auto; }
.header.open .region-menu { left: 0; right: 0; }
.header.open .drawer-extra {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 2; width: 100%;
}
.header.open .drawer-contact {
  color: var(--ink); font-size: 17px; padding: 17px 0;
  border-bottom: 1px solid #efece6;
}
.header.open .drawer-extra .phone {
  display: block; color: var(--ink); font-size: 17px; padding: 17px 0; letter-spacing: 0;
}

@media (max-width: 900px) {
  h1 { font-size: 44px; line-height: 52px; }
  /* the hero title's authored two-line break suits desktop widths only — on
     phones it strands "the" on its own line; balanced natural wrap wins here */
  .hero-content h1 br { display: none; }
  /* .serif-title joined h2 here in GLOB-02 — pages had each been shipping their own
     40/48 copy of this rule (or none, leaving 54px titles on phones); page-specific
     statement sizes (story2, contact-intro…) still out-specify it where they exist. */
  h2, .serif-title { font-size: 36px; line-height: 44px; }
  .foot-main { grid-template-columns: 1fr; }
  /* .news-row is FLEX, not grid — the old grid-template-columns rule here was a no-op,
     leaving the heading crushed beside the form on phones. Stack them instead. */
  .news-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .news-row h2 { max-width: none; }
  /* already a column at every width (NEWS-01 rework) — just release the cap so the
     stacked fields use the full content width once the row itself has stacked */
  .news-form { max-width: none; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  /* 5 logos + 48px gaps + copyright ≈ 850px unwrapped — the row was forcing the whole
     page wider than the phone viewport (content squeezed left, white gutter right). */
  .foot-logos { flex-wrap: wrap; gap: 24px 28px; }
  .copyright { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; --pad: 20px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .foot-loc-grid, .foot-loc-grid.is-dest { grid-template-columns: 1fr 1fr; }
  .foot-links-wrap { gap: 40px; }
  /* Trim the centred CTA so it clears the logo and hamburger on narrow phones
     (a narrower CTA widens the side columns, pushing it off the logo) */
  .nav-right .pill-navy { padding: 9px 14px; font-size: 13px; }
}

/* ---- Nav dropdown (.nav-drop trigger + .nav-sub panel) — added for WP menus ---- */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-sub {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px;
  background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.16);
  padding: 10px; display: none; flex-direction: column; gap: 2px; z-index: 200;
}
.nav-item.open > .nav-sub { display: flex; }
.nav-sub a { color: var(--ink); padding: 9px 14px; border-radius: 8px; font-size: 15px; white-space: nowrap; }
.nav-sub a:hover { background: var(--sand); opacity: 1; }
@media (max-width: 960px) {
  .nav-item { display: block; width: 100%; }
  .nav-sub { position: static; display: none; box-shadow: none; background: transparent; padding: 4px 0 4px 18px; min-width: 0; }
  .nav-item.open > .nav-sub { display: flex; }
}

/* ---- Caption placeholder (pairs with an unsupplied placehold.co image) ----
   A real caption names the photo; when the photo isn't there yet, the caption becomes a
   matching prompt so the pair reads as one "supply these" slot (see tc_caption_html). */
.cap-placeholder { font-style: italic; opacity: .65; }

/* ---- Blog cards: whole image + title are links, not just "Read more" ---- */
.post-media, .pick-media { display: block; overflow: hidden; }
.post-media img, .pick-media img { display: block; width: 100%; }
.post-title a, .pick-title a { color: inherit; text-decoration: none; transition: color .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .post-title a:hover, .pick-title a:hover, .post:hover .post-title a { color: var(--navy); }
}

/* ============================================================
   MOBILE CTAs — full width (≤560px). Standalone action buttons span their
   container; the region pill (.pill-ghost) and inline .read-more links are NOT
   CTAs and are excluded, and nav-drawer pills keep their own drawer styling.
   ============================================================ */
@media (max-width: 560px) {
  .pill-navy, .pill-water, .pill-hero-filled, .pill-hero-outline,
  .btn-outline, .btn-outline-light {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* the drawer already sizes its own CTA/region controls — don't double-apply */
  .header .pill-navy, .header .pill-ghost { width: auto; }
  .header.open .nav-right .pill-navy { width: 100%; }

  /* rows that hold more than one CTA must stack so each can go full width */
  .hero-btns, .btns { flex-direction: column; align-items: stretch; }
  /* the hero has no container gutter, so cap its button stack rather than run
     edge-to-edge; the buttons fill the capped wrapper */
  .hero-btns { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .foot-bottom { flex-direction: column; align-items: stretch; gap: 16px; }
  .foot-bottom .terms { text-align: center; }
  .foot-legal { justify-content: center; }
}

/* ============================================================
   HOVER INTERACTION LAYER — the one place for the site-wide hover language:
   slow photo zooms inside linked cards, button lift + fill, arrow nudges.
   Movement is gated to real pointers (touch `:hover` latches after a tap) and
   to no-preference on reduced motion; the colour/fill hovers defined with each
   component above still apply for everyone.
   ============================================================ */
.loc-card > img, .dest-card > img, .floc-card img,
.post-media img, .pick-media img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.loc-arrow { transition: background .3s ease, scale .3s ease; }
.loc-arrow img { transition: filter .3s ease; }
.dest-arrow img { transition: scale .3s ease, filter .3s ease; }
.loc-name, .loc-label { transition: translate .45s cubic-bezier(.22,.61,.36,1); }
/* (.chip's transition — including the delayed colour flip that waits for the
   sweep panel — lives with its base styles in travel-journal.css, which loads
   after this file and would override a copy here) */
.foot-links a, .terms { transition: opacity .25s ease; }
.foot-social img { transition: transform .3s ease; }
.dot-nav { transition: background .25s ease; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* photos breathe inside their crop when any part of the card is hovered —
     the big location/destination panels get a deeper zoom so it reads at size */
  .post:hover .post-media img, .pick:hover .pick-media img,
  .floc-card:hover img, .floc-card:focus-visible img { transform: scale(1.05); }
  .loc-card:not(.loc-card-plain):hover > img,
  .dest-card:hover > img { transform: scale(1.07); }

  /* the card's label rises a touch with the zoom (translate composes with the
     centring transforms the labels already carry) */
  .loc-card:not(.loc-card-plain):hover .loc-name,
  .loc-card:not(.loc-card-plain):hover .loc-label { translate: 0 -4px; }

  /* the arrow button grows underfoot when the card is hovered — the whole disc,
     never the glyph inside it (that read as an off-centre icon) */
  .loc-card:hover .loc-arrow { scale: 1.08; }
  .dest-card:hover .dest-arrow img { scale: 1.08; }
  /* and the arrow IS the link, so give it its own unmissable state */
  .our-loc .loc-arrow:hover { background: var(--navy); scale: 1.18; }
  .our-loc .loc-arrow:hover img { filter: brightness(0) invert(1); }
  .dest-arrow:hover img { scale: 1.2; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)); }

  .post:hover .read-more .ext { transform: translate(2px, -2px); }

  /* (button hovers are the CTA sweep, defined with the buttons — no lift here) */
  .foot-links > a:hover::after, .terms:hover::after {
    transform: scaleX(1); transform-origin: left center;
  }
  .foot-links-wrap:hover .foot-links > a:not(:hover) { opacity: .45; }
  .foot-social a:hover img { transform: translateY(-3px); }
  .dot-nav:hover:not(.active) { background: #aab5bd; }
}

/* ---- SECTION HEAD + CONTENT COLUMN + WIDGET BAND + FORM (lifted from the
   what-we-do/contact page sheets when the Events/Luxury Cruising/Campaign
   pages reused them — shared from then on) ---- */
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .serif-title { display: block; }
.section-icon { height: 72px; width: auto; object-fit: contain; margin: 14px auto 0; }
.content { padding-top: 4px; }
.content .sub {
  font-family: var(--sans); font-weight: 400;
  font-size: 32px; line-height: 40px; letter-spacing: -0.03em;
  color: var(--ink); margin-bottom: 28px; max-width: 560px;
}
.content p { color: var(--ink-soft); margin-bottom: 24px; max-width: 560px; }
.content ul { list-style: disc; padding-left: 22px; margin: 0 0 24px; max-width: 560px; }
.content li { color: var(--ink-soft); margin-bottom: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
/* Find Your Perfect Hotel band */
.hotel-band {
  margin-top: 40px;
  background: var(--navy); color: var(--white); border-radius: 8px;
  padding: 32px 40px;
  display: grid; grid-template-columns: 180px 1fr auto; gap: 28px; align-items: start;
}
.hotel-label { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; }
.hotel-text { font-size: 15px; line-height: 23px; color: rgba(255,255,255,.92); max-width: 760px; }
.hotel-band .btn-outline-light { align-self: end; }
.cform { display: grid; gap: 20px; }
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; letter-spacing: -0.02em; color: var(--navy);
  background: var(--white); border: 1px solid #c6d0d8; border-radius: 10px;
  padding: 15px 18px; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #9fb0bc; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23506d85' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px;
}
.field textarea { min-height: 168px; resize: vertical; }
.cform .submit { justify-self: start; margin-top: 4px; }

/* ---- "I'm enquiring about:" badges (contact form, context via ?enq= links).
   Native radios: the checked pill is solid navy, its sibling reads dimmed;
   unchecked pills preview selection with the house navy sweep on hover. ---- */
.enq-field { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.enq-field[hidden] { display: none; }
/* two-phase entrance: the space slides open first (fields below glide down),
   then the badges fade in and rise. margin-top -20px absorbs the .cform gap. */
@keyframes tc-enq-in {
  0%   { max-height: 0; margin-top: -20px; opacity: 0; transform: translateY(8px); overflow: hidden; }
  45%  { max-height: 240px; margin-top: 0; opacity: 0; transform: translateY(8px); overflow: hidden; }
  100% { max-height: 240px; margin-top: 0; opacity: 1; transform: none; overflow: visible; }
}
.enq-field { animation: tc-enq-in .7s cubic-bezier(.22, .61, .36, 1); }
/* leaving runs the same story backwards: badges fade first, then the space closes */
@keyframes tc-enq-out {
  0%   { max-height: 240px; margin-top: 0; opacity: 1; transform: none; overflow: hidden; }
  40%  { max-height: 240px; margin-top: 0; opacity: 0; transform: translateY(8px); overflow: hidden; }
  100% { max-height: 0; margin-top: -20px; opacity: 0; transform: translateY(8px); overflow: hidden; }
}
.enq-field.enq-out { animation: tc-enq-out .5s cubic-bezier(.22, .61, .36, 1) forwards; }
@media (prefers-reduced-motion: reduce) { .enq-field { animation: none; } .enq-field.enq-out { animation: none; display: none; } }
/* floating the legend opts it out of fieldset's special rendering so it sits
   inline as a flex item beside the badges */
.enq-field legend { float: left; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); padding: 0; margin: 0 6px 0 0; }
.enq-badges { display: contents; } /* badges flow inline after the legend, wrapping as one line of text */
.enq-badge { display: inline-flex; } /* kills the label's baseline leading — rows sit 6px apart, not 6px + descender space */
.enq-badge input { position: absolute; opacity: 0; pointer-events: none; }
.enq-badge span {
  display: inline-block; cursor: pointer;
  background: none; color: #7a7a7a;
  border: 1px solid #c9c9c9; border-radius: 8px; padding: 3px 8px;
  font-size: 11px; line-height: 16px; letter-spacing: -0.02em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background .3s ease, color .35s ease, border-color .3s ease, box-shadow .35s ease;
}
.enq-badge span::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--navy);
  transform: translateX(-115%) skewX(-12deg);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.enq-badge input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* the selected badge wears a tick; re-hovering it (after the mouse has left,
   .just-picked gates the fresh-click moment) shows a cross = click to clear */
.enq-badge input:checked + span::after { content: "\2714"; margin-left: 5px; font-size: 10px; }
@media (hover: hover) and (pointer: fine) {
  .enq-badge:not(.just-picked):hover input:checked + span::after { content: "\00d7"; font-size: 12px; line-height: 1; }
}
.enq-badge input:checked + span::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  .enq-badge input:not(:checked) + span:hover { color: var(--white); border-color: var(--navy); box-shadow: 0 10px 18px -12px rgba(20, 36, 50, .45); }
  .enq-badge input:not(:checked) + span:hover::before { transform: translateX(0) skewX(0); }
}
.enq-badge input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 900px) {
  .content .sub { font-size: 24px; line-height: 30px; }
  .hotel-band { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 700px) { .cform .row { grid-template-columns: 1fr; } }
/* sub-site contact/who-we-are location band: one plain local photo, full width */
.loc-grid-single { grid-template-columns: 1fr; margin-top: 26px; }
/* live Instagram feed embed takes the whole gallery row */
.gallery-embed { display: block; }
.gallery-embed iframe { width: 100%; border: 0; }
/* R2-SUB-02: both homes of this message are dark bands (the #0c0c0c footer and the
   destination-colour .dest-news) — ink was unreadable there, so it wears white. */
/* R2-SUB-02 rework round 2: the fade-in-up rides the theme's .reveal system
   (animations.js) — a CSS animation here ran at page-load, finishing before the
   anchored scroll settled, so QA never saw it move. .reveal fires on first
   visibility, which is exactly "when seen". */
.news-thanks { font-size: 18px; color: var(--white); }
.cp-form .form-thanks { color: #fff; font-size: 20px; text-align: center; padding: 40px 0; }
/* The confirmation message links out to the Travel Journal; `a { color: inherit }` site-wide
   would leave it indistinguishable from the sentence around it. Navy + underline reads on both
   the contact page's white card and the home block's sand band. */
.form-thanks a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cp-form .form-thanks a { color: inherit; }   /* white-on-navy campaign band */
/* ?hl= deep-link flash (spreadsheet links): marker highlight that reads on light
   and navy bands alike; the class is removed after a few seconds and fades out */
.hl-flash { background: #efe3ff !important; color: #121212 !important; box-shadow: 0 0 0 10px #efe3ff; border-radius: 4px; transition: background .8s ease, box-shadow .8s ease, color .8s ease; }

/* 961–1079px: the full menu + phone + region selector + CTA don't fit — links
   wrap to two lines and the menu collides with the right group. Keep the first
   three menu items in this band only (they remain in the footer, and the drawer
   below 961px carries the full menu).
   R2-NAV-04 rewrote the selector: counted from the END it would move the cut when
   Brisbane / Gold Coast gain a sixth item (Events) and hand Destinations back to a
   band that can't hold it; counting from the FRONT keeps the same three links on
   every site. Bar render only — the drawer list is a .nav-menu too, and the old
   selector trimmed ITS last items whenever it was open at this width. */
@media (min-width: 961px) and (max-width: 1079px) {
  .header .nav-menu:not(.nav-menu--drawer) > *:nth-child(n+4) { display: none; }
  .header .nav-menu:not(.nav-menu--drawer) > * { white-space: nowrap; }
}

/* R2-NAV-04 — Events on the top line (Brisbane + Gold Coast; inc/setup.php keeps it
   off the locations with no live /events/ page). The client asked for it in the top
   nav "where it can" fit, so this is the "where": a sixth link needs a 1339px header
   on Gold Coast — the widest region pill — before it runs into that pill, so Events
   rides the bar from 1400px up (61px clear there) and drops out below. Bar render
   only: the drawer is a .nav-menu as well and carries the full menu on mobile. */
@media (max-width: 1399px) {
  .header .nav-menu:not(.nav-menu--drawer) > .nav-events { display: none; }
}
/* (R2-NAV-02 rework: the drawer lists the full menu at every width now, so Events
   is always present there — the old .in-bar re-show shim for this band is gone.) */

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (shared bands).
   One phone-scale rhythm across the site (client: uneven gaps between
   sections on mobile): standard sections 56-64px vertical, compact navy /
   CTA bands 48px, page-title bands clear the ~66px mobile header with
   124px (the precedent pricing.css already set). Desktop rules above are
   untouched; page sheets add their own GLOB-03 blocks for page sections.
   Heroes, the journal's sticky rail and the footer bands keep their
   intentional spacing.
   ============================================================ */
@media (max-width: 900px) {
  /* light page-title band: 144px top was sized for the ~130px desktop header */
  .page-hero { padding-top: 124px; }
  /* navy "ready / speak to us" CTA band: 90px read as a hole between the
     photo and the copy once the grid stacks (the band's grid gap is already
     32px at this width) */
  .ready { padding: 48px 0; }
  /* navy "Our Location" band (contact): 72/46 → compact-band scale */
  .our-loc { padding: 56px 0 40px; }
}

/* ============================================================
   SUBSCRIBE POP-UP (R2-SUB-03) — the global timed newsletter modal.
   Site-wide chrome like the nav and the footer, so it belongs here
   rather than in a page sheet. Ships hidden; assets/js/subscribe-popup.js
   adds .is-open once the delay elapses. Sits above the open nav drawer
   (z-index 999) — though the script waits for the drawer to close first.
   ============================================================ */
.subpop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; padding: 24px; overflow-y: auto;
  opacity: 0; transition: opacity .24s ease;
}
.subpop[hidden] { display: none; }   /* display:flex above would otherwise beat [hidden] */
.subpop.is-open { opacity: 1; }
.subpop-veil { position: fixed; inset: 0; background: rgba(12, 12, 12, .62); }
.subpop-card {
  position: relative; z-index: 1;
  margin: auto;              /* centres the card AND lets a tall one scroll inside .subpop */
  width: 100%; max-width: 468px;
  background: var(--sand); color: var(--ink);
  border-radius: 20px; padding: 44px 44px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  transform: translateY(14px); transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.subpop.is-open .subpop-card { transform: none; }
.subpop-card:focus { outline: none; }   /* the card takes focus on open — no ring around the whole dialog */
.subpop-x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); background: rgba(80, 109, 133, .1);
  transition: background .2s ease, color .2s ease;
}
.subpop-x:hover { background: var(--navy); color: var(--white); }
.subpop-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 34px; line-height: 42px; letter-spacing: -0.02em;
  margin-bottom: 12px; padding-right: 30px;   /* clears the × */
}
.subpop-body { font-size: 16.5px; line-height: 26px; color: var(--cap); margin-bottom: 24px; }
.subpop-body[hidden] { display: none; }
.subpop-form { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.subpop-form[hidden] { display: none; }
/* fields match the contact form (.field input): white, 10px radius, hairline border */
.subpop-form input:not([type=hidden]) {
  width: 100%; background: var(--white); border: 1px solid #c6d0d8; border-radius: 10px;
  padding: 15px 18px; font-family: var(--sans); font-size: 15px;
  letter-spacing: -0.02em; color: var(--navy);
}
.subpop-form input::placeholder { color: #9fb0bc; }
.subpop-form button { align-self: flex-start; margin-top: 4px; }
/* the design shows placeholders, so the real labels are for screen readers only */
.subpop-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.subpop-thanks { font-size: 18px; line-height: 28px; color: var(--ink); }
.subpop-thanks[hidden] { display: none; }
.subpop-thanks:focus { outline: none; }   /* focused only programmatically, to announce it */
body.subpop-open { overflow: hidden; }

@media (max-width: 600px) {
  .subpop { padding: 16px; }
  .subpop-card { padding: 34px 24px 28px; border-radius: 16px; }
  .subpop-title { font-size: 27px; line-height: 34px; }
  .subpop-body { font-size: 16px; line-height: 25px; margin-bottom: 20px; }
  .subpop-form button { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .subpop, .subpop-card { transition: none; }
  .subpop-card { transform: none; }
}