/* --- fonts-jost.css --- */
/* ============================================================
   Jost — SELF-HOSTED (body / --font-body / --font-sans)
   ------------------------------------------------------------
   Jost is the site body font. When it was requested from Google
   Fonts it could disappear in production — a privacy / "disable
   Google Fonts" optimiser, a stale page-cache pointing at an old
   malformed CSS2 request, or an ad-blocker — leaving body copy on
   the system-ui fallback. Serving the woff2 files from the theme
   itself removes every one of those failure modes: same-origin,
   no external request to strip, cache, or reject.

   Variable font, weight axis 300–700, normal + italic. Files live
   in ../fonts/jost/ (relative to this stylesheet). Subsets and
   unicode-ranges mirror Google's own Jost v20 output so the browser
   still only downloads the subset a page needs.
   ============================================================ */

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://swellsurfcamp.com/wp-content/themes/swellactive/assets/fonts/jost/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://swellsurfcamp.com/wp-content/themes/swellactive/assets/fonts/jost/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://swellsurfcamp.com/wp-content/themes/swellactive/assets/fonts/jost/jost-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://swellsurfcamp.com/wp-content/themes/swellactive/assets/fonts/jost/jost-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://swellsurfcamp.com/wp-content/themes/swellactive/assets/fonts/jost/jost-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://swellsurfcamp.com/wp-content/themes/swellactive/assets/fonts/jost/jost-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- tokens.css --- */
/* ============================================================
   SWELL DESIGN SYSTEM — Colors & Type
   Premium water sport retreats, Cabarete, Dominican Republic.
   ============================================================ */

/* ---- Fonts ---- */
/* Instrument Serif       — editorial display, boutique-retreat luxe   */
/* Jost                   — humanist geometric sans for body, nav, footer */
/* Tenor Sans             — sleek wordmark font for "Swell"              */
/* Italiana               — high-contrast display serif (alt)            */
/* Cormorant Garamond     — italic serif for secondary display           */
/* DM Serif Display      — high-contrast editorial italic for "escape"   */
/* NOTE: the Google Fonts request now lives in header.php (preconnect + a
   parallel <link>) instead of an @import here — the @import serialised behind
   tokens.css and was a top render-blocking cost. */

:root {
  /* ---------- COLOR — Base palette ---------- */

  /* Teals — the brand's anchor. Drawn from caribbean shallow water.
     Use --teal-500 as the primary brand color. */
  --teal-50:  #ecf8f7;
  --teal-100: #d3efee;
  --teal-200: #a6dedd;
  --teal-300: #6ec7c6;
  --teal-400: #3aaeae;
  --teal-500: #0f9a9a;   /* PRIMARY BRAND */
  --teal-600: #0a7d7e;
  --teal-700: #0a6364;
  --teal-800: #0c4a4c;
  --teal-900: #0d3537;

  /* Ocean — deep navy/blue-green for grounding and over-water text */
  --ocean-300: #4a8190;
  --ocean-500: #1f4f5f;
  --ocean-700: #0e3242;
  --ocean-900: #061d28;

  /* Sand — warm cream/beach neutrals. Page backgrounds, soft surfaces. */
  --sand-50:  #fdfbf7;
  --sand-100: #f7f1e6;
  --sand-200: #efe5d1;
  --sand-300: #e3d3b3;
  --sand-400: #c9b48b;
  --sand-500: #a8916a;
  --sand-600: #7b6a4f;

  /* Coral / Sun — vibrant accent (rashguards, wings). Use sparingly. */
  --coral-400: #ff8b6a;
  --coral-500: #ee6a47;   /* primary accent */
  --coral-600: #d4502e;
  --sun-400:   #f4c14a;
  --sun-500:   #e6a52c;

  /* Ink — neutral text greys, biased slightly cool */
  --ink-900: #0a1f24;
  --ink-700: #2a4046;
  --ink-500: #56707a;
  --ink-400: #8a9da3;
  --ink-300: #c2cdd0;
  --ink-200: #e2e7e8;
  --ink-100: #f0f3f3;
  --white:   #ffffff;

  /* Semantic */
  --success: #2f9460;
  --warning: #e6a52c;
  --danger:  #d4502e;

  /* ---------- COLOR — Semantic foreground / background ---------- */
  --bg:           var(--sand-50);
  --bg-elevated: #ffffff;
  --bg-muted:    var(--sand-100);
  --bg-inverse:  var(--ocean-900);
  --bg-brand:    var(--teal-500);

  --fg:          var(--ink-900);     /* primary body text */
  --fg-muted:    var(--ink-500);     /* secondary text   */
  --fg-subtle:   var(--ink-400);     /* tertiary text    */
  --fg-on-brand: #ffffff;
  --fg-on-dark:  var(--sand-50);
  --fg-brand:    var(--teal-600);
  --fg-accent:   var(--coral-500);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-dark: rgba(255,255,255,0.18);

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo:    'Tenor Sans', 'Optima', 'Avenir Next', serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — Scale (fluid-friendly base) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS — soft, sun-on-water feel ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 31, 36, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 31, 36, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 31, 36, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 31, 36, 0.16);
  --shadow-xl: 0 32px 80px rgba(10, 31, 36, 0.22);
  /* glow when over teal imagery */
  --shadow-teal: 0 12px 32px rgba(15, 154, 154, 0.30);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* default — slight overshoot off */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swell:  cubic-bezier(0.4, 0, 0.2, 1);    /* gentle, water-like */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-cinematic: 1200ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- SECTION-LINKING gradients ----------
     These are the seam colors that knit one section to the next.
     Use them as the FIRST/LAST stop of a background-gradient so
     adjacent sections share a horizon. */
  --seam-sky-to-water:   linear-gradient(180deg, #cfe9ee 0%, var(--teal-400) 100%);
  --seam-water-to-deep:  linear-gradient(180deg, var(--teal-500) 0%, var(--ocean-700) 100%);
  --seam-deep-to-sand:   linear-gradient(180deg, var(--ocean-700) 0%, var(--sand-100) 100%);
  --seam-sand-to-water:  linear-gradient(180deg, var(--sand-100) 0%, var(--teal-300) 100%);
}

/* ============================================================
   SEMANTIC TYPE — paste into projects to get correct text styles
   ============================================================ */

.swell-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

.swell-h1, h1.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, var(--text-5xl));
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.swell-h2, h2.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, var(--text-3xl));
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.swell-h3, h3.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--fg);
}

.swell-h4, h4.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--fg);
}

.swell-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--fg-muted);
}

.swell-body, p.swell {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg);
  text-wrap: pretty;
}

.swell-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* italic display — used for emphasized words inline */
.swell-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* --- styles.css --- */
/* =========================================================
   SWELL SURF CAMP — Landing page styles
   Three directions: editorial, cinematic, boutique
   ========================================================= */

:root {
  --font-display: "Playfair Display", "Instrument Serif", Georgia, serif;
  --font-body: "Jost", system-ui, -apple-system, sans-serif;
  --font-mark: "Playfair Display", serif;
  /* Brand overrides — keep teal & coral from tokens */
  --ink: #0d1c20;
  --ink-soft: #2a3b3f;
  --paper: #f4eee3;       /* warmer sand */
  --paper-2: #ebe3d2;
  --paper-deep: #ddd0b6;
  --cream: #faf6ec;
  --night: #15333b;   /* Slate — lifted blue-grey dark base (was #0a1d22 midnight) */
  --night-2: #1d4750; /* Slate — alternating darker sections/cards (was #0f2a30) */
  --teal: #0f9a9a;
  --teal-deep: #0b6b6c;
  --teal-pale: #a4d3c8;
  --coral: #ee6a47;
  --coral-deep: #c8462a;
  --coral-glow: rgba(238, 106, 71, 0.28);
  --on-accent: #ffffff;     /* text/icon color sitting ON an accent fill */
  --bone: #f9f5e9;
  --hairline: rgba(13, 28, 32, 0.16);
  --hairline-light: rgba(255, 255, 255, 0.22);
  --ease-swell: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Accent options — cool water family (green · turquoise · blue).
   Each is distinct enough from the brand teal to read as an accent. ===== */
html[data-accent="sunset-gold"] {
  --coral: #f2b134;          /* golden hour */
  --coral-deep: #d4951f;
  --coral-glow: rgba(242, 177, 52, 0.30);
  --on-accent: #3a2a06;      /* dark — bright gold needs dark text */
}
html[data-accent="sunset-amber"] {
  --coral: #e8902a;          /* warm sunset amber */
  --coral-deep: #c4731a;
  --coral-glow: rgba(232, 144, 42, 0.30);
  --on-accent: #ffffff;
}
html[data-accent="sunset-ember"] {
  --coral: #cf5524;          /* deep burnt ember */
  --coral-deep: #aa4119;
  --coral-glow: rgba(207, 85, 36, 0.30);
  --on-accent: #ffffff;
}
html[data-accent="turquoise"] {
  --coral: #0fb6ad;          /* bright lagoon turquoise */
  --coral-deep: #0c968f;
  --coral-glow: rgba(15, 182, 173, 0.32);
  --on-accent: #053a37;      /* dark — bright fill needs dark text */
}
html[data-accent="sky"] {
  --coral: #1f9ed1;          /* bright azure sky */
  --coral-deep: #1783b3;
  --coral-glow: rgba(31, 158, 209, 0.30);
  --on-accent: #05303d;      /* dark — bright fill needs dark text */
}
html[data-accent="coral"] {
  --coral: #ee6a47;          /* original sunset coral */
  --coral-deep: #c8462a;
  --coral-glow: rgba(238, 106, 71, 0.28);
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
section[id] { scroll-margin-top: 84px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ====== Direction switcher (top sticky bar) ====== */
.switcher {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(10, 29, 34, 0.65);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transform: translateY(0);
  transition: transform 360ms var(--ease-swell);
}
.switcher.hide { transform: translateY(-100%); }

/* ====== Concept switcher — floating bottom-center segmented control ====== */
.cswitch {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 600;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(10, 29, 34, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 44px rgba(8,22,28,0.36);
}
.cswitch__label {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); white-space: nowrap;
}
.cswitch__seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.cswitch__seg button {
  padding: 9px 18px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  transition: background 240ms var(--ease-swell), color 240ms var(--ease-swell);
}
.cswitch__seg button:hover { color: #fff; }
.cswitch__seg button.is-active { background: #fff; color: var(--night); }
@media (max-width: 720px) {
  .cswitch { gap: 8px; padding: 7px 7px 7px 14px; bottom: 16px; }
  .cswitch__label { display: none; }
  .cswitch__seg button { padding: 8px 13px; font-size: 12px; letter-spacing: 0.12em; }
}
.switcher__brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
}
.switcher__brand .a { font-size: 13px; letter-spacing: 0.38em; text-transform: uppercase; font-weight: 500; }
.switcher__brand .b { font-style: italic; font-size: 15px; color: var(--teal-pale); }
.switcher__nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); }
.switcher__nav button {
  padding: 8px 18px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); font-weight: 500;
  transition: background 240ms var(--ease-swell), color 240ms var(--ease-swell);
}
.switcher__nav button:hover { color: #fff; }
.switcher__nav button.is-active { background: #fff; color: var(--night); }
.switcher__hint {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: inline-flex; align-items: center; gap: 8px;
}

/* ====== Common ====== */
.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.narrow { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500; color: var(--teal-deep);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.5;
}
.eyebrow.on-dark { color: var(--teal-pale); }
.eyebrow.plain::before { display: none; }

.disp {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.disp i, .disp em { font-style: italic; }

/* Hand-brushed highlight behind emphasised words (deco accent) */
.hl { position: relative; display: inline-block; isolation: isolate; }
.hl::before {
  content: "";
  position: absolute;
  left: -0.16em; right: -0.12em; top: 2%; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(58, 174, 174, 0.42);
  border-radius: 11px 8px 13px 7px;
  transform: rotate(-0.8deg);
  filter: url(#swell-marker-rough);   /* frays the edges → hand-drawn marker */
}

/* Inline text link — resting hairline tucked close to the wording, with a
   coral underline that wipes in from the left on hover (+ teal text shift). */
.swell-link,
.ed-footer ul a,
.footer ul a { position: relative; }
.swell-link::before,
.ed-footer ul a::before,
.footer ul a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px;
  height: 1px; background: currentColor; opacity: 0.24; pointer-events: none;
}
.swell-link::after,
.ed-footer ul a::after,
.footer ul a::after {
  content: ""; position: absolute; left: 0; bottom: 0.5px;
  height: 2px; width: 100%; background: var(--coral); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  transition: transform 340ms var(--ease-swell);
}
.swell-link { color: inherit; text-decoration: none; cursor: pointer; transition: color 300ms var(--ease-swell); }
.swell-link:hover { color: var(--teal-pale); }
.swell-link:hover::after,
.ed-footer ul a:hover::after,
.footer ul a:hover::after { transform: scaleX(1); }

/* Links option 2 — reversed: drop the resting hairline so the underline only
   appears (wipes in coral) on hover. Toggled from the Tweaks panel. */
html[data-links="hover"] .swell-link::before { opacity: 0; }

/* Links — active-as-rest: the emphasized hover look (coral underline + teal
   text) becomes the resting/normal state; hovering relaxes it back to the
   plain hairline. A straight swap of the two states. */
html[data-links="reversed"] .swell-link::after { transform: scaleX(1); }
html[data-links="reversed"] .swell-link::before { opacity: 0; }
html[data-links="reversed"] .swell-link { color: var(--teal-pale); }
html[data-links="reversed"] .swell-link:hover { color: inherit; }
html[data-links="reversed"] .swell-link:hover::after { transform: scaleX(0); }
html[data-links="reversed"] .swell-link:hover::before { opacity: 0.24; }

/* Whole-page scroll progress — thin coral line pinned to the very top edge,
   above the sticky nav. Used by the home page and every interior page. */
.art-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 250; background: rgba(13,28,32,0.08); pointer-events: none; }
.art-prog span { display: block; height: 100%; background: var(--coral, #ee6a47); transform-origin: left; transform: scaleX(0); will-change: transform; }
.art-prog--page { background: transparent; }
h1.disp { font-size: clamp(56px, 8vw, 132px); line-height: 0.95; letter-spacing: -0.02em; }
h2.disp { font-size: clamp(40px, 5.6vw, 88px); line-height: 1.0; }
h3.disp { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
h4.disp { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; }

.lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 560px;
}
.lede.on-dark { color: rgba(249, 245, 233, 0.78); }
.lede.lg { font-size: 18px; line-height: 1.5; }

.body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; font-weight: 400; color: var(--ink-soft); }
.body.on-dark { color: rgba(249, 245, 233, 0.74); }

/* ====== Buttons ====== */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 28px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 8px;
  transition: background 240ms var(--ease-swell), color 240ms var(--ease-swell), transform 180ms var(--ease-swell), box-shadow 240ms var(--ease-swell);
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
.btn--primary { background: var(--coral); color: var(--on-accent); }
.btn--primary:hover { background: var(--coral-deep); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #000; }
.btn--ghost-light {
  background: rgba(255,255,255,0.08); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.18); }
.btn--ghost-dark {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn--ghost-dark:hover { background: var(--ink); color: var(--cream); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 12px; gap: 10px; }
.btn--lg { height: 60px; padding: 0 34px; font-size: 13px; }

/* ====== Editorial nav (Franco-style, bold uppercase, floating)
   A single fixed shell with two stacked rows: (1) .nav__ribbon — a solid
   dark-green specifics strip that collapses to zero height on scroll, and
   (2) .nav__bar — the frosted, translucent-teal menu bar (logo · links · CTA)
   that survives the mosaic transition. */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex; flex-direction: column; align-items: stretch;
  color: #fff;
}

/* (1) Specifics ribbon — solid teal-800, collapses once scrolled. */
.nav__ribbon {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--teal-800, #0c4a4c); color: #fff;
  padding: 9px 18px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  overflow: hidden; max-height: 60px;
  transition: max-height 340ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
              padding 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.is-scrolled .nav__ribbon { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.nav__rib { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav__rib svg { width: 14px; height: 14px; stroke-width: 1.8; }
.nav__stars { color: var(--coral); letter-spacing: 1px; font-size: 12px; }
.nav__ribdot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); flex: none; }

/* (2) Menu bar — the frosted translucent-teal slab. */
.nav__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 14px max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  background: rgba(11, 67, 70, 0.50);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 320ms var(--ease-swell);
}
.nav__brand { display: flex; flex-direction: column; line-height: 0.85; }
/* Palm-emblem brand lockup */
.brandlock { display: flex; align-items: center; gap: 14px; }
.brandlock { display: flex; align-items: center; gap: 12px; }
.brandlock__mark {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.brandlock__logo { height: 52px; width: auto; display: block; }
.brandlock__words { display: flex; flex-direction: column; justify-content: center; }
.brandlock__swell {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 500;
  font-size: 31px; line-height: 0.82; letter-spacing: -0.01em; color: #fff;
}
/* Logo wordmark font options (independent of headline tweak) */
html[data-logo="outfit"] .brandlock__swell { font-family: "Outfit", system-ui, sans-serif; font-weight: 600; font-size: 25px; line-height: 0.92; letter-spacing: -0.02em; }
html[data-logo="yeseva"] .brandlock__swell { font-family: "Yeseva One", Georgia, serif; font-weight: 400; font-size: 26px; line-height: 0.9; letter-spacing: 0; }
.brandlock__sub {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; line-height: 1; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--teal-pale);
  margin-top: 5px; padding-left: 1px;
}
.nav__center {
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px);
}
.nav__center > a,
.nav__trigger,
.nav__contact {
  position: relative;
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 0;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  transition: color 240ms var(--ease-swell);
}
.nav__center > a::after,
.nav__trigger::after,
.nav__contact::after {
  content: "";
  position: absolute; left: 0; bottom: 2px;
  height: 1px; width: 0%; background: currentColor;
  transition: width 320ms var(--ease-swell);
}
.nav__center > a:hover,
.nav__trigger:hover,
.nav__contact:hover { color: #fff; }
.nav__center > a:hover::after,
.nav__trigger:hover::after,
.nav__contact:hover::after { width: 100%; }
.nav__center > a.is-current,
.nav__trigger.is-current { color: #fff; }
.nav__center > a.is-current::after { width: 100%; background: var(--coral); height: 2px; }
.brandlock { text-decoration: none; }

/* "More info" dropdown */
.nav__group { position: relative; }
.nav__trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav__trigger svg { transition: transform 240ms var(--ease-swell); }
.nav__group:hover .nav__trigger svg,
.nav__group:focus-within .nav__trigger svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 200px;
  display: flex; flex-direction: column;
  padding: 8px;
  background: rgba(9, 42, 44, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(6, 29, 40, 0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms var(--ease-swell), transform 220ms var(--ease-swell);
}
.nav__group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 12px);
}
.nav__menu a {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 12px; border-radius: 8px;
  transition: background 200ms var(--ease-swell), color 200ms var(--ease-swell);
}
.nav__menu a:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.nav__right { display: flex; align-items: center; gap: 22px; }
.nav__right .meta {
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  color: rgba(255,255,255,0.78);
}
.nav__right .reserve {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  transition: background 240ms var(--ease-swell);
}
.nav__right .reserve:hover { background: rgba(255,255,255,0.18); }
.nav__right .reserve svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* ====== Mobile menu (hamburger + 3 treatments) ====== */
.nav__burger { display: none; }
.mm { display: none; }

.nav__burger {
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 10px;
}
.nav__burger:hover { background: rgba(255,255,255,0.10); }
.nav__burger span {
  display: block; width: 23px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform 300ms var(--ease-swell), opacity 200ms var(--ease-swell);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mm { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.mm[data-open="1"] { pointer-events: auto; }
.mm__scrim {
  position: absolute; inset: 0; background: rgba(6,29,40,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 340ms var(--ease-swell);
}
.mm[data-open="1"] .mm__scrim { opacity: 1; }

.mm__panel { display: flex; flex-direction: column; color: #fff; }
.mm__head { display: flex; align-items: center; justify-content: space-between; }
.mm__brand { font-family: var(--font-display); font-weight: 500; font-size: 30px; color: #fff; line-height: 1; }
.mm__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: transparent; color: #fff; cursor: pointer;
}
.mm__close:hover { background: rgba(255,255,255,0.10); }

.mm__links { display: flex; flex-direction: column; }
.mm__links a.is-current { color: var(--teal-pale); }
.mm__moretrigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: transparent; border: 0; cursor: pointer; color: #fff; text-align: left;
}
.mm__moretrigger svg { flex: none; transition: transform 300ms var(--ease-swell); }
.mm__moretrigger.is-open svg { transform: rotate(180deg); }
.mm__morelinks {
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height 340ms var(--ease-swell), opacity 240ms var(--ease-swell);
}
.mm__morelinks[data-open="1"] { max-height: 300px; opacity: 1; }
.mm__morelinks a {
  font-family: var(--font-body); font-size: 16px; color: rgba(255,255,255,0.74);
  padding: 9px 0; padding-left: 16px; transition: color 200ms var(--ease-swell);
}
.mm__morelinks a:first-child { margin-top: 8px; }
.mm__morelinks a:hover { color: #fff; }
.mm__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--coral); color: #fff; cursor: pointer; border: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 17px 26px; border-radius: 8px;
  transition: filter 220ms var(--ease-swell), transform 120ms var(--ease-swell);
}
.mm__cta:hover { filter: brightness(1.06); }
.mm__cta:active { transform: scale(0.98); }
.mm__cta svg { width: 16px; height: 16px; }

/* --- Treatment 1 · Full-screen overlay --- */
.mm--overlay .mm__scrim { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mm--overlay .mm__panel {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 18px clamp(22px, 7vw, 48px) clamp(28px, 6vw, 44px);
  background: linear-gradient(165deg, rgba(11,67,70,0.99) 0%, rgba(8,22,28,0.99) 100%);
  opacity: 0; transition: opacity 380ms var(--ease-swell);
}
.mm--overlay[data-open="1"] .mm__panel { opacity: 1; }
.mm--overlay .mm__head { padding: 6px 0 0; }
.mm--overlay .mm__links { margin-top: auto; gap: 2px; }
.mm--overlay .mm__links a {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 11vw, 62px); line-height: 1.04; color: #fff;
  padding: 4px 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity 460ms var(--ease-swell), transform 460ms var(--ease-swell);
  transition-delay: calc(var(--i, 0) * 55ms + 140ms);
}
.mm--overlay[data-open="1"] .mm__links a { opacity: 1; transform: none; }
.mm--overlay .mm__links a.is-current { font-style: italic; color: var(--teal-pale); }
.mm--overlay .mm__more { margin-top: 30px; }
.mm--overlay .mm__moretrigger {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-pale); padding: 6px 0;
}
.mm--overlay .mm__cta { margin-top: 26px; align-self: flex-start; }

/* --- Treatment 2 · Side drawer --- */
.mm--drawer .mm__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 372px);
  overflow-y: auto; padding: 22px clamp(22px, 5vw, 30px) 30px;
  background: linear-gradient(180deg, rgba(11,67,70,0.99) 0%, rgba(8,22,28,0.99) 100%);
  box-shadow: -24px 0 70px rgba(6,18,22,0.5);
  transform: translateX(100%); transition: transform 420ms var(--ease-swell);
}
.mm--drawer[data-open="1"] .mm__panel { transform: none; }
.mm--drawer .mm__links { margin-top: 22px; }
.mm--drawer .mm__links a {
  font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1; color: #fff;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.09);
  transition: color 200ms var(--ease-swell);
}
.mm--drawer .mm__links a:hover { color: var(--teal-pale); }
.mm--drawer .mm__more { margin-top: 4px; }
.mm--drawer .mm__moretrigger {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; color: #fff;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.mm--drawer .mm__cta { margin-top: 28px; }

/* --- Treatment 3 · Top sheet --- */
.mm--sheet .mm__panel {
  position: absolute; top: 0; left: 0; right: 0;
  max-height: 100vh; overflow-y: auto;
  padding: 16px clamp(22px, 5vw, 44px) 26px;
  background: rgba(11,45,48,0.97);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 32px 64px rgba(6,18,22,0.5);
  transform: translateY(-100%); transition: transform 420ms var(--ease-swell);
}
.mm--sheet[data-open="1"] .mm__panel { transform: none; }
.mm--sheet .mm__links { margin-top: 18px; }
.mm--sheet .mm__links a {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.9);
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm--sheet .mm__links a.is-current { color: var(--teal-pale); }
.mm--sheet .mm__more { margin-top: 0; }
.mm--sheet .mm__moretrigger {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.9);
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm--sheet .mm__cta { margin-top: 24px; width: 100%; }

/* on small phones the menu carries the CTA — drop the nav button to free space */
@media (max-width: 560px) {
  .nav__right .reserve { display: none; }
}

/* ====== HERO (shared core) ====== */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--night);
  color: #fff;
  overflow: hidden;
}
.hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  transform: scale(1.04);
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 22, 28, 0.32) 0%, rgba(8, 22, 28, 0) 30%, rgba(8, 22, 28, 0) 60%, rgba(8, 22, 28, 0.65) 100%),
    linear-gradient(90deg, rgba(8, 22, 28, 0.35) 0%, rgba(8, 22, 28, 0) 50%);
}
.hero__content {
  position: relative; z-index: 3;
  margin-top: auto; padding: 0 clamp(20px, 4vw, 56px) clamp(60px, 8vw, 96px);
  max-width: 1360px; width: 100%; margin-left: auto; margin-right: auto;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(60px, 10vw, 168px);
  line-height: 0.92; letter-spacing: -0.025em;
  margin: 28px 0 0;
  max-width: 14ch;
  color: #fff;
}
.hero h1 i { font-style: italic; color: var(--teal-pale); }
.hero__sub {
  margin-top: 28px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 1.5;
  max-width: 540px;
  color: rgba(249,245,233,0.85);
}
.hero__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

.hero__rail {
  position: absolute; bottom: clamp(60px, 8vw, 96px); right: clamp(20px, 4vw, 56px);
  z-index: 3;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-end;
  font-family: var(--font-body);
}
.hero__rail .place {
  font-family: var(--font-display); font-style: italic; font-size: 22px;
  color: #fff;
}
.hero__rail .meta {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.hero__rail .scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 30px;
}
.hero__rail .scroll-hint .line {
  width: 1px; height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  position: relative;
}
.hero__rail .scroll-hint .line::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 22px; background: rgba(255,255,255,0.95);
  animation: rail-drop 2.4s var(--ease-swell) infinite;
}
@keyframes rail-drop {
  0% { transform: translateY(-22px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}

/* ====== Zoom-out + parallax 9-box hero (xshack mechanic) ====== */
.zstage {
  position: relative;
  height: 420vh;          /* longer runway → slower zoom + more photo movement */
  background: var(--night);
}
.zstick {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zcols {
  display: flex;
  gap: clamp(6px, 0.8vw, 12px);
  width: 100%;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.zcol {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 12px);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.zcell {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;   /* landscape — lower height than the old near-square */
  background: var(--night-2);
  border-radius: 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.zcell__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
}
.zcell__veil {
  position: absolute; left: 0; right: 0; bottom: 0; top: 45%;
  background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.72) 100%);
  opacity: var(--label-op, 0);
  pointer-events: none;
}
.zcell__label {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  z-index: 2; color: #fff;
  opacity: var(--label-op, 0);
  transform: translateY(calc((1 - var(--label-op, 0)) * 10px));
  display: flex; flex-direction: column; gap: 6px;
}
.zcell__name {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(15px, 1.4vw, 22px); line-height: 1; color: #fff;
  letter-spacing: -0.015em;
}
.zcell__rule { width: 44px; height: 1px; background: var(--teal-pale); opacity: 0.85; }
@media (max-width: 720px) {
  .zcols, .zcol { gap: 5px; }
}
/* Mobile: zoom out to ONLY the middle column (3 stacked photos) so the rig
   isn't a cramped 9-up grid on a narrow screen. Side columns drop out; the
   centre column goes full-width and the hero/parallax mechanic is unchanged. */
@media (max-width: 680px) {
  .zcol--side { display: none; }
}

/* Translucent stats bar — full-width slab, facts within content width */
.zbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  background: rgba(11, 67, 70, 0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  pointer-events: none;
}
.zbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: stretch;
}
.zbar__item {
  flex: 1 1 0;
  padding: clamp(10px, 1.45vw, 18px) clamp(16px, 2vw, 34px);
  display: flex; flex-direction: column; gap: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.zbar__item:first-child { border-left: 0; padding-left: 0; }
.zbar__item:last-child { padding-right: 0; }

/* OPTION 1 — empty translucent band (no text, no dividers) */
.zbar--band { height: clamp(62px, 8vw, 90px); }

/* OPTION 2 — no bar, just a full-width 1px white rule with a solid
   fill below it so no grid photo is ever visible beneath the line */
.zbar--line { background: var(--night); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; height: clamp(62px, 8vw, 90px); }
.zbar--line .zbar__inner { display: block; max-width: none; padding: 0; }
.zbar__rule { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.6); }
.zbar__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2vw, 30px); line-height: 1;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.zbar__num svg {
  fill: var(--teal-pale); color: var(--teal-pale);
  width: 0.58em; height: 0.58em;
}
.zbar__lbl {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}
@media (max-width: 720px) {
  .zbar__inner { flex-wrap: wrap; }
  .zbar__item { flex: 1 1 50%; border-left: 0; padding-left: 0; }
}

/* ====== 3x3 MOSAIC moment (the signature) ====== */
.mosaic-stage {
  position: relative;
  height: 640vh;        /* longer runway → slower, more cinematic reveal */
  background: var(--night);
}
.mosaic-stick {
  position: sticky; top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--mosaic-gap, 0px);
  padding: var(--mosaic-pad, 0px);
  background: var(--night);
  transition: padding 0ms;
  overflow: hidden;
}

/* Hero copy that sits ON TOP of the stitched mosaic at scroll=0 */
.hero-mosaic__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 22, 28, 0.30) 0%, rgba(8, 22, 28, 0) 28%, rgba(8, 22, 28, 0) 55%, rgba(8, 22, 28, 0.75) 100%),
    linear-gradient(90deg, rgba(8, 22, 28, 0.45) 0%, rgba(8, 22, 28, 0) 55%);
  z-index: 2;
}
.hero-mosaic__content {
  position: absolute;
  left: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  bottom: clamp(60px, 8vw, 96px);
  z-index: 3;
  color: #fff;
  margin-left: auto; margin-right: auto;
  pointer-events: auto;
}
.hero-mosaic__content h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(60px, 10vw, 168px);
  line-height: 0.92; letter-spacing: -0.025em;
  margin: 28px 0 0;
  max-width: 14ch;
  color: #fff;
}
.hero-mosaic__content h1 i { font-style: italic; color: var(--teal-pale); }
.hero-mosaic__content .hero__sub {
  margin-top: 28px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 1.5;
  max-width: 540px;
  color: rgba(249,245,233,0.88);
}
.hero-mosaic__content .hero__eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.hero-mosaic__content .hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero-mosaic__content .hero__cta { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

.hero-mosaic__rail {
  position: absolute;
  bottom: clamp(60px, 8vw, 96px);
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  z-index: 3;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-end;
  font-family: var(--font-body);
  color: #fff;
}
.hero-mosaic__rail .place { font-family: var(--font-display); font-style: italic; font-size: 22px; color: #fff; }
.hero-mosaic__rail .meta { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.65); }

/* Daily Cabarete conditions readout (replaces the lat/long rail) */
.sw-wx { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sw-wx__eyebrow {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1px;
}
.sw-wx__row { display: grid; grid-template-columns: 72px 62px 62px; column-gap: 12px; align-items: baseline; }
.sw-wx__lbl {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
}
.sw-wx__lbl svg { opacity: 0.82; }
.sw-wx__c, .sw-wx__f {
  font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 15px; line-height: 1;
  letter-spacing: 0.04em; color: #fff; justify-self: end; text-align: right; white-space: nowrap;
}
.sw-wx__deg { font-style: normal; font-size: 0.7em; letter-spacing: 0.04em; margin-left: 1px; vertical-align: 0.08em; opacity: 0.78; }
.sw-wx__loc {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px;
}
.hero-mosaic__rail .scroll-hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 30px;
}
.hero-mosaic__rail .scroll-hint .line {
  width: 1px; height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  position: relative;
}
.hero-mosaic__rail .scroll-hint .line::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 22px; background: rgba(255,255,255,0.95);
  animation: rail-drop 2.4s var(--ease-swell) infinite;
}
.mosaic-cell {
  position: relative;
  overflow: hidden;
  background: var(--night-2);
  border-radius: var(--mosaic-radius, 0px);
}
.mosaic-cell__stitch {
  position: absolute; inset: 0;
  background-size: 300% 300%;
  background-position: var(--mosaic-pos);
  background-repeat: no-repeat;
  /* opacity interpolated by JS */
  opacity: var(--stitch-op, 1);
}
.mosaic-cell__unique {
  position: absolute; inset: 0;
  background-color: var(--night);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--unique-op, 0);
  transform: scale(var(--unique-scale, 0.55));
  transform-origin: center;
  transition: opacity 0ms;
}
.mosaic-cell__veil {
  position: absolute; left: 0; right: 0; bottom: 0; top: 50%;
  background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.78) 100%);
  opacity: var(--label-op, 0);
  pointer-events: none;
}
.mosaic-cell__corner {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: var(--label-op, 0);
  transform: scale(calc(0.7 + 0.3 * var(--label-op, 0)));
  transition: opacity 0ms;
}
.mosaic-cell__corner .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-glow);
}
.mosaic-cell__label {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  color: #fff;
  opacity: var(--label-op, 0);
  transform: translateY(calc((1 - var(--label-op, 0)) * 12px));
  display: flex; flex-direction: column; gap: 6px;
}
.mosaic-cell__name-big {
  font-family: var(--font-display); font-style: italic;
  font-size: 30px; line-height: 1.0; font-weight: 400;
  color: #fff;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.mosaic-cell__rule {
  width: 56px; height: 1px;
  background: var(--teal-pale);
  opacity: 0.85;
}
.mosaic-cell__meta {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.mosaic-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
  z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: end;
  pointer-events: none;
  color: #fff;
  background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.72) 100%);
  opacity: var(--overlay-op, 1);
}
.mosaic-overlay .left {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.mosaic-overlay .right {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25;
  color: rgba(255,255,255,0.9);
  max-width: 36ch; justify-self: end;
}

/* ====== Section: Promise band ====== */
.promise {
  background: var(--paper);
  padding: clamp(80px, 10vw, 160px) 0;
}
.promise__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px);
  align-items: start;
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.promise h2 { margin-top: 22px; max-width: 12ch; }
.promise__col-r { display: flex; flex-direction: column; gap: 28px; padding-top: clamp(40px, 6vw, 80px); }
.promise__col-r p { margin: 0; font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--ink-soft); max-width: 50ch; }
.promise__list { display: flex; flex-direction: column; }
.promise__list .row {
  display: grid; grid-template-columns: 80px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.promise__list .row:last-child { border-bottom: 1px solid var(--hairline); }
.promise__list .row .num {
  font-family: var(--font-display); font-style: italic; font-size: 28px;
  color: var(--teal-deep);
}
.promise__list .row h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 400; }
.promise__list .row p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ====== Section: Activities (three sports) ====== */
.sports {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--night);
  color: var(--cream);
}
.sports__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: end; max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  margin-bottom: clamp(40px, 5vw, 80px);
}
.sports__head h2 { color: #fff; max-width: 14ch; }
.sports__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.sport-card {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4; border-radius: 4px;
  cursor: pointer;
  isolation: isolate;
}
.sport-card__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1);
  transition: transform 1200ms var(--ease-swell);
}
.sport-card:hover .sport-card__bg { transform: scale(1.06); }
.sport-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,22,28,0.0) 30%, rgba(8,22,28,0.85) 100%);
}
.sport-card__num {
  position: absolute; top: 28px; left: 28px;
  font-family: var(--font-display); font-style: italic; font-size: 18px;
  color: rgba(255,255,255,0.7);
}
.sport-card__arrow {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  transition: background 240ms var(--ease-swell), transform 240ms var(--ease-swell);
}
.sport-card:hover .sport-card__arrow { background: var(--coral); border-color: var(--coral); color: var(--on-accent); transform: rotate(-45deg); }
.sport-card__arrow svg { width: 16px; height: 16px; stroke-width: 1.5; }
.sport-card__body { position: absolute; left: 28px; right: 28px; bottom: 26px; color: #fff; }
.sport-card__body h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3vw, 48px); line-height: 1.0; }
.sport-card__body p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 30ch; }
.sport-card__tag {
  position: absolute; bottom: 26px; right: 28px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ====== Section: Two-up image + text ====== */
.feature {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--paper);
}
.feature__inner {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.feature.flip .feature__inner { grid-template-columns: 1fr 1.05fr; direction: rtl; }
.feature.flip .feature__inner > * { direction: ltr; }
.feature__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--paper-2);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media .stamp {
  position: absolute; left: 22px; top: 22px;
  background: var(--cream); padding: 10px 14px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink);
}
.feature__text h2 { margin: 22px 0 26px; }
.feature__text .lede { margin-bottom: 32px; }
.feature__list { display: flex; flex-direction: column; gap: 18px; padding: 0; margin: 0; list-style: none; }
.feature__list li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; }
.feature__list svg { width: 20px; height: 20px; color: var(--teal-deep); stroke-width: 1.5; margin-top: 3px; }
.feature__list .lbl { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink); font-weight: 400; }
.feature__list .lbl b { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 3px; }

.feature.dark { background: var(--night); color: var(--cream); }
.feature.dark .feature__text { color: var(--cream); }
.feature.dark h2 { color: #fff; }
.feature.dark .lede { color: rgba(249,245,233,0.78); }
.feature.dark .feature__list svg { color: var(--teal-pale); }
.feature.dark .feature__list .lbl { color: var(--cream); }
.feature.dark .feature__list .lbl b { color: var(--teal-pale); }

/* ====== Section: Pull quote / community ====== */
.community {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--teal-deep);
  color: var(--cream);
  position: relative; overflow: hidden;
}
.community__inner {
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
.community blockquote {
  margin: 22px 0 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1.02; letter-spacing: -0.015em;
  font-weight: 400;
  color: #fff;
  text-wrap: balance;
}
.community blockquote .mark { color: var(--teal-pale); font-size: 0.9em; }
.community__stats { display: flex; flex-direction: column; gap: 28px; padding-bottom: 16px; }
.community__stats .stat { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.community__stats .stat:last-child { border-bottom: 1px solid rgba(255,255,255,0.15); }
.community__stats .num { font-family: var(--font-display); font-size: 56px; line-height: 0.9; color: #fff; }
.community__stats .num i { font-style: italic; color: var(--teal-pale); }
.community__stats .lbl { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.78); }
.community__stats .lbl b { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-pale); margin-bottom: 4px; }

/* ====== Section: Location / travel ====== */
.location {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--paper);
}
.location__inner { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.location__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: clamp(40px, 5vw, 80px); align-items: end; }
.location__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.location__map {
  position: relative; overflow: hidden;
  aspect-ratio: 16/11;
  background: var(--night-2);
}
.location__map img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.location__pin {
  position: absolute; transform: translate(-50%, -100%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
}
.location__pin .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 5px var(--coral-glow), 0 4px 14px rgba(0,0,0,0.35);
}
.location__pin.swell .dot { width: 18px; height: 18px; background: #f5c443; box-shadow: 0 0 0 6px rgba(245,196,67,0.3), 0 4px 14px rgba(0,0,0,0.4); }
.location__pin .lbl {
  background: var(--night); color: #fff;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  white-space: nowrap;
  transform: translateY(-4px);
}
.location__airports { display: flex; flex-direction: column; gap: 0; align-self: stretch; }
.location__airport {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.location__airport:last-child { border-bottom: 1px solid var(--hairline); }
.location__airport .name { font-family: var(--font-display); font-size: 28px; line-height: 1.0; font-weight: 400; }
.location__airport .code { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); margin-top: 6px; }
.location__airport .dist { font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--coral); }
.location__caption { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--ink-soft); margin-top: 28px; max-width: 32ch; }

/* ====== Section: Press strip ====== */
.press {
  padding: clamp(40px, 5vw, 60px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.press__inner {
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 40px;
}
.press__label { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink-soft); white-space: nowrap; }
.press__logos { display: flex; align-items: center; justify-content: space-around; gap: 36px; flex-wrap: wrap; }
.press__logos img { height: 26px; opacity: 0.55; filter: grayscale(1) contrast(0.7); }

/* ====== Section: Big CTA ====== */
.bigcta {
  position: relative; overflow: hidden;
  background: var(--night);
  color: var(--cream);
  padding: clamp(120px, 14vw, 220px) 0;
}
.bigcta__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  filter: brightness(0.7);
}
.bigcta__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,29,34,0.4) 0%, rgba(10,29,34,0.85) 100%); }
.bigcta__inner {
  position: relative; z-index: 2; max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  text-align: center;
}
.bigcta h2 { color: #fff; max-width: 14ch; margin: 22px auto 0; }
.bigcta .lede { color: rgba(255,255,255,0.82); margin: 24px auto 36px; }
.bigcta__cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ====== Footer ====== */
.footer {
  background: var(--night); color: rgba(255,255,255,0.7);
  padding: clamp(60px, 7vw, 100px) 0 32px;
}
.footer__inner {
  max-width: 1360px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px;
}
.footer__brand .mark {
  display: flex; flex-direction: column; line-height: 0.95;
}
.footer__brand .swell { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.32em; text-transform: uppercase; color: #fff; }
.footer__brand .escape { font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--teal-pale); margin-top: -2px; padding-left: 1.2em; }
.footer__brand p { margin: 24px 0 0; font-size: 15px; line-height: 1.6; max-width: 32ch; color: rgba(255,255,255,0.65); }
.footer h5 { margin: 0 0 18px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-pale); }
.footer ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer a { font-size: 15px; transition: color 200ms var(--ease-swell); }
.footer a:hover { color: #fff; }
.footer__bottom {
  max-width: 1360px; margin: 60px auto 0;
  padding: 24px clamp(20px, 4vw, 56px) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; gap: 24px; font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* ====== Booking modal ====== */
.modal-scrim {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,29,34,0.6);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease-swell);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--cream); border-radius: 12px;
  max-width: 560px; width: 100%;
  padding: 44px 44px 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  transform: translateY(16px) scale(0.98);
  transition: transform 320ms var(--ease-swell);
  position: relative;
}
.modal-scrim.open .modal { transform: translateY(0) scale(1); }
.modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--paper-2); display: flex; align-items: center; justify-content: center; }
.modal__close svg { width: 16px; height: 16px; color: var(--ink); }
.modal h3 { margin: 8px 0 8px; font-family: var(--font-display); font-size: 40px; line-height: 1.0; font-weight: 400; }
.modal p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.modal form { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); display: flex; flex-direction: column; gap: 8px; }
.modal label.full { grid-column: 1/-1; }
.modal input, .modal select {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: 8px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: #fff;
  text-transform: none;
  letter-spacing: normal;
}
.modal input:focus, .modal select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,154,154,0.15); }
.modal__cta { grid-column: 1/-1; display: flex; justify-content: flex-end; margin-top: 8px; }

/* ====== Booking wizard (3-step) ====== */
.modal--wizard { max-width: 580px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 40px 44px 36px; }
.modal--wizard::-webkit-scrollbar { width: 8px; }
.modal--wizard::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 8px; }

.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-right: 40px; }
.bk-steps { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.bk-steps__label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.bk-steps__bar { display: flex; gap: 5px; }
.bk-steps__seg { width: 26px; height: 4px; border-radius: 999px; background: var(--hairline); transition: background 320ms var(--ease-swell); }
.bk-steps__seg.is-on { background: var(--teal); }

.modal form.bk-form { display: block; margin-top: 0; }
.bk-step { animation: bkFade 360ms var(--ease-swell); }
@keyframes bkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bk-step h3 { margin-top: 14px; }

.bk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.bk-field { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.bk-grid2 .bk-field { margin-top: 0; }
.bk-field--block { gap: 12px; }
.bk-field__label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.bk-field input, .bk-field select, .bk-field textarea {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: 8px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #fff; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.bk-field textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,154,154,0.15); }

.bk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-pills--grid { display: grid; grid-template-columns: 1fr 1fr; }
.bk-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--hairline); border-radius: 10px;
  background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--ink); text-align: left;
  transition: border-color 200ms var(--ease-swell), background 200ms var(--ease-swell), box-shadow 200ms var(--ease-swell);
}
.bk-pill:hover { border-color: var(--teal); }
.bk-pill__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.75px solid var(--hairline); flex-shrink: 0; position: relative; transition: border-color 200ms var(--ease-swell); }
.bk-pill.is-active { border-color: var(--teal); background: rgba(15,154,154,0.06); box-shadow: 0 0 0 1px var(--teal) inset; }
.bk-pill.is-active .bk-pill__dot { border-color: var(--teal); }
.bk-pill.is-active .bk-pill__dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--teal); }

.bk-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.bk-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); background: none; padding: 8px 4px; cursor: pointer; transition: color 200ms var(--ease-swell); }
.bk-back:hover { color: var(--teal-deep); }
.bk-back svg { width: 16px; height: 16px; }
.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--night); color: var(--cream);
  padding: 14px 22px 14px 18px; border-radius: 999px;
  font-size: 16px; display: inline-flex; align-items: center; gap: 10px;
  z-index: 1100; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  opacity: 0; transition: all 320ms var(--ease-swell);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast svg { color: var(--teal-pale); }

/* ====== DIRECTION 2: Cinematic overrides ====== */
.dir-cinematic .hero h1 { font-size: clamp(60px, 12vw, 200px); }
.dir-cinematic .hero__photo { background-position: center; }
.dir-cinematic .hero__veil {
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(8,22,28,0.75) 0%, rgba(8,22,28,0) 60%),
    linear-gradient(180deg, rgba(8,22,28,0.45) 0%, rgba(8,22,28,0) 30%);
}
.dir-cinematic .promise { background: var(--night); color: var(--cream); }
.dir-cinematic .promise h2 { color: #fff; }
.dir-cinematic .promise__col-r p { color: rgba(255,255,255,0.74); }
.dir-cinematic .promise__list .row { border-color: rgba(255,255,255,0.15); }
.dir-cinematic .promise__list .row h4 { color: #fff; }
.dir-cinematic .promise__list .row p { color: rgba(255,255,255,0.7); }
.dir-cinematic .promise__list .row .num { color: var(--teal-pale); }
.dir-cinematic .feature { background: var(--night-2); color: var(--cream); }
.dir-cinematic .feature h2 { color: #fff; }
.dir-cinematic .feature .lede { color: rgba(255,255,255,0.74); }
.dir-cinematic .feature__list .lbl { color: var(--cream); }
.dir-cinematic .feature__list svg { color: var(--teal-pale); }
.dir-cinematic .feature__list .lbl b { color: var(--teal-pale); }
.dir-cinematic .location { background: var(--night); color: var(--cream); }
.dir-cinematic .location h2 { color: #fff; }
.dir-cinematic .location__airport { border-color: rgba(255,255,255,0.15); }
.dir-cinematic .location__airport .name { color: #fff; }
.dir-cinematic .location__airport .code { color: var(--teal-pale); }
.dir-cinematic .location__caption { color: rgba(255,255,255,0.74); }
.dir-cinematic .press { background: var(--night-2); border-color: rgba(255,255,255,0.1); }
.dir-cinematic .press__label { color: rgba(255,255,255,0.7); }
.dir-cinematic .press__logos img { filter: brightness(0) invert(1); opacity: 0.5; }

/* ====== DIRECTION 3: Boutique overrides ====== */
.dir-boutique { background: var(--cream); }
.dir-boutique .hero { background: var(--cream); color: var(--ink); min-height: 100vh; }
.dir-boutique .hero__photo {
  inset: 90px clamp(20px, 4vw, 56px) 120px clamp(20px, 4vw, 56px);
  border-radius: 4px;
}
.dir-boutique .hero__veil {
  inset: 90px clamp(20px, 4vw, 56px) 120px clamp(20px, 4vw, 56px);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8,22,28,0.0) 30%, rgba(8,22,28,0.55) 100%);
}
.dir-boutique .nav { color: #fff; padding-top: 36px; }
.dir-boutique .nav__brand .escape { color: var(--teal-pale); }
.dir-boutique .hero__content { padding-bottom: clamp(60px, 8vw, 100px); }
.dir-boutique .hero h1 { font-size: clamp(48px, 7vw, 104px); max-width: 16ch; }
.dir-boutique .hero__rail { right: clamp(40px, 6vw, 80px); bottom: clamp(80px, 10vw, 140px); }
.dir-boutique .promise { background: var(--cream); }
.dir-boutique .promise__list .row { border-color: rgba(13,28,32,0.1); }
.dir-boutique .feature { background: var(--cream); }
.dir-boutique .feature__media { border-radius: 6px; }
.dir-boutique .community { background: var(--teal); }
.dir-boutique .sports { background: var(--paper-deep); color: var(--ink); }
.dir-boutique .sports__head h2 { color: var(--ink); }
.dir-boutique .location { background: var(--paper-2); }
.dir-boutique .press { background: var(--cream); }

/* ====== DIRECTION 1: Editorial overrides (default-ish but more magazine) ====== */
.dir-editorial .hero h1 { letter-spacing: -0.025em; }
.dir-editorial .nav__center a { color: rgba(255,255,255,0.9); }

/* ====== Scroll-reveal helper ====== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-swell), transform 1000ms var(--ease-swell); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 160ms; }
.reveal.d3 { transition-delay: 240ms; }
.reveal.d4 { transition-delay: 320ms; }

/* mobile: bump Jost body copy +1.5px for small screens */
@media (max-width: 600px) {
  .body { font-size: 18px; }
  .lede, .lede.lg { font-size: 18px; }
}

/* ====== Responsive (basic mobile) ====== */
@media (max-width: 960px) {
  /* Collapse to logo + hamburger: ribbon, inline links and the bar CTA all
     hand off to the mobile sheet (which carries them). */
  .nav__ribbon { display: none; }
  .nav__center { display: none; }
  .nav__right .reserve { display: none; }
  .nav__burger { display: inline-flex; }
  .mm { display: block; }
  .promise__inner, .feature__inner, .feature.flip .feature__inner, .community__inner, .sports__head, .location__head, .location__grid, .footer__inner, .press__inner { grid-template-columns: 1fr !important; }
  .sports__grid { grid-template-columns: 1fr; }
  .hero__rail { display: none; }
  .hero h1 { font-size: clamp(56px, 12vw, 88px); }
  .modal { padding: 28px; }
  .modal form { grid-template-columns: 1fr; }
  .modal--wizard { padding: 28px 24px; }
  .bk-grid2, .bk-pills--grid { grid-template-columns: 1fr; }
  .bk-head { padding-right: 36px; }
}

/* ====== Tweaks-driven font overrides ====== */
html[data-font="instrument"] { --font-display: "Instrument Serif", Georgia, serif; }
html[data-font="cormorant"] { --font-display: "Cormorant Garamond", Georgia, serif; }
html[data-font="playfair"] { --font-display: "Playfair Display", Georgia, serif; }

html[data-rhythm="sand"] .sports { background: var(--paper-deep); color: var(--ink); }
html[data-rhythm="sand"] .sports__head h2 { color: var(--ink); }
html[data-rhythm="sand"] .sports .lede { color: var(--ink-soft); }
html[data-rhythm="sand"] .sport-card { background: var(--night-2); }
html[data-rhythm="sand"] .bigcta { padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(100px, 12vw, 180px); }
html[data-rhythm="ocean"] .promise { background: var(--night); color: var(--cream); }
html[data-rhythm="ocean"] .promise h2 { color: #fff; }
html[data-rhythm="ocean"] .promise__list .row { border-color: rgba(255,255,255,0.14); }
html[data-rhythm="ocean"] .promise__list .row h4 { color: #fff; }
html[data-rhythm="ocean"] .promise__list .row p, html[data-rhythm="ocean"] .promise__col-r p { color: rgba(255,255,255,0.72); }
html[data-rhythm="ocean"] .promise__list .row .num { color: var(--teal-pale); }
html[data-rhythm="ocean"] .feature:not(.dark) { background: var(--night-2); color: var(--cream); }
html[data-rhythm="ocean"] .feature:not(.dark) h2 { color: #fff; }
html[data-rhythm="ocean"] .feature:not(.dark) .lede { color: rgba(255,255,255,0.74); }
html[data-rhythm="ocean"] .feature:not(.dark) .feature__list .lbl { color: var(--cream); }
html[data-rhythm="ocean"] .feature:not(.dark) .feature__list .lbl b { color: var(--teal-pale); }
html[data-rhythm="ocean"] .feature:not(.dark) .feature__list svg { color: var(--teal-pale); }

/* --- c-editorial.css --- */
/* =========================================================
   CONCEPT A — EDITORIAL  (prefix: ed-)
   Warm-sand magazine. Hairline rules, numbered index, serif heads.
   ========================================================= */
.ed { background: var(--paper); color: var(--ink); }
.ed-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

.ed-kicker {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--teal-deep);
  display: inline-flex; align-items: baseline; gap: 12px;
}
.ed-kicker span {
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  letter-spacing: 0; color: var(--coral); text-transform: none;
}
.ed-kicker--center { justify-content: center; }

/* ===== SECTION EYEBROW — "Minimal" treatment (site-wide) =====
   July 9 redesign: the oversized faint numeral read as cluttered above the
   headline, so it was retired in favour of a clean short coral rule + a tracked
   uppercase label. The numeral and the legacy disc icon are kept in the markup
   but hidden, so any section that still passes a number just shows the rule +
   label. (The CTA "ticket" eyebrow keeps its own compact icon-pill treatment,
   defined further down with higher specificity.) */
.ed-kicker--icon {
  position: relative; display: inline-flex; align-items: center;
  gap: 14px; width: auto; padding-left: 0;
}
.ed-kicker--icon .ed-kicon { display: none; }
.ed-kicker--icon .ed-knum { display: none !important; }
.ed-kicker--icon .ed-krule {
  display: inline-block; align-self: center; flex: none;
  width: clamp(28px, 4vw, 52px); height: 2px; border-radius: 2px;
  background: var(--coral); opacity: 1; margin: 0;
}
.ed-kicker--icon .ed-klabel {
  position: relative; font-family: var(--font-body); font-weight: 600; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 12px;
  line-height: 1; color: var(--ink-soft); padding-bottom: 0; margin-left: 0;
}
.ed-kicker--icon.ed-kicker--center { justify-content: center; }
/* on the slate dark theme the label reads teal on the dark ground */
.ed--dark .ed-kicker--icon .ed-klabel { color: var(--teal-pale); }

.ed-h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 55px); line-height: 1.0; letter-spacing: -0.02em;
  margin: 18px 0 0; color: var(--ink); text-wrap: balance;
}
.ed-h2 i { font-style: italic; color: var(--teal-deep); }
.ed-lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 1.5; color: var(--ink-soft);
}
.ed-para {
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 1.65; color: var(--ink-soft);
}

/* ---- 1 intro ---- */
.ed-intro { padding: clamp(72px, 9vw, 150px) 0 clamp(48px, 6vw, 96px); }
.ed-intro__top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 26px; border-bottom: 1px solid var(--hairline);
}
.ed-intro__est { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink-soft); }
.ed-intro__grid {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(36px, 6vw, 92px);
  align-items: start; padding-top: clamp(40px, 5vw, 72px);
}
.ed-intro__head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance;
}
.ed-intro__head i { font-style: italic; color: var(--teal-deep); }
.ed-intro__body { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }

/* ---- "Cool" arrow link → interior pages (stay, gallery) ---- */
.ed-morelink {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
  text-decoration: none; cursor: pointer;
  color: var(--ink);
}
.ed--dark .ed-morelink { color: #fff; }
.ed-morelink__icon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--coral); color: var(--on-accent, #fff);
  box-shadow: 0 10px 26px -12px var(--coral-glow, rgba(238,106,71,0.6));
  transition: transform 0.42s var(--ease-swell), background 0.3s var(--ease-swell);
}
.ed-morelink__label {
  position: relative;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.ed-morelink__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.42s var(--ease-swell);
}
.ed-morelink:hover .ed-morelink__icon { transform: rotate(-45deg); background: var(--coral-deep, var(--coral)); }
.ed-morelink:hover .ed-morelink__label::after { transform: scaleX(1); }
.ed-morelink:active .ed-morelink__icon { transform: rotate(-45deg) scale(0.94); }

.ed-gal__more { margin-top: clamp(36px, 5vw, 64px); display: flex; justify-content: center; }
.ed-gal__more .ed-morelink { flex-direction: column; align-items: center; gap: 14px; margin-top: 0; text-align: center; }
.ed-gal__more .ed-morelink__label::after { left: 50%; right: auto; transform: translateX(-50%) scaleX(0); transform-origin: center; }
.ed-gal__more .ed-morelink:hover .ed-morelink__label::after { transform: translateX(-50%) scaleX(1); }

/* ---- 1b · MARQUEE opener — oversized full-width headline, copy in two
   columns beneath, no fact strip (mirrors the Surfing page intro). ---- */
.ed-intro--marquee .ed-intro__grid { display: block; }
.ed-intro--marquee .ed-intro__head {
  font-size: clamp(42px, 7vw, 55px);
  line-height: 1.08;
  font-style: italic;
  position: relative;
  max-width: none;
  text-wrap: balance;
}
.ed-intro--marquee .ed-intro__head::before {
  content: "\201C"; color: var(--teal-pale); font-style: normal;
  font-size: 1.2em; line-height: 0; vertical-align: -0.18em; margin-right: 0.04em;
}
.ed-intro--marquee .ed-intro__head::after {
  content: "\201D"; color: var(--teal-pale); font-style: normal;
  font-size: 1.2em; line-height: 0; vertical-align: -0.18em; margin-left: 0.04em;
}
.ed-intro--marquee .ed-intro__head i { color: var(--teal-pale); font-style: italic; }
.ed-intro--marquee .ed-intro__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px);
  margin-top: clamp(28px, 3.2vw, 48px); padding-top: 0; max-width: none;
}
.ed-intro--marquee .ed-intro__photo {
  margin: clamp(28px, 3.4vw, 52px) 0 0;
  width: 100%;
}
.ed-intro--marquee .ed-intro__photo img {
  width: 100%; height: clamp(260px, 34vw, 460px);
  object-fit: cover; object-position: center 58%;
  border-radius: clamp(14px, 1.4vw, 22px);
  box-shadow: 0 30px 70px -34px rgba(6,29,40,0.55);
}
.ed-intro--marquee .ed-intro__photo figcaption {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed--dark .ed-intro--marquee .ed-intro__photo figcaption { color: rgba(249,245,233,0.55); }
.ed-intro--marquee .ed-facts { display: none; }
.ed:not(.ed--dark) .ed-intro--marquee .ed-intro__head::before,
.ed:not(.ed--dark) .ed-intro--marquee .ed-intro__head::after,
.ed:not(.ed--dark) .ed-intro--marquee .ed-intro__head i { color: var(--teal-deep); }
@media (max-width: 760px) {
  .ed-intro--marquee .ed-intro__body { grid-template-columns: 1fr; gap: 20px; }
}
.ed-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: clamp(48px, 6vw, 88px); padding-top: 34px; border-top: 1px solid var(--hairline);
}
.ed-fact__num { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 62px); line-height: 0.9; color: var(--ink); }
.ed-fact__lbl { margin-top: 12px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-deep); }

/* =========================================================
   1c · WHO WE ARE — IMMERSIVE
   Brand statement set into a single cinematic photo, with a
   lead + stat-ledger under-row. Default entrance = Reveal
   (slow zoom-out + masked headline rise). The eyebrow reuses
   .ed-intro__top (flex · hairline). Ships on the dark homepage.
   ========================================================= */
.ed-who--immersive .ed-intro__top { padding-bottom: 26px; }

/* stage — the cinematic photo + overlaid headline */
.ed-who__stage {
  position: relative; margin: clamp(28px, 3.4vw, 44px) 0 0; overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 20px); display: flex; align-items: flex-end;
  min-height: clamp(420px, 56vw, 640px);
  box-shadow: 0 44px 100px -46px rgba(6,29,40,0.7);
}
.ed-who__stage img,
.ed-who__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.ed-who__stage-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,29,40,0.14) 0%, rgba(6,29,40,0) 34%, rgba(6,29,40,0.8) 100%); }
.ed-who__head--over {
  position: relative; z-index: 1; margin: 0; color: #fff; max-width: 19ch;
  padding: clamp(28px, 4vw, 60px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(6,29,40,0.35);
}
.ed-who__head--over i { font-style: italic; color: var(--teal-pale); }

/* under-row — lead copy + stat ledger */
.ed-who__under {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px);
  align-items: end; margin-top: clamp(30px, 3.6vw, 52px);
}
.ed-who__lede { max-width: 50ch; }
.ed-who__lede .ed-lead { margin: 0; }
.ed-who__lede .ed-para { margin: 14px 0 0; }
.ed-who__ledger { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.ed-who__stat { padding: 4px 0 4px 20px; border-left: 1px solid var(--hairline); }
.ed-who__stat:first-child { padding-left: 0; border-left: 0; }
.ed-who__stat-num { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 50px); line-height: 0.9; color: var(--ink); }
.ed-who__stat-lbl { display: block; margin: 10px 0 0; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); max-width: 14ch; }

/* dark homepage variants */
.ed--dark .ed-who__stat { border-left-color: rgba(255,255,255,0.16); }
.ed--dark .ed-who__stat-num { color: #fff; }
.ed--dark .ed-who__stat-lbl { color: var(--teal-pale); }

@media (max-width: 860px) {
  .ed-who__under { grid-template-columns: 1fr; gap: 28px; }
  .ed-who__stage { min-height: clamp(360px, 88vw, 520px); }
}
@media (max-width: 480px) {
  .ed-who__ledger { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .ed-who__stat:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* --- Reveal entrance (gated so reduced-motion / print show the final frame) --- */
.ed-who--immersive .ed-who__stage img,
.ed-who--immersive .ed-who__stage video { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .ed-who--immersive[data-anim="reveal"] .ed-who__stage img,
  .ed-who--immersive[data-anim="reveal"] .ed-who__stage video {
    transform: scale(1.16); transition: transform 1500ms var(--ease-swell, ease);
  }
  .ed-who--immersive[data-anim="reveal"] .ed-who__stage.in img,
  .ed-who--immersive[data-anim="reveal"] .ed-who__stage.in video { transform: scale(1); }
  .ed-who--immersive[data-anim="reveal"] .ed-who__head--over {
    opacity: 0; transform: translateY(30px); clip-path: inset(105% 0 0 0);
    transition: opacity 900ms var(--ease-swell, ease) 240ms,
                transform 1100ms var(--ease-swell, ease) 240ms,
                clip-path 1100ms var(--ease-swell, ease) 240ms;
  }
  .ed-who--immersive[data-anim="reveal"] .ed-who__stage.in .ed-who__head--over {
    opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0);
  }
}

/* ---- press marquee (between intro & sports) ---- */
.ed-marq {
  padding-top: clamp(40px, 5vw, 72px);
}
.ed-marq__label {
  margin: 0 0 clamp(18px, 2vw, 26px);
  text-align: center;
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--coral);
}
/* July 9: on the slate-dark theme the "AS SEEN IN" label reads white */
.ed--dark .ed-marq__label { color: #fff; }
.ed-marq__bar {
  background: #07171b;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: clamp(18px, 2.2vw, 28px) 0;
}

.ed-marq__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ed-marq__track { display: flex; width: max-content; animation: ed-marq-scroll 55s linear infinite; }
.ed-marq__group { display: flex; align-items: center; gap: clamp(44px, 5vw, 88px); padding-right: clamp(44px, 5vw, 88px); }
.ed-marq__item { white-space: nowrap; display: inline-flex; align-items: center; color: rgba(249,245,233,0.5); }
.ed-marq__item--label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--coral); }
.ed-marq__item--serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 25px; color: rgba(249,245,233,0.62); }
.ed-marq__item--caps { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(249,245,233,0.55); }
.ed-marq__item--heavy { font-family: var(--font-body); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(249,245,233,0.7); }
.ed-marq__item--award { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 22px; color: rgba(249,245,233,0.72); gap: 12px; }
.ed-marq__stars { color: #f5c443; letter-spacing: 2px; font-size: 15px; }
/* Optional press link — a real follow link, but visually indistinguishable
   from plain text: inherits colour, no underline, and no pointer cursor so
   visitors can't tell it's clickable (crawlers still follow it). */
.ed-marq__item--link { color: inherit; text-decoration: none; cursor: default; }
.ed-marq__item--link:hover,
.ed-marq__item--link:focus { color: inherit; text-decoration: none; }
@keyframes ed-marq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ed-marq__track { animation: none; } }

/* ---- 2 sports ---- */
.ed-sports { padding: clamp(64px, 8vw, 130px) 0; background: var(--paper-2); }
.ed-shead { max-width: 880px; }
.ed-spread {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 76px);
}
.ed-sport {
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell);
}
.ed-sport:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(13,28,32,0.14); }
.ed-sport__fig {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--paper-deep);
}
.ed-sport__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-swell); }
.ed-sport:hover .ed-sport__fig img { transform: scale(1.04); }
.ed-sport__rn {
  position: absolute; top: 16px; left: 20px; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-size: 30px; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.ed-sport__pill {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 14px; border-radius: 999px;
  background: rgba(8,22,28,0.40);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
  color: #fff;
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.ed-sport__pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 3px var(--coral-glow);
}
.ed-sport__meta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-deep); }
.ed-sport__title { margin: 8px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.2vw, 50px); line-height: 1.0; }
.ed-sport__lead { margin: 16px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 42ch; }
.ed-sport__body { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); flex: 1; }
.ed-sport__specs { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ed-sport__specs li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.ed-sport__specs svg { color: var(--coral); flex: none; }
.ed-sport__facts {
  display: flex; gap: clamp(28px, 4vw, 52px);
  margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hairline);
}
.ed-sport__fact { display: flex; flex-direction: column; gap: 5px; }
.ed-sport__fact .k { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-deep); }
.ed-sport__fact .v { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 1.6vw, 21px); color: var(--ink); line-height: 1.1; }
.ed-sport__btn { margin-top: 26px; align-self: flex-start; }

/* wide multi-sport card (full width, shorter, horizontal) */
.ed-sport--wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.ed-sport--wide .ed-sport__fig { width: 50%; flex: none; aspect-ratio: auto; min-height: 300px; }
.ed-sport__wbody { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.2vw, 48px) clamp(26px, 3vw, 38px) clamp(28px, 3.2vw, 48px) calc(clamp(24px, 3vw, 40px) / 2 + clamp(26px, 3vw, 38px)); }
.ed-sport--wide .ed-sport__title { font-size: clamp(30px, 2.8vw, 46px); }
.ed-sport--wide .ed-sport__meta { margin-top: 0; }
.ed-sport--wide .ed-sport__lead { max-width: 52ch; }
.ed-sport__wside { display: flex; flex-direction: column; margin-top: 24px; }
.ed-sport--wide .ed-sport__facts { margin-top: 0; }
/* combo offer — text note in place of the old wide card */
.ed-combo {
  grid-column: 1 / -1;
  margin-top: clamp(20px, 2.6vw, 40px);
  padding: clamp(34px, 4vw, 58px) 0 0;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--hairline);
}
.ed-combo__label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--coral);
}
.ed-combo__head {
  margin: 0; max-width: none; text-wrap: pretty;
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: clamp(34px, 5.4vw, 55px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ink);
}
.ed-combo__head i { font-style: italic; color: var(--teal-deep); }
.ed-combo__foot {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(18px, 2vw, 26px); width: 100%;
  padding-top: clamp(4px, 0.8vw, 10px);
}
.ed-combo__more { margin-top: 0; }
.ed-combo__sub {
  margin: 0; max-width: none;
  font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55;
  color: var(--ink-soft);
}
.ed-combo__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  padding-bottom: 4px; border-bottom: 1.5px solid var(--coral);
  transition: gap var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
              color var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.ed-combo__link svg { color: var(--coral); transition: transform var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)); }
.ed-combo__link:hover { gap: 16px; }
.ed-combo__link:hover svg { transform: translateX(3px); }
.ed--dark .ed-combo { border-top-color: rgba(255,255,255,0.14); }
.ed--dark .ed-combo__head { color: #fff; }
.ed--dark .ed-combo__head i { color: var(--teal-pale); }
.ed--dark .ed-combo__link { color: #fff; }
.ed--dark .ed-combo__sub { color: rgba(249,245,233,0.62); }
@media (max-width: 900px) {
  .ed-combo__foot { flex-direction: column; align-items: flex-start; gap: 22px; }
}

.ed-sport__wside .ed-sport__btn { margin-top: 22px; align-self: flex-start; width: auto; }
@media (max-width: 1080px) {
  .ed-sport--wide { flex-direction: column; }
  .ed-sport--wide .ed-sport__fig { width: 100%; aspect-ratio: 16/7; min-height: 0; }
}
@media (max-width: 1080px) {
  .ed-sport--wide { flex-direction: column; }
  .ed-sport--wide .ed-sport__fig { width: 100%; aspect-ratio: 16/7; min-height: 0; }
  .ed-sport__wbody { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- 3 the stay ---- */
.ed-stay { padding: clamp(64px, 8vw, 130px) 0; background: var(--cream); }
.ed-stay__head { max-width: 880px; }
.ed-stay__lead { margin-top: 22px; max-width: 56ch; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.32; color: var(--ink); }
.ed-stay__lead { font-style: italic; }

/* full-width stay slider */
.ed-slider { position: relative; margin-top: clamp(36px, 4.5vw, 64px); }
.ed-slider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ed-slider__track::-webkit-scrollbar { display: none; }
.ed-slider__slide {
  flex: 0 0 100%; scroll-snap-align: center; position: relative; margin: 0;
  height: clamp(320px, 50vw, 600px); background: var(--paper-deep);
}
.ed-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-slider__slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 36px) clamp(20px, 2.4vw, 30px);
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(6,29,40,0.72) 100%);
}
.ed-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(13,53,55,0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
  transition: background var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
              transform var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.ed-slider__arrow:hover { background: var(--coral); transform: translateY(-50%) scale(1.06); }
.ed-slider__arrow:active { transform: translateY(-50%) scale(0.96); }
.ed-slider__arrow--prev { left: clamp(14px, 2vw, 26px); }
.ed-slider__arrow--next { right: clamp(14px, 2vw, 26px); }
.ed-slider__dots {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.2vw, 26px); z-index: 2;
  display: flex; justify-content: center; gap: 10px;
}
.ed-slider__dot {
  width: 8px; height: 8px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(255,255,255,0.45); box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  transition: background var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
              width var(--dur-base, 240ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.ed-slider__dot.is-on { background: var(--coral); width: 22px; border-radius: 5px; }
@media (max-width: 600px) {
  .ed-slider__arrow { width: 44px; height: 44px; }
}
.ed-stay__grid { display: block; margin-top: clamp(40px, 5vw, 72px); }
.ed-stay__body { display: flex; flex-direction: column; gap: 18px; }
.ed-stay__body .ed-para { line-height: 1.75; max-width: none; }
.ed-stay__amen { list-style: none; margin: 14px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.ed-stay__amen li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.ed-stay__amen svg { color: var(--teal-deep); flex: none; }
.ed-stay__tall { margin: 0; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4/5; background: var(--paper-deep); position: sticky; top: 90px; }
.ed-stay__tall img { width: 100%; height: 100%; object-fit: cover; }
.ed-stay__tall figcaption { position: absolute; left: 16px; bottom: 14px; color: #fff; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.ed-stay__mosaic { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 14px; }
.ed-stay__mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: 3px; background: var(--paper-deep); }
.ed-stay__mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-swell); }
.ed-stay__mosaic figure:hover img { transform: scale(1.05); }
.ed-stay__mosaic figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-family: var(--font-display); font-style: italic; font-size: 16px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-swell), transform 300ms var(--ease-swell); text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.ed-stay__mosaic figure:hover figcaption { opacity: 1; transform: translateY(0); }
.ed-stay__mosaic .s0 { grid-column: span 3; grid-row: span 2; }
.ed-stay__mosaic .s1 { grid-column: span 3; }
.ed-stay__mosaic .s2 { grid-column: span 1; }
.ed-stay__mosaic .s3 { grid-column: span 1; }
.ed-stay__mosaic .s4 { grid-column: span 1; }

/* ---- 4 getting here (journey + departures board) ---- */
.ed-loc { padding: clamp(64px, 8vw, 130px) 0; }
.ed-loc__head { max-width: 760px; }
.ed-loc__intro { margin-top: 26px; max-width: 58ch; }

/* ===== SECTION STARTER — three treatments ===== */
/* A · STACK (default) — inherits base styles, nothing to add */

/* B · RULE — chapter divider: full-width hairline, big index number left,
   label tracked right, headline below */
.ed-gh-head--rule { max-width: none; border-top: 1px solid var(--hairline); padding-top: clamp(20px, 2.2vw, 30px); }
.ed-gh-head--rule .ed-h2 { margin-top: clamp(18px, 2vw, 28px); }
.ed-gh-head--rule .ed-loc__intro { max-width: 64ch; }

/* C · SPLIT — editorial masthead: kicker + headline left, intro in a
   right-hand column aligned to the headline's baseline */
.ed-gh-head--split { max-width: none; display: grid; grid-template-columns: 1.15fr 0.85fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.ed-gh-head--split .ed-kicker { grid-column: 1; grid-row: 1; }
.ed-gh-head--split .ed-h2 { grid-column: 1; grid-row: 2; margin-top: 14px; }
.ed-gh-head--split .ed-loc__intro { grid-column: 2; grid-row: 2; margin-top: 14px; max-width: 42ch; }

/* journey timeline */
.ed-journey {
  list-style: none; margin: clamp(44px, 5vw, 76px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px);
  position: relative;
}
.ed-journey::before {
  content: ""; position: absolute; top: 27px; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(to right, var(--hairline) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.ed-journey__step { position: relative; z-index: 1; }
.ed-journey__node {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--teal-deep);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.ed-journey__ix {
  position: absolute; top: -6px; right: -6px;
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--coral);
  background: var(--paper); padding: 0 3px; line-height: 1;
}
.ed-journey__title { margin: 22px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; }
.ed-journey__body { margin: 10px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 34ch; }

/* getting-here — full-width supporting note (other airports) */
.ed-gh-note {
  margin-top: clamp(28px, 3.4vw, 44px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px);
}
.ed-gh-note p {
  margin: 0; font-family: var(--font-body); font-weight: 400;
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.68; color: var(--ink-soft);
}
.ed-gh-note strong { font-weight: 500; color: var(--ink); }
.ed--dark .ed-gh-note p { color: rgba(249,245,233,0.82); }
.ed--dark .ed-gh-note strong { color: #fff; }
@media (max-width: 760px) {
  .ed-gh-note { gap: 18px; }
}

/* departures board */
.ed-board { margin-top: clamp(48px, 6vw, 84px); border-top: 1.5px solid var(--ink); }
.ed-board__row {
  display: grid; grid-template-columns: 1.6fr 0.7fr 0.9fr 2.2fr; align-items: baseline;
  gap: clamp(12px, 2vw, 28px); padding: 22px 0; border-bottom: 1px solid var(--hairline);
}
.ed-board__row--head {
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.ed-board__row--head span {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal-deep);
}
.ed-board__name { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.ed-board__code {
  font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0.16em;
  color: var(--ink); align-self: center;
}
.ed-board__dist { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); color: var(--coral); }
.ed-board__dist i { font-style: italic; font-size: 0.5em; margin-left: 3px; letter-spacing: 0.06em; }
.ed-board__when { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft); align-self: center; }

.ed-board__foot {
  margin-top: 26px; display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.ed-board__coord {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.ed-board__coord svg { color: var(--coral); }
.ed-board__tag { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--ink-soft); }

/* ===== DESIGN B — MAP-LED ===== */
/* ===== DESIGN A — DEPARTURES BOARD ===== */
.ed-dep { margin-top: clamp(40px, 5vw, 72px); border-top: 1.5px solid var(--ink); }
.ed-dep__row { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 0.8fr; align-items: center; gap: clamp(12px, 2vw, 28px); padding: 22px 4px; border-bottom: 1px solid var(--hairline); }
.ed-dep__row--head { padding: 14px 4px; }
.ed-dep__row--head span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); }
.ed-dep__city { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 38px); line-height: 1; }
.ed-dep__route { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: 0.12em; color: var(--ink); }
.ed-dep__route svg { color: var(--coral); }
.ed-dep__time { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); color: var(--coral); }
.ed-dep__status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.ed-dep__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success, #2f9e6f); box-shadow: 0 0 0 3px rgba(47,158,111,0.22); }
.ed-dep__final { margin-top: clamp(20px, 2.6vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 4px; }
.ed-dep__leg { display: flex; align-items: center; gap: 18px; }
.ed-dep__legicon { width: 52px; height: 52px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--coral); color: var(--on-accent, #fff); }
.ed-dep__legtext { display: flex; flex-direction: column; gap: 4px; }
.ed-dep__legk { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-deep); }
/* July 9: leg-label reads white + bolder on the slate-dark theme */
.ed--dark .ed-dep__legk { color: #fff; font-weight: 600; }
.ed-dep__legv { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: var(--ink); }

/* ===== DESIGN B — TWO-LEG RAIL ===== */
.ed-rail { margin-top: clamp(44px, 5vw, 76px); display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.ed-rail__stop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 8px; }
.ed-rail__k { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); }
.ed-rail__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ed-rail__chip { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; padding: 8px 12px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink); }
.ed-rail__big { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.9; color: var(--ink); }
.ed-rail__stop.is-end .ed-rail__big { color: var(--coral); }
.ed-rail__sub { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); max-width: 18ch; }
.ed-rail__leg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 90px; }
.ed-rail__legline { width: 100%; height: 2px; background: repeating-linear-gradient(to right, var(--teal-deep) 0 7px, transparent 7px 14px); opacity: 0.55; }
.ed-rail__legline.is-drive { background: repeating-linear-gradient(to right, var(--coral) 0 7px, transparent 7px 14px); opacity: 0.7; }
.ed-rail__legicon { position: absolute; top: -16px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--teal-deep); box-shadow: inset 0 0 0 1px var(--hairline); }
.ed-rail__legicon.is-drive { color: var(--coral); }
.ed-rail__legt { margin-top: 6px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ed-rail__foot { margin-top: clamp(36px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--hairline); }
.ed-rail__foot span { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.9vw, 25px); color: var(--ink-soft); max-width: 48ch; }
.ed-rail__foot b { font-style: normal; font-weight: 400; color: var(--coral); }

/* ===== DESIGN C — ROUTE-MAP HUB ===== */
.ed-hub { margin-top: clamp(40px, 5vw, 70px); padding: clamp(24px, 3vw, 44px); background: var(--paper-2); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hairline); }
.ed-hub__svg { width: 100%; height: auto; display: block; }
.ed-hub__flight line { stroke: var(--teal-deep); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0.6; }
.ed-hub__drive { stroke: var(--coral); stroke-width: 4; stroke-linecap: round; }
.ed-hub__cdot { fill: var(--teal-deep); }
.ed-hub__ccode { fill: var(--ink); font-family: var(--font-display); font-size: 34px; }
.ed-hub__ccity { fill: var(--ink-soft); font-family: var(--font-body); font-size: 16px; letter-spacing: 0.04em; }
.ed-hub__pop { fill: var(--teal-deep); }
.ed-hub__poplabel { fill: #fff; font-family: var(--font-display); font-size: 40px; text-anchor: middle; dominant-baseline: central; }
.ed-hub__popsub { fill: var(--ink-soft); font-family: var(--font-body); font-size: 15px; letter-spacing: 0.12em; text-anchor: middle; text-transform: uppercase; }
.ed-hub__drivelabel { fill: var(--coral); font-family: var(--font-body); font-weight: 500; font-size: 18px; letter-spacing: 0.16em; text-anchor: middle; }
.ed-hub__swell { fill: var(--coral); }
.ed-hub__swelllabel { fill: var(--on-accent, #fff); font-family: var(--font-display); font-size: 26px; text-anchor: middle; dominant-baseline: central; }
.ed-hub__legend { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.ed-hub__legend span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); }
.ed-hub__lg { width: 22px; height: 0; border-top: 2px solid; }
.ed-hub__lg--flight { color: var(--teal-deep); border-top-style: dashed; }
.ed-hub__lg--drive { color: var(--coral); border-top-width: 3px; }

/* ---- 4 gallery (asymmetric magazine mosaic) ---- */
.ed-gal { padding: clamp(64px, 8vw, 130px) 0; background: var(--paper-2); }
.ed-gal__head { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 72px); align-items: end; }
.ed-gal__cap { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; color: var(--ink); max-width: 40ch; justify-self: end; }
.ed-gal__cap i { color: var(--teal-deep); }
.ed-gal__mosaic {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 14px;
}
.ed-gal__tile { margin: 0; position: relative; overflow: hidden; border-radius: 3px; background: var(--paper-deep); }
.ed-gal__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-swell); }
.ed-gal__tile:hover img { transform: scale(1.05); }
.ed-gal__tile figcaption {
  position: absolute; left: 12px; bottom: 10px; color: #fff;
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-swell), transform 300ms var(--ease-swell);
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.ed-gal__tile:hover figcaption { opacity: 1; transform: translateY(0); }
/* feature tile layout */
.ed-gal__tile.t0 { grid-column: span 2; grid-row: span 2; }
.ed-gal__tile.t4 { grid-column: span 2; }
.ed-gal__tile.t6 { grid-row: span 2; }

/* ---- reviews — spotlight (one voice at a time) ---- */
.ed-rev { padding: clamp(64px, 8vw, 130px) 0; background: var(--paper-2); }
.ed-rev__stars { display: inline-flex; gap: 3px; color: var(--teal); line-height: 0; }
.ed-rev__stars svg { fill: currentColor; }

/* header row */
.ed-rev__top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding-bottom: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--hairline); }
.ed-rev__h { margin-top: 16px; }
.ed-rev__agg { display: flex; align-items: center; gap: 18px; }
.ed-rev__score { font-family: var(--font-display); font-size: clamp(48px, 5vw, 68px); line-height: 0.78; color: var(--ink); }
.ed-rev__score small { font-size: 0.3em; color: var(--ink-soft); margin-left: 3px; }
.ed-rev__aggside { display: flex; flex-direction: column; gap: 9px; padding-left: 18px; border-left: 1px solid var(--hairline); }
.ed-rev__src { margin: 0; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }

/* spotlight */
.ed-rev__spot { margin: 0; padding: clamp(34px, 4vw, 56px) 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(10px, 1.2vw, 18px); animation: edRevIn 460ms var(--ease-swell); }
@keyframes edRevIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ed-rev__mark { grid-row: 1 / span 2; font-family: var(--font-display); font-style: italic; font-size: clamp(64px, 8vw, 120px); line-height: 0.6; color: var(--coral); opacity: 0.5; user-select: none; }
.ed-rev__quote { grid-column: 2; margin: 0; font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; }
.ed-rev__by { grid-column: 2; display: flex; align-items: center; gap: 15px; margin-top: clamp(24px, 2.8vw, 36px); flex-wrap: wrap; }
.ed-rev__avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; background: var(--teal); box-shadow: inset 0 0 0 1px rgba(13,28,32,0.08); }
.ed-rev__bymeta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-rev__name { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ink); }
.ed-rev__sub { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); }
.ed-rev__cred { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-left: auto; }
.ed-rev__verified { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); }
.ed-rev__rate { display: inline-flex; align-items: center; gap: 9px; }
.ed-rev__rate .ed-rev__stars { gap: 2px; }
.ed-rev__rateon { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* nav */
.ed-rev__nav { margin-top: clamp(28px, 3vw, 42px); padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ed-rev__count2 { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--ink); }
.ed-rev__count2 span { color: var(--ink-soft); }
.ed-rev__btns { display: flex; gap: 10px; }
.ed-rev__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 240ms var(--ease-swell), color 240ms var(--ease-swell), border-color 240ms var(--ease-swell), transform 160ms var(--ease-swell); }
.ed-rev__btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.ed-rev__btn:active { transform: scale(0.94); }

/* roster chips */
.ed-rev__roster { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 28px); }
.ed-rev__chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft); font-family: var(--font-body); font-size: 15px; cursor: pointer; transition: background 240ms var(--ease-swell), color 240ms var(--ease-swell), border-color 240ms var(--ease-swell); }
.ed-rev__chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--teal); }
.ed-rev__chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.ed-rev__chip.is-on { border-color: var(--coral); background: rgba(238,106,71,0.12); color: var(--ink); }

@media (max-width: 820px) {
  .ed-rev__top { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .ed-rev__spot { grid-template-columns: 1fr; }
  .ed-rev__mark { grid-row: auto; grid-column: 1; font-size: 56px; line-height: 0.8; }
  .ed-rev__quote, .ed-rev__by { grid-column: 1; }
  .ed-rev__cred { margin-left: 0; align-items: flex-start; flex-basis: 100%; }
}

/* ---- 5 faq ---- */
.ed-faq { padding: clamp(64px, 8vw, 130px) 0; }
.ed-faq__inner { display: grid; --fg: clamp(36px, 6vw, 90px); grid-template-columns: 50% 50%; column-gap: 0; align-items: start; }
.ed-faq__aside { position: sticky; top: 90px; padding-right: var(--fg); }
.ed-faq__aside .ed-para { margin-top: 22px; max-width: 34ch; }
.ed-faq__list { display: flex; flex-direction: column; }
.ed-faq__row { border-top: 1px solid var(--hairline); }
.ed-faq__qh { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.ed-faq__row:last-child { border-bottom: 1px solid var(--hairline); }
.ed-faq__q {
  width: 100%; display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: 8px;
  padding: 26px 0; text-align: left;
}
.ed-faq__idx { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--teal-deep); }
.ed-faq__qtext { font-family: var(--font-display); font-size: clamp(20px, 2vw, 27px); line-height: 1.15; color: var(--ink); }
.ed-faq__sign { color: var(--coral); display: inline-flex; justify-content: flex-end; }
.ed-faq__abody { overflow: hidden; height: 0; transition: height 420ms var(--ease-swell); }
.ed-faq__abody p { margin: 0 0 28px; padding-left: 0; max-width: 60ch; font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--ink-soft); }

/* ---- 6 cta ---- */
.ed-cta { padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 9vw, 150px); }
.ed-cta__frame {
  text-align: center; padding: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px);
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--cream);
}
.ed-cta__head { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 88px); line-height: 1.0; letter-spacing: -0.02em; margin: 22px 0 0; }
.ed-cta__head i { font-style: italic; color: var(--teal-deep); }
.ed-cta__lead { margin: 22px auto 36px; max-width: 52ch; }
.ed-cta__row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* CTA · B — full-bleed photo */
.ed-cta--photo { position: relative; overflow: hidden; padding: clamp(96px, 14vw, 200px) 0; text-align: center; }
.ed-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); }
.ed-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,28,0.5) 0%, rgba(8,22,28,0.82) 100%); }
.ed-cta__photoinner { position: relative; z-index: 1; }
.ed-cta--photo .ed-cta__head { color: #fff; }
.ed-cta--photo .ed-cta__head i { color: var(--teal-pale); }
.ed-cta--photo .ed-cta__lead { margin: 22px auto 36px; max-width: 52ch; color: rgba(255,255,255,0.85); }

/* CTA · C — split booking desk */
.ed-cta--panel { padding: clamp(56px, 8vw, 120px) 0 clamp(72px, 9vw, 140px); }
.ed-cta__split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.ed-cta--panel .ed-cta__head { text-align: left; margin-top: 16px; font-size: clamp(34px, 4.4vw, 62px); }
.ed-cta--panel .ed-cta__lead { text-align: left; margin: 20px 0 28px; max-width: 46ch; }
.ed-cta__assure { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ed-cta__assure li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.ed-cta__assure svg { color: var(--coral); flex: none; }
.ed-cta__desk { background: #fff; border-radius: 18px; padding: clamp(26px, 3vw, 38px); box-shadow: 0 1px 3px rgba(13,28,32,0.06), 0 24px 60px rgba(13,28,32,0.14); }
.ed-cta__deskhead { display: flex; align-items: center; justify-content: space-between; }
.ed-cta__desklabel { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); }
.ed-cta__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.ed-cta__livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #2f9e6f); box-shadow: 0 0 0 3px rgba(47,158,111,0.2); }
.ed-cta__weeks { list-style: none; margin: 18px 0 0; padding: 0; }
.ed-cta__week { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.ed-cta__week:first-child { border-top: 0; }
.ed-cta__wdate { font-family: var(--font-display); font-size: clamp(21px, 2vw, 27px); color: var(--ink); line-height: 1; }
.ed-cta__wtag { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); }
.ed-cta__wstatus { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding: 5px 11px; border-radius: 999px; background: var(--paper-2); }
.ed-cta__wstatus.is-tight { color: var(--coral); background: rgba(238,106,71,0.12); }
.ed-cta__price { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; }
.ed-cta__price b { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; color: var(--ink); }
.ed-cta__deskbtn { width: 100%; justify-content: center; margin-top: 20px; }
.ed-cta__desknote { display: block; margin-top: 14px; text-align: center; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* CTA · D — framed photo (combo) */
.ed-cta__frame--photo { position: relative; overflow: hidden; border-color: rgba(255,255,255,0.18); background: var(--night); }
.ed-cta__frame--photo .ed-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); }
.ed-cta__frame--photo .ed-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,28,0.45) 0%, rgba(8,22,28,0.8) 100%); }
.ed-cta__frameinner { position: relative; z-index: 1; }
.ed-cta__frame--photo .ed-cta__head { color: #fff; }
.ed-cta__frame--photo .ed-cta__head i { color: var(--teal-pale); }
.ed-cta__frame--photo .ed-cta__lead { color: rgba(255,255,255,0.86); }

/* CTA · E — travel tag (boarding-pass ticket) */
.ed-cta--tag { padding: clamp(56px, 8vw, 120px) 0 clamp(72px, 9vw, 140px); }

.ed-ticket {
  display: grid; grid-template-columns: 360px 1fr;
  width: 100%; margin: 0 auto; min-height: 440px;
  background: var(--cream); border-radius: 20px; position: relative;
  box-shadow: 0 26px 70px rgba(10,31,36,0.20);
}
.ed-ticket__stub { position: relative; border-radius: 20px 0 0 20px; overflow: hidden; color: #fff; }
.ed-ticket__stub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-ticket__stubveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,40,42,0.12) 0%, rgba(8,40,42,0.78) 100%); }
.ed-ticket__stubinner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 26px; }
.ed-ticket__stamp { align-self: flex-start; display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 15px; border-radius: 10px; background: var(--coral); transform: rotate(-3deg); box-shadow: 0 8px 22px rgba(238,106,71,0.4); }
.ed-ticket__stamp b { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.ed-ticket__stamp span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.92; }
.ed-ticket__route { display: flex; align-items: flex-end; gap: 14px; }
.ed-ticket__rcode { font-family: var(--font-display); font-size: 40px; line-height: 0.9; }
.ed-ticket__rmid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 8px; }
.ed-ticket__rmid .ln { width: 100%; height: 1px; background: rgba(255,255,255,0.4); }
.ed-ticket__rmid em { font-style: normal; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }

/* perforation seam */
.ed-ticket__perf { position: absolute; left: 360px; top: 0; bottom: 0; width: 0; border-left: 2px dashed rgba(13,28,32,0.2); transform: translateX(-1px); }
.ed-ticket::before, .ed-ticket::after { content: ""; position: absolute; left: 360px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transform: translateX(-50%); z-index: 3; }
.ed-ticket::before { top: -12px; }
.ed-ticket::after { bottom: -12px; }

.ed-ticket__body { position: relative; overflow: hidden; padding: clamp(30px, 3.5vw, 48px) clamp(30px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
/* travel-document security texture on the cream ticket surface */
.ed-ticket__body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(46deg, rgba(13,53,55,0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-46deg, rgba(13,53,55,0.032) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 88% 22%, rgba(238,106,71,0.06) 0, transparent 34%);
  -webkit-mask-image: radial-gradient(140% 120% at 100% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(140% 120% at 100% 50%, #000 30%, transparent 78%);
}
.ed-ticket__watermark {
  position: absolute; right: clamp(-6px, 1vw, 18px); bottom: -8px; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-style: italic; font-size: clamp(150px, 18vw, 260px);
  line-height: 0.74; color: rgba(13,53,55,0.045); letter-spacing: -0.02em;
}
.ed-ticket__body > *:not(.ed-ticket__watermark) { position: relative; z-index: 1; }

/* Dominican Republic entry stamp — distressed inked rubber stamp */
.ed-stamp {
  position: absolute; z-index: 4; pointer-events: none;
  top: clamp(16px, 2.4vw, 38px); right: clamp(14px, 2vw, 34px);
  width: clamp(116px, 13vw, 158px); aspect-ratio: 1;
  color: #2c6a67; transform: rotate(8deg);
  mix-blend-mode: multiply; opacity: 0.92;
}
.ed-stamp__arc { fill: currentColor; font-family: var(--font-body); font-weight: 600; }
.ed-stamp__arc--top { font-size: 15px; letter-spacing: 1.6px; }
.ed-stamp__arc--bot { font-size: 12px; letter-spacing: 2.4px; }
.ed-stamp__code { fill: currentColor; font-family: var(--font-display); font-size: 30px; letter-spacing: 0.04em; }
.ed-stamp__date { fill: currentColor; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 2.2px; }
@media (max-width: 760px) {
  .ed-stamp { width: 104px; top: 10px; right: 8px; }
}
.ed-ticket__head { text-align: left; margin-top: 16px; font-size: clamp(34px, 4vw, 56px); }
.ed-ticket__lead { text-align: left; margin: 16px 0 0; max-width: 46ch; font-weight: 400; }
.ed-ticket__specs { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; margin: 26px 0 28px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.ed-ticket__spec { display: flex; flex-direction: column; gap: 3px; }
.ed-ticket__spec b { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--teal-deep); }
.ed-ticket__spec span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.ed-ticket__row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.ed-ticket__row .btn { flex: 1 1 220px; justify-content: center; }

/* gentle attention wiggle on the "Ask us a question" chat icon */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ed-chat-wiggle {
    0%, 60%, 100% { transform: rotate(0deg) scale(1); }
    64% { transform: rotate(-16deg) scale(1.12); }
    69% { transform: rotate(14deg) scale(1.12); }
    74% { transform: rotate(-11deg) scale(1.08); }
    79% { transform: rotate(8deg) scale(1.06); }
    84% { transform: rotate(-5deg) scale(1.03); }
    89% { transform: rotate(3deg) scale(1.01); }
    94% { transform: rotate(-1deg) scale(1); }
  }
  .ed-ticket__row .btn--ghost-dark svg {
    transform-origin: 50% 60%;
    animation: ed-chat-wiggle 2.8s var(--ease-out, ease-in-out) infinite;
  }
  .ed-ticket__row .btn--ghost-dark:hover svg { animation-play-state: paused; }
}
/* Facebook-style unread badge on the chat bubble */
.ed-ask__ic { position: relative; display: inline-flex; align-items: center; }
.ed-ask__badge {
  position: absolute; top: -9px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--coral-500, #ee6a47); color: #fff;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  line-height: 1; letter-spacing: 0; border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--cream, #fdfbf7);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes ed-badge-pop {
    0%, 58%, 100% { transform: scale(1); }
    64% { transform: scale(1.28); }
    76% { transform: scale(1); }
  }
  .ed-ask__badge { animation: ed-badge-pop 2.8s var(--ease-out, ease-in-out) infinite; transform-origin: 50% 50%; }
  .ed-ticket__row .btn--ghost-dark:hover .ed-ask__badge { animation-play-state: paused; }
}

/* dark editorial theme — keep the cream card, deepen the seam notches */
.ed--dark .ed-ticket::before, .ed--dark .ed-ticket::after { background: var(--night); }

@media (max-width: 760px) {
  .ed-ticket { grid-template-columns: 1fr; }
  .ed-ticket__stub { border-radius: 20px 20px 0 0; min-height: 220px; }
  .ed-ticket__perf, .ed-ticket::before, .ed-ticket::after { display: none; }
  /* 4 spec tiles wrap awkwardly (3-then-1) on narrow screens — keep just
     price (tile 2) and the star rating (tile 3) so it reads as one clean line. */
  .ed-ticket__specs { flex-wrap: nowrap; }
  .ed-ticket__spec:nth-child(1), .ed-ticket__spec:nth-child(4) { display: none; }
  /* Stack the two CTA buttons full-width and equal so they line up neatly.
     Reset the desktop row's flex-basis (220px) and flex-grow (1) — in this
     column layout those apply to height, not width, and were stretching
     each button to fill the leftover vertical space. */
  .ed-ticket__row { flex-direction: column; align-items: stretch; }
  .ed-ticket__row .btn { flex: 0 0 auto; width: 100%; justify-content: center; }
}

/* ---- footer ---- */
.ed-footer { position: relative; overflow: hidden; background: var(--night); color: rgba(255,255,255,0.7); padding: clamp(56px, 7vw, 96px) 0 30px; }
.ed-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(110% 90% at 12% -10%, rgba(15,154,154,0.14), transparent 55%);
}
.ed-footer__watermark {
  position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%);
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: clamp(140px, 30vw, 460px); line-height: 0.8; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.035); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}
.ed-footer .ed-wrap { position: relative; z-index: 1; }
.ed-footer__top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; }
.ed-footer__mark { display: flex; flex-direction: column; line-height: 0.92; }
.ed-footer__mark span { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; }
.ed-footer__mark i { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 28px; color: var(--teal-pale); padding-left: 1.1em; }
.ed-footer__brand p { margin: 22px 0 0; font-size: 16px; line-height: 1.6; max-width: 34ch; color: rgba(255,255,255,0.6); }
.brandlock--footer { margin-bottom: 4px; }
.brandlock--footer .brandlock__logo { height: 68px; }
.ed-footer__rating { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 20px; padding: 0; background: none; box-shadow: none; }
.ed-footer__rating .ed-rev__stars { gap: 2px; }
.ed--dark .ed-footer__rating .ed-rev__stars { color: var(--sun-400, #f4c14a); }
.ed-footer__ratingtxt { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ed-footer__social { display: flex; gap: 11px; margin-top: 26px; }
.ed-footer__social a {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: color 220ms var(--ease-swell), background 220ms var(--ease-swell),
              box-shadow 220ms var(--ease-swell), transform 220ms var(--ease-swell);
}
.ed-footer__social a:hover { color: #fff; background: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); transform: translateY(-3px); }
.ed-footer__social a:active { transform: translateY(-3px) scale(0.95); }
.ed-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ed-footer h3 { margin: 0 0 16px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-pale); }
.ed-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ed-footer a { font-size: 16px; transition: color 200ms var(--ease-swell); }
.ed-footer a:hover { color: #fff; }
.ed-footer__base { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; gap: 20px; font-size: 15px; color: rgba(255,255,255,0.5); }
.ed-footer__base a { font-size: inherit; }

@media (max-width: 1080px) {
  .ed-spread { grid-template-columns: 1fr 1fr; }
  .ed-rev__grid { grid-template-columns: 1fr 1fr; }
  .ed-rev__card.is-feat { grid-column: span 2; }
}
@media (max-width: 900px) {
  .ed-intro__grid, .ed-spread, .ed-gal__head, .ed-footer__top, .ed-stay__grid { grid-template-columns: 1fr; }
  .ed-faq__inner { grid-template-columns: 1fr; }
  .ed-faq__aside { padding-right: 0; }
  .ed-facts { grid-template-columns: 1fr; }
  .ed-rev__summary { grid-template-columns: 1fr; gap: 24px; }
  .ed-rev__sources { border-left: 0; padding-left: 0; padding-top: 20px; border-top: 1px solid var(--hairline); }
  .ed--dark .ed-rev__sources { border-top-color: rgba(255,255,255,0.16); }
  .ed-rev__grid { grid-template-columns: 1fr; }
  .ed-rev__card.is-feat { grid-column: span 1; }
  .ed-journey { grid-template-columns: 1fr; gap: 28px; }
  .ed-journey::before { display: none; }
  .ed-journey__body { max-width: none; }
  .ed-gh-head--split { grid-template-columns: 1fr; }
  .ed-gh-head--split .ed-h2 { grid-row: auto; }
  .ed-gh-head--split .ed-loc__intro { grid-column: 1; grid-row: auto; margin-top: 22px; max-width: 58ch; }
  .ed-dep__row--head { display: none; }
  .ed-dep__row { grid-template-columns: 1fr auto; align-items: baseline; column-gap: 16px; row-gap: 4px; padding: 18px 4px; }
  .ed-dep__city { grid-column: 1; grid-row: 1; }
  .ed-dep__route { grid-column: 1; grid-row: 2; font-size: 15px; }
  .ed-dep__time { grid-column: 2; grid-row: 1; text-align: right; }
  .ed-dep__status { grid-column: 2; grid-row: 2; justify-content: flex-end; font-size: 12px; }
  .ed-rail { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .ed-rail__leg { width: 2px; min-width: 0; height: 64px; flex-direction: row; }
  .ed-rail__legline { width: 2px; height: 100%; background: repeating-linear-gradient(to bottom, var(--teal-deep) 0 7px, transparent 7px 14px); }
  .ed-rail__legline.is-drive { background: repeating-linear-gradient(to bottom, var(--coral) 0 7px, transparent 7px 14px); }
  .ed--dark .ed-rail__legline { background: repeating-linear-gradient(to bottom, var(--teal-pale) 0 7px, transparent 7px 14px); }
  .ed-rail__legicon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .ed-rail__legt { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); }
  .ed-board__row, .ed-board__row--head { grid-template-columns: 1.4fr 0.7fr 0.8fr; }
  .ed-board__when { display: none; }
  .ed-stay__tall { position: static; aspect-ratio: 16/10; }
  .ed-stay__amen { grid-template-columns: 1fr; }
  .ed-stay__mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .ed-stay__mosaic .s0 { grid-column: span 2; grid-row: span 2; }
  .ed-stay__mosaic .s1 { grid-column: span 2; }
  .ed-stay__mosaic .s2, .ed-stay__mosaic .s3, .ed-stay__mosaic .s4 { grid-column: span 1; }
  .ed-gal__mosaic { grid-template-columns: repeat(2, 1fr); }
  .ed-gal__tile.t0, .ed-gal__tile.t4 { grid-column: span 2; }
  .ed-faq__aside { position: static; }
  .ed-footer__base { flex-direction: column; gap: 8px; }
}

/* mobile: tune Jost body copy size for small screens (bumped +1.5px) */
@media (max-width: 600px) {
  .ed-lead { font-size: 19px; }
  .ed-stay__lead { font-size: 19.5px; } /* stay lead bumped +2px per review */
  .ed-para { font-size: 19px; }
  .ed-sport__lead { font-size: 19px; }
  .ed-journey__body { font-size: 19px; }
  .ed-sport__specs li,
  .ed-stay__amen li { font-size: 19px; }
  /* stack the card's inner two-up grids to one column on phones */
  .ed-sport__specs { grid-template-columns: 1fr; }
  .ed-sport__facts { flex-direction: column; gap: 18px; }
}

/* =========================================================
   EDITORIAL — DARK THEME  (.ed--dark)
   Editorial layout recolored to the Cinematic dark palette.
   ========================================================= */
.ed--dark { background: var(--night); color: var(--cream); }

/* type + accents */
.ed--dark .ed-kicker { color: var(--teal-pale); }
.ed--dark .ed-kicker--icon .ed-knum { border-right-color: rgba(255,255,255,0.2); }
.ed--dark .ed-h2 { color: #fff; }
.ed--dark .ed-h2 i { color: var(--teal-pale); }
.ed--dark .ed-lead { color: rgba(249,245,233,0.82); }
.ed--dark .ed-para { color: rgba(249,245,233,0.72); }

/* section backgrounds — alternate dark / light down the page */
.ed--dark .ed-sports { background: var(--night-2); }
.ed--dark .ed-stay { background: var(--night); }
.ed--dark .ed-loc { background: var(--night-2); }
.ed--dark .ed-gal { background: var(--night); }
.ed--dark .ed-rev { background: var(--night-2); }
.ed--dark .ed-faq { background: var(--teal-deep); }

/* reviews (dark) */
.ed--dark .ed-rev__stars { color: var(--teal-pale); }
.ed--dark .ed-rev__top { border-bottom-color: rgba(255,255,255,0.12); }
.ed--dark .ed-rev__score { color: #fff; }
.ed--dark .ed-rev__score small { color: rgba(249,245,233,0.5); }
.ed--dark .ed-rev__aggside { border-left-color: rgba(255,255,255,0.16); }
.ed--dark .ed-rev__src { color: var(--cream); }
.ed--dark .ed-rev__quote { color: #fff; }
.ed--dark .ed-rev__avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.ed--dark .ed-rev__name { color: #fff; }
.ed--dark .ed-rev__sub { color: rgba(249,245,233,0.6); }
.ed--dark .ed-rev__cred .ed-rev__verified { color: var(--teal-pale); }
.ed--dark .ed-rev__rateon { color: rgba(249,245,233,0.6); }
.ed--dark .ed-rev__nav { border-top-color: rgba(255,255,255,0.12); }
.ed--dark .ed-rev__count2 { color: #fff; }
.ed--dark .ed-rev__count2 span { color: rgba(249,245,233,0.5); }
.ed--dark .ed-rev__btn { border-color: rgba(255,255,255,0.2); color: var(--cream); }
.ed--dark .ed-rev__btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.ed--dark .ed-rev__chip { border-color: rgba(255,255,255,0.16); color: rgba(249,245,233,0.72); }
.ed--dark .ed-rev__chip img { background: var(--teal-deep); }
.ed--dark .ed-rev__chip:hover { border-color: rgba(255,255,255,0.34); color: #fff; }
.ed--dark .ed-rev__chip.is-on { border-color: var(--coral); background: rgba(238,106,71,0.12); color: #fff; }
/* press marquee seam: label area matches the section above (sports),
   the logos bar matches the section below (the stay) */
.ed--dark .ed-marq { background: var(--night-2); }
.ed--dark .ed-marq__bar { background: var(--night); border-top-color: rgba(255,255,255,0.06); }

/* hairlines → light */
.ed--dark .ed-intro__top,
.ed--dark .ed-facts,
.ed--dark .ed-air,
.ed--dark .ed-loc__note,
.ed--dark .ed-stay__amen { border-color: rgba(255,255,255,0.16); }
.ed--dark .ed-air:first-child { border-color: transparent; }

/* intro */
.ed--dark .ed-intro__est { color: rgba(249,245,233,0.6); }
.ed--dark .ed-intro__head { color: #fff; }
.ed--dark .ed-intro__head i { color: var(--teal-pale); }
.ed--dark .ed-fact__num { color: #fff; }
.ed--dark .ed-fact__lbl { color: var(--teal-pale); }

/* sports */
.ed--dark .ed-sport__fig,
.ed--dark .ed-stay__tall,
.ed--dark .ed-stay__mosaic figure,
.ed--dark .ed-gal__tile { background: #0c2429; }
.ed--dark .ed-sport { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.12); }
.ed--dark .ed-sport:hover { box-shadow: 0 22px 60px rgba(0,0,0,0.4); }
.ed--dark .ed-sport__facts { border-color: rgba(255,255,255,0.14); }
.ed--dark .ed-sport__fact .v { color: var(--cream); }
.ed--dark .ed-sport__meta { color: var(--teal-pale); }
.ed--dark .ed-sport__title { color: #fff; }
.ed--dark .ed-sport__lead { color: rgba(249,245,233,0.78); }
.ed--dark .ed-sport__specs li { color: var(--cream); }
.ed--dark .ed-sport__fact .k { color: var(--teal-pale); }

/* the stay */
.ed--dark .ed-stay__lead { color: #fff; }
.ed--dark .ed-stay__amen li { color: var(--cream); }
.ed--dark .ed-stay__amen svg { color: var(--teal-pale); }

/* location → getting here */
.ed--dark .ed-journey::before { background: repeating-linear-gradient(to right, rgba(255,255,255,0.2) 0 8px, transparent 8px 16px); }
.ed--dark .ed-journey__node { background: var(--night-2); color: var(--teal-pale); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.ed--dark .ed-journey__ix { background: var(--night-2); }
.ed--dark .ed-journey__title { color: #fff; }
.ed--dark .ed-journey__body { color: rgba(249,245,233,0.76); }
.ed--dark .ed-board { border-top-color: rgba(255,255,255,0.5); }
.ed--dark .ed-board__row { border-bottom-color: rgba(255,255,255,0.16); }
.ed--dark .ed-board__row--head { border-bottom-color: rgba(255,255,255,0.16); }
.ed--dark .ed-board__row--head span { color: var(--teal-pale); }
.ed--dark .ed-board__name { color: #fff; }
.ed--dark .ed-board__code { color: var(--cream); }
.ed--dark .ed-board__when { color: rgba(249,245,233,0.74); }
.ed--dark .ed-board__coord { color: #fff; }
.ed--dark .ed-board__tag { color: rgba(249,245,233,0.78); }

/* getting here — departures board (dark) */
.ed--dark .ed-dep { border-top-color: rgba(255,255,255,0.5); }
.ed--dark .ed-dep__row { border-bottom-color: rgba(255,255,255,0.14); }
.ed--dark .ed-dep__row--head span { color: var(--teal-pale); }
.ed--dark .ed-dep__city { color: #fff; }
.ed--dark .ed-dep__route { color: var(--cream); }
.ed--dark .ed-dep__status { color: rgba(249,245,233,0.85); }
.ed--dark .ed-dep__final { background: transparent; }
.ed--dark .ed-dep__legv { color: #fff; }

/* getting here — two-leg rail (dark) */
.ed--dark .ed-rail__k { color: var(--teal-pale); }
.ed--dark .ed-rail__chip { background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); color: var(--cream); }
.ed--dark .ed-rail__big { color: #fff; }
.ed--dark .ed-rail__stop.is-end .ed-rail__big { color: var(--coral); }
.ed--dark .ed-rail__sub { color: rgba(249,245,233,0.72); }
.ed--dark .ed-rail__legline { background: repeating-linear-gradient(to right, var(--teal-pale) 0 7px, transparent 7px 14px); }
.ed--dark .ed-rail__legicon { background: var(--night); color: var(--teal-pale); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.ed--dark .ed-rail__legicon.is-drive { color: var(--coral); }
.ed--dark .ed-rail__legt { color: rgba(249,245,233,0.7); }
.ed--dark .ed-rail__foot { border-top-color: rgba(255,255,255,0.16); }
.ed--dark .ed-rail__foot span { color: rgba(249,245,233,0.82); }

/* getting here — route-map hub (dark) */
.ed--dark .ed-hub { background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.ed--dark .ed-hub__flight line { stroke: var(--teal-pale); }
.ed--dark .ed-hub__cdot { fill: var(--teal-pale); }
.ed--dark .ed-hub__ccode { fill: #fff; }
.ed--dark .ed-hub__ccity { fill: rgba(249,245,233,0.72); }
.ed--dark .ed-hub__pop { fill: var(--teal); }
.ed--dark .ed-hub__popsub { fill: rgba(249,245,233,0.72); }
.ed--dark .ed-hub__legend { border-top-color: rgba(255,255,255,0.16); }
.ed--dark .ed-hub__legend span { color: rgba(249,245,233,0.78); }

/* gallery */
.ed--dark .ed-gal__cap { color: #fff; }
.ed--dark .ed-gal__cap i { color: var(--teal-pale); }

/* faq (on teal-deep) */
.ed--dark .ed-faq__row { border-color: rgba(255,255,255,0.2); }
.ed--dark .ed-faq__idx { color: var(--teal-pale); }
.ed--dark .ed-faq__qtext { color: #fff; }
.ed--dark .ed-faq__abody p { color: rgba(255,255,255,0.82); }

/* cta */
.ed--dark .ed-cta__frame { background: var(--night-2); border-color: rgba(255,255,255,0.14); }
.ed--dark .ed-cta__head { color: #fff; }
.ed--dark .ed-cta__head i { color: var(--teal-pale); }
.ed--dark .ed-cta__lead { color: rgba(249,245,233,0.82); }
.ed--dark .ed-cta .btn--ghost-dark { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42); }
.ed--dark .ed-cta .btn--ghost-dark:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* travel-tag CTA — always reads on warm sand with a cream card and dark ink,
   independent of the editorial light/dark theme (the card is always cream) */
.ed-cta--tag { background: var(--paper); }
.ed-cta--tag .ed-kicker { color: var(--coral); }
/* the ticket keeps its own compact icon-pill eyebrow instead of the site-wide
   "Ghost" numberless treatment (big italic label, no icon) used elsewhere */
.ed-cta--tag .ed-kicker--icon { align-items: baseline; padding-left: 0; }
.ed-cta--tag .ed-kicker--icon .ed-kicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; margin-right: 12px;
  border-radius: 50%; background: rgba(238,106,71,0.14); color: var(--coral);
}
.ed-cta--tag .ed-kicker--icon .ed-knum,
.ed-cta--tag .ed-kicker--icon .ed-krule { display: none; }
.ed-cta--tag .ed-kicker--icon .ed-klabel {
  font-family: var(--font-body); font-weight: 500; font-style: normal;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--coral); line-height: 1; padding-bottom: 0; margin-left: 0;
}
.ed-cta--tag .ed-ticket__head { color: var(--ink); }
.ed-cta--tag .ed-ticket__head i { color: var(--teal-deep); }
.ed-cta--tag .ed-ticket__lead { color: var(--ink-soft); }
.ed-cta--tag .ed-ticket__spec b { color: var(--teal-deep); }
.ed-cta--tag .ed-ticket__spec span { color: var(--ink-soft); }
.ed-cta--tag .ed-ticket .btn--ghost-dark { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(13,28,32,0.42); }
.ed-cta--tag .ed-ticket .btn--ghost-dark:hover { background: var(--ink); color: var(--cream); }


/* ===== Surf-focus homepage feature (rolled out from design handoff) ===== */
/* ---- 2 surf · single-sport feature BOX + infographic ---- */
.ed-surf-box {
  margin-top: clamp(40px, 5vw, 76px);
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell);
}
.ed-surf-box:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(13,28,32,0.14); }
.ed-surf__spread { display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch; }
.ed-surf__media { position: relative; margin: 0; overflow: hidden; min-height: 360px; background: var(--paper-deep); }
.ed-surf__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-swell); }
.ed-surf-box:hover .ed-surf__media img { transform: scale(1.04); }
.ed-surf__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 24px 18px;
  font-family: var(--font-display); font-style: italic; font-size: 17px; color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(6,29,40,0.72) 100%);
}
.ed-surf__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.2vw, 48px); }
.ed-surf__title {
  margin: 8px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4vw, 58px); line-height: 0.98; letter-spacing: -0.02em;
}
.ed-surf__lead {
  margin: 16px 0 0; font-family: var(--font-body); font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.55; color: var(--ink-soft); max-width: 46ch;
}
.ed-surf__specs { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.ed-surf__specs li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.ed-surf__specs svg { color: var(--coral); flex: none; }
.ed-surf__btn { margin-top: clamp(24px, 2.8vw, 32px); align-self: flex-start; }

/* infographic — full-width fact band, three columns */
.ed-surf__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.ed-surf__stat { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 38px); }
.ed-surf__stat + .ed-surf__stat { border-left: 1px solid var(--hairline); }
.ed-surf__stat-k { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-deep); }
.ed-surf__stat-big { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.04; letter-spacing: -0.01em; color: #fff; margin: 0 0 6px; text-wrap: balance; }
.ed:not(.ed--dark) .ed-surf__stat-big { color: var(--ink); }

/* who it's for — all levels welcome (inline checks, no chips) */
.ed-surf__levels { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ed-surf__level { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 15px; color: #fff; opacity: 0; transform: translateY(8px); }
.ed:not(.ed--dark) .ed-surf__level { color: var(--ink); }
.ed-surf__level svg { color: var(--teal-400, #3aaeae); flex: none; }
.ed-surf__level.is-off { color: rgba(255,255,255,0.42); }
.ed:not(.ed--dark) .ed-surf__level.is-off { color: rgba(20,40,44,0.42); }
.ed-surf__level.is-off svg { color: rgba(255,255,255,0.34); }
.ed:not(.ed--dark) .ed-surf__level.is-off svg { color: rgba(20,40,44,0.3); }

/* season — twelve month chips */
.ed-surf__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.ed-surf__month { display: flex; align-items: center; justify-content: center; height: 24px; border-radius: 5px; background: var(--teal-500, #0f9a9a); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 12px; opacity: 0; transform: scale(0.5); }

/* water & air — same neutral track, fill colour differs */
.ed-surf__temps { display: flex; flex-direction: column; gap: 10px; }
.ed-surf__temp { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; }
.ed-surf__temp-lbl { font-family: var(--font-body); font-size: 15px; color: #fff; }
.ed:not(.ed--dark) .ed-surf__temp-lbl { color: var(--ink); }
.ed-surf__temp-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.ed:not(.ed--dark) .ed-surf__temp-bar { background: rgba(15,154,154,0.16); }
.ed-surf__temp-bar > span { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--teal-400, #3aaeae); transform: scaleX(0); transform-origin: left; }
.ed-surf__temp--air .ed-surf__temp-bar > span { background: var(--coral); }
.ed-surf__temp-val { font-family: var(--font-body); font-size: 15px; color: #fff; white-space: nowrap; }
.ed:not(.ed--dark) .ed-surf__temp-val { color: var(--ink); }

/* ---- infographic reveal animations (fire when the card scrolls in) ---- */
.ed-surf-box.in .ed-surf__level { animation: surfRise 520ms var(--ease-swell) backwards; animation-delay: calc(var(--i) * 110ms + 140ms); opacity: 1; transform: none; }
.ed-surf-box.in .ed-surf__month { animation: surfPop 460ms var(--ease-swell) backwards; animation-delay: calc(var(--i) * 42ms + 160ms); opacity: 1; transform: none; }
.ed-surf-box.in .ed-surf__temp-bar > span { animation: surfGrowX 780ms var(--ease-swell) backwards; transform: scaleX(1); }
.ed-surf-box.in .ed-surf__temp--water .ed-surf__temp-bar > span { animation-delay: 220ms; }
.ed-surf-box.in .ed-surf__temp--air .ed-surf__temp-bar > span { animation-delay: 360ms; }
@keyframes surfRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes surfPop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes surfGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .ed-surf__level { opacity: 1; transform: none; }
  .ed-surf__month { opacity: 1; transform: none; }
  .ed-surf__temp-bar > span { transform: scaleX(1); }
  .ed-surf-box.in .ed-surf__level,
  .ed-surf-box.in .ed-surf__month,
  .ed-surf-box.in .ed-surf__temp-bar > span { animation: none; }
}

@media (max-width: 980px) {
  .ed-surf__spread { grid-template-columns: 1fr; }
  .ed-surf__media { min-height: 0; aspect-ratio: 16/10; }
}
@media (max-width: 820px) {
  .ed-surf__stats { grid-template-columns: 1fr; }
  .ed-surf__stat + .ed-surf__stat { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .ed-surf__specs { grid-template-columns: 1fr; }
}

/* surf feature — dark theme */
.ed--dark .ed-surf-box { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.12); }
.ed--dark .ed-surf-box:hover { box-shadow: 0 22px 60px rgba(0,0,0,0.4); }
.ed--dark .ed-surf__media { background: #0c2429; }
.ed--dark .ed-surf__title { color: #fff; }
.ed--dark .ed-surf__lead { color: rgba(249,245,233,0.78); }
.ed--dark .ed-surf__specs li { color: var(--cream); }
.ed--dark .ed-surf__stats { border-color: rgba(255,255,255,0.14); }
.ed--dark .ed-surf__stat + .ed-surf__stat { border-color: rgba(255,255,255,0.12); }
.ed--dark .ed-surf__stat-k { color: var(--teal-pale, #a6dedd); }

/* ---------------------------------------------------------------
   Wingfoil companion block — quiet secondary offering beneath the
   Surf feature in the #sports section. Deliberately lower-key:
   smaller photo, spec chips, a text link (not a coral button).
--------------------------------------------------------------- */
.ed-wing {
  margin-top: clamp(14px, 1.6vw, 22px);
  /* Match the Surf box above it: same 1.02fr/0.98fr photo split, white card
     surface, hairline border and radius (see .ed-surf-box / .ed-surf__spread). */
  display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell), border-color 320ms var(--ease-swell);
}
.ed-wing:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(13,28,32,0.14); }
.ed--dark .ed-wing { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.12); }
.ed--dark .ed-wing:hover { box-shadow: 0 22px 56px rgba(0,0,0,0.4); }
.ed-wing__media { position: relative; margin: 0; overflow: hidden; min-height: 200px; background: var(--paper-deep, #0c2429); }
.ed-wing__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-swell); }
.ed-wing:hover .ed-wing__media img { transform: scale(1.04); }
.ed-sport__pill--teal::before { background: var(--teal-500, #0f9a9a); box-shadow: 0 0 0 3px rgba(15,154,154,0.28); }
.ed-wing__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 2.6vw, 36px); }
.ed-wing__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-600, #0c7e7e); }
.ed--dark .ed-wing__eyebrow { color: var(--teal-pale, #a6dedd); }
.ed-wing__title { margin: 9px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.ed--dark .ed-wing__title { color: #fff; }
.ed-wing__lead { margin: 12px 0 0; font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.ed--dark .ed-wing__lead { color: rgba(249,245,233,0.78); }
.ed-wing__specs { list-style: none; margin: clamp(16px, 1.8vw, 22px) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 10px; }
.ed-wing__specs li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; background: rgba(15,154,154,0.08); box-shadow: inset 0 0 0 1px rgba(15,154,154,0.18); font-family: var(--font-body); font-size: 13px; line-height: 1.2; color: var(--ink); }
.ed--dark .ed-wing__specs li { background: rgba(120,200,200,0.1); box-shadow: inset 0 0 0 1px rgba(120,200,200,0.22); color: rgba(249,245,233,0.92); }
.ed-wing__specs svg { color: var(--teal-600, #0c7e7e); flex: none; }
.ed--dark .ed-wing__specs svg { color: var(--teal-pale, #a6dedd); }
.ed-wing__link { margin-top: clamp(18px, 2vw, 24px); align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--teal-600, #0c7e7e); transition: gap 260ms var(--ease-swell), color 200ms ease; }
.ed--dark .ed-wing__link { color: var(--teal-pale, #a6dedd); }
.ed-wing__link svg { transition: transform 260ms var(--ease-swell); }
.ed-wing__link:hover { gap: 13px; color: var(--coral); }
.ed-wing__link:hover svg { transform: translateX(2px); }
@media (max-width: 980px) {
  .ed-wing { grid-template-columns: 1fr; }
  .ed-wing__media { min-height: 0; aspect-ratio: 16/9; }
}

/* --- hero-slider.css --- */
/* ==================================================================
   HeroSlider — alternative tabbed showcase hero (Kudanil-inspired)
   Full-bleed backdrop · big serif title + paragraph · floating
   featured image + thumb strip · numbered progress nav.
   Palette / type all from the Swell system.
================================================================== */

.hslider {
  position: relative;
  height: 360vh;            /* scroll runway — ~1 viewport of scroll per slide */
  background: var(--night, #08161c);
}
.hslider__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Stacked backdrops (crossfade) ---- */
.hslider__bgs { position: absolute; inset: 0; z-index: 0; }
.hslider__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity var(--dur-cinematic, 1200ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
    transform 7600ms var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hslider__bg[data-on="1"] {
  opacity: 1;
  transform: scale(1.0);
}

.hslider__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,29,40,0.52) 0%, rgba(6,29,40,0.12) 24%, rgba(6,29,40,0.08) 50%, rgba(6,29,40,0.68) 100%),
    linear-gradient(94deg, rgba(6,29,40,0.80) 0%, rgba(6,29,40,0.44) 38%, rgba(6,29,40,0.04) 72%);
}
.hslider__seam {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 62%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.55) 48%, var(--night, #08161c) 94%);
}

/* ---- Main content frame ---- */
.hslider__inner {
  position: absolute;
  z-index: 2;
  top: clamp(104px, 13vh, 152px);
  bottom: clamp(132px, 17vh, 188px);
  left: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 64px);
}

/* ---- Left: title + body ---- */
.hslider__text {
  align-self: end;
  max-width: 560px;
  color: #fff;
  animation: hs-text-in 720ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
@keyframes hs-text-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hslider__eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 22px;
}
.hslider__eyebrow::before {
  content: ""; width: 30px; height: 1px; background: currentColor;
}
.hslider__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 8.4vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 28px rgba(6,29,40,0.55), 0 1px 4px rgba(6,29,40,0.45);
}
.hslider__body {
  margin: 26px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.94);
  max-width: 46ch;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(6,29,40,0.7), 0 1px 1px rgba(0,0,0,0.35);
}
.hslider__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 34px;
}

/* ---- Animated scroll cue (replaces the CTAs) ---- */
.hslider__scroll {
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: clamp(34px, 4.5vh, 52px);
  padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,0.82);
  transition: color var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hslider__scroll-rail {
  position: relative; flex: none;
  width: 2px; height: 58px;
  border-radius: 2px;
  background: rgba(255,255,255,0.45);
}
.hslider__scroll-bead {
  position: absolute; left: 50%; top: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.18), 0 0 12px 2px rgba(255,255,255,0.45);
  transform: translate(-50%, 0);
  animation: hs-bead 2.3s var(--ease-swell, cubic-bezier(.4,0,.1,1)) infinite;
}
@keyframes hs-bead {
  0%   { transform: translate(-50%, -2px); opacity: 0; }
  16%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate(-50%, 51px); opacity: 0; }
}
.hslider__scroll-lbl {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: inherit;
}
.hslider__scroll:hover { color: #fff; }
.hslider__scroll:hover .hslider__scroll-rail { background: rgba(255,255,255,0.7); }

/* ---- Right: featured image + thumb strip ---- */
.hslider__media {
  align-self: end;
  margin-bottom: clamp(8px, 4vh, 48px);
  width: 100%;
  max-width: clamp(300px, 30vw, 430px);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}
.hslider__feature {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  box-shadow:
    0 30px 70px -28px rgba(6,29,40,0.72),
    0 0 0 1px rgba(255,255,255,0.10) inset;
  animation: hs-feature-in 900ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
@keyframes hs-feature-in {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hslider__feature-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 900ms var(--ease-swell, cubic-bezier(.4,0,.1,1)),
    transform 8000ms var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hslider__feature-img[data-on="1"] {
  opacity: 1;
  transform: scale(1.0);
}
.hslider__feature-tag {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(13,53,55,0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: hs-tag-in 380ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
@keyframes hs-tag-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hslider__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1vw, 14px);
}
.hslider__thumb {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 0; padding: 0; cursor: pointer;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 22px -12px rgba(6,29,40,0.6), 0 0 0 1px rgba(255,255,255,0.12) inset;
  opacity: 0.92;
  transform: translateY(0);
  transition: transform var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
              box-shadow var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
              opacity var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
  animation: hs-thumb-in 720ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
@keyframes hs-thumb-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 0.92; transform: translateY(0); }
}
.hslider__thumb:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(6,29,40,0.7), 0 0 0 2px var(--coral, #ee6a47) inset;
}
.hslider__thumb[data-on="1"] {
  opacity: 1;
  box-shadow: 0 12px 26px -12px rgba(6,29,40,0.7), 0 0 0 2px var(--coral, #ee6a47) inset;
}
.hslider__thumb:active { transform: translateY(-4px) scale(0.98); }

/* ---- Bottom: numbered progress nav ---- */
.hslider__nav {
  position: absolute;
  z-index: 2;
  bottom: clamp(36px, 5.2vh, 64px);
  left: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 56px);
}
.hslider__tab {
  position: relative;
  display: block;
  text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.55);
  transition: color var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hslider__tab[data-on="1"] { color: #fff; }
.hslider__tab:hover { color: rgba(255,255,255,0.9); }
.hslider__tab-num {
  display: block;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em;
  color: inherit;
  margin-bottom: 16px;
}
.hslider__tab-track {
  display: block;
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.40);
  overflow: hidden;
}
.hslider__tab-fill {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--coral, #ee6a47);
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(238,106,71,0.85), 0 0 0 1px rgba(238,106,71,0.5);
}
/* A travelling bead rides the leading edge of the fill so the scroll
   position reads at a glance even on the active tab. */
.hslider__tab[data-on="1"] .hslider__tab-track {
  background: rgba(255,255,255,0.50);
}
.hslider__tab-lbl {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
}

/* ---- Scroll cue ---- */
.hslider__scrollcue {
  position: absolute; z-index: 2;
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  top: clamp(104px, 13vh, 152px);
  display: none;
}

/* ==================================================================
   Responsive
================================================================== */
@media (max-width: 1080px) {
  .hslider__inner {
    grid-template-columns: 1fr;
    align-items: end;
    gap: 24px;
    top: clamp(96px, 12vh, 128px);
  }
  .hslider__media { align-self: start; }
  .hslider__feature { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .hslider__stick { height: 100svh; }
  .hslider__inner {
    top: clamp(82px, 12vh, 116px);
    bottom: clamp(116px, 16vh, 150px);
    grid-template-columns: 1fr;
    align-content: end;
    align-items: end;
    gap: 18px;
  }
  .hslider__title { font-size: clamp(48px, 14vw, 80px); }
  .hslider__body { font-size: 19px; max-width: 38ch; }
  .hslider__media { display: none; }
  .hslider__thumbs { display: none; }
  .hslider__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hslider__scrollcue { display: none; }
  .hslider__tab-lbl { font-size: 17px; }
  .hslider__tab-num { margin-bottom: 11px; }
  .hslider__tab-lbl { margin-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hslider__bg,
  .hslider__feature-img { transition: opacity 300ms linear; transform: none !important; }
  .hslider__text,
  .hslider__feature,
  .hslider__thumb { animation: none; opacity: 1; }
  .hslider__scroll-bead { animation: none; opacity: 1; top: 50%; }
}

/* ==================================================================
   HeroVideo — full-bleed looping video hero (3rd option)
================================================================== */
.hvideo {
  position: relative;
  min-height: 100vh;
  background: var(--night, #08161c);
  overflow: hidden;
  isolation: isolate;
}
.hvideo__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hvideo__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,29,40,0.48) 0%, rgba(6,29,40,0.12) 26%, rgba(6,29,40,0.08) 50%, rgba(6,29,40,0.70) 100%),
    linear-gradient(94deg, rgba(6,29,40,0.74) 0%, rgba(6,29,40,0.38) 40%, rgba(6,29,40,0.04) 72%);
}
.hvideo__seam {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 42%; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.5) 52%, var(--night, #08161c) 96%);
}
.hvideo__inner {
  position: absolute; z-index: 2;
  bottom: clamp(72px, 12vh, 132px);
  left: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  max-width: 640px;
  color: #fff;
  animation: hs-text-in 760ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
.hvideo__inner .hslider__eyebrow { margin-bottom: 22px; }
.hvideo__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(58px, 8.2vw, 130px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(6,29,40,0.55), 0 1px 4px rgba(6,29,40,0.45);
}
.hvideo__title i { font-style: italic; }
.hvideo__body {
  margin: 26px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.94);
  max-width: 46ch;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(6,29,40,0.7), 0 1px 1px rgba(0,0,0,0.35);
}
.hvideo__mute {
  position: absolute; z-index: 3;
  right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
  bottom: clamp(72px, 12vh, 132px);
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(13,53,55,0.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; cursor: pointer;
  transition: background var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
              transform var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hvideo__mute:hover { background: rgba(13,53,55,0.62); }
.hvideo__mute:active { transform: scale(0.94); }

@media (max-width: 760px) {
  .hvideo { min-height: 100svh; }
  .hvideo__inner { max-width: none; bottom: clamp(96px, 16vh, 150px); }
  .hvideo__title { font-size: clamp(48px, 14vw, 80px); }
  .hvideo__body { font-size: 19px; max-width: 36ch; }
  .hvideo__mute { bottom: auto; top: clamp(80px, 12vh, 110px); }
}

/* --- hero-tide.css --- */
/*
 * Homepage hero — "Tide" (scroll-driven clip-path wipe).
 * Three full-bleed panels rise over one another like a waterline as the user
 * scrolls, each with its own copy block and a glowing foam edge on the seam.
 * Ported from the Claude Design "hero tide" handoff. Reuses the site's scroll
 * cue (.hslider__scroll*) and hs-text-in / hs-bead keyframes from hero-slider.css.
 */

.htide { position: relative; background: var(--night, #0a1d22); height: 380vh; }

.htide__stick {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	isolation: isolate;
	--hc-x: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
}

.hc-seam {
	position: absolute; left: 0; right: 0; bottom: 0;
	z-index: 8; height: 58%;
	pointer-events: none; opacity: 0;
	background: linear-gradient(180deg, rgba(10,29,34,0) 0%, rgba(10,29,34,0.55) 50%, var(--night, #0a1d22) 95%);
}

/* scroll cue — reuses .hslider__scroll internals, repositioned */
.hc-cue {
	position: absolute; z-index: 9;
	left: 50%; bottom: clamp(28px, 5vh, 52px);
	transform: translateX(-50%);
	margin-top: 0 !important;
	transition: opacity 280ms linear;
}

.htide__panel {
	position: absolute; inset: 0;
	will-change: clip-path;
}
.htide__panel + .htide__panel { clip-path: inset(100% 0 0 0); }

/* Real <img> (not a background) for SEO/alt + LCP. Box is 114% tall (top -7%)
   so the parallax transform has room to travel without exposing edges. */
.htide__img {
	position: absolute; top: -7%; left: 0;
	width: 100%; height: 114%;
	object-fit: cover; object-position: center;
	will-change: transform;
	transform: scale(1.06);
}
.htide__shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6,29,40,0.46) 0%, rgba(6,29,40,0.10) 26%, rgba(6,29,40,0.08) 52%, rgba(6,29,40,0.66) 100%),
		linear-gradient(94deg, rgba(6,29,40,0.72) 0%, rgba(6,29,40,0.36) 38%, rgba(6,29,40,0.04) 72%);
}

/* the glowing waterline that rides the wipe edge */
.htide__edge {
	position: absolute; left: 0; right: 0; top: 0;
	height: 130px;
	opacity: 0; pointer-events: none;
	transition: opacity 200ms linear;
	will-change: transform, opacity;
}
.htide__edge::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg,
		rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 16%,
		rgba(166,222,221,0.95) 50%,
		rgba(255,255,255,0.92) 84%, rgba(255,255,255,0) 100%);
	box-shadow: 0 0 18px rgba(166,222,221,0.85), 0 0 56px rgba(15,154,154,0.55);
}
.htide__edge::after {
	content: ""; position: absolute; top: 2px; left: 0; right: 0; height: 96px;
	background: linear-gradient(180deg, rgba(236,248,247,0.26) 0%, rgba(236,248,247,0) 100%);
}

.htide__inner {
	position: absolute; z-index: 2;
	left: var(--hc-x); right: var(--hc-x);
	bottom: clamp(108px, 16vh, 168px);
}
.htide__copy {
	max-width: 680px;
	color: #fff;
	will-change: transform;
}
.htide__panel:first-child .htide__copy {
	animation: hs-text-in 720ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
.htide__eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--font-body, var(--font-sans));
	font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-bottom: 20px;
	text-shadow: 0 1px 2px rgba(6,29,40,0.6);
}
.htide__eyebrow-num {
	font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
	color: #fff;
}
.htide__eyebrow-rule {
	width: 34px; height: 1px;
	background: rgba(255,255,255,0.65);
}
.htide__eyebrow-lbl { font-weight: 600; color: #fff; }
.htide__eyebrow-loc { color: rgba(255,255,255,0.62); letter-spacing: 0.22em; }
.htide__eyebrow-loc::before { content: "·"; margin-right: 14px; color: rgba(255,255,255,0.45); }

.htide__word {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 28px rgba(6,29,40,0.55), 0 1px 4px rgba(6,29,40,0.45);
}
.htide__word-a {
	display: inline;
	font-style: normal;
	font-size: clamp(44px, 5.4vw, 88px);
	opacity: 0.95;
}
/* Emphasis phrase — "Outline" treatment: hollow white-stroked italic, inline
   beside the first word, at the shipping "Medium" size (Playfair Display 500). */
.htide__word-b {
	display: inline;
	margin: 0 0 0 0.3em;
	font-family: 'Playfair Display', var(--font-display);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
	color: transparent;
	-webkit-text-stroke: 1.4px rgba(255,255,255,0.95);
	text-stroke: 1.4px rgba(255,255,255,0.95);
	paint-order: stroke fill;
	text-shadow: 0 2px 18px rgba(6,29,40,0.5);
	font-size: clamp(44px, 4.8vw, 84px);
}
.htide__body {
	margin: 22px 0 0;
	font-family: var(--font-body, var(--font-sans));
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.55;
	color: rgba(255,255,255,0.94);
	max-width: 44ch;
	text-wrap: pretty;
	text-shadow: 0 1px 2px rgba(6,29,40,0.7), 0 1px 1px rgba(0,0,0,0.35);
}

/* right-side rail */
.htide__rail {
	position: absolute; z-index: 3;
	right: var(--hc-x); top: 50%;
	transform: translateY(-50%);
	display: flex; gap: 20px;
	align-items: stretch;
}
.htide__rail-track {
	flex: none; width: 2px; border-radius: 2px;
	background: rgba(255,255,255,0.28);
	overflow: hidden; position: relative;
}
.htide__rail-fill {
	position: absolute; inset: 0;
	background: var(--coral, #ee6a47);
	transform-origin: top center;
	transform: scaleY(0);
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(238,106,71,0.85);
}
.htide__rail-stops { display: flex; flex-direction: column; gap: 30px; }
.htide__rail-stops button {
	display: block; text-align: left;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: rgba(255,255,255,0.55);
	transition: color var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.htide__rail-stops button:hover { color: rgba(255,255,255,0.9); }
.htide__rail-stops button[data-on="1"] { color: #fff; }
.htide__rail-num {
	display: block;
	font-family: var(--font-body, var(--font-sans));
	font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
}
.htide__rail-lbl {
	display: block; margin-top: 4px;
	font-family: var(--font-display);
	font-weight: 400; font-size: 21px; line-height: 1;
}

@media (max-width: 1080px) {
	.htide__rail-lbl { display: none; }
}

@media (max-width: 760px) {
	.htide__stick { height: 100svh; }
	.htide__eyebrow-loc { display: none; }
	/* Headline keeps the inline Outline/Medium treatment on mobile — the base
	   fluid clamps scale it down, so no per-breakpoint size override is needed. */
	.htide__body { font-size: 17px; max-width: 36ch; }
	.htide__inner { bottom: clamp(96px, 15vh, 140px); }
	.htide__rail { right: clamp(14px, 4vw, 24px); gap: 12px; }
	.htide__rail-stops { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.htide__panel + .htide__panel {
		clip-path: none;
		opacity: 0;
		transition: opacity 300ms linear;
	}
	.htide__img { transform: none !important; }
	.htide__edge { display: none; }
	.htide__panel:first-child .htide__copy { animation: none; opacity: 1; }
}

/* Split hero body (tight SEO H1 + remainder) — reads as one paragraph. */
h1.htide__body { margin-bottom: 0; }
.htide__body--rest { margin-top: 8px; }

/* --- hero-video.css --- */
/* =========================================================
   Swell — Video Hero (.hvideo)
   Alternative homepage hero (toggle in Homepage hero → Hero style).
   Reuses the shared .hslider__eyebrow / .hslider__scroll cue styles
   from hero-slider.css; this file holds the .hvideo* layer only.
   ========================================================= */

.hvideo {
	position: relative;
	min-height: 100vh;
	background: var(--night, #08161c);
	overflow: hidden;
	isolation: isolate;
}

/* The looping film (or the poster <img> fallback when no source is set).
   object-fit:cover crops to fill; the poster shows until the first frame
   decodes and stays if the source fails to load. */
.hvideo__media {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* The deferred video sits above the poster and fades in only once it is
   actually playing (JS adds .is-playing). Until then it's transparent, so the
   poster <img> behind it is what paints — including on mobile, where the video
   is never loaded at all. */
.hvideo__video {
	z-index: 1;
	opacity: 0;
	transition: opacity 600ms var(--ease-swell, ease);
}
.hvideo__video.is-playing { opacity: 1; }

/* Two stacked gradients protect the headline (darker top/bottom + left). */
.hvideo__veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6,29,40,0.48) 0%, rgba(6,29,40,0.12) 26%, rgba(6,29,40,0.08) 50%, rgba(6,29,40,0.70) 100%),
		linear-gradient(94deg, rgba(6,29,40,0.74) 0%, rgba(6,29,40,0.38) 40%, rgba(6,29,40,0.04) 72%);
}

/* Bottom "horizon seam" — fades the video into the next section's dark band. */
.hvideo__seam {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	height: 42%; pointer-events: none;
	background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.5) 52%, var(--night, #08161c) 96%);
}

/* Copy block — pinned bottom-left, inside a max-1280 content frame. */
.hvideo__inner {
	position: absolute; z-index: 2;
	bottom: clamp(72px, 12vh, 132px);
	left:  max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
	right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
	max-width: 640px;
	color: #fff;
	animation: hs-text-in 760ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
.hvideo__inner .hslider__eyebrow { margin-bottom: 22px; }

.hvideo__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	/* Match the interior-page hero title (.pg-hero__title): same 104px cap,
	   line-height and tracking, and no drop shadow. */
	font-size: clamp(46px, 7vw, 104px);
	line-height: 0.94;
	letter-spacing: -0.02em;
	color: #fff;
	/* Explicit none — overrides the duplicate .hvideo__title shadow that the
	   earlier-loaded hero-slider.css still declares. */
	text-shadow: none;
}
.hvideo__title i { font-style: italic; }

.hvideo__body {
	margin: 26px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.55;
	color: rgba(255,255,255,0.94);
	max-width: 46ch;
	text-wrap: pretty;
	text-shadow: 0 1px 2px rgba(6,29,40,0.7), 0 1px 1px rgba(0,0,0,0.35);
}

/* Mute / unmute toggle — frosted circular button, bottom-right. */
.hvideo__mute {
	position: absolute; z-index: 3;
	right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
	bottom: clamp(72px, 12vh, 132px);
	width: 50px; height: 50px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.28);
	background: rgba(13,53,55,0.4);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	color: #fff; cursor: pointer;
	transition: background var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
	            transform  var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hvideo__mute:hover  { background: rgba(13,53,55,0.62); }
.hvideo__mute:active { transform: scale(0.94); }
.hvideo__icon { display: inline-flex; align-items: center; justify-content: center; }
/* Default state = muted → show the muted (volume-x) icon. */
.hvideo__mute .hvideo__icon--on { display: none; }
.hvideo__mute.is-unmuted .hvideo__icon--off { display: none; }
.hvideo__mute.is-unmuted .hvideo__icon--on { display: inline-flex; }

@keyframes hs-text-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	.hvideo { min-height: 100svh; }
	.hvideo__inner { max-width: none; bottom: clamp(96px, 16vh, 150px); }
	.hvideo__title { font-size: clamp(48px, 14vw, 80px); }
	.hvideo__body  { font-size: 19px; max-width: 36ch; }
	.hvideo__mute  { bottom: auto; top: clamp(80px, 12vh, 110px); }
}

@media (prefers-reduced-motion: reduce) {
	.hvideo__inner { animation: none; }
}

/* Split hero body (tight SEO H1 + remainder). The two elements together
   read as the single paragraph they replaced. */
h1.hvideo__body { margin: 26px 0 0; }
.hvideo__body--rest { margin: 8px 0 0; }

/* --- style.css --- */
/*
Theme Name: Swell Surf Camp
Theme URI: https://swellsurfcamp.com
Author: Swell Surf Camp
Description: Premium watersport retreats — Cabarete, Dominican Republic. A faithful, server-rendered WordPress port of the Swell Surf Camp editorial design (feasibility build, homepage). Built to be wired to Advanced Custom Fields Pro.
Version: 1.9.100
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swellactive
Tags: custom-theme, two-columns, custom-menu

The actual design CSS lives in /assets/css/ (tokens.css, styles.css,
c-editorial.css, hero-slider.css) and is enqueued from functions.php.
This file carries the theme header and a few WordPress-admin shims only.
*/

/* WordPress admin-bar offset so the fixed nav never hides under it. */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .nav { top: 46px; }
}

/* Honour reduced-motion for the JS-driven reveals. */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; }
}

/* These prose fields are now WYSIWYG (so links can be inserted via a button);
   the editor wraps content in <p>. Keep spacing tidy inside the styled
   containers — single paragraph sits flush, extra paragraphs get a gap. */
.hslider__body > p,
.ed-sport__lead > p,
.ed-stay__lead > p,
.ed-loc__intro > p,
.ed-gal__cap > p,
.ed-rev__quote > p {
	margin: 0;
}
.hslider__body > p + p,
.ed-sport__lead > p + p,
.ed-stay__lead > p + p,
.ed-loc__intro > p + p,
.ed-gal__cap > p + p,
.ed-rev__quote > p + p {
	margin-top: 0.7em;
}

/* ---- Interior pages: generic section + prose + journal grid ---- */
.pg-sec { padding: clamp(48px, 8vw, 104px) 0; }

.swell-prose {
	max-width: 1080px;
	margin-inline: auto;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.75;
	color: rgba(249, 245, 233, 0.88);
}
.swell-prose > * + * { margin-top: 1.05em; }
.swell-prose h2, .swell-prose h3, .swell-prose h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.12;
	color: #f9f5e9;
	margin-top: 1.5em;
}
.swell-prose h2 { font-size: clamp(28px, 4vw, 40px); }
.swell-prose h3 { font-size: clamp(22px, 3vw, 28px); }
.swell-prose h4 { font-size: 21px; }
.swell-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.swell-prose ul, .swell-prose ol { padding-left: 1.3em; }
.swell-prose li + li { margin-top: 0.35em; }
.swell-prose blockquote {
	margin: 1.4em 0;
	padding-left: 1em;
	border-left: 3px solid var(--coral-500);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.15em;
	color: #f9f5e9;
}
.swell-prose figcaption { font-size: 14px; color: rgba(249, 245, 233, 0.55); margin-top: 8px; }
.swell-article { max-width: 1080px; }

/* "Latest from the Journal" block at the foot of single posts. */
.swell-related { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.swell-related .pg-head { margin-bottom: clamp(28px, 4vw, 44px); }
.swell-related__more { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 48px); }

/* Legal pages (Privacy, Cookie, Terms) — lead intro + footer link row. */
.swell-legal__lead { font-size: 21px; line-height: 1.6; color: #f9f5e9; }
.ed-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ed-footer__legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 220ms var(--ease-swell); }
.ed-footer__legal a:hover { color: var(--coral-400, #ff8b6a); }
@media (max-width: 900px) { .ed-footer__legal { order: 3; } }

.swell-journal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(28px, 4vw, 48px);
}
.swell-jcard { display: flex; flex-direction: column; }
.swell-jcard__img {
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}
/* Real <img> thumbnails (SEO: alt + srcset + native lazy-load, indexable in
   Google Images) crop exactly like the old CSS background did. */
.swell-jcard__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.swell-jcard__meta {
	margin-top: 16px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(249, 245, 233, 0.55);
}
.swell-jcard__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 25px;
	line-height: 1.15;
	margin: 8px 0 8px;
}
.swell-jcard__title a { color: #f9f5e9; text-decoration: none; }
.swell-jcard__title a:hover { color: var(--coral-400); }
/* Normalise ALL-CAPS post titles to sentence case at display time. Titles typed
   in caps (e.g. "WHY CABARETE…") render as "Why cabarete…". Display-only: the
   stored title (single-post H1, <title>, OG, breadcrumbs) is unchanged, and
   proper nouns (Cabarete, Dominican Republic, Swell) get lowercased. Renaming
   the posts is the SEO-clean fix. */
.swell-jcard__title { text-transform: lowercase; }
.swell-jcard__title::first-letter { text-transform: uppercase; }
.swell-jcard__excerpt {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(249, 245, 233, 0.78);
	margin-bottom: 14px;
}

.swell-prose .pagination,
.pg .navigation.pagination { margin-top: 56px; }
.pg .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	margin: 0 3px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 15px;
	color: rgba(249, 245, 233, 0.8);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	text-decoration: none;
}
.pg .page-numbers.current { background: var(--coral-500); color: #fff; box-shadow: none; }

/* Homepage combo ("Why pick a side?") as a boxed card matching the two sport
   cards above it — bordered, rounded, dark fill, hover-lift; still one column. */
.ed-combo {
	border: 1px solid var(--hairline);
	border-radius: 18px;
	background: var(--cream);
	padding: clamp(28px, 3.5vw, 46px);
	margin-top: clamp(24px, 3vw, 40px);
	transition: transform 320ms var(--ease-swell), box-shadow 320ms var(--ease-swell);
}
.ed-combo:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(13, 28, 32, 0.14); }
.ed--dark .ed-combo { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.12); }
.ed--dark .ed-combo:hover { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4); }

/* Pricing — seasonal toggle (Low / High season) + struck high-season reference. */
.pg-season { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); }
.pg-season__switch {
	position: relative; display: grid; grid-template-columns: 1fr 1fr;
	padding: 4px; gap: 4px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pg-season__thumb {
	position: absolute; top: 4px; left: 4px; z-index: 0;
	width: calc(50% - 4px); height: calc(100% - 8px);
	border-radius: 999px; background: var(--coral);
	box-shadow: 0 6px 20px rgba(238, 106, 71, 0.4);
	transition: transform 360ms var(--ease-swell);
}
.pg-season[data-season="high"] .pg-season__thumb { transform: translateX(calc(100% + 4px)); }
.pg-season__opt {
	position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px;
	padding: 13px clamp(20px, 2.4vw, 34px); border: none; background: none; cursor: pointer;
	text-align: center; align-items: center; border-radius: 999px;
	transition: color 280ms var(--ease-swell);
}
.pg-season__k { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(249, 245, 233, 0.62); transition: color 280ms var(--ease-swell); }
.pg-season__m { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(249, 245, 233, 0.4); transition: color 280ms var(--ease-swell); }
.pg-season__opt.is-on .pg-season__k { color: var(--on-accent); }
.pg-season__opt.is-on .pg-season__m { color: rgba(255, 255, 255, 0.82); }
.pg-season__opt:not(.is-on):hover .pg-season__k { color: rgba(249, 245, 233, 0.92); }
.pg-season__note { margin: 0; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.02em; color: rgba(249, 245, 233, 0.66); }
.pg-season__note b { color: var(--coral-400, #ff8b6a); font-weight: 600; }
.pg-pkg__was { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; color: rgba(249, 245, 233, 0.45); }
.pg-pkg__was s { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Photo sliders: no hover/rollover movement. (The feature-media zoom-on-hover
   is meant for single photos; on a slider it shifts the image and peeks the
   next slide.) Kill the transform + transition on slider images. */
.ed-slider__slide img { transition: none !important; }
.pg-feature__media:hover .ed-slider__slide img,
.ed-slider:hover .ed-slider__slide img,
.ed-slider__slide:hover img,
.pg-feature__media:hover .pg-slider__img { transform: none !important; }

/* ---- Interior pages: collapse body copy to the homepage's Jost scale ----
   Homepage body = Jost 350, 18px (19px at ≤600px), line-height 1.65. The
   bespoke pages used a dozen different sizes for the same kind of copy; pin
   them all to the homepage scale. Headings and small tracked labels/captions
   are intentionally left as-is. */
.pg-lede__body p,
.pg-head__lead,
.pg-level__d,
.pg-day__body p,
.pg-inc p,
.pg-pkg__desc,
.pg-pkg__list li,
.pg-assure__d,
.pg-trip__d,
.pg-amen li,
.pg-air__use,
.pg-promise p,
.pg-feature__list .lbl,
.pg-contact__opt .v,
.pg-cmp tbody td.lbl,
.pg-quote-card .bk-step > p,
.pg-quote__done > p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.65;
}
@media (max-width: 600px) {
	.pg-lede__body p,
	.pg-head__lead,
	.pg-level__d,
	.pg-day__body p,
	.pg-inc p,
	.pg-pkg__desc,
	.pg-pkg__list li,
	.pg-assure__d,
	.pg-trip__d,
	.pg-amen li,
	.pg-air__use,
	.pg-promise p,
	.pg-feature__list .lbl,
	.pg-contact__opt .v,
	.pg-cmp tbody td.lbl,
	.pg-quote-card .bk-step > p,
	.pg-quote__done > p {
		font-size: 19px;
	}
}

/* ---- Contact page: enquiry card header + WPForms embed + fallback ----
   The quote card (.pg-quote-card, white) on the Contact page now hosts a
   WPForms form instead of the prototype's JS wizard. These rules style the
   card's own heading/intro, give the embedded form sensible spacing, and
   provide the no-ID-yet fallback + admin hint. */
.pg-quote-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.05;
	color: var(--ink);
	margin: 12px 0 0;
}
.pg-quote-card__intro {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 10px 0 0;
}
.pg-quote-card__form { margin-top: 22px; }

/* Beige card (warm paper) instead of stark white. Loads after pages.css so it
   overrides .pg-quote-card's white fill. Inputs stay white to pop against it.
   The dark base text colour is important: some WPForms text (page-break
   descriptions, HTML blocks) has no colour of its own and would otherwise
   inherit the dark theme's light text and vanish on the beige. */
.pg-quote-card { background: var(--paper); color: var(--ink-soft); }

/* Force the site font (Jost) on every WPForms element. WPForms can set its own
   typeface via its theme settings, so we override with !important — scoped to
   the card so nothing else is touched. The serif card title is outside the
   form wrapper, so it keeps the display font. */
.pg-quote-card__form,
.pg-quote-card__form * {
	font-family: var(--font-body) !important;
}

/* Host portrait is a real <img> here (the prototype used an image-slot). */
.pg-host__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* WPForms inside the white card — keep it on-brand and readable.
   WPForms ships in two markup modes; we brand both, scoped to the card so no
   other form on the site is affected:
   1) MODERN markup (default in current WPForms) — override its CSS variables.
   2) CLASSIC markup / general fallback — explicit selectors.                  */

/* 1) Modern markup: re-map WPForms' own design tokens to the Swell palette. */
.pg-quote-card__form .wpforms-container,
.pg-quote-card__form.wpforms-container {
	--wpforms-field-border-radius: 12px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-border-color: var(--hairline);
	--wpforms-field-text-color: var(--ink);
	--wpforms-label-color: var(--ink);
	--wpforms-label-sublabel-color: var(--ink-soft);
	--wpforms-label-error-color: var(--coral-600, #d4502e);
	--wpforms-button-border-radius: 999px;
	--wpforms-button-background-color: var(--coral);
	--wpforms-button-text-color: var(--on-accent, #fff);
	margin: 0;
}

/* Keep all WPForms text dark on the beige card (page-break titles/descriptions
   and HTML blocks have no colour of their own). */
.pg-quote-card__form p,
.pg-quote-card__form .wpforms-field-html,
.pg-quote-card__form .wpforms-page-indicator,
.pg-quote-card__form .wpforms-page-indicator-page-title { color: var(--ink-soft); }

/* Progress bar — Swell Surf Camp brand teal (overrides WPForms' own teal-green,
   which it sets inline, hence !important). Covers the bar, circles and
   connector page-indicator styles. */
.pg-quote-card__form .wpforms-page-indicator { --wpforms-page-break-color: var(--teal); }
.pg-quote-card__form .wpforms-page-indicator.progress { background-color: rgba(13, 28, 32, 0.08) !important; }
.pg-quote-card__form .wpforms-page-indicator-page-progress { background-color: var(--teal) !important; }
.pg-quote-card__form .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number,
.pg-quote-card__form .wpforms-page-indicator-page.completed .wpforms-page-indicator-page-number {
	background-color: var(--teal) !important;
	border-color: var(--teal) !important;
}

/* 2) Explicit selectors (classic markup + reinforcement). */
.pg-quote-card__form .wpforms-form { margin: 0; }
.pg-quote-card__form .wpforms-field { padding: 0 0 18px; }
/* Field labels — match the site's form labels (.bk-field): Jost 10px / 500,
   tracked uppercase, ink-soft. !important beats WPForms' own 700 / 16px. */
.pg-quote-card__form .wpforms-field-label {
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	font-size: 10px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	color: var(--ink-soft) !important;
	margin-bottom: 9px;
}
/* Helper / sub-label text (e.g. "Format is DD/MM/YYYY", "Step 1 of 3"). */
.pg-quote-card__form .wpforms-field-sublabel,
.pg-quote-card__form .wpforms-field-description,
.pg-quote-card__form .wpforms-page-indicator,
.pg-quote-card__form .wpforms-page-indicator-page-title {
	font-family: var(--font-body) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--ink-soft) !important;
}
.pg-quote-card__form .wpforms-required-label { color: var(--coral); border: 0; }

/* Inputs / selects / textareas */
.pg-quote-card__form input[type="text"],
.pg-quote-card__form input[type="email"],
.pg-quote-card__form input[type="tel"],
.pg-quote-card__form input[type="url"],
.pg-quote-card__form input[type="number"],
.pg-quote-card__form input[type="date"],
.pg-quote-card__form input[type="datetime-local"],
.pg-quote-card__form select,
.pg-quote-card__form textarea {
	width: 100%;
	font-family: var(--font-body) !important;
	font-size: 16.5px !important;
	font-weight: 400 !important;
	line-height: 1.4;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color 160ms var(--ease-swell), box-shadow 160ms var(--ease-swell);
}
.pg-quote-card__form textarea { min-height: 120px; resize: vertical; }
.pg-quote-card__form input:focus,
.pg-quote-card__form select:focus,
.pg-quote-card__form textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(15, 154, 154, 0.14);
}
.pg-quote-card__form ::placeholder { color: var(--ink-soft); opacity: 0.6; }

/* Two-up rows (e.g. first / last name) when the form uses WPForms columns. */
.pg-quote-card__form .wpforms-field-row,
.pg-quote-card__form .wpforms-field-name { gap: 14px; }

/* Checkboxes / radios */
.pg-quote-card__form .wpforms-field-radio ul,
.pg-quote-card__form .wpforms-field-checkbox ul {
	margin: 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 9px;
}
.pg-quote-card__form .wpforms-field-radio li,
.pg-quote-card__form .wpforms-field-checkbox li,
.pg-quote-card__form .wpforms-field-radio label,
.pg-quote-card__form .wpforms-field-checkbox label,
.pg-quote-card__form .wpforms-field-label-inline {
	font-family: var(--font-body) !important;
	font-size: 16.5px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--ink) !important;
}
.pg-quote-card__form input[type="checkbox"],
.pg-quote-card__form input[type="radio"] { accent-color: var(--teal); width: auto; margin-right: 8px; }

/* Submit button — coral pill matching the site's primary CTA. */
.pg-quote-card__form .wpforms-submit,
.pg-quote-card__form button[type="submit"] {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: 0.01em;
	color: var(--on-accent, #fff) !important;
	background: var(--coral) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 30px !important;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(238, 106, 71, 0.30);
	transition: transform 200ms var(--ease-swell), filter 200ms var(--ease-swell), box-shadow 200ms var(--ease-swell);
}
.pg-quote-card__form .wpforms-submit:hover,
.pg-quote-card__form button[type="submit"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 14px 32px rgba(238, 106, 71, 0.38);
}
.pg-quote-card__form .wpforms-submit-container { margin-top: 4px; }

/* Validation errors */
.pg-quote-card__form label.wpforms-error,
.pg-quote-card__form .wpforms-error {
	font-family: var(--font-body); font-size: 12.5px;
	color: var(--coral-600, #d4502e);
}
.pg-quote-card__form input.wpforms-error,
.pg-quote-card__form textarea.wpforms-error,
.pg-quote-card__form select.wpforms-error { border-color: var(--coral-600, #d4502e); }

/* Success / confirmation message */
.pg-quote-card .wpforms-confirmation-container-full {
	margin: 0;
	background: rgba(15, 154, 154, 0.08);
	border: 1px solid rgba(15, 154, 154, 0.3);
	border-radius: 14px;
	padding: 18px 20px;
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink);
}

/* ---- Modal (pricing "Check availability" → WPForms popup) ----
   Fixed overlay + centred beige card; reuses .pg-quote-card / .pg-quote-card__form
   so the embedded WPForms form inherits the same on-brand styling. */

/* Background scroll-lock — PURE CSS, no JavaScript.
   The site's theme.js scroll-lock never takes effect on the live server (a
   caching / optimisation layer stops it running), and a plugin forces the page
   to stay scrollable. So we lock it from CSS instead: while the proposal popup
   is open, freeze the page scroller. `:has()` matches the open modal; the high
   specificity + !important beats any `html{overflow-y:scroll !important}` rule.
   With the page frozen, the wheel scrolls the form inside the modal instead. */
html:has(.swell-modal:not([hidden])),
html:has(.swell-modal:not([hidden])) body {
	overflow: hidden !important;
}

.swell-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 5vh, 64px) 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.swell-modal[hidden] { display: none; }
.swell-modal__scrim {
	position: fixed;
	inset: 0;
	background: rgba(6, 20, 28, 0.66);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: swellFade 240ms var(--ease-swell);
}
.swell-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	/* Never taller than the viewport, so the form gets its OWN scrollbar inside the
	   card (the Next button is always reachable). The background scroll is held by
	   the JS event-lock in theme.js, not by CSS overflow. */
	max-height: calc(100vh - clamp(32px, 10vh, 128px));
	max-height: calc(100dvh - clamp(32px, 10vh, 128px));
	animation: swellPop 280ms var(--ease-swell);
}
.swell-modal__dialog .pg-quote-card {
	width: 100%;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.swell-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(13, 28, 32, 0.06);
	color: var(--ink);
	cursor: pointer;
	transition: background 180ms var(--ease-swell);
}
.swell-modal__close:hover { background: rgba(13, 28, 32, 0.12); }
@keyframes swellFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes swellPop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.swell-modal__scrim, .swell-modal__dialog { animation: none; }
}

/* Fallback shown when no WPForms ID is set (or WPForms is inactive). */
.pg-quote__fallback { text-align: center; padding: clamp(14px, 3vw, 30px) 6px; }
.pg-quote__fallbackmark {
	width: 60px; height: 60px; margin: 0 auto;
	border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(15, 154, 154, 0.12); color: var(--teal-deep);
	box-shadow: inset 0 0 0 1px rgba(15, 154, 154, 0.4);
}
.pg-quote__fallback p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 18px auto 22px;
	max-width: 40ch;
}
.pg-quote__adminhint {
	display: flex; align-items: flex-start; gap: 9px;
	margin: 24px 0 0; padding: 14px 16px;
	border-radius: 12px;
	background: rgba(238, 106, 71, 0.08);
	box-shadow: inset 0 0 0 1px rgba(238, 106, 71, 0.28);
	font-family: var(--font-body); font-size: 13px; line-height: 1.55;
	color: var(--ink-soft);
}
.pg-quote__adminhint svg { color: var(--coral); flex: none; margin-top: 2px; }
.pg-quote__adminhint strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Author bio box (single posts) — E-E-A-T "experience" signal rendered by
   template-parts/author-bio.php. Tokens reused from the editorial system.
   --------------------------------------------------------------------------- */
.swell-author {
	padding-top: 8px;
}
.swell-author__card {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	max-width: 760px;
	margin: 0 auto;
	padding: 26px 28px;
	border-radius: 16px;
	background: var(--surface-2, rgba(0, 0, 0, 0.03));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.swell-author__media { flex: none; }
.swell-author__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.swell-author__eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11px;
	color: var(--ink-soft);
	margin-bottom: 4px;
}
.swell-author__name {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.15;
	margin: 0 0 8px;
}
.swell-author__name a { color: inherit; text-decoration: none; }
.swell-author__name a:hover { text-decoration: underline; }
.swell-author__bio {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 12px;
}
.swell-author__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--coral, #ee6a47);
	text-decoration: none;
}
.swell-author__more:hover { text-decoration: underline; }
@media (max-width: 540px) {
	.swell-author__card { flex-direction: column; gap: 16px; padding: 22px; }
}

/* --------------------------------------------------------------------------
   Footer NAP block (1.9.94)
   Canonical name + street address in crawlable text. Swell has no public
   phone number, so this address is the primary Named Entity signal and must
   stay identical to the Google Business Profile.
   -------------------------------------------------------------------------- */
.ed-footer__nap {
	margin: 18px 0 0;
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 13px;
	line-height: 1.5;
	opacity: .78;
}
.ed-footer__napname {
	font-weight: 600;
	letter-spacing: .01em;
	opacity: 1;
}
/* --- style-shell-sky.css --- */
/* ============================================================
   SHELL & SKY — light beach colour style.
   Selected in Swell Settings → Style. When active, header.php
   drops data-style="shell-sky" on <html> and every template
   omits the `ed--dark` modifier (see swell_ed_dark_class()), so
   the `.ed` editorial layout falls back to its light/paper
   styling. This file remaps the brand tokens to the cool
   shell-white / pale-aqua / ocean-navy palette, restores the
   section-by-section colour rhythm, fixes a couple of light-theme
   legibility gaps, and routes a handful of legacy hardcoded-coral
   literals through the new accent so no stray orange survives.
   The hero, footer and press marquee stay the dark navy
   "bookends" in both styles, unchanged here.
   ============================================================ */

html[data-style="shell-sky"] {
  --ink:          #123244;
  --ink-soft:     #34566a;
  --paper:        #eef4f3;
  --paper-2:      #e0eae9;
  --paper-deep:   #c9dad9;
  --cream:        #f8fbfa;
  --bone:         #eef5f4;
  --night:        #0c2a3a;
  --night-2:      #123a4e;
  --teal:         #12a6b8;
  --teal-deep:    #0d8395;
  --teal-pale:    #8fd3db;
  --coral:        #0b7e8d;      /* accent — deep teal, not orange */
  --coral-deep:   #086573;
  --coral-glow:   rgba(11,126,141,0.28);
  --hairline:     rgba(18,50,68,0.16);
}

/* ---- per-section colour rhythm (top → bottom) ----
   No two adjacent light sections share a tone. */
html[data-style="shell-sky"] .ed-sports  { background: #f9fcfc; }
html[data-style="shell-sky"] .ed-stay    { background: #edf4f3; }
html[data-style="shell-sky"] .ed-loc     { background: #f9fcfc; }
html[data-style="shell-sky"] .ed-gal     { background: #dcecee; }
html[data-style="shell-sky"] .ed-rev     { background: #f9fcfc; }
html[data-style="shell-sky"] .ed-faq     { background: #edf4f3; }
html[data-style="shell-sky"] .ed-cta--tag { background: #c9e3e6; }

/* nav slab — a deep tone of the palette over the hero photo */
html[data-style="shell-sky"] .nav { background: rgba(12,42,58,0.52); }

/* inline highlight links read the reversed-link colour site-wide;
   the pale teal used on dark grounds washes out on light ones */
html[data-style="shell-sky"][data-links="reversed"] .swell-link { color: var(--teal-deep); }

/* ---- light-theme legibility fixes ----
   The "ghost numeral" section eyebrow (.ed-knum) and its divider
   (.ed-krule) are always white — correct on the dark surface, invisible
   on this light one. */
html[data-style="shell-sky"] .ed-kicker--icon .ed-knum {
  color: var(--teal-deep);
  opacity: 0.34;
}
html[data-style="shell-sky"] .ed-kicker--icon .ed-krule {
  background: var(--teal-deep);
  opacity: 0.4;
}

/* ---- route legacy hardcoded coral literals through the accent ----
   These predate the --coral token and stay orange regardless of the
   accent/style in effect unless recoloured explicitly. */
html[data-style="shell-sky"] .ed-rev__chip.is-on {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="shell-sky"] .ed-cta__wstatus.is-tight {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="shell-sky"] .ed-ticket__stamp {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--coral) 40%, transparent);
}
html[data-style="shell-sky"] .ed-ticket__body::before {
  background-image:
    repeating-linear-gradient(46deg, rgba(13,53,55,0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-46deg, rgba(13,53,55,0.032) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--coral) 8%, transparent) 0, transparent 34%);
}

/* --- style-pacific-sage.css --- */
/* ============================================================
   PACIFIC & SAGE — light olive colour style ("Color 8").
   Selected in Swell Settings → Style (or per page). When active,
   header.php drops data-style="pacific-sage" on <html> and every
   template omits the `ed--dark` modifier (see swell_ed_dark_class()),
   so the `.ed` editorial layout falls back to its light/paper
   styling. This file remaps the brand tokens to the pale-olive /
   pacific-cyan palette, restores the section-by-section colour
   rhythm the client signed off on, fixes the same light-theme
   legibility gaps the Shell & Sky style handles, and routes the
   legacy hardcoded-coral literals through the new accent so no
   stray orange survives. The hero, footer and press marquee stay
   the dark navy "bookends" in both styles, unchanged here.

   Palette source: design_handoff_color8 ("Pacific & Sage").
   ============================================================ */

html[data-style="pacific-sage"] {
  --ink:          #1c3540;
  --ink-soft:     #3d5661;
  --paper:        #ecf2da;      /* base page ground (pale olive) */
  --paper-2:      #e5eddc;      /* alternating sections          */
  --paper-deep:   #d5dcbc;
  --cream:        #ffffff;      /* cards / elevated surfaces      */
  --bone:         #ecf2da;
  --night:        #123a3d;      /* dark section grounds           */
  --night-2:      #17494c;
  --teal:         #2f7d96;      /* brand — links, eyebrows, type  */
  --teal-deep:    #245f73;
  --teal-pale:    #a9dcf0;
  --coral:        #1f9ec4;      /* accent — pacific cyan, not orange */
  --coral-deep:   #167a99;
  --coral-glow:   rgba(31,158,196,0.32);
  --on-accent:    #ffffff;
  --hairline:     rgba(28,53,64,0.18);
}

/* ---- per-section colour rhythm (top → bottom) ----
   Base ground is pale olive (var(--paper) = #ecf2da). Content
   sections alternate to the warm off-white #e5eddc. The "as seen in"
   marquee is a divider, not a counted section, so it stays on the
   base olive and the real sections alternate cleanly around it.
   Every section the Shell & Sky style overrides is overridden here
   too, so no dark surface from the base cascade bleeds through. */
html[data-style="pacific-sage"] .ed-intro   { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-sports  { background: #ecf2da; }
html[data-style="pacific-sage"] .ed-stay    { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-loc     { background: #ecf2da; }
html[data-style="pacific-sage"] .ed-gal     { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-rev     { background: #ecf2da; }
html[data-style="pacific-sage"] .ed-faq     { background: #e5eddc; }
html[data-style="pacific-sage"] .ed-cta--tag { background: #ecf2da; }

/* nav slab — a deep tone of the palette over the hero photo */
html[data-style="pacific-sage"] .nav { background: rgba(18,58,61,0.52); }

/* inline highlight links read the reversed-link colour site-wide;
   the pale teal used on dark grounds washes out on light ones */
html[data-style="pacific-sage"][data-links="reversed"] .swell-link { color: var(--teal-deep); }

/* ---- light-theme legibility fixes ----
   The "ghost numeral" section eyebrow (.ed-knum) and its divider
   (.ed-krule) are always white — correct on the dark surface, invisible
   on this light one. */
html[data-style="pacific-sage"] .ed-kicker--icon .ed-knum {
  color: var(--teal-deep);
  opacity: 0.34;
}
html[data-style="pacific-sage"] .ed-kicker--icon .ed-krule {
  background: var(--teal-deep);
  opacity: 0.4;
}

/* ---- route legacy hardcoded coral literals through the accent ----
   These predate the --coral token and stay orange regardless of the
   accent/style in effect unless recoloured explicitly. */
html[data-style="pacific-sage"] .ed-rev__chip.is-on {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="pacific-sage"] .ed-cta__wstatus.is-tight {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
}
html[data-style="pacific-sage"] .ed-ticket__stamp {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--coral) 40%, transparent);
}
html[data-style="pacific-sage"] .ed-ticket__body::before {
  background-image:
    repeating-linear-gradient(46deg, rgba(28,53,64,0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-46deg, rgba(28,53,64,0.032) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--coral) 8%, transparent) 0, transparent 34%);
}

/* --- style-light.css --- */
/* ============================================================================
   LIGHT MODE — interior pages (.pg-) + shared editorial fixes.

   Loaded on every request; every rule is gated by html[data-mode="light"],
   which header.php sets whenever the active colour style is a light one
   (Shell & Sky, Pacific & Sage, or any future light palette). Because every
   value here is TOKEN-DRIVEN (var(--paper), var(--ink), var(--hairline), …),
   the one file repaints correctly under whichever light palette remapped the
   tokens — no per-palette duplication.

   Why this file exists
   --------------------
   The interior page layout (assets/css/pages.css, prefix .pg-) was authored as
   an always-dark editorial surface: dark grounds, cream text, white hairlines,
   faint white-on-dark cards. The colour-style switch only ever repainted the
   HOMEPAGE .ed-* sections, so on a light palette the interior grounds stayed
   dark and the page looked broken. This file flips the interior CONTENT
   sections to the light paper surface with dark ink and dark hairlines.

   Left deliberately dark (bookends in every style, like the homepage hero/footer)
   ------------------------------------------------------------------------------
   The full-bleed subpage hero (.pg-hero*, .pg-cover*, .pg-tabs, .pg-crumb,
   .sw-wx), the 404 scene (.pg-404*), the dark "find us" map panel (.pg-find,
   white line-art), the fullscreen lightbox (.pg-lb), and the teal accent band
   (.pg-sec--teal). These sit over photos / are intentional dark features.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BASE SURFACE + SECTION GROUNDS
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg { background: var(--paper); color: var(--ink); }

html[data-mode="light"] .pg-sec--n1 { background: var(--paper); }
html[data-mode="light"] .pg-sec--n2 { background: var(--paper-2); }

/* The teal accent band (.pg-sec--teal) stays a colour block in every style — a
   deliberate dark bookend, like the homepage hero/footer. Its white-on-teal
   text is restored at the end of this file so the global ink flips don't dim it. */

html[data-mode="light"] .pg-prose__sub { color: var(--ink); }

/* ---------------------------------------------------------------------------
   HEADINGS & DISPLAY FIGURES  →  ink
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-lede__h,
html[data-mode="light"] .pg-fact__num,
html[data-mode="light"] .pg-head .ed-h2,
html[data-mode="light"] .pg-level__t,
html[data-mode="light"] .pg-step__t,
html[data-mode="light"] .pg-feature__h,
html[data-mode="light"] .pg-dl__body h3,
html[data-mode="light"] .pg-day__body h3,
html[data-mode="light"] .pg-inc h3,
html[data-mode="light"] .pg-seasons__mo,
html[data-mode="light"] .pg-seasons__rlmain,
html[data-mode="light"] .pg-seasons__temp b,
html[data-mode="light"] .pg-trip__t,
html[data-mode="light"] .pg-quote blockquote,
html[data-mode="light"] .pg-quote__by .n,
html[data-mode="light"] .pg-pool__q,
html[data-mode="light"] .pg-assure__t,
html[data-mode="light"] .jr-feat__t,
html[data-mode="light"] .jr-card__t { color: var(--ink); }

/* italic accents inside those headings — teal-pale washes out on paper, so use
   the deep teal (same fix the homepage light styles apply to inline links) */
html[data-mode="light"] .pg-lede__h i,
html[data-mode="light"] .pg-fact__num i,
html[data-mode="light"] .pg-trip__t i,
html[data-mode="light"] .pg-pool__q i,
html[data-mode="light"] .pg-seasons__mo i,
html[data-mode="light"] .pg-quote blockquote .mark,
html[data-mode="light"] .jr-feat__t i { color: var(--teal-deep); }

/* ---------------------------------------------------------------------------
   BODY / SECONDARY COPY  →  ink-soft
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-level__d,
html[data-mode="light"] .pg-step__d,
html[data-mode="light"] .pg-dl__body p,
html[data-mode="light"] .pg-dl__count,
html[data-mode="light"] .pg-day__body p,
html[data-mode="light"] .pg-inc p,
html[data-mode="light"] .pg-assure__d,
html[data-mode="light"] .pg-food__ticks span,
html[data-mode="light"] .pg-trip__d,
html[data-mode="light"] .pg-trip__where,
html[data-mode="light"] .pg-quote__by .s,
html[data-mode="light"] .pg-pool__lead,
html[data-mode="light"] .pg-seasons__temp span,
html[data-mode="light"] .pg-seasons__cornsub,
html[data-mode="light"] .pg-seasons__rlsub,
html[data-mode="light"] .pg-seasons__lg,
html[data-mode="light"] .pg-feature__list .lbl,
html[data-mode="light"] .jr-feat__ex,
html[data-mode="light"] .jr-card__ex { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   EYEBROWS / TAGS / META  →  deep teal (teal-pale is too light on paper)
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-fact__lbl,
html[data-mode="light"] .pg-level__tag,
html[data-mode="light"] .pg-step__tag,
html[data-mode="light"] .pg-feature__list .lbl b,
html[data-mode="light"] .pg-feature__list svg,
html[data-mode="light"] .pg-trip__price,
html[data-mode="light"] .pg-pool__ey,
html[data-mode="light"] .pg-seasons__cornlbl,
html[data-mode="light"] .pg-seasons__temp b sup,
html[data-mode="light"] .pg-seasons__rain .on,
html[data-mode="light"] .jr-feat__meta,
html[data-mode="light"] .jr-card__meta { color: var(--teal-deep); }

/* ---------------------------------------------------------------------------
   HAIRLINES  →  token hairline (white-on-dark rules become dark-on-paper)
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-facts,
html[data-mode="light"] .pg-food__ticks,
html[data-mode="light"] .pg-feature__list,
html[data-mode="light"] .pg-level__tag,
html[data-mode="light"] .pg-inc li,
html[data-mode="light"] .pg-amen,
html[data-mode="light"] .pg-assure__item,
html[data-mode="light"] .pg-seasons__chart { border-top-color: var(--hairline); }

html[data-mode="light"] .pg-day__row,
html[data-mode="light"] .pg-seasons__chart > * { border-bottom-color: var(--hairline); }

html[data-mode="light"] .pg-seasons__hd,
html[data-mode="light"] .pg-seasons__cell { border-left-color: var(--hairline); }

/* prominent 1.5px dividers (were white 0.5) — a touch stronger than a hairline */
html[data-mode="light"] .pg-day,
html[data-mode="light"] .pg-occ { border-top-color: color-mix(in srgb, var(--ink) 34%, transparent); }
html[data-mode="light"] .pg-occ__row { border-bottom-color: var(--hairline); }

/* the numbered-card divider tick */
html[data-mode="light"] .pg-level__rn::after { background: var(--hairline); }

/* empty meter bars / rain droplets (were faint white) */
html[data-mode="light"] .pg-seasons__meter span { background: color-mix(in srgb, var(--ink) 12%, transparent); }
html[data-mode="light"] .pg-seasons__rain { color: color-mix(in srgb, var(--ink) 26%, transparent); }

/* column hover highlight on the seasons chart — reads on paper */
html[data-mode="light"] .pg-seasons__cell.is-hot { background: color-mix(in srgb, var(--teal) 14%, transparent); }

/* month italic + "on" meter bars: keep them palette teal/coral (the numbered
   scales like --teal-500 aren't remapped by the light palettes, so route the
   lit bars through the tokens that ARE) */
html[data-mode="light"] .pg-seasons__mo i { color: var(--teal-deep); }
html[data-mode="light"] .pg-seasons__meter span { background: color-mix(in srgb, var(--ink) 16%, transparent); }
html[data-mode="light"] .pg-seasons__meter--teal span.on { background: var(--teal); box-shadow: 0 0 10px color-mix(in srgb, var(--teal) 45%, transparent); }
html[data-mode="light"] .pg-seasons__meter--coral span.on { background: var(--coral); box-shadow: 0 0 10px var(--coral-glow); }

/* header cells carry a background photo darkened by a night gradient so white
   month text reads. On paper, fade the bottom to the page ground and calm the
   photo so the (now dark) month label reads instead. */
html[data-mode="light"] .pg-seasons__hdbg { opacity: 0.22; }
html[data-mode="light"] .pg-seasons__hd.is-hot .pg-seasons__hdbg { opacity: 0.4; }
html[data-mode="light"] .pg-seasons__hd::after {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--paper) 92%);
}

/* ---------------------------------------------------------------------------
   "A DAY AT SWELL" INTERACTIVE TIMELINE (.pg-dl)
   Rail times, the connecting line, the station dots and the glass prev/next
   buttons were all drawn in white/cream for the dark surface.
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-dl__time { color: color-mix(in srgb, var(--ink) 55%, transparent); }
html[data-mode="light"] .pg-dl__dotw::before { background: var(--hairline); }

/* inactive station dot → white pip with a teal ring; past/active stay coral */
html[data-mode="light"] .pg-dl__dot {
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--teal-deep) 55%, transparent);
}

/* glass prev/next arrows: faint white ring + cream glyph → hairline ring + ink
   glyph (the coral hover state is left untouched) */
html[data-mode="light"] .pg-dl__arrow {
  border-color: var(--hairline);
  color: var(--teal-deep);
}

/* ---------------------------------------------------------------------------
   CARDS — faint white-on-dark fills become clean white cards on paper
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-level,
html[data-mode="light"] .pg-trip,
html[data-mode="light"] .pg-pkg {
  background: var(--cream);
  border-color: var(--hairline);
}
html[data-mode="light"] .pg-level:hover,
html[data-mode="light"] .pg-trip:hover,
html[data-mode="light"] .pg-pkg:hover {
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
  box-shadow: 0 22px 56px color-mix(in srgb, var(--ink) 14%, transparent);
}

/* chips + contact tiles */
html[data-mode="light"] .pg-chips span,
html[data-mode="light"] .pg-contact__opt {
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink);
}
html[data-mode="light"] .pg-contact__opt:hover { background: color-mix(in srgb, var(--ink) 5%, var(--cream)); }

/* ruled pool chips */
html[data-mode="light"] .pg-poolchips--ruled .ch { border-top-color: var(--hairline); }
html[data-mode="light"] .pg-poolchips--ruled .ch:last-child { border-bottom-color: var(--hairline); }

/* portrait/avatar ring */
html[data-mode="light"] .pg-quote__by img { box-shadow: inset 0 0 0 1px var(--hairline); }

/* ---------------------------------------------------------------------------
   PACKAGES + COMPARISON TABLE (pricing / stay)
   --------------------------------------------------------------------------- */
/* package cards were flipped to white cards above, so their white/cream body
   text must go dark (the photo, ribbon, tag and coral list-ticks stay as-is) */
html[data-mode="light"] .pg-pkg__name,
html[data-mode="light"] .pg-pkg__amount,
html[data-mode="light"] .pg-pkg__list li { color: var(--ink); }
html[data-mode="light"] .pg-pkg__desc,
html[data-mode="light"] .pg-pkg__amount sup,
html[data-mode="light"] .pg-pkg__unit,
html[data-mode="light"] .pg-pkg__occ { color: var(--ink-soft); }
html[data-mode="light"] .pg-pkg__rk,
html[data-mode="light"] .pg-pkg__from,
html[data-mode="light"] .pg-pkg__custom { color: var(--teal-deep); }
html[data-mode="light"] .pg-pkg__price,
html[data-mode="light"] .pg-pkg__rate + .pg-pkg__rate { border-top-color: var(--hairline); }

/* comparison matrix */
html[data-mode="light"] .pg-cmp__col,
html[data-mode="light"] .pg-cmp tbody td.lbl,
html[data-mode="light"] .pg-cmp-cta__line { color: var(--ink); }
html[data-mode="light"] .pg-cmp__col .pg-cmp__sub,
html[data-mode="light"] .pg-cmp__head { color: var(--teal-deep); }
html[data-mode="light"] .pg-cmp tbody td,
html[data-mode="light"] .pg-cmp-cta { border-top-color: var(--hairline); }
html[data-mode="light"] .pg-cmp tbody tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
html[data-mode="light"] .pg-cmp__no { color: color-mix(in srgb, var(--ink) 28%, transparent); }

/* occupancy table + price note */
html[data-mode="light"] .pg-occ__pkg { color: var(--ink); }
html[data-mode="light"] .pg-occ__row--head span,
html[data-mode="light"] .pg-occ__pkg small,
html[data-mode="light"] .pg-occ__val.is-req,
html[data-mode="light"] .pg-pricenote b { color: var(--teal-deep); }
html[data-mode="light"] .pg-occ__val small,
html[data-mode="light"] .pg-pricenote { color: var(--ink-soft); }

/* featured "offer" card (wingfoiling + pricing) — a wide photo|panel card. Its
   price rows reuse .pg-pkg__* (handled above), but the panel is a faint
   white-on-dark fill with white name/desc. Flip the panel to a white card with
   dark text; the ribbon/caption sit over the photo and stay light. */
html[data-mode="light"] .pg-offer {
  background: var(--cream);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 22%, transparent),
              0 30px 72px color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-mode="light"] .pg-offer__name { color: var(--ink); }
html[data-mode="light"] .pg-offer__desc,
html[data-mode="light"] .pg-offer__fine { color: var(--ink-soft); }
html[data-mode="light"] .pg-offer__fine svg { color: var(--teal-deep); }
html[data-mode="light"] .pg-offer__fine--foot { border-top-color: var(--hairline); }

/* ---------------------------------------------------------------------------
   GALLERY (filter chips + tiles)
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-gal__filter {
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
html[data-mode="light"] .pg-gal__filter:hover { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 34%, transparent); }
html[data-mode="light"] .pg-gal__filter.is-active { background: var(--teal-deep); color: #fff; box-shadow: none; }

/* image drop-placeholder chrome reads on paper (empty cards before an upload) */
html[data-mode="light"] .pg-trip__media image-slot::part(empty),
html[data-mode="light"] .pg-feature__media image-slot::part(empty) { color: var(--ink-soft); }
html[data-mode="light"] .pg-trip__media image-slot::part(ring),
html[data-mode="light"] .pg-feature__media image-slot::part(ring) { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
html[data-mode="light"] .pg-trip__media image-slot::part(frame),
html[data-mode="light"] .pg-feature__media image-slot::part(frame) { background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* journal cards */
html[data-mode="light"] .jr-card { border-color: var(--hairline); }
html[data-mode="light"] .jr-card:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); box-shadow: 0 22px 56px color-mix(in srgb, var(--ink) 14%, transparent); }
html[data-mode="light"] .jr-card__more,
html[data-mode="light"] .jr-feat__more { color: var(--teal-deep); }
html[data-mode="light"] .jr-card:hover .jr-card__more { color: var(--ink); }

/* ---------------------------------------------------------------------------
   GHOST BUTTONS on interior content sections.
   .btn--ghost-light is a white outline + white glyph built for dark grounds
   (e.g. "See the full gallery"). Inside a light .pg-sec content section it
   vanishes, so restyle it as a dark-outline ghost (mirroring .btn--ghost-dark).
   Ghost buttons on the dark bookends — the subpage hero (.pg-hero) and the 404
   scene — are NOT matched here, so they stay white as intended.
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-sec .btn--ghost-light {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 42%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-mode="light"] .pg-sec .btn--ghost-light:hover {
  background: var(--ink);
  color: var(--cream);
}

/* ---------------------------------------------------------------------------
   HOMEPAGE "AS SEEN IN" PRESS MARQUEE (.ed-marq)
   The bar is a hardcoded near-black band (#07171b) with cream text; on a light
   palette it should read as the light ground, as the client requested.
   --------------------------------------------------------------------------- */
html[data-mode="light"] .ed-marq__bar {
  background: var(--paper);
  border-top-color: var(--hairline);
  border-bottom-color: transparent;
}
html[data-mode="light"] .ed-marq__item,
html[data-mode="light"] .ed-marq__item--serif,
html[data-mode="light"] .ed-marq__item--caps,
html[data-mode="light"] .ed-marq__item--heavy,
html[data-mode="light"] .ed-marq__item--award { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   TEAL ACCENT BAND — keep it a dark colour block with light text.
   Placed last so it restores white-on-teal text after the global ink flips
   above. The band is an intentional accent surface in every colour style.
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-sec--teal { color: var(--cream); }
html[data-mode="light"] .pg-sec--teal .ed-h2,
html[data-mode="light"] .pg-sec--teal .pg-head .ed-h2,
html[data-mode="light"] .pg-sec--teal .pg-lede__h,
html[data-mode="light"] .pg-sec--teal .pg-fact__num,
html[data-mode="light"] .pg-sec--teal .pg-feature__h,
html[data-mode="light"] .pg-sec--teal .pg-level__t,
html[data-mode="light"] .pg-sec--teal .pg-dl__body h3 { color: #fff; }
html[data-mode="light"] .pg-sec--teal .ed-lead,
html[data-mode="light"] .pg-sec--teal .ed-para,
html[data-mode="light"] .pg-sec--teal .pg-level__d,
html[data-mode="light"] .pg-sec--teal .pg-dl__body p { color: rgba(249,245,233,0.9); }
html[data-mode="light"] .pg-sec--teal .pg-fact__lbl,
html[data-mode="light"] .pg-sec--teal .pg-level__tag { color: var(--teal-pale); }
html[data-mode="light"] .pg-sec--teal .pg-facts,
html[data-mode="light"] .pg-sec--teal .pg-level__tag { border-top-color: rgba(255,255,255,0.16); }

/* ---------------------------------------------------------------------------
   PHOTO-BACKED CONTENT stays light.
   Two cases keep a dark photo behind the copy in every colour style, so the
   global ink flips above must be undone there and the text kept light:
     1) any .pg-sec given an optional full-bleed background photo — swell_sec_bg_attr()
        emits an inline background-image under an 85% dark tint (no class marker,
        so we match the inline style).
     2) the Pool & Garden "billboard", whose copy overlays a photo + dark scrim.
   Placed last so these win over the ink flips by both order and specificity.
   --------------------------------------------------------------------------- */
html[data-mode="light"] .pg-sec[style*="background-image"],
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy { color: var(--cream); }

/* headings → white */
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-h2,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-lede__h,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-fact__num,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-feature__h,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-pool__q,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__q { color: #fff; }

/* heading italics → light teal */
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-lede__h i,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-fact__num i,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-pool__q i,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__q i { color: var(--teal-pale); }

/* body / lead copy → soft cream */
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-lead,
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-para,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-food__ticks span,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__lead { color: rgba(249,245,233,0.86); }

/* eyebrows / labels → light teal */
html[data-mode="light"] .pg-sec[style*="background-image"] .ed-klabel,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-fact__lbl,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-pool__ey,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-pool__ey { color: var(--teal-pale); }

/* hairlines/amenity dividers → white on the photo */
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-amen,
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-food__ticks { border-top-color: rgba(255,255,255,0.16); }

/* chips + ghost buttons over a photo → glass white */
html[data-mode="light"] .pg-sec[style*="background-image"] .pg-chips span,
html[data-mode="light"] .pg-pool--billboard .pg-pool__copy .pg-chips span {
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
  color: #fff;
}
html[data-mode="light"] .pg-sec[style*="background-image"] .btn--ghost-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* --- scroll-fx.css --- */
/* =========================================================
   Tideline scroll FX — scaffolding for assets/js/scroll-fx.js.
   Gated entirely on html[data-scrollfx="tideline"] (set by the JS
   on desktop only). If the attribute is absent, NONE of this applies
   and the page renders exactly as before. data-scrollfx="off" is the
   kill switch.
   ========================================================= */

/* Keep the per-frame transforms crisp: kill the slow image transitions
   that would smear them; absorb any sub-pixel lateral motion. */
[data-scrollfx="tideline"] .ed-intro__photo img,
[data-scrollfx="tideline"] .ed-sport__fig img,
[data-scrollfx="tideline"] .ed-stay__mosaic figure img,
[data-scrollfx="tideline"] .ed-gal__tile img,
[data-scrollfx="tideline"] .pg-feature__media img,
[data-scrollfx="tideline"] .pg-strip img,
[data-scrollfx="tideline"] .ed-ticket__stub img,
[data-scrollfx="tideline"] .pg-hero__bg {
	transition: none !important;
	will-change: transform;
	backface-visibility: hidden;
}

[data-scrollfx="tideline"] body { overflow-x: clip; }

/* Frames clip the zoom/parallax overscan (most already do; this guarantees it). */
[data-scrollfx="tideline"] .ed-intro__photo,
[data-scrollfx="tideline"] .ed-sport__fig,
[data-scrollfx="tideline"] .ed-stay__mosaic figure,
[data-scrollfx="tideline"] .ed-gal__tile,
[data-scrollfx="tideline"] .pg-feature__media,
[data-scrollfx="tideline"] .pg-strip figure,
[data-scrollfx="tideline"] .ed-ticket__stub {
	overflow: hidden;
}

/* Hero background: replace the one-time load drift with scroll parallax. */
[data-scrollfx="tideline"] .pg-hero__bg {
	animation: none !important;
}

/* =========================================================
   Shared-horizon seam — a glowing teal->coral waterline drawn
   across the top of each section as it rises toward mid-screen.
   --seam (0 -> 1) is set per-frame by the engine on the section;
   the injected .fx-seam child inherits it.
   ========================================================= */
[data-scrollfx="tideline"] .ed-sports,
[data-scrollfx="tideline"] .ed-stay,
[data-scrollfx="tideline"] .ed-loc,
[data-scrollfx="tideline"] .ed-gal,
[data-scrollfx="tideline"] .ed-rev,
[data-scrollfx="tideline"] .ed-faq,
[data-scrollfx="tideline"] .ed-cta,
[data-scrollfx="tideline"] .pg-sec {
	position: relative;
}

[data-scrollfx="tideline"] .fx-seam {
	position: absolute; left: 0; right: 0; top: -1px; height: 3px;
	pointer-events: none; z-index: 6;
	transform: scaleX( var( --seam, 0 ) ); transform-origin: center;
	opacity: var( --seam, 0 );
	background: linear-gradient( 90deg,
		transparent 0%,
		var( --teal-300, #5ec9c2 ) 14%,
		#aef3ec 38%,
		#d6fbf5 50%,
		#aef3ec 62%,
		var( --teal-300, #5ec9c2 ) 86%,
		transparent 100% );
	box-shadow: 0 0 28px 2px rgba( 94, 201, 194, 0.7 ), 0 0 10px 1px rgba( 94, 201, 194, 0.5 );
}

/* When FX is off, the injected seam element must be inert. */
[data-scrollfx="off"] .fx-seam { display: none; }

/* =========================================================
   Reduced motion / safety — never leave anything hidden or moved.
   ========================================================= */
@media ( prefers-reduced-motion: reduce ) {
	[data-scrollfx] .fx-seam { display: none !important; }
	[data-scrollfx] [data-fxset] { transform: none !important; }
}