/* --- 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);
  display: grid; grid-template-columns: 1fr 2fr; align-items: stretch;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  transition: border-color 320ms var(--ease-swell), background 320ms var(--ease-swell);
}
.ed-wing:hover { border-color: rgba(15,154,154,0.4); background: rgba(15,154,154,0.04); }
.ed--dark .ed-wing:hover { background: rgba(255,255,255,0.04); }
.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.94
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%);
}

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