/* ============================================================
   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; }
h1 { font-family: var(--serif); font-size: 80px; line-height: 88px; letter-spacing: -0.02em; }
h2 { font-family: var(--serif); font-size: 68px; line-height: 80px; letter-spacing: -0.02em; }
.lead { font-size: 16px; line-height: 24px; max-width: 760px; margin: 0 auto; }

/* ---- BUTTONS / PILLS ---- */
.pill-navy, .pill-water, .pill-ghost,
.pill-hero-filled, .pill-hero-outline {
  font-size: 16px;
  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: 68px; line-height: 80px; 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: 16px; font-weight: 500; letter-spacing: -0.03em;
  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 18px 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 (80px) */
.hero-content p { font-size: 18px; line-height: 26px; 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: 62px; line-height: 70px; margin-bottom: 14px; }   /* page title (~62px), 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; }

/* ---- 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; }

/* 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: 68px; line-height: 80px; 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: 18px; height: 18px; }
@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: 40px; line-height: 48px; }
}
@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;
}
/* 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-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); }

/* Hamburger — hidden on desktop, shown when the nav collapses (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); }

/* ---- 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-form { display: flex; gap: 14px; flex: 1; max-width: 620px; }
.news-form input {
  flex: 1; background: var(--white); border: none; border-radius: 999px;
  padding: 15px 22px; font-family: var(--sans); font-size: 15px; color: #1a1a1a;
}
.news-form input::placeholder { color: #9aa0a6; }

.gallery-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.gallery-title { font-weight: 700; font-size: 14px; }
.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; }
.gallery img { 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); }
.floc-card { position: relative; display: block; 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); }

.foot-bottom { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; border-top: 1px solid #2a2a2a; }
.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 — the phone drops early (client call: fine to lose it first) and
   spacing compacts; the "You are at" region pill holds on until ~1260px, where
   the row genuinely can't fit it (full complement incl. phone needs ~1440px). */
@media (max-width: 1439px) {
  .phone { display: none; }
  .nav-left { gap: 32px; }
  .nav-menu { gap: 20px; }
}
@media (max-width: 1259px) {
  .region { display: none; }
}

/* Nav stage 2 — mobile: closed bar = logo left + hamburger right (per mockup, the CTA,
   phone and region selector live INSIDE the drawer). Open = full-screen white panel:
   logo + X on top, left-aligned link list with hairline dividers, Inspiration accordion
   (destination cards), then the region selector row, full-width CTA and centred phone. */
@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; }

  .header.open {
    position: fixed; inset: 0; z-index: 999;
    background: var(--white); overflow-y: auto; padding: 18px 0 30px;
  }
  body.nav-open { overflow: hidden; }

  /* 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;
  }
  .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;
  }
  /* mockup order: Who / What / Travel journal / Inspiration / Subscribe */
  .header.open .nav-menu > .nav-item { order: 1; }
  .header.open .nav-menu > a:last-child { order: 2; }

  .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 cards spill out mid-tween */
    overflow: hidden;
  }
  .header.open .nav-item.open > .nav-sub { display: block; padding: 16px 0 10px; border-bottom: 1px solid #efece6; }
  .header.open .nav-sub > a { display: none; }              /* plain dropdown links are desktop-only */
  .header.open .nav-sub-cards { display: flex; flex-direction: column; gap: 12px; }

  .header.open .nav-sub-discover {
    display: block; width: 100%; text-align: center;
    color: var(--navy); border-color: rgba(80,109,133,.45);
    border-radius: 999px; padding: 12px 18px; margin-bottom: 4px;
  }
  /* .nav-sub a's pill padding/rounding must not inset the photo cards */
  .header.open .nav-sub .nav-dest-card {
    position: relative; display: block; height: 68px; overflow: hidden;
    padding: 0; border-radius: 0; white-space: normal;
  }
  .header.open .nav-sub .nav-dest-card:hover { background: transparent; }
  .nav-dest-card { position: relative; display: block; height: 68px; overflow: hidden; }
  .nav-dest-card .nav-dest-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nav-dest-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.30); }
  .nav-dest-name {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2;
    color: var(--white); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  }
  .nav-dest-arrow {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 999px; background: var(--white);
    display: flex; align-items: center; justify-content: center;
  }
  .nav-dest-arrow img { width: 15px; height: 15px; }

  /* drawer footer: region selector row, full-width CTA, centred phone */
  .header.open .nav-right {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    width: 100%; margin-top: 30px;
  }
  .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;
  }
  .header.open .region-toggle strong { margin-left: auto; }
  .header.open .region-menu { left: 0; right: 0; }
  .header.open .nav-right .pill-navy {
    order: 2; text-align: center; font-size: 16px; padding: 15px 18px;
  }
  .header.open .phone { display: block; order: 3; text-align: center; color: var(--ink); font-size: 15px; }
}

@media (max-width: 900px) {
  h1 { font-size: 48px; line-height: 56px; }
  h2 { font-size: 40px; line-height: 48px; }
  .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; }
  .news-form { max-width: none; flex-wrap: wrap; }
  .news-form input { flex: 1 1 200px; min-width: 0; }
  .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; }
/* Destination-card panel inside .nav-sub: mobile-drawer only (see the open-drawer rules). */
.nav-sub .nav-sub-cards { display: none; }
@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; }
}

/* ============================================================
   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; }
.news-thanks { font-size: 18px; color: var(--ink); }
.cp-form .form-thanks { color: #fff; font-size: 20px; text-align: center; padding: 40px 0; }
/* ?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. Drop the last
   two menu items in this band only (they remain in the footer, and the drawer
   below 961px carries the full menu). */
@media (min-width: 961px) and (max-width: 1079px) {
  .header .nav-menu > *:nth-last-child(-n+2) { display: none; }
  .header .nav-menu > * { white-space: nowrap; }
}