/* ==========================================================================
   STYLE ICON TOURISM — luxury design system (PHP premium build)
   Palette: ivory · sandstone · warm gold · deep blue · premium black
   Type: Playfair Display (display serif) + Poppins (sans)
   Spacing: 8pt system (Tailwind's 4px scale, used in multiples of 2)
   ========================================================================== */

/* ==========================================================================
   STYLE ICON — BRAND TOKENS (official guideline)

   The client's definitive palette table (exact hex):
     #071B24 main background   · #0E2835 alternate sections · #102F3F accent
     #D4AF37 gold              · #E5C158 gold hover
     #FFFFFF primary text      · #C9D0D6 secondary text
     rgba(255,255,255,.05) glass cards · rgba(212,175,55,.18) borders
     rgba(212,175,55,.12) glow

   DARK IS THE DEFAULT, not an option. The glass card and gold-alpha border only
   resolve on a dark ground, so the site is built dark-first and the light
   variant below is the alternative, not the baseline.

   The semantic tokens are what components consume. The legacy aliases at the
   bottom (--ink/--ivory/--gold/…) are why this file re-skins the whole site
   from one block: every rule already speaks through them.
   ========================================================================== */

:root {
  --radius: 0.75rem;

  /* ---- brand ----
     The client's definitive palette table. #071B24 is a deep teal-navy, not a
     pure black — chosen as the main ground, with #0E2835 for alternate sections
     and #102F3F as the accent/elevated surface. */
  --si-black:      #071B24;   /* main background */
  --si-navy:       #0E2835;   /* alternate sections */
  --si-accent:     #102F3F;   /* accent / elevated surface */
  --si-gold:       #D4AF37;
  --si-gold-hover: #E5C158;
  --si-white:      #FFFFFF;
  --si-grey:       #C9D0D6;

  /* ---- semantic ----
     Declared as raw RGB CHANNELS, not finished colours. Tailwind composes them
     as rgb(var(--x-rgb) / <alpha-value>), which is the only way `bg-muted/30`
     and `via-muted/40` keep working while the palette still lives in one place.
     A finished var() would silently drop every opacity modifier on the site. */
  --background-rgb: 7 27 36;     /* #071B24 */
  --foreground-rgb: 255 255 255;
  --card-rgb: 16 47 63;          /* #102F3F — accent, used for solid cards */
  --muted-rgb: 14 40 53;         /* #0E2835 — alternate section band */
  --muted-foreground-rgb: 201 208 214;
  --primary-rgb: 212 175 55;
  --primary-foreground-rgb: 7 27 36;

  --background: rgb(var(--background-rgb));
  --foreground: rgb(var(--foreground-rgb));
  --surface: var(--si-navy);              /* the alternating section band */
  --card: rgb(var(--card-rgb));
  --card-glass: rgba(255, 255, 255, 0.05);   /* the guideline's glass card */
  --primary: rgb(var(--primary-rgb));
  --primary-foreground: rgb(var(--primary-foreground-rgb));
  --muted: rgb(var(--muted-rgb));
  --muted-foreground: rgb(var(--muted-foreground-rgb));
  --border: rgba(212, 175, 55, 0.18);
  --input: rgba(212, 175, 55, 0.28);
  --glow: rgba(212, 175, 55, 0.12);
  --destructive: #e5484d;

  /* Shadow is cast by shadow (absence of light), so it stays near-black on the
     teal ground — a teal-tinted shadow would read as a smudge, not depth. */
  --shadow-luxe: 0 30px 60px -20px rgba(0, 8, 12, 0.6),
    0 8px 20px -8px rgba(0, 8, 12, 0.45);
  --shadow-gold: 0 12px 40px -12px rgba(212, 175, 55, 0.3);

  /* ---- legacy aliases ----
     The existing rules and every Tailwind bg-ink / text-gold / border-border
     class resolve through these. Re-pointing them here re-skins the site in
     one move instead of a thousand find-and-replaces. */
  --ink: var(--si-black);
  --ivory: var(--si-white);
  --gold: var(--si-gold);
  --gold-soft: var(--si-gold-hover);
  --deep-blue: var(--si-navy);
  --sandstone: var(--si-grey);
}

/* ---- Light variant ----
   Same three brand colours, inverted: White + Gold + Black. Offered because
   the toggle exists and some travellers need it; the dark build above is the
   brand. Class is `light` — dark needs no class, being the default. */
html.light {
  --background-rgb: 255 255 255;
  --foreground-rgb: 0 0 0;
  --card-rgb: 255 255 255;
  --muted-rgb: 244 246 247;
  --muted-foreground-rgb: 85 99 107;
  --primary-rgb: 0 0 0;
  --primary-foreground-rgb: 255 255 255;

  --surface: #F4F6F7;
  --card-glass: rgba(255, 255, 255, 0.7);
  --border: rgba(0, 0, 0, 0.12);
  --input: rgba(0, 0, 0, 0.18);
  --shadow-luxe: 0 30px 60px -20px rgba(0, 0, 0, 0.18),
    0 8px 20px -8px rgba(0, 0, 0, 0.1);

  /* --ink and --ivory deliberately do NOT flip here. They do not mean
     "background" and "text" — they mean "the dark hero surface" and "text
     printed on it". Those sit over photography and stay dark in both themes;
     inverting them would put black type on a night-time temple photo. */
}

* { border-color: var(--border); }

html { scroll-behavior: smooth; }
/* Lenis controls scrolling when active; disable native smooth to avoid fighting it */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, .font-display {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Playfair carries far more contrast and a taller x-height than the Cormorant
   it replaces: at display sizes it needs less weight and tighter tracking to
   stop the thick stems closing up. */
h1, .font-display.text-6xl, .font-display.text-7xl, .font-display.text-8xl {
  font-weight: 500;
  letter-spacing: -0.03em;
}
::selection { background: color-mix(in oklab, var(--gold) 40%, transparent); }

/* ---------- custom component utilities ---------- */
/* Glass on a dark ground is white at LOW alpha, not a near-opaque ivory sheet —
   the old 65% value was tuned for an ivory page and would read as a white slab
   here. The gold hairline is the guideline's own border token. */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border);
}
.glass-dark {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border);
}
html.light .glass {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}
.text-gradient-gold {
  background: linear-gradient(115deg, var(--gold) 0%, var(--gold-soft) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-radial-gold {
  background: radial-gradient(ellipse at top, color-mix(in oklab, var(--gold) 30%, transparent), transparent 60%);
}
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ink) 25%, transparent), transparent);
}
.shadow-luxe { box-shadow: var(--shadow-luxe); }

/* organic gradient blobs (decorative, behind content) */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.blob-gold { background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--gold) 55%, transparent), transparent 70%); }
.blob-blue { background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--deep-blue) 45%, transparent), transparent 70%); }

/* ---------- animations ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 40s linear infinite; }
.animate-marquee-slow { animation: marquee 60s linear infinite; }

@keyframes shimmer { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.animate-shimmer { animation: shimmer 2.4s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 60s linear infinite; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.animate-float { animation: float 7s ease-in-out infinite; }

@keyframes pulse-glow { 0%,100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.6); opacity: 0; } }

/* hero entrance */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise 1s cubic-bezier(0.22,1,0.36,1) forwards; }
.rise-d1 { animation-delay: 0.15s; }
.rise-d2 { animation-delay: 0.8s; }
.rise-d3 { animation-delay: 1.0s; }
.rise-d4 { animation-delay: 1.25s; }
.rise-d5 { animation-delay: 1.8s; }

/* scroll reveal (JS-progressive: hidden only when .js is on <html>) */
.js .reveal { opacity: 0; transform: translateY(30px); }
.reveal {
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* card lift + 3D tilt */
.lift { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; }
.lift:hover { transform: translateY(-6px); }
.tilt { transform-style: preserve-3d; transition: transform 0.25s ease; will-change: transform; }
.tilt-inner { transform: translateZ(40px); }

.pkg-card .pkg-img { transition: transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.pkg-card:hover .pkg-img { transform: scale(1.08); }

/* zoomable image */
.zoom-img { overflow: hidden; }
.zoom-img img { transition: transform 1s cubic-bezier(0.22,1,0.36,1); }
.zoom-img:hover img { transform: scale(1.06); }

/* ---------- custom cursor ---------- */
@media (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%);
    mix-blend-mode: difference;
  }
  .cursor-dot { width: 6px; height: 6px; background: var(--gold); }
  .cursor-ring {
    width: 38px; height: 38px; border: 1px solid color-mix(in oklab, var(--gold) 80%, white);
    transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity .25s ease;
  }
  .cursor-ring.is-hover { width: 64px; height: 64px; background: color-mix(in oklab, var(--gold) 18%, transparent); }
}

/* ---------- ripple ---------- */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: color-mix(in oklab, currentColor 22%, transparent);
  animation: ripple 0.6s ease-out forwards; pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- loading screen ---------- */
#loader {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  background: var(--ink); color: var(--ivory);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loader.done { opacity: 0; visibility: hidden; }
/* height + width:auto + contain, so a non-square logo is never squished into
   an 84px box. max-width keeps a wide wordmark in bounds. */
#loader .loader-mark { width: auto; height: 84px; max-width: 240px; object-fit: contain; animation: float 4s ease-in-out infinite; }
#loader .loader-bar { width: 180px; height: 2px; background: color-mix(in oklab, white 12%, transparent); overflow: hidden; border-radius: 2px; }
#loader .loader-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width 0.3s ease; }
#loader .loader-word { font-family: "Playfair Display", serif; font-size: 0.8rem; letter-spacing: 0.5em; text-transform: uppercase; color: color-mix(in oklab, var(--gold) 90%, white); }

/* ---------- scroll progress ---------- */
#scroll-progress { transform-origin: left; will-change: transform; }

/* ---------- timeline ---------- */
.timeline-line { background: linear-gradient(to bottom, transparent, var(--border), transparent); }

/* ---------- lightbox ---------- */
#lightbox { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 5vw;
  background: color-mix(in oklab, var(--ink) 88%, transparent); backdrop-filter: blur(8px); }
#lightbox.open { display: flex; }
#lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 1rem; box-shadow: var(--shadow-luxe); }

/* ---------- booking stepper ---------- */
.step-dot { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* ---------- floating WhatsApp ---------- */
.fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70;
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.5rem; width: 3.5rem; border-radius: 999px;
  background: var(--ink); color: var(--gold);
  box-shadow: var(--shadow-luxe); transition: transform 0.3s ease;
}
.fab:hover { transform: scale(1.08); }
.fab::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--gold); animation: pulse-glow 2.4s ease-out infinite; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body.has-cursor { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ==========================================================================
   Concierge chat widget
   ========================================================================== */
#si-chat-toggle{
  position:fixed; right:1.5rem; bottom:5.75rem; z-index:71;
  display:inline-flex; align-items:center; justify-content:center;
  height:3.5rem; width:3.5rem; border:0; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:var(--ink); box-shadow:var(--shadow-luxe); cursor:pointer;
  transition:transform .3s ease;
}
#si-chat-toggle:hover{transform:scale(1.08)}
#si-chat-panel{
  position:fixed; right:1.5rem; bottom:10rem; z-index:72;
  width:min(380px,calc(100vw - 3rem)); max-height:min(560px,calc(100vh - 12rem));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:1.5rem; border:1px solid var(--border);
  background:var(--card); box-shadow:var(--shadow-luxe);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
#si-chat-panel.is-open{opacity:1; transform:none}
.si-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem;background:var(--ink);color:var(--ivory)}
.si-head img{width:34px;height:34px}
.si-head .t{font-family:"Playfair Display",serif;font-size:1.05rem;line-height:1.1}
.si-head .s{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.si-head button{margin-left:auto;background:none;border:0;color:var(--ivory);opacity:.7;cursor:pointer;padding:.25rem}
.si-head button:hover{opacity:1}

#si-chat-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--background)}
.si-msg{display:flex}
.si-msg-you{justify-content:flex-end}
.si-bubble{
  max-width:82%; padding:.65rem .9rem; border-radius:1rem; font-size:13.5px; line-height:1.55;
  background:var(--card); border:1px solid var(--border); color:var(--foreground);
}
.si-msg-you .si-bubble{background:var(--ink);color:var(--ivory);border-color:transparent;border-bottom-right-radius:.35rem}
.si-msg-bot .si-bubble{border-bottom-left-radius:.35rem}
.si-src{display:block;margin-top:.45rem;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
.si-src a{color:var(--gold);text-decoration:underline}

.si-typing{display:flex;gap:4px;align-items:center}
.si-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted-foreground);animation:si-dot 1.2s infinite}
.si-typing span:nth-child(2){animation-delay:.18s}
.si-typing span:nth-child(3){animation-delay:.36s}
@keyframes si-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

#si-chat-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .6rem;background:var(--background)}
.si-quick{
  border:1px solid var(--border); background:var(--card); color:var(--foreground);
  border-radius:999px; padding:.35rem .75rem; font-size:11.5px; cursor:pointer; transition:.15s;
}
.si-quick:hover{border-color:var(--gold);color:var(--gold)}

#si-chat-lead{padding:.85rem 1.1rem;border-top:1px solid var(--border);background:var(--muted)}
#si-chat-lead p{margin:0 0 .5rem;font-size:11.5px;color:var(--muted-foreground)}
#si-chat-lead input{width:100%;margin-bottom:.4rem;padding:.5rem .7rem;border-radius:.6rem;
  border:1px solid var(--input);background:var(--card);color:var(--foreground);font-size:12.5px}
#si-chat-lead button{width:100%;padding:.5rem;border:0;border-radius:999px;background:var(--gold);
  color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer}

#si-chat-form{display:flex;gap:.5rem;padding:.8rem 1.1rem;border-top:1px solid var(--border);background:var(--card)}
#si-chat-form input{flex:1;padding:.6rem .85rem;border-radius:999px;border:1px solid var(--input);
  background:var(--background);color:var(--foreground);font-size:13px;outline:none}
#si-chat-form input:focus{border-color:var(--gold)}
#si-chat-form button{flex:0 0 auto;width:2.4rem;height:2.4rem;border:0;border-radius:999px;
  background:var(--ink);color:var(--gold);cursor:pointer;display:grid;place-items:center}

@media(max-width:520px){
  /* Only the horizontal inset and height change on small screens — the vertical
     stacking is owned by the --fab-* variables further down, so it stays in one
     place instead of being re-guessed here. */
  #si-chat-panel{right:.75rem;max-height:calc(100vh - 16rem)}
  #si-chat-toggle{right:1rem}
  .fab, .fab-call{right:1rem}
}

/* ==========================================================================
   PHASE 3 — trip dates, booking window, seats, pricing, currency
   The brand palette is unchanged. The only additions are three *state*
   colours (open / warning / closed): a booking badge has to be legible as a
   state, and gold-on-gold cannot say "sold out". They are tuned to sit beside
   the existing gold and deep blue rather than fight them.
   ========================================================================== */

:root {
  --status-open: oklch(0.52 0.12 155);
  --status-warn: oklch(0.62 0.15 70);
  --status-gone: var(--destructive);
}
html.dark {
  --status-open: oklch(0.72 0.14 155);
  --status-warn: oklch(0.78 0.13 75);
  --status-gone: oklch(0.68 0.18 25);
}

/* ---------------------------------------------------- Booking badge ------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 6px;
}
.badge-open {
  color: var(--status-open);
  background: color-mix(in oklab, var(--status-open) 12%, transparent);
  border-color: color-mix(in oklab, var(--status-open) 30%, transparent);
}
/* "Closing soon" and "Few seats left" must read as urgency, so the dot pulses. */
.badge-warn {
  color: var(--status-warn);
  background: color-mix(in oklab, var(--status-warn) 14%, transparent);
  border-color: color-mix(in oklab, var(--status-warn) 34%, transparent);
}
.badge-warn .badge-dot { animation: badge-pulse 1.8s ease-in-out infinite; }
.badge-gone {
  color: var(--status-gone);
  background: color-mix(in oklab, var(--status-gone) 12%, transparent);
  border-color: color-mix(in oklab, var(--status-gone) 30%, transparent);
}
.badge-soft {
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--muted-foreground) 8%, transparent);
  border-color: var(--border);
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}

/* ------------------------------------------- The two dates (item 13) ----- */
/* Trip start and booking close are deliberately two cells with a rule between
   them — the whole point of the client's note is that these must never read
   as a single combined field. */
.date-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--card);
  box-shadow: var(--shadow-luxe);
}
.date-cell { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.25rem 0.75rem; }
.date-ic {
  display: grid;
  place-items: center;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.date-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted-foreground);
}
.date-v {
  margin-top: 0.3rem;
  font-family: "Playfair Display", serif;
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--foreground);
}
.date-div { width: 1px; align-self: stretch; background: var(--border); }

@media (max-width: 640px) {
  .date-panel { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.35rem; }
  .date-div { width: auto; height: 1px; }
  .date-cell { padding: 0; }
}

/* ------------------------------------------- Countdown (item 26) --------- */
.countdown {
  padding: 1.4rem 1.5rem;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-radius: 1.5rem;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--gold) 10%, transparent),
    color-mix(in oklab, var(--gold) 3%, transparent));
}
.countdown-k {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.countdown-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-width: 26rem;
}
.cd-unit {
  text-align: center;
  padding: 0.65rem 0.35rem;
  border-radius: 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
}
.cd-unit span {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.cd-unit small {
  display: block;
  margin-top: 0.3rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.countdown-over { margin-top: 0.9rem; font-size: 13px; color: var(--status-gone); }

/* ------------------------------------------- Seats bar (item 15) --------- */
.seat-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.seat-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------- Quick facts / inclusions / exclusions ------ */
.fact-card, .inc-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: var(--card);
}
.fact-ic, .inc-ic {
  display: grid;
  place-items: center;
  flex: 0 0 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.fact-k {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.fact-v { margin-top: 0.2rem; font-size: 14px; color: var(--foreground); }
.inc-card p { font-size: 14px; color: var(--foreground); }

.exc-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--border);
  border-radius: 1rem;
}
.exc-ic { color: var(--muted-foreground); flex: 0 0 auto; }
.exc-card p { font-size: 14px; color: var(--muted-foreground); }

/* ------------------------------------------- Important notes (item 23) --- */
.note-panel {
  padding: 1.6rem 1.75rem;
  border: 1px solid color-mix(in oklab, var(--status-warn) 32%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in oklab, var(--status-warn) 7%, transparent);
}
.note-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--status-warn);
}
.note-list { margin-top: 1.1rem; display: grid; gap: 0.85rem; }
.note-list li { list-style: none; padding-left: 1.1rem; position: relative; font-size: 14px; line-height: 1.6; }
.note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--status-warn);
}
.note-list strong { color: var(--foreground); font-weight: 600; }
.note-list span { color: var(--muted-foreground); }
.note-list strong + span::before { content: " — "; }

/* ------------------------------------------- Destination cards (item 19) - */
.dest-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
}
.dest-card img { width: 100%; height: 100%; object-fit: cover; }
.dest-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem;
  color: var(--ivory);
  background: linear-gradient(to top, oklch(0.14 0.015 260 / 0.92), transparent);
}
.dest-place {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
}
.dest-title { margin-top: 0.35rem; font-family: "Playfair Display", serif; font-size: 1.5rem; line-height: 1.15; }
.dest-note {
  margin-top: 0.35rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: oklch(0.985 0.008 85 / 0.75);
  /* The description is a bonus, not the point — reveal it on hover. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.dest-card:hover .dest-note, .dest-card:focus-within .dest-note { max-height: 6rem; opacity: 1; }

/* ------------------------------------------- Card dates (item 29) -------- */
.card-dates {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: var(--muted);
}
.card-dates-k {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.card-dates-k svg { color: var(--gold); }
.card-dates-v { margin-top: 0.3rem; font-size: 13px; font-weight: 500; color: var(--foreground); }

/* ------------------------------- Mobile sticky booking bar (item 24) ----- */
.book-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--card) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -12px oklch(0.15 0.03 260 / 0.25);
}
.book-bar-price { margin-right: auto; line-height: 1.2; }
.book-bar-k {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.book-bar-v { font-family: "Playfair Display", serif; font-size: 1.4rem; color: var(--foreground); }
.book-bar-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;    /* 44px */
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--gold);
}
.book-bar-cta {
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.book-bar-cta.is-off {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
}
/* The floating stack is lifted clear of this bar by --fab-lift (see the
   FLOATING ACTION STACK block below) — nothing to do here. */

@media (prefers-reduced-motion: reduce) {
  .badge-warn .badge-dot { animation: none; }
  .seat-bar span, .dest-note { transition: none; }
}

/* ==========================================================================
   HEADER — top bar + glassmorphism sticky navigation
   Two states, both driven by `.is-solid` on #site-header (set by main.js on
   scroll). Every page opens on a dark hero, so the default state is a
   transparent header with a light wordmark; scrolling swaps in the glass panel
   and the dark wordmark. `.force-solid` pins the solid state for any page that
   ever ships without a dark hero.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: color-mix(in oklab, var(--ivory) 78%, transparent);
  font-size: 12px;
  border-bottom: 1px solid color-mix(in oklab, white 8%, transparent);
  /* Rolls up out of the way on scroll — the nav takes over the sticky slot. */
  max-height: 3rem;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.site-header.is-solid .topbar { max-height: 0; opacity: 0; }

.topbar-in {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.4rem; }

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.3s ease;
}
.topbar-link:hover { color: var(--gold); }
/* The icon lifts on hover — a small sign of life, not a party trick. */
.topbar-link svg { color: var(--gold); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.topbar-link:hover svg { transform: translateY(-2px) scale(1.08); }

.topbar-intl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: color-mix(in oklab, var(--ivory) 60%, transparent);
}
.topbar-intl svg { color: var(--gold); animation: spin-slow 30s linear infinite; }

.topbar-socials { display: inline-flex; align-items: center; gap: 0.35rem; }
.topbar-social {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: color-mix(in oklab, var(--ivory) 65%, transparent);
  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.topbar-social:hover {
  color: var(--ink);
  background: var(--gold);
  transform: translateY(-2px);
}

.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  color: var(--gold);
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
}
.topbar-cta:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 1100px) { .topbar-hours, .topbar-intl { display: none; } }
@media (max-width: 780px)  { .topbar { display: none; } }

/* ---------- Navigation shell ---------- */
.navwrap { padding: 1.15rem 0; transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.site-header.is-solid .navwrap { padding: 0.55rem 0; }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease,
              backdrop-filter 0.5s ease, padding 0.45s ease;
}
/* Glassmorphism, only once scrolled.
   The brand is dark, so the scrolled bar is a DARK glass panel with the gold
   hairline — not the ivory sheet this was when the page underneath was ivory.
   Blur deepens on scroll, per the brief. */
.site-header.is-solid .navbar {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border-color: var(--border);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 175, 55, 0.06);
}
html.light .site-header.is-solid .navbar {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
}

/* ---------- Brand / logo ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  min-height: 2.75rem;   /* 44px — the logo is a link, so it is a tap target */
}
/* ---- Logo scale ----
   Mobile-first, sized for brand presence: 45px phone → 54px tablet → 64px
   desktop. `width: auto` + `object-fit: contain` keeps the aspect ratio exact at
   every step, so the mark never stretches; max-width rises with height so a wide
   wordmark is not clipped as it grows. The source is 1536px wide, far above any
   of these, so it stays crisp on Retina. */
.brand-logo {
  height: 2.8rem;                /* 45px — mobile */
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  display: block;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
}
@media (min-width: 768px)  { .brand-logo { height: 3.4rem; max-width: 13rem; } }  /* 54px — tablet  */
@media (min-width: 1024px) { .brand-logo { height: 4rem;   max-width: 15rem; } }  /* 64px — desktop */

/* A wide wordmark carries its name horizontally, so it needs a little less
   height and more width than a square badge at the same optical weight. */
.brand-logo.is-wide { height: 2.4rem; max-width: 13rem; }
@media (min-width: 768px)  { .brand-logo.is-wide { height: 2.9rem; max-width: 15rem; } }
@media (min-width: 1024px) { .brand-logo.is-wide { height: 3.4rem; max-width: 17rem; } }

/* Scrolled: ~20% smaller so the sticky bar tightens without the logo popping. */
.site-header.is-solid .brand-logo { height: 2.4rem; }
@media (min-width: 768px)  { .site-header.is-solid .brand-logo { height: 2.8rem; } }
@media (min-width: 1024px) { .site-header.is-solid .brand-logo { height: 3.2rem; } }
.site-header.is-solid .brand-logo.is-wide { height: 2rem; }
@media (min-width: 768px)  { .site-header.is-solid .brand-logo.is-wide { height: 2.4rem; } }
@media (min-width: 1024px) { .site-header.is-solid .brand-logo.is-wide { height: 2.8rem; } }

/* Subtle hover: a slight lift and lightening, nothing that draws the eye away
   from the navigation. */
.brand:hover .brand-logo { transform: scale(1.04); filter: brightness(1.12); }
.brand:focus-visible { outline: 2px solid var(--si-gold); outline-offset: 6px; border-radius: 12px; }

/* Shrink the wordmark on small phones and again in the tight 1280-1440 band,
   where the 11-link nav is competing for the same row. */
@media (max-width: 400px) {
  .brand-logo.is-wide { height: 1.9rem; max-width: 9rem; }
  .site-header.is-solid .brand-logo.is-wide { height: 1.75rem; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .brand-logo.is-wide { height: 2rem; max-width: 9.5rem; }
  .site-header.is-solid .brand-logo.is-wide { height: 1.85rem; max-width: 9.5rem; }
}

/* Cross-fade the two artworks: light wordmark over the hero, dark once solid.
   Stacking them (rather than swapping src) avoids a flash of missing image. */
.brand { position: relative; }
.brand-logo-light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.site-header.is-solid .brand-logo-dark { opacity: 0; }
.site-header.is-solid .brand-logo-light { opacity: 1; }

/* Only ONE logo file supplied (a light wordmark, no dark-background version):
   it would vanish on the ivory glass, so it rides a small ink plate instead.
   The artwork is never recoloured — supply assets/img/logo-light.png to drop
   the plate entirely. */
.brand.has-plate .brand-logo-light { opacity: 0; }
.brand.has-plate .brand-logo-dark  { opacity: 1; }
.site-header.is-solid .brand.has-plate {
  background: var(--ink);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}

.brand-text { line-height: 1.1; }
.brand-name {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ivory);
  transition: color 0.4s ease;
}
.brand-sub {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: color-mix(in oklab, var(--ivory) 60%, transparent);
  transition: color 0.4s ease;
}
.site-header.is-solid .brand-name { color: var(--foreground); }
.site-header.is-solid .brand-sub  { color: var(--muted-foreground); }

/* ---------- Nav links ----------
   The primary nav carries 11 CMS links. Measured, the bar needs ~1290px before
   brand + links + actions stop colliding, so the desktop nav appears at 1280 and
   the hamburger owns everything below it. Dropping links to force a fit would
   silently hide pages the client published. */
/*
 * No `min-width: 0` here, deliberately. With it, the flex box happily shrinks
 * below its own content and the links spill sideways OVER the actions cluster —
 * a silent overlap that never crosses the viewport edge, so no overflow check
 * catches it. Without it the nav refuses to shrink, so a future misfit shows up
 * as measurable overflow instead of quietly landing the currency button on top
 * of the last link.
 */
.mainnav { display: none; align-items: center; gap: 0.1rem; flex: 0 0 auto; }
@media (min-width: 1280px) { .mainnav { display: flex; } }

.navitem { position: relative; }
/* Icon-over-label navigation (restored at the client's request).
   Eight items, not eleven, is what buys the room for a stacked icon without the
   bar overflowing — see the header-fit measurements. */
.navlink {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.7rem 0.55rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.35s ease;
}
.navlink-ic {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  color: var(--si-gold);
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease, color 0.35s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.navlink:hover .navlink-ic,
.navlink.is-active .navlink-ic {
  background: linear-gradient(150deg, var(--si-gold), var(--si-gold-hover));
  border-color: var(--si-gold);
  color: var(--si-black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.navlink:hover, .navlink.is-active { color: var(--si-white); }
/* The dropdown caret sits beside the label, clear of the icon tile above it. */
.navlink .navlink-caret { position: absolute; right: 0.15rem; top: 0.85rem; }

@media (min-width: 1600px) {
  .navlink { padding: 0.5rem 1rem 0.55rem; font-size: 12px; }
  .mainnav { gap: 0.25rem; }
}
.navlink:hover, .navlink.is-active { color: var(--ivory); }
.site-header.is-solid .navlink { color: var(--muted-foreground); }
.site-header.is-solid .navlink:hover,
.site-header.is-solid .navlink.is-active { color: var(--foreground); }

/* Animated underline — grows from the centre. */
.navlink::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.3rem;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--si-gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.navlink:hover::after, .navlink.is-active::after { transform: scaleX(1); }
.navlink-caret { transition: transform 0.35s ease; opacity: 0.6; }
.navitem:hover .navlink-caret { transform: rotate(180deg); }

/* ---------- Mega menu ---------- */
.mega {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(44rem, calc(100vw - 3rem));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}
/* The gap between link and panel would drop the hover — bridge it. */
.mega::before { content: ""; position: absolute; inset: -0.9rem 0 auto 0; height: 0.9rem; }
.navitem:hover .mega, .navitem:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-in {
  padding: 1.5rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-luxe);
}
.mega-head { margin-bottom: 1.1rem; }
.mega-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
}
.mega-title {
  margin-top: 0.3rem;
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  color: var(--foreground);
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.mega-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem;
  border-radius: 0.9rem;
  transition: background 0.25s ease, transform 0.25s ease;
}
.mega-item:hover { background: var(--muted); transform: translateX(3px); }
.mega-thumb {
  flex: 0 0 3rem;
  width: 3rem;
  height: 2.4rem;
  border-radius: 0.55rem;
  overflow: hidden;
}
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega-ic {
  display: grid;
  place-items: center;
  flex: 0 0 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.mega-item-t { display: block; font-size: 13.5px; font-weight: 500; color: var(--foreground); }
.mega-item-n {
  display: block;
  margin-top: 0.1rem;
  font-size: 11.5px;
  color: var(--muted-foreground);
}
.mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  width: 100%;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
}
.mega-cta:hover { gap: 0.7rem; }
.mega-cta { transition: gap 0.3s ease; }

/* ---------- Actions ---------- */
.navactions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }

.navicon {
  position: relative;
  display: none;
  place-items: center;
  width: 2.75rem;      /* 44px — the minimum comfortable tap target */
  height: 2.75rem;
  border-radius: 999px;
  color: color-mix(in oklab, var(--ivory) 75%, transparent);
  transition: color 0.3s ease, background 0.3s ease;
}
/*
 * Account + theme are secondary. They appear on touch-sized screens (where the
 * nav is a hamburger and there is room) and again on wide desktops — but are
 * suppressed in the 1280-1440 band, where the 11-link nav needs every pixel.
 * Both remain reachable: account from the mobile menu, theme from this button
 * once the viewport is wide enough.
 */
@media (min-width: 640px)  { .navicon { display: grid; } }
@media (min-width: 1280px) and (max-width: 1439px) { .navicon { display: none; } }
.navicon:hover { color: var(--ivory); background: color-mix(in oklab, white 12%, transparent); }
.site-header.is-solid .navicon { color: var(--muted-foreground); }
.site-header.is-solid .navicon:hover {
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 7%, transparent);
}
.navicon-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}


.navcta {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  min-height: 2.75rem;          /* 44px tap target */
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.3s ease;
}
/* Hidden between 640-1024 (the hamburger menu carries its own Book CTA) and
   restored once there is room beside the links. */
@media (min-width: 768px) and (max-width: 1279px) { .navcta { display: inline-flex; } }
@media (min-width: 1440px) { .navcta { display: inline-flex; } }
.navcta:hover { transform: scale(1.02); }
.navcta-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.navcta:hover .navcta-fill { transform: translateY(0); }
.navcta:hover { color: var(--ivory); }

/* Owns every viewport below the point where the full nav actually fits. */
.navburger {
  display: grid;
  place-items: center;
  width: 2.75rem;                /* 44px tap target */
  height: 2.75rem;
  color: var(--ivory);
  transition: color 0.3s ease;
}
.site-header.is-solid .navburger { color: var(--foreground); }
@media (min-width: 1280px) { .navburger { display: none; } }

/* --------------------------------------------------------------------------
   Dark-brand header: the scroll state changes the PANEL, not the text.

   The rules above were written when the page under the header was ivory, so
   scrolling had to flip the wordmark and links to dark ink to stay legible.
   Style Icon is a dark brand — the bar is dark glass over a dark page in both
   states — so those flips are now wrong and are reverted here for the default
   (dark) theme. They still apply under `html.light`, where the page really does
   go white and the ink text is correct again.
   -------------------------------------------------------------------------- */
html:not(.light) .site-header.is-solid .navlink { color: rgba(255, 255, 255, 0.72); }
html:not(.light) .site-header.is-solid .navlink:hover,
html:not(.light) .site-header.is-solid .navlink.is-active { color: var(--si-white); }
html:not(.light) .site-header.is-solid .navburger { color: var(--si-white); }
html:not(.light) .site-header.is-solid .brand-name { color: var(--si-white); }
html:not(.light) .site-header.is-solid .brand-sub  { color: rgba(255, 255, 255, 0.6); }

/* The wordmark is a white logo on a dark bar in BOTH states now, so the
   cross-fade to the dark-artwork variant — and the ink plate that kept a white
   logo legible on ivory glass — are both unnecessary. */
html:not(.light) .site-header.is-solid .brand-logo-dark  { opacity: 1; }
html:not(.light) .site-header.is-solid .brand-logo-light { opacity: 0; }
html:not(.light) .site-header.is-solid .brand.has-plate {
  background: none;
  padding: 0;
}

/* ---------- Mobile menu ----------
   A panel, not a dropdown: on a 320px phone an 11-item dropdown would run off
   the bottom of the screen, so it fills the viewport below the bar and scrolls
   internally. */
.mobmenu {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: 1.75rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 96%, transparent);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-luxe);
  /* Never taller than the space under the header; scroll inside if it is. */
  max-height: calc(100svh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobmenu.is-open { display: flex; }
@media (min-width: 1280px) { .mobmenu, .mobmenu.is-open { display: none; } }

.mobitem {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3rem;              /* >= 44px tap target */
  padding: 0.7rem 1rem;
  border-radius: 1rem;
  font-size: 15px;
  color: var(--foreground);
  transition: background 0.25s ease, padding-left 0.25s ease;
}
.mobitem-t { margin-right: auto; }
.mobitem-ic {
  display: grid;
  place-items: center;
  flex: 0 0 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  color: var(--si-gold);
  border: 1px solid var(--border);
  transition: background 0.35s ease, color 0.35s ease;
}
.mobitem:hover, .mobitem.is-active { background: var(--muted); padding-left: 1.35rem; }
.mobitem.is-active { color: var(--gold); }
.mobitem.is-active .mobitem-ic,
.mobitem:hover .mobitem-ic {
  background: linear-gradient(150deg, var(--si-gold), var(--si-gold-hover));
  color: var(--si-black);
  border-color: var(--si-gold);
}
.mobcta {
  display: grid;
  place-items: center;
  min-height: 3rem;
  margin-top: 0.5rem;
  padding: 0.9rem;
  border-radius: 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.mobcontact {
  display: grid;
  gap: 0.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.mobcontact a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font-size: 13px;
  color: var(--muted-foreground);
}
.mobcontact svg { color: var(--gold); }

/* The wide wordmark also drives the loader mark. */
#loader .loader-mark.is-wide { width: auto; height: 54px; max-width: 260px; }

@media (prefers-reduced-motion: reduce) {
  .topbar-intl svg { animation: none; }
  .navlink::after, .mega, .brand-logo, .navcta-fill { transition: none; }
}

/* ==========================================================================
   FOOTER CTA (item 12) + floating actions
   ========================================================================== */

.footer-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  padding: 7rem 1.5rem;
  text-align: center;
}
.footer-cta-bg { position: absolute; inset: -20% 0; opacity: 0.55; }
.footer-cta-in { position: relative; max-width: 46rem; margin: 0 auto; }

.footer-cta-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--gold);
}
.footer-cta-h {
  margin-top: 1.5rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.03;
  color: var(--ivory);
}
.footer-cta-sub {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--ivory) 62%, transparent);
}
.footer-cta-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.fcta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.fcta:hover { transform: translateY(-2px); }
.fcta-gold { background: var(--gold); color: var(--ink); }
.fcta-gold:hover { background: var(--gold-soft); }
.fcta-ghost {
  border: 1px solid color-mix(in oklab, var(--ivory) 28%, transparent);
  color: var(--ivory);
  backdrop-filter: blur(10px);
}
.fcta-ghost:hover { background: color-mix(in oklab, var(--ivory) 12%, transparent); }
.footer-cta-mail {
  margin-top: 1.75rem;
  font-size: 13px;
  color: color-mix(in oklab, var(--ivory) 50%, transparent);
}
.footer-cta-mail a { color: var(--gold); }
.footer-cta-mail a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 85%, transparent);
  backdrop-filter: blur(12px);
  color: var(--foreground);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------------------------
   FLOATING ACTION STACK — one column, bottom-right, no overlaps.

   Four things want this corner: WhatsApp, Call, the concierge chat launcher and
   its panel. They were previously positioned independently and collided at every
   breakpoint. They now share one step so the stack is derived, not guessed:

       button height (3.5rem) + gap (0.75rem) = 4.25rem per slot

   slot 0  WhatsApp        1.5rem
   slot 1  Call            5.75rem
   slot 2  Chat launcher   10rem
   panel   Chat window     14.25rem
   --------------------------------------------------------------------------- */
:root {
  --fab-base: 1.5rem;   /* bottom inset of the first button */
  --fab-step: 4.25rem;  /* button + gap */
  --fab-lift: 0rem;     /* raised when the sticky booking bar is present */
}

.fab       { bottom: calc(var(--fab-base) + var(--fab-lift)); }
.fab-call  { bottom: calc(var(--fab-base) + var(--fab-step) + var(--fab-lift)); }
#si-chat-toggle { bottom: calc(var(--fab-base) + (var(--fab-step) * 2) + var(--fab-lift)); }
#si-chat-panel  { bottom: calc(var(--fab-base) + (var(--fab-step) * 3) + var(--fab-lift)); }

.fab-call {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--card);
  color: var(--gold);
  border: 1px solid var(--border);
}
.fab-call::after { display: none; }   /* only the WhatsApp button pulses */

/* Back-to-top sits beside the stack, not in it. */
.to-top { right: 5.5rem; bottom: calc(var(--fab-base) + var(--fab-lift)); }

/* The sticky booking bar (package pages, < lg) covers the corner — lift the
   whole stack by one bar-height instead of nudging each button separately. */
@media (max-width: 1023px) {
  body:has(.book-bar) { --fab-lift: 4.5rem; }
}

/* The floating stack sits at z-70+, above the header — so an open mobile menu
   would have three buttons floating on top of it. Stand them down while it is. */
body:has(#mobile-menu.is-open) .fab,
body:has(#mobile-menu.is-open) .fab-call,
body:has(#mobile-menu.is-open) .to-top,
body:has(#mobile-menu.is-open) #si-chat-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}

/* ==========================================================================
   STATISTICS STRIP (item 6) · FOUNDER (item 7) · OUR STORY
   ========================================================================== */

.stats-strip {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--ivory);
  padding: 6rem 0;
}
.stats-bg { position: absolute; inset: 0; opacity: 0.5; }

/*
 * Flex, not grid. The number of statistics is whatever the client has filled in
 * (1 to 5) — a fixed 2-column grid stranded a lone "13+ Years" in the left-hand
 * column with an empty cell beside it. Flex + centre means any count sits
 * centred and balanced, which is the only thing a counter row has to do.
 */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
}
.stat-cell { flex: 0 1 9rem; text-align: center; }
.stat-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  color: var(--gold);
  border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
}
.stat-n {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1;
  color: var(--ivory);
  /*
   * NOT tabular-nums. Playfair's "1" is a narrow glyph; forcing every digit to
   * an equal advance opens a hole beside it and "13+" reads as "I 3+".
   * Proportional lining figures set the numerals as the type designer drew them.
   * (The countdown keeps tabular-nums — there the digits change every second and
   * a fixed advance is what stops them jittering.)
   */
  font-variant-numeric: lining-nums proportional-nums;
}
.stat-l {
  margin-top: 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: color-mix(in oklab, var(--ivory) 55%, transparent);
}

/* ---------- Founder ---------- */
.founder-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2rem;
  background: var(--card);
  box-shadow: var(--shadow-luxe);
}
@media (min-width: 900px) { .founder-card { grid-template-columns: 5fr 7fr; } }
.founder-media { position: relative; min-height: 22rem; }
.founder-media img { width: 100%; height: 100%; object-fit: cover; }
.founder-body { padding: 2.75rem; display: flex; flex-direction: column; }
@media (max-width: 640px) { .founder-body { padding: 1.75rem; } }

.founder-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.founder-quote {
  margin-top: 1.75rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.4;
  color: var(--foreground);
}
.founder-sign {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.founder-signature { height: 3rem; width: auto; opacity: 0.85; }
html.dark .founder-signature { filter: invert(1) brightness(1.6); }
.founder-name { font-family: "Playfair Display", serif; font-size: 1.4rem; color: var(--foreground); }
.founder-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.founder-social {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.founder-social:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.founder-since {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--muted-foreground);
}
.founder-since svg { color: var(--gold); }

/* ---------- Our Story ---------- */
.story-badge {
  padding: 2.5rem;
  border-radius: 1.75rem;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  background: linear-gradient(140deg,
    color-mix(in oklab, var(--gold) 12%, transparent),
    color-mix(in oklab, var(--gold) 3%, transparent));
  text-align: center;
}
.story-badge-n {
  font-family: "Playfair Display", serif;
  font-size: clamp(4rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--foreground);
  font-variant-numeric: lining-nums proportional-nums;   /* see .stat-n */
}
.story-badge-l {
  margin-top: 0.75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.story-badge-s { margin-top: 1.25rem; font-size: 13px; color: var(--muted-foreground); }

.mv-card {
  padding: 2.25rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.mv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-luxe); }
.mv-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.mv-t { margin-top: 1.25rem; font-family: "Playfair Display", serif; font-size: 1.75rem; }
.mv-b { margin-top: 0.75rem; line-height: 1.7; color: var(--muted-foreground); }

.story-timeline { position: relative; padding-left: 2.5rem; }
.story-timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.story-step { position: relative; padding-bottom: 3rem; list-style: none; }
.story-step:last-child { padding-bottom: 0; }
.story-dot {
  position: absolute;
  left: -2.5rem;
  top: 0.45rem;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--background);
}
.story-dot::after {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--gold);
}
.story-year {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.story-title { margin-top: 0.4rem; font-family: "Playfair Display", serif; font-size: 1.9rem; }
.story-desc { margin-top: 0.5rem; line-height: 1.7; color: var(--muted-foreground); }

/* ==========================================================================
   TRAVEL PARTNERS (item 9)
   ========================================================================== */

.logo-tile {
  display: grid;
  place-items: center;
  padding: 1.25rem;
  height: 5.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.logo-tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.logo-tile img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* Partner logos arrive in a dozen different colourways; desaturating them
     until hover keeps the wall calm without altering anyone's brand. */
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.logo-tile:hover img { filter: none; opacity: 1; }
html.dark .logo-tile img { filter: grayscale(1) invert(1) brightness(1.7); }
html.dark .logo-tile:hover img { filter: invert(1) brightness(1.7); }

.partner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.75rem;
  background: var(--card);
}
.partner-card:hover { box-shadow: var(--shadow-luxe); }
.partner-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.partner-media img { width: 100%; height: 100%; object-fit: cover; }
.partner-noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: color-mix(in oklab, var(--gold) 55%, transparent);
  background: linear-gradient(140deg, var(--muted), var(--card));
}
.partner-type {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ivory);
  background: color-mix(in oklab, var(--ink) 62%, transparent);
  backdrop-filter: blur(10px);
}
.partner-logo {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.4rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 8px 20px -8px oklch(0.15 0.03 260 / 0.4);
}
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.partner-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.partner-name { font-family: "Playfair Display", serif; font-size: 1.6rem; line-height: 1.2; }
.partner-stars { display: inline-flex; gap: 1px; color: var(--gold); flex: 0 0 auto; }
.partner-loc {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  color: var(--muted-foreground);
}
.partner-loc svg { color: var(--gold); }
.partner-desc {
  margin-top: 0.9rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.partner-amenities {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.partner-amenities li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted-foreground);
  list-style: none;
}
.partner-amenities svg { color: var(--gold); }
.partner-foot {
  margin-top: auto;
  padding-top: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
  transition: gap 0.3s ease;
}
.partner-cta:hover { gap: 0.7rem; }
.partner-link {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.75rem;   /* 44px */
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.partner-link:hover { color: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   CUSTOMER REVIEWS (item 11)
   ========================================================================== */

.review-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.review-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* 44px */
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.review-chip:hover { color: var(--foreground); border-color: var(--gold); }
.review-chip.is-on {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.review-grid {
  columns: 1;
  column-gap: 1.5rem;
}
@media (min-width: 720px)  { .review-grid { columns: 2; } }
@media (min-width: 1100px) { .review-grid { columns: 3; } }

.review-card {
  /* A masonry column must not slice a card in half. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin-bottom: 1.5rem;
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--card);
}
.review-card[hidden] { display: none; }
.review-card:hover { box-shadow: var(--shadow-luxe); }

.review-top { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar, .review-initial {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  object-fit: cover;
}
.review-initial {
  display: grid;
  place-items: center;
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 14%, transparent);
}
.review-author { font-size: 14px; font-weight: 600; color: var(--foreground); }
.review-meta {
  margin-top: 0.15rem;
  display: flex;
  gap: 0.35rem;
  font-size: 11.5px;
  color: var(--muted-foreground);
}
.review-source {
  margin-left: auto;
  display: grid;
  place-items: center;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-foreground);
}
.review-stars { margin-top: 1rem; display: flex; gap: 2px; }
.review-quote {
  margin-top: 0.9rem;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--foreground);
}
.review-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.review-pkg, .review-verify {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 11.5px;
  color: var(--muted-foreground);
}
.review-pkg svg { color: var(--gold); }
.review-verify { margin-left: auto; color: var(--gold); }
.review-verify:hover { text-decoration: underline; text-underline-offset: 3px; }

.review-video {
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
}
.review-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ink);
}
.review-video figcaption { padding: 1rem 1.25rem; }
.review-video-name { font-size: 14px; font-weight: 600; color: var(--foreground); }
.review-video-loc { margin-top: 0.15rem; font-size: 12px; color: var(--muted-foreground); }

/* ==========================================================================
   WHY CHOOSE US (item 4)
   ========================================================================== */

.why-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 1.75rem;
  background: var(--card);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.why-card:hover { border-color: color-mix(in oklab, var(--gold) 45%, transparent); }
.why-glow {
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--gold) 22%, transparent);
  filter: blur(48px);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.why-card:hover .why-glow { opacity: 1; }

.why-ic {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.why-card:hover .why-ic {
  background: var(--gold);
  color: var(--ink);
  transform: rotate(-6deg) scale(1.06);
}
.why-t {
  margin-top: 1.5rem;
  font-family: "Playfair Display", serif;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--foreground);
}
.why-d {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.why-stat {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.why-stat span {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: lining-nums proportional-nums;   /* see .stat-n */
}
.why-stat small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--muted-foreground);
}
/* The index number is decoration, so it sits behind the content and stays out
   of the accessibility tree. */
.why-index {
  position: absolute;
  right: 1.5rem;
  top: 1.25rem;
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  line-height: 1;
  color: color-mix(in oklab, var(--foreground) 6%, transparent);
  pointer-events: none;
  transition: color 0.4s ease;
}
.why-card:hover .why-index { color: color-mix(in oklab, var(--gold) 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .mv-card, .logo-tile, .logo-tile img, .partner-cta, .founder-social,
  .why-card, .why-ic, .why-glow { transition: none; }
}

/* ==========================================================================
   FOREX — money desk
   The converter is a GET form that PHP can answer alone; main.js upgrades it
   to live conversion. So every control here has to look deliberate in both
   states — nothing is styled as though script is guaranteed.
   ========================================================================== */

.fx-field { min-width: 0; }   /* lets the amount shrink instead of pushing the grid wide */

.fx-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted-foreground);
}

.fx-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.35s ease;
}
.fx-amount-row:focus-within { border-color: var(--gold); }
.fx-amount-row.is-out { border-bottom-color: color-mix(in oklab, var(--gold) 45%, transparent); }

.fx-sym {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted-foreground);
}
.fx-sym.is-gold { color: var(--gold); }

/* The input and the output must share a type ramp — if they disagree by even a
   step the two halves stop reading as the same transaction. */
.fx-amount, .fx-out {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  min-width: 0;
}
.fx-amount {
  flex: 1;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--foreground);
  outline: none;
  padding: 0;
}
.fx-out {
  flex: 1;
  display: block;
  color: var(--gold);
  /* Digits change width as they tween; without this the figure jitters. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- Currency selects ----------
   Native <select>, deliberately: it works with no JS, is keyboard- and
   screen-reader-correct for free, and opens the OS picker on a phone. Only the
   chrome is restyled; the control itself is untouched. */
.fx-select-wrap { position: relative; margin-top: 1rem; }
.fx-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 2.75rem;   /* 44px */
  padding: 0 2.5rem 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.fx-select:hover  { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.fx-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fx-select-caret {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;   /* the caret must not eat the click meant for the select */
}

/* ---------- Swap ---------- */
.fx-swap {
  display: grid;
  place-items: center;
  width: 2.75rem;    /* 44px */
  height: 2.75rem;
  margin: 0 auto 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--gold);
  background: var(--card);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease, background 0.3s ease;
}
.fx-swap:hover {
  border-color: var(--gold);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
/* Rotates a half-turn per press, so the arrow always ends where it started but
   the direction change is legible. main.js owns the class. */
.fx-swap.is-spun { transform: rotate(180deg); }
/* On phones the grid stacks, so the arrow should point down the column, not
   across a row that no longer exists. */
@media (max-width: 767px) {
  .fx-swap { transform: rotate(90deg); }
  .fx-swap.is-spun { transform: rotate(270deg); }
}

/* ---------- Rate line ---------- */
.fx-rate-line {
  font-size: 13px;
  color: var(--muted-foreground);
}
.fx-rate-line strong { color: var(--foreground); font-weight: 600; }
.fx-rate-inverse { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
@media (max-width: 479px) {
  /* Both directions is one fact too many on a narrow phone. */
  .fx-rate-inverse { display: none; }
}

.fx-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;   /* 44px */
  padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.fx-submit:hover { transform: scale(1.03); }

/* ---------- Rate board ---------- */
.fx-card {
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 1.75rem;
  background: var(--card);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.fx-card:hover {
  border-color: color-mix(in oklab, var(--gold) 40%, transparent);
  box-shadow: var(--shadow-luxe);
}
.fx-card-flag { font-size: 1.75rem; line-height: 1; }
.fx-card-sym {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.5rem;
  color: color-mix(in oklab, var(--gold) 55%, transparent);
  transition: color 0.4s ease;
}
.fx-card:hover .fx-card-sym { color: var(--gold); }
.fx-card-rate {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .fx-swap, .fx-card, .fx-card-sym, .fx-submit, .fx-amount-row { transition: none; }
}

/* ==========================================================================
   RESPONSIVE LAYER — 320px phones to 4K
   Mobile-first: the rules below are the small-screen defaults, and each
   media query only ADDS room as the viewport earns it.

   Every fix here was found by measuring the real page in Chrome at each
   breakpoint (scrollWidth vs viewport, element boxes, tap-target sizes) —
   not by eyeballing. body{overflow-x:hidden} stays only as a last-resort
   safety net; nothing below relies on it to hide a broken box.
   ========================================================================== */

/* ---------- Overflow safety --------------------------------------------- */
/* Media and embeds are the usual culprits for a page that scrolls sideways. */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}
video, iframe { max-height: 100%; }
/* Long unbroken strings (URLs, emails, package slugs) must not push the page
   wider than the phone. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, p, li, blockquote, dd, dt, summary { min-width: 0; }
/* A grid/flex child defaults to min-width:auto and refuses to shrink below its
   content — the classic cause of an un-shrinkable card blowing out a row. */
.grid > *, .flex > * { min-width: 0; }

/* ---------- Fluid typography -------------------------------------------- */
/* One scale, viewport-interpolated, so nothing is cropped at 320px and nothing
   looks stranded at 4K. Tailwind's fixed text-* sizes on the hero/headings are
   overridden here where they were set in px-locked steps. */
.font-display { text-wrap: balance; }

h1, .h1 { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 5rem); line-height: 1.05; }
h2, .h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.1; }
h3, .h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); line-height: 1.2; }

/* Section headings in the new sections. */
.footer-cta-h { font-size: clamp(2rem, 1.25rem + 3.4vw, 4.5rem); }
.stat-n       { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.story-badge-n{ font-size: clamp(3rem, 2rem + 6vw, 6.5rem); }
.founder-quote{ font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); }
.why-t        { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem); }
.date-v       { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); }
.cd-unit span { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }

/* ---------- Small phones (320-400px) ------------------------------------ */
@media (max-width: 400px) {
  /* The 8pt gutter is too generous when the screen is 320px wide. */
  .mx-auto.max-w-8xl, .mx-auto.max-w-7xl { padding-left: 1rem; padding-right: 1rem; }

  .topbar-in { padding-left: 1rem; padding-right: 1rem; }
  .navwrap   { padding: 0.75rem 0; }
  .mobmenu   { padding: 0.75rem; border-radius: 1.25rem; }

  /* Four countdown cells will not fit on a 320px row — go two-up. */
  .countdown-grid { grid-template-columns: repeat(2, 1fr); }
  .countdown { padding: 1.15rem 1rem; }

  .date-panel  { padding: 1.15rem; }
  .footer-cta  { padding: 4rem 1rem; }
  .founder-body{ padding: 1.35rem; }
  .why-card    { padding: 1.5rem; }
  .mv-card     { padding: 1.5rem; }
  .cd-unit     { padding: 0.55rem 0.25rem; }

  /* Two package-card date cells side by side get ~9 chars each at 320px. */
  .card-dates { grid-template-columns: 1fr; gap: 0.6rem; }

  .review-card, .partner-body { padding: 1.25rem; }
  .story-timeline { padding-left: 1.9rem; }
  .story-dot { left: -1.9rem; }
}

/* ---------- Phones (up to 640px) ---------------------------------------- */
@media (max-width: 640px) {
  /* Stat counters: 2-up rather than a squeezed 4-up row. */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stats-strip { padding: 4rem 0; }

  /* CTA buttons stack full-width and stay tappable. */
  .footer-cta-actions { flex-direction: column; align-items: stretch; }
  .fcta { width: 100%; justify-content: center; min-height: 3rem; }

  /* Hero CTA pair: stack instead of wrapping awkwardly. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions > a { justify-content: center; width: 100%; }

  /* Sticky booking sidebar is not sticky on a phone — it is just a card. */
  .review-filters { width: 100%; }

  /* The custom cursor is meaningless without a mouse; it also renders a stray
     dot in the corner on touch devices. */
  .cursor-ring, .cursor-dot { display: none; }
}

/* ---------- Forms ------------------------------------------------------- */
/* iOS zooms the page when a focused input's font-size is under 16px. Setting
   16px on mobile is the fix — it is not a style choice. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }
  input, select, textarea, button { max-width: 100%; }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="number"], input[type="password"],
  select, textarea { width: 100%; min-height: 2.75rem; }
  button, [type="submit"] { min-height: 2.75rem; }

  /* A 16px checkbox is a 16px target. Grow the control and let its label carry
     the rest of the hit area. */
  input[type="checkbox"], input[type="radio"] {
    width: 1.35rem;
    height: 1.35rem;
    min-height: 0;          /* the rule above would stretch it into an oval */
    accent-color: var(--gold);
  }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
  }

  /* Footer / menu link lists: give stacked links a real touch row. Inline links
     inside a sentence are deliberately left alone — WCAG 2.5.8 exempts them,
     and padding them would wreck the prose line height. */
  footer li > a,
  .mobcontact a { display: flex; align-items: center; min-height: 2.75rem; }

  /* Concierge chat controls sat 1-17px under the minimum. */
  #si-chat-close { min-width: 2.75rem; min-height: 2.75rem; }
  #si-chat-form input { min-height: 2.75rem; }
  #si-chat-form button { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; }
  #si-chat-quick button { min-height: 2.75rem; }
}

/* ---------- Tables ------------------------------------------------------ */
/* A wide table must scroll inside its own box, never widen the page. */
table { width: 100%; }
.table-wrap, .overflow-x-auto { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Touch: no hover-only affordances ---------------------------- */
/* On touch there is no hover, so anything revealed only on :hover is
   unreachable. Show it outright. */
@media (hover: none) {
  .dest-note { max-height: none; opacity: 1; }
  .why-glow  { opacity: 0.5; }
  .logo-tile img { filter: none; opacity: 1; }
  html.dark .logo-tile img { filter: invert(1) brightness(1.7); }
  /* Mega menus open on hover — useless on touch, and they can trap the first tap.
     The hamburger menu carries the same links below 1280px anyway. */
  .mega { display: none; }
}

/* ---------- Header bar gets a wider container than the body copy ---------
   Body text at 88rem is a readable measure; a navigation bar is not prose and
   has no reason to be held to it. The brand + 11 links + actions need ~1400px,
   which does not fit inside 88rem (1360px of inner width). Letting the bar run
   wider is what keeps the nav on one line without dropping links.
   Specificity (3 classes) deliberately beats the .mx-auto.max-w-8xl rules below. */
@media (min-width: 1280px) {
  .site-header .navwrap > .mx-auto,
  .site-header .topbar-in { max-width: 100rem; }
}

/* ---------- Large desktops / TV (>= 1920px) ----------------------------- */
@media (min-width: 1920px) {
  /* Stop the 88rem container stranding content in the middle of a 4K panel. */
  .mx-auto.max-w-8xl { max-width: 96rem; }
}
@media (min-width: 2560px) {
  .mx-auto.max-w-8xl { max-width: 110rem; }
  html { font-size: 18px; }   /* rem-based spacing scales with it */
}
@media (min-width: 3840px) {
  .mx-auto.max-w-8xl { max-width: 130rem; }
  html { font-size: 20px; }
}

/* ---------- Motion / low-power ------------------------------------------ */
/* Blur and large blurred blobs are the most expensive things on the page.
   Cheapen them where the GPU is likely to be a phone's. */
@media (max-width: 640px) {
  .blob { filter: blur(40px); }
  .why-glow { filter: blur(32px); }
  .navbar, .mobmenu, .book-bar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* ==========================================================================
   PHASE 3 — MOTION LAYER
   ========================================================================== */

/* ---------- Text reveal -------------------------------------------------- */
/* .tr-ready is added by JS only once the split has succeeded. Without that
   guard, a JS failure would leave every heading clipped to nothing — the
   content must survive the animation not running. */
.tr-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.tr-i { display: inline-block; will-change: transform; }
.tr-ready .tr-w { padding-bottom: 0.08em; margin-bottom: -0.08em; } /* room for descenders */

/* ---------- Image reveal ------------------------------------------------- */
[data-reveal-img] { overflow: hidden; }
[data-reveal-img] img { will-change: transform; }

/* ---------- Page transitions --------------------------------------------- */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--si-black);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.42s ease, visibility 0.42s;
}
body.page-out #page-curtain { opacity: 1; visibility: visible; }
/* The gold hairline sweeps across as the curtain closes — the brand's own
   accent doing the work a spinner would otherwise do. */
#page-curtain::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--si-gold), transparent);
}
body.page-out #page-curtain::after { transform: scaleX(1); transition: transform 0.42s ease; }

/* ---------- Gold particles ----------------------------------------------- */
#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   LUXE CARD — the premium card treatment, as one reusable component.

   Gold disc icon · corner brackets · a diagonal shine that sweeps on hover ·
   gold hairline · lift. Written once here rather than pasted into services,
   features and packages, so the treatment stays identical everywhere and is
   changed in one place.

   Usage:  <article class="luxe-card">
             <span class="luxe-ic">…icon…</span>
             <h3 class="luxe-t">…</h3>
             <p class="luxe-d">…</p>
           </article>
   ========================================================================== */

.luxe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02) 45%,
    rgba(255, 255, 255, 0) 100%), var(--si-navy);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease, box-shadow 0.45s ease;
}
.luxe-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--si-gold) 55%, transparent);
  box-shadow: var(--shadow-luxe), var(--shadow-gold);
}
html.light .luxe-card { background: #fff; }

/* Diagonal shine. -1 z-index keeps it under the content but inside the card's
   own stacking context (isolation:isolate), so it can never wash over text. */
.luxe-card::before {
  content: "";
  position: absolute;
  inset: -60% -10%;
  z-index: -1;
  background: linear-gradient(105deg, transparent 42%,
    color-mix(in oklab, var(--si-gold) 22%, transparent) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.luxe-card:hover::before { transform: translateX(120%); }

/* Corner brackets — drawn with one element per corner via border edges. */
.luxe-card::after {
  content: "";
  position: absolute;
  inset: 0.85rem;
  z-index: -1;
  pointer-events: none;
  border: 1px solid transparent;
  border-image: none;
  /* Only the four corners show: a conic mask would be heavier, so the bracket
     is faked with two gradients that paint short runs at each corner. */
  background:
    linear-gradient(to right, var(--si-gold) 0 14px, transparent 14px) 0 0 / 100% 1px no-repeat,
    linear-gradient(to left,  var(--si-gold) 0 14px, transparent 14px) 100% 0 / 100% 1px no-repeat,
    linear-gradient(to right, var(--si-gold) 0 14px, transparent 14px) 0 100% / 100% 1px no-repeat,
    linear-gradient(to left,  var(--si-gold) 0 14px, transparent 14px) 100% 100% / 100% 1px no-repeat,
    linear-gradient(to bottom, var(--si-gold) 0 14px, transparent 14px) 0 0 / 1px 100% no-repeat,
    linear-gradient(to top,    var(--si-gold) 0 14px, transparent 14px) 0 100% / 1px 100% no-repeat,
    linear-gradient(to bottom, var(--si-gold) 0 14px, transparent 14px) 100% 0 / 1px 100% no-repeat,
    linear-gradient(to top,    var(--si-gold) 0 14px, transparent 14px) 100% 100% / 1px 100% no-repeat;
  opacity: 0.35;
  transition: opacity 0.45s ease, inset 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.luxe-card:hover::after { opacity: 1; inset: 0.6rem; }

/* Gold disc icon */
.luxe-ic {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  border-radius: 999px;
  color: var(--si-black);
  background: linear-gradient(150deg, var(--si-gold-hover), var(--si-gold) 60%, #b9932c);
  box-shadow: 0 10px 30px -10px var(--glow);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.luxe-card:hover .luxe-ic {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 40px -10px var(--glow);
}
/* The dotted ring around the disc, per the reference. */
.luxe-ic-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
}
.luxe-ic-wrap::before {
  content: "";
  position: absolute;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in oklab, var(--si-gold) 40%, transparent);
  transition: transform 0.6s ease, opacity 0.45s ease;
}
.luxe-card:hover .luxe-ic-wrap::before { transform: rotate(90deg) scale(1.04); }

.luxe-t {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  line-height: 1.25;
  text-align: center;
  color: var(--si-white);
}
html.light .luxe-t { color: var(--si-black); }
.luxe-d {
  margin-top: 0.75rem;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .luxe-card, .luxe-card::before, .luxe-card::after,
  .luxe-ic, .luxe-ic-wrap::before { transition: none; }
  .luxe-card:hover::before { transform: translateX(-120%); }
}

/* ==========================================================================
   BUTTON SYSTEM

   There was no button component: every CTA was a hand-written string of ten
   Tailwind utilities, so no two quite matched and changing "the buttons" meant
   editing every page. Three variants, one shape, one motion.

   Every variant is >= 44px tall and carries :focus-visible, so a keyboard or
   touch user is never worse off than a mouse user.
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;              /* 44px */
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* Gold — the primary action. One per view. */
.btn-gold {
  background: linear-gradient(150deg, var(--si-gold-hover), var(--si-gold));
  color: var(--si-black);
  font-weight: 600;
}
.btn-gold:hover { box-shadow: var(--shadow-gold); }

/* Ghost — secondary, sits on photography or glass. */
.btn-ghost {
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--si-white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--si-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* Solid — on a light/glass ground where gold would vibrate. */
.btn-solid {
  background: var(--si-white);
  color: var(--si-black);
}
.btn-solid:hover { box-shadow: var(--shadow-luxe); }

.btn-lg { padding: 1.05rem 2.25rem; font-size: 14.5px; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 12.5px; min-height: 2.75rem; }
/* Full-width on phones: a centred pill in a column of stacked CTAs looks
   accidental, and the wider target is easier to hit. */
@media (max-width: 640px) { .btn-block-sm { width: 100%; } }

.btn:focus-visible {
  outline: 2px solid var(--si-gold);
  outline-offset: 3px;
}

/* Arrow nudge — only when the button actually contains one. */
.btn .btn-arrow { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .btn-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .btn-arrow { transition: none; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   SPACING SYSTEM — one scale for the whole site.

   The site had NINE different section paddings in play (py-24 x18, py-32 x8,
   py-20 x4, py-16 x3, py-28 x2, plus py-48/py-14/py-10/py-6 one-offs). That is
   not a rhythm, it is drift — and it is the direct cause of the "large section
   gaps / uneven spacing" complaint.

   These are fluid, not fixed: py-32 was 8rem at EVERY width, so a 320px phone
   got 128px of dead air above and below every block. clamp() lets the same
   token breathe on desktop and tighten on a phone, which is why the mobile
   "empty space" problem disappears without a single extra media query.
   ========================================================================== */
:root {
  --sec-xs: clamp(2rem, 4vw, 3.5rem);
  --sec-sm: clamp(3rem, 6vw, 5rem);
  --sec:    clamp(4rem, 8vw, 7rem);     /* the default rhythm */
  --sec-lg: clamp(5rem, 10vw, 9rem);    /* hero-adjacent / statement sections */
  --gutter: clamp(1rem, 4vw, 1.5rem);
}

.sec-xs { padding-block: var(--sec-xs); }
.sec-sm { padding-block: var(--sec-sm); }
.sec    { padding-block: var(--sec); }
.sec-lg { padding-block: var(--sec-lg); }

/* Two sections that both carry the rhythm would otherwise stack their padding
   into a double gap at the seam. This halves it where they meet, so the space
   between blocks reads the same as the space inside one. */
.sec + .sec,
.sec + .sec-sm,
.sec-sm + .sec { padding-block-start: calc(var(--sec) * 0.5); }

/* ==========================================================================
   SECTION TRANSITIONS

   The site stacked hard-edged rectangles. These make one section resolve into
   the next. Built as utility classes on the SECTION rather than as extra divider
   markup between sections — a page shouldn't need a decorative <div> between
   every block, and pseudo-elements cannot be left behind when markup moves.

   Pick one per boundary; they are meant to alternate, not to all fire at once.
   ========================================================================== */

/* Every section that carries a transition needs a stacking context and must clip
   its own decoration. */
[class*="sx-"] { position: relative; }

/* ---- sx-fade: the ground dissolves into the next section (default) ------- */
.sx-fade::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 10rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--background));
}

/* ---- sx-glow: a soft gold light pools at the seam ------------------------ */
.sx-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14rem;
  /* 100%, not 120%: at 320px a 120%-wide centred glow hangs 32px over each edge
     and scrolls the page sideways. It cannot be solved with overflow:hidden on
     the section either — the glow is deliberately positioned below the bottom
     edge, so clipping would erase it. Constraining the width keeps both. */
  width: min(70rem, 100%);
  height: 28rem;
  translate: -50% 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.04) 45%, transparent 70%);
  filter: blur(40px);
}

/* ---- sx-line: a gold hairline that fades out at both ends ---------------- */
.sx-line::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(212, 175, 55, 0.5) 30%, rgba(212, 175, 55, 0.5) 70%, transparent);
}

/* ---- sx-curve: the next section rises in on a curve ---------------------- */
/* An inline SVG in a mask, so it inherits --background and needs no image file
   and no extra request. */
.sx-curve::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;   /* -1px: kills the hairline gap sub-pixel rounding leaves */
  height: 5rem;
  pointer-events: none;
  background: var(--background);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 360 0 1080 0 1440 100 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C 360 0 1080 0 1440 100 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---- sx-slant: a shallow diagonal cut ----------------------------------- */
.sx-slant::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 4rem;
  pointer-events: none;
  background: var(--background);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ---- sx-top-*: the same shapes, entering a section from above ------------ */
.sx-top-fade::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8rem;
  pointer-events: none;
  background: linear-gradient(to top, transparent, var(--background));
}

/* ---- Section grounds — "never plain" ------------------------------------ */
/* A very low-amplitude radial wash. Two stops, no image, no request: enough to
   stop a full-bleed black panel reading as a void, quiet enough that it is felt
   rather than seen. */
.bg-lux {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.05), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(212, 175, 55, 0.03), transparent 60%),
    var(--background);
}
.bg-lux-alt {
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(212, 175, 55, 0.06), transparent 55%),
    linear-gradient(180deg, var(--background), var(--surface) 50%, var(--background));
}

@media (prefers-reduced-motion: reduce) {
  .sx-glow::after { filter: blur(30px); }
}

/* ---------- Focus visibility (a11y) -------------------------------------- */
/* :focus-visible, not :focus — a gold ring on every mouse click is noise, but
   a keyboard user must always be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--si-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.navlink:focus-visible, .mobitem:focus-visible { outline-offset: 1px; }

/* Skip link — the first tab stop on every page, past 8 nav links + actions. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 300;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0.75rem;
  background: var(--si-gold);
  color: var(--si-black);
  font-size: 13px;
  font-weight: 600;
  transition: top 0.25s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Reduced motion ----------------------------------------------- */
/* One authoritative switch-off. If someone has asked their OS to stop moving
   things, "tasteful" is not a defence — everything stops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tr-w { overflow: visible; }
  .tr-i { transform: none !important; opacity: 1 !important; }
  [data-reveal-img] { clip-path: none !important; }
  #particles, #page-curtain { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}